@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        @include('admin.layouts.notifications')

        <!-- Page Heading & Search Area -->
        <div class="row mb-3">
            <h4 class="c-grey-900">{{ $title }} <a class="btn btn-primary" href="{{ route('ch-admin.menus.create') }}"><i class="ti-plus"></i></a></h4>
        </div>

        <!-- All Menu Table -->
        <div class="row">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <!-- Bulk Delete Button -->
                <div class="row mb-3">
                    <div>
                        <button class="btn btn-danger" id="delete-bulk-btn" type="button"><i class="ti-trash"></i> Delete</button>
                    </div>
                </div>

                <!-- Menu Table -->
                <div class="row">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all" class="form-check-input"></th>
                            <th>ID</th>
                            <th class="w-50">Name</th>
                            <th>Location</th>
                            <th>Menu Items</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($menus as $menu)
                            <tr>
                                <td><input type="checkbox" class="form-check-input select-menu" value="{{ $menu->id }}"></td>
                                <th scope="row">{{ $menu->id }}</th>
                                <td>{{ $menu->name }}</td>
                                <td>{{ theme_menu_locations()[$menu->location] ?? 'No Location' }}</td>
                                <td><a href="{{ route('ch-admin.menus.item.edit', $menu->id) }}" class="btn btn-sm btn-primary"><i class="fa fa-solid fa-pencil"></i> Edit</a></td>
                                <td>{{ $menu->created_at->diffForHumans() }}</td>
                                <td class="d-flex flex-row">
                                    <a href="{{ route('ch-admin.menus.edit', $menu->id) }}"
                                       class="btn btn-sm btn-primary me-1"><i class="fa fa-solid fa-pencil"></i></a>
                                    <form action="{{ route('ch-admin.menus.destroy', $menu->id) }}" method="POST" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this menu?')">
                                            <i class="ti-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr class="text-center">
                                <td colspan="7">No menu created yet.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{url('assets/custom/js/axios.min.js')}}"></script>
    <script>
        const selectAllCheckbox = document.getElementById('select-all');
        const menuCheckboxes = document.querySelectorAll('.select-menu');
        const deleteBulkBtn = document.getElementById('delete-bulk-btn');

        selectAllCheckbox.addEventListener('click', function () {
            const isChecked = this.checked;
            menuCheckboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
            });
            toggleDeleteButton();
        });

        menuCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('click', function () {
                selectAllCheckbox.checked = [...menuCheckboxes].every(checkbox => checkbox.checked);

                if (!this.checked) {
                    selectAllCheckbox.checked = false;
                }

                toggleDeleteButton();
            });
        });

        function toggleDeleteButton() {
            const isChecked = [...menuCheckboxes].some(checkbox => checkbox.checked);
            deleteBulkBtn.disabled = !isChecked;
        }

        function updateSelectAllCheckbox() {
            selectAllCheckbox.checked = [...menuCheckboxes].every(checkbox => checkbox.checked);
        }

        function getSelectedMenu() {
            const selectedMenu = [];
            document.querySelectorAll('.select-menu:checked').forEach(function (checkbox) {
                selectedMenu.push(checkbox.value);
            });
            return selectedMenu;
        }

        deleteBulkBtn.addEventListener('click', function () {
            const selectedMenu = getSelectedMenu();

            if (selectedMenu.length === 0) {
                alert('Please select at least one menu.');
                return;
            }

            if (!confirm('Are you sure you want to delete the selected menu?')) {
                return;
            }

            httpClient.delete('{{ route("ch-admin.menus.bulk.destroy") }}', {
                data: {
                    menu_ids: selectedMenu,
                }
            })
                .then((response) => {
                    if (response.data.success) {
                        window.location.href = '{{ route("ch-admin.menus.index") }}';
                    } else {
                        alert('Failed to delete menu.');
                    }
                })
                .catch((error) => {
                    console.error(error);
                    alert('An error occurred. Please try again.');
                });
        });

        toggleDeleteButton();
    </script>
@endpush