@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.update', ['menu' => $menu->id]) }}"
            method="post" id="editMenuForm" class="form-bg-color p-4 rounded-form" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <h5>@lang('pos/menus/create.edit_menu_data')</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="{{ $menu->number }}" class="form-control" disabled required>
                </div>

                @if ($menu->parent)
                    <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="{{ $menu->parent->name }}" disabled required>
                        <input type="hidden" class="form-control" name="parent_id" value="{{ $menu->parent->id }}">
                    </div>
                @endif

                <div class="col-12 col-md-6 col-lg-3 mb-3">
                    <label class="rs">  @lang('pos/menus/create.menu_level')</label>
                    <input type="text" class="form-control" value="{{ $menu->level }}" 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" value="{{ $menu->name }}"
                        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">
                        @if ($menu->image)
                            <img src="{{ $menu->image }}" style="width: 100px;">
                        @endif
                    </div>
                </div>

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

                        <div>
                            @php $selected_branches_ids = $menu->branches->pluck('id')->all(); @endphp
                            @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 }}"
                                        {{ in_array($branch->id, $selected_branches_ids) ? '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>

                @php
                    $selected_items_ids = $menu->barcodes->pluck('item_id')->all();
                    $selected_barcodes_ids = $menu->barcodes->pluck('id')->all();
                @endphp
                <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 }}"
                                    {{ in_array($item->id, $selected_items_ids) ? 'selected' : '' }}>
                                    {{ $item->ar_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-6 col-lg-6 mb-3 mt-2">
                        <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 }}"
                                    {{ in_array($barcode->id, $selected_barcodes_ids) ? 'selected' : '' }}>
                                    {{ $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();
            items.forEach(item => {
                itemsSelected.addItem(item.id);
            });
        }

        $(document).ready(function () {
            const barcodesSelected = $('#barcodes_ids')[0].selectize;
            $('#items_ids').on('change', function () {
                const selectedItemIds = $(this).val() || [];
                barcodesSelected.clear();
                const selectedBarcodes = [];
                selectedItemIds.forEach(itemId => {
                    const item = items.find(t => t.id == itemId);
                    if (!item) return;
                    const itemBarcodes = barcodes.filter(b => b.item_id == item.id);
                    itemBarcodes.forEach(b => {
                        if (!selectedBarcodes.includes(b.id)) {
                            selectedBarcodes.push(b.id);
                            barcodesSelected.addItem(b.id);
                        }
                    });
                });
            });
        });
    </script>

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

@endpush