@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Menus List')

@section('content')

    <div class="card">
        <div class="filter-area flex gap-3 flex-wrap mb-5 justify-between">
            <h2 class="text-nowrap">{{ __('translate.Menus') }}</h2>

            <div>
                <a href="{{ route('admin.menus.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i>
                    {{ __('translate.Create Menu') }}
                </a>
            </div>
        </div>

        <table-wrapper>
            @if ($menus->count() > 0)
                <table class="min-w-full" id="blog-category-table">
                    <thead>
                        <tr class="text-left">
                            <th>
                                {{ __('translate.Name') }}
                            </th>
                            <th>
                                {{ __('translate.Location') }}
                            </th>
                            <th>
                                {{ __('translate.Status') }}
                            </th>
                            <th>
                                {{ __('translate.Created') }}
                            </th>
                            <th>
                                {{ __('translate.Action') }}
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($menus as $index => $menu)
                            <tr>
                                <td>{{ $menu->name }}</td>
                                <td>
                                    <h4>
                                        @if ($menu->location)
                                            <span class="badge">{{ $menu->location }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ __('translate.None') }}</span>
                                        @endif
                                    </h4>
                                </td>
                                <td>
                                    @if ($menu->status == 1)
                                        <span class="badge bg-success text-white">{{ __('translate.Active') }}</span>
                                    @else
                                        <span class="badge bg-red-500 text-white">{{ __('translate.Inactive') }}</span>
                                    @endif
                                </td>
                                <td>
                                    {{ $menu->created_at->diffForHumans() }}
                                </td>
                                <td>
                                    <div class="flex gap-3">

                                        @include('backend::components.edit-button', [
                                            'id' => $menu->id,
                                            'route' => route('admin.menus.edit', $menu->id),
                                        ])

                                        @include('backend::components.delete-button', [
                                            'id' => $menu->id,
                                        ])
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="alert alert-info text-center">
                    {{ __('translate.No menus found') }}. <a
                        class="text-main font-semibold hover:underline"
                        href="{{ route('admin.menus.create') }}">{{ __('translate.Create your first menu') }}</a>.
                </div>
            @endif
        </table-wrapper>

    </div>
@endsection

@push('scripts')
    <script>
        (function($) {
            "use strict"

            $(document).ready(function() {

                // Delete functionality
                $(document).on('click', '.delete-btn', function() {

                    Swal.fire({
                        title: "Are you sure to delete?",
                        text: "You won't be able to revert this!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Yes, delete it!"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var id = $(this).data('id');
                            $.ajax({
                                url: `{{ route('admin.menus.destroy', ':id') }}`
                                    .replace(':id', id),
                                type: 'DELETE',
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    if (response.success) {
                                        toastr.success(response.message);
                                    } else {
                                        toastr.error(response.message);
                                    }
                                    table.draw();
                                },
                                error: function() {
                                    toastr.error("Server error.");
                                }
                            });
                        }
                    });
                });
            });

        })(jQuery);
    </script>
@endpush