@extends('tenant.layouts.master')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.point_of_sale') => '#',
            __('breadcrumb.menus') => route('tenant.pos.menus.index'),
            __('breadcrumb.add')=> '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'pos.menus'])
@endsection

@section('content')
    <div class="position-relative">
        <x-tenant.shared.backward-component :direct-to=" __('breadcrumb.menus')" link="/pos/menus" />

        <form onsubmit="handleSubmit(event)" action="{{ route('tenant.pos.menus.store') }}" method="post" id="addMenuForm"
            class="form-bg-color p-4 rounded-form" enctype="multipart/form-data">
            @csrf

            <h5>@lang('pos/menus/create.add_new_menu')</h5>

            <div class="row my-2">
                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <label for="menu_id" class="rs">@lang('pos/menus/create.menu_number')</label>
                    <input type="text" id="menu_id" value="{{ $number }}" class="form-control" disabled required>
                </div>

                @if ($parent_menu)
                    <div class="col-12 col-md-6 col-lg-3 mb-3">
                        <label for="name" class="rs"> @lang('pos/menus/create.parent_name')</label>
                        <input type="text" class="form-control" value="{{ $parent_menu->name }}" disabled required>
                        <input type="hidden" class="form-control" name="parent_id"
                            value="{{ request()->input('parent_id') }}">
                    </div>
                @endif

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <label class="rs">@lang('pos/menus/create.new_menu_level')</label>
                    <input type="text" class="form-control" value="{{ $parent_menu ? $parent_menu->level + 1 : 1 }}"
                        disabled required>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <label for="name" class="rs"> @lang('pos/menus/create.menu_name')</label>
                    <input type="text" name="name" id="name" class="form-control" required>
                </div>

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <label for="menu_image"> @lang('pos/menus/create.menu_image')</label>
                    <input type="file" name="image" id="menu_image" class="form-control" accept="image/jpeg, image/jpg, image/png">

                    <div class="menu_img_preview"></div>
                </div>

                @if ($level == 1)
                    <div class="col-12 col-md-6 col-lg-3 mb-3 mt-2">
                        <label>@lang('pos/menus/create.show_menu_on_branches') :</label>

                        <div>
                            @foreach ($branches as $branch)
                                <div class="mt-2">
                                    <input type="checkbox" name="branches_ids[]" id="branch-menu-{{ $branch->id }}"
                                        class="custom-checkbox" value="{{ $branch->id }}" checked>
                                    <label for="branch-menu-{{ $branch->id }}"
                                        class="float-right mx-2">{{ $branch->name }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <div class="mt-3">
                <h5>@lang('pos/menus/create.link_menu_to_items')</h5>

                <div class="row">
                    <div class="col-12 col-md-6 col-lg-2 mb-3">
                        <label>@lang('pos/menus/create.families_level_1')</label>
                        <select id="level1_categories_ids" name="level1_categories_ids[]" class="categories-select" data-level="1" placeholder="اختر العائلات الرئيسية" multiple>
                            <option value="-1">@lang('general.all')</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-2 mb-3">
                        <label>@lang('pos/menus/create.families_level_2') </label>
                        <select id="level2_categories_ids" name="level2_categories_ids[]" class="categories-select" data-level="2" placeholder="اختر العائلات الفرعية من المستوى الثاني" multiple>
                            <option value="-1">@lang('general.all')</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-2 mb-3">
                        <label> @lang('pos/menus/create.families_level_3') </label>
                        <select id="level3_categories_ids" name="level3_categories_ids[]" class="categories-select" data-level="3"  placeholder="اختر العائلات من المستوى الثالث" multiple>
                            <option value="-1">@lang('general.all')</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-2 mb-3">
                        <label> @lang('pos/menus/create.families_level_4')</label>
                        <select id="level4_categories_ids" name="level4_categories_ids[]" class="categories-select" data-level="4" placeholder="اختر العائلات من المستوى الرابع" multiple>
                            <option value="-1">@lang('general.all')</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-6 col-lg-2 mb-3">
                        <label>  @lang('pos/menus/create.families_level_5')</label>
                        <select id="level5_categories_ids" name="level5_categories_ids[]" class="categories-select" data-level="5" placeholder="اختر العائلات من المستوى الخامس" multiple>
                            <option value="-1">@lang('general.all')</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 col-md-6 col-lg-6 mb-3 ">
                        <div class="d-flex justify-content-between align-items-center">
                            <label for="items_ids"> @lang('pos/menus/create.items')</label>
                            <button type="button" class="btn orange-btn p-1" onclick="selectAllItemsAndBarcodes()">
                                @lang('general.all')
                            </button>
                        </div>
                        <select id="items_ids" name="items_ids[]" class="items-select" placeholder="اختر من القائمة" multiple>
                            @foreach ($items as $item)
                                <option value="{{ $item->id }}">{{ $item->ar_name }}</option>
                            @endforeach

                        </select>
                    </div>
                    
                    <div class="col-12 col-md-6 col-lg-6 mb-3 mt-1">
                        <label for="barcodes_ids"> @lang('pos/menus/create.barcodes')</label>
                        <select id="barcodes_ids" name="barcodes_ids[]" class="barcodes-select " placeholder="اختر من القائمة" multiple>
                            @foreach ($barcodes as $barcode)
                                <option value="{{ $barcode->id }}">{{ $barcode->ar_name }}</option>
                            @endforeach

                        </select>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button class="btn orange-btn add-category-btn">@lang('general.save')</button>
            </div>
        </form>
    </div>
@endsection
@push('script')
    <script>
        const categories = @json($categories);
        const all_categories = @json($all_categories);
        const items = @json($items);
        const barcodes = @json($barcodes);
        function selectAllItemsAndBarcodes() {
            const itemsSelected = $('#items_ids')[0].selectize;
            itemsSelected.clear();

            const chunkSize = 10; 
            let i = 0;

            function addChunk() {
                const chunk = items.slice(i, i + chunkSize);
                chunk.forEach(item => {
                    itemsSelected.addItem(item.id);
                });
                i += chunkSize;
                if (i < items.length) {
                    setTimeout(addChunk, 0); 
                }
            }

            addChunk();
        }

        $(document).ready(function () {
    const barcodesSelectize = $('#barcodes_ids')[0].selectize;
    const itemsSelectize = $('#items_ids')[0].selectize;

    $('#items_ids').on('change', function () {
        const selectedItemIds = $(this).val() || [];
        barcodesSelectize.clear();

        const selectedBarcodes = new Set();
        const allBarcodesToAdd = [];
        selectedItemIds.forEach(itemId => {
            const itemBarcodes = barcodes.filter(b => b.item_id == itemId);
            itemBarcodes.forEach(b => {
                if (!selectedBarcodes.has(b.id)) {
                    selectedBarcodes.add(b.id);
                    allBarcodesToAdd.push({ value: b.id, text: b.ar_name });
                }
            });
        });

        barcodesSelectize.clearOptions();
        barcodesSelectize.addOption(allBarcodesToAdd);

        barcodesSelectize.setValue([...selectedBarcodes]);
    });

  
});

    </script>

    <script src="{{ asset('js/pos/menus/functions.js') }}"></script>
@endpush