<x-app-layout>
    <x-slot name="css">
        <link rel="stylesheet" href="{{ asset('assets/css/components/custom-modal.css') }}">
        <style>
            .layout-top-spacing {
                min-height: calc(100vh - 230px) !important;
            }
        </style>
    </x-slot>
    <!-- Modal -->
    <div class="modal fade" id="filterModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modalDilogFilter" role="document">
            <div class="modal-content">
                <div class="modal-header border-remove-model">
                    <h3 class="modal-title fw-bold" id="exampleModalLabel">
                        <strong>{{ __('common.filter') }}</strong>
                    </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        {{-- <svg class="mt-2 model-close" width="25" height="25" viewBox="0 0 25 25" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path
                                d="M12.5002 22.9168C18.2531 22.9168 22.9168 18.2531 22.9168 12.5002C22.9168 6.7472 18.2531 2.0835 12.5002 2.0835C6.7472 2.0835 2.0835 6.7472 2.0835 12.5002C2.0835 18.2531 6.7472 22.9168 12.5002 22.9168Z"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M15.625 9.375L9.375 15.625" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M9.375 9.375L15.625 15.625" stroke-linecap="round" stroke-linejoin="round" />
                        </svg> --}}
                        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-x">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <form id="filter_form">
                    @csrf
                    <div class="modal-body py-0">
                        @foreach ($itemType as $key => $type)
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" name="{{ $type }}" class="custom-control-input"
                                    id="{{ $type }}" value="{{ encrypt($key) }}">
                                <label class="custom-control-label text-capitalize"
                                    for="{{ $type }}">{{ __('common.'.$type) }}</label>
                            </div>
                        @endforeach
                    </div>
                    <div class="modal-footer justify-content-start border-remove-model">
                        <a href="" id="filter-reset" class="btn btn-coffee-dark">{{ __('common.clear') }}</a>
                        <button id="filter-save" class="btn btn-coffee-light"
                            style="text-transform: capitalize !important;" data-dismiss="modal" aria-label="Close">{{ __('common.applyFilter') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="page-header row">
        <div class="page-title col-12 d-flex mt-4 pr-4">
            <h3 class="my-auto">{{ __('common.CafeMenu') }}</h3>
            <button class="d-flex ml-auto btn btn-coffee-dark py-2 px-3 mr-4" data-toggle="modal"
                data-target="#filterModel">
                <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-bar-chart" style="transform: rotate(270deg);">
                    <line x1="12" y1="20" x2="12" y2="10"></line>
                    <line x1="18" y1="20" x2="18" y2="4"></line>
                    <line x1="6" y1="20" x2="6" y2="16"></line>
                </svg>
                <span class="my-1">{{ __('common.filter') }}</span>
            </button>
            <a href="{{ $url }}" class="d-flex btn btn-coffee-medium py-2 px-3">
                <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-plus-circle">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="8" x2="12" y2="16"></line>
                    <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
                <span class="my-1">{{ __('common.addItem') }}</span>
            </a>
        </div>
    </div>

    <div class="row layout-top-spacing">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget-content widget-content-area br-6">
                <table id="cafe_menu" class="table dt-table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>{{ __('common.no.') }}</th>
                            <th>{{ __('common.image') }}</th>
                            <th>{{ __('common.itemName') }}</th>
                            <th>{{ __('common.category') }}</th>
                            <th>{{ __('common.price') }}</th>
                            {{-- <th>{{ __('common.description') }}</th> --}}
                            <th>{{ __('common.types') }}</th>
                            <th>{{ __('common.status') }}</th>
                            <th>{{ __('common.availability') }}</th>
                            <th class="no-content"></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <x-slot name="script">
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            const getData = "{{ $dataUrl }}";
            const tableElement = document.getElementById('cafe_menu');
        </script>
        <script src="{{ asset('assets/js/cafe/cafeMenu.js') }}"></script>
        <script src="{{ asset('assets/js/tableAction.js') }}"></script>
    </x-slot>
</x-app-layout>