@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Service Menus</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/root/">Home</a></li>
                    <li class="breadcrumb-item active">Service Menus</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <!-- Filter Button -->
            <button class="btn btn-warning btn-sm mb-50 mb-sm-0" data-bs-target="#filter" data-bs-toggle="modal"><i data-feather="filter"></i>Filter</button> 
            <a class="btn btn-primary btn-sm" href="{{ route('root.menu.create') }}"><i data-feather="plus-circle"></i>Add New</a> 
        </div>
    </div>
@endpush


@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom">
                        <div class="head-label">
                            <h6 class="mb-0">Service Menu List</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <form>
                                    <div class="form-label-group me-2">
                                        <input type="text" name="search" placeholder="Search" class="form-control" value="{{ $request->search }}">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="overflow" style="overflow-y:hidden;">
                                <table class="table table-responsive">
                                        <thead>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>Alias</th>
                                            <th>Service</th>
                                            <th>Parent Menu</th> 
                                            <th>URL</th>
                                            <th>Type</th>
                                            <th>Icon</th>
                                            <th>Status</th>
                                            <th>Position</th>
                                            <th>Sequence</th>
                                            <th>Created By</th> 
                                            <th>Updated By</th> 
                                            <th>Created At</th> 
                                            <th>Updated At</th>
                                            <th>Action</th>
                                        </thead>
                                        <tbody>
                                            @forelse ($serviceMenus->whereNull('deleted_at') as $key => $menu)
                                                <tr>
                                                    <td>{{ $serviceMenus->firstItem() + $key }}</td>
                                                    <td>{{ $menu->name }}</td>
                                                    <td>{{ $menu->alias }}</td>
                                                    <td>{{ $menu->service->name ?? 'N/A' }}</td>
                                                    <td>{{ $menu->parentMenu->name ?? 'N/A' }}</td> 
                                                    <td>{{ $menu->url ?? 'N/A' }}</td>
                                                    <td>{{ $menu->type ?? 'N/A' }}</td>
                                                    <td>{{ $menu->icon ?? 'N/A' }}</td>
                                                    <td>
                                                        @if ($menu->status == 'active')
                                                            <span class="badge rounded-pill badge-light-success">
                                                                {{ ucfirst($menu->status) }}
                                                            </span>
                                                        @else
                                                            <span class="badge rounded-pill badge-light-danger">
                                                                {{ ucfirst($menu->status) }}
                                                            </span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $menu->position ?? 'N/A' }}</td>
                                                    <td>{{ $menu->sequence ?? 'N/A' }}</td>
                                                    <td>{{ $menu->creator->name ?? 'N/A' }}</td> 
                                                    <td>{{ $menu->updater->name ?? 'N/A' }}</td> 
                                                    <td>{{ $menu->created_at->format('Y-m-d H:i:s') }}</td> 
                                                    <td>{{ $menu->updated_at->format('Y-m-d H:i:s') }}</td> 
                                                    <td>
                                                        <div class="mb-1">
                                                            <a class="pe-1 dropdown-toggle hide-arrow text-primary" data-bs-toggle="dropdown">
                                                                <i data-feather="more-vertical" class="font-small-4"></i>
                                                            </a>
                                                            <div class="dropdown-menu dropdown-menu-end">
                                                                <a class="dropdown-item" href="{{ route('root.menu.edit', $menu->id) }}">
                                                                    <i data-feather="edit" class="font-4"></i><span>Edit</span>
                                                                </a>
                                                                <a class="dropdown-item" href="{{ route('root.menu.destroy', $menu->id) }}">
                                                                    <i data-feather="delete" class="font-4"></i><span>Delete</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="14" class="text-center">No active service menus found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12 d-flex justify-content-end">
                                {{ $serviceMenus->appends($request->except('page'))->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Filter Modal -->
    <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
        <div class="modal-dialog sidebar-sm">
            <form class="add-new-record modal-content pt-0" id="item-filter-form">
                <div class="modal-header mb-1">
                    <h5 class="modal-title">Apply Service Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body flex-grow-1">
                    <div class="mb-1">
                        <label class="form-label">Service </label>
                        <select id="filter-service-group" name="service_id" class="form-select">
                            <option value="">Select Service Group</option>
                            @foreach($services as $serviceGroup)
                                <option value="{{ $serviceGroup->id }}">{{ $serviceGroup->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-1">
                        <label class="form-label">Status</label>
                        <select id="filter-status" name="status" class="form-select">
                            <option value="">Select Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                            <option value="drop">Drop</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer justify-content-start">
                    <button type="button" class="btn btn-primary apply-filter">Apply</button>
                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
    <!--/ Column Search -->
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>
    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
    </script>

<script>
    $(document).ready(function() {
        $('.apply-filter').on('click', function() {
            const form = $('#item-filter-form');
            
            form.submit();
        });
    });

    $(window).on('load', function() {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
    });
</script>
@endpush