@extends('tenant.settings.warehouses.warehouses-settings-tabs')
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.warehouse_settings') => route('tenant.settings.warehouses.bonds.index'),
            __('breadcrumb.general_material_settings') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.warehouses.general-items-settings'])
@endsection

@section('style')
    <style>
        .fade:not(.show) {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('css/layouts/tabs.css')}}">
@endsection

@section('warehouses-settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <h4>@lang('settings/warehouses/general-items-settings.general_items_settings')</h4>
        <ul class="nav nav-tabs" id="myTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="items-numbering-tab" data-bs-toggle="tab" href="#items-numbering" role="tab"
                    aria-controls="items-numbering" aria-selected="true">@lang('settings/warehouses/general-items-settings.items_numbering_settings')</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="dynamic-inputs-tab" data-bs-toggle="tab" href="#dynamic-inputs" role="tab"
                    aria-controls="dynamic-inputs" aria-selected="false"> @lang('settings/warehouses/general-items-settings.input_defintion_settings')</a>
            </li>
        </ul>

        <div class="tab-content mt-3">
            <div class="tab-pane fade show active" id="items-numbering" role="tabpanel"
                aria-labelledby="items-numbering-tab">
                <form action="{{ route('tenant.settings.warehouses.general-items.save-settings') }}" method="post"
                    enctype="multipart/form-data" id="general_items_settings">
                    @csrf


                    <div class="row my-4">
                        <div class="col-2">
                            <label for="auto_generated_barcode_number_length" class="fw-bold">
                                @lang('settings/warehouses/general-items-settings.automatically_generated_barcode_number_length')
                            </label>
                            <input type="number" min="5" name="auto_generated_barcode_number_length"
                                id="auto_generated_barcode_number_length" class="form-control"
                                value="{{ $settings['auto_generated_barcode_number_length'] }}">
                        </div>
                    </div>

                    <div class="row my-4">
                        <div>
                            <label for="is-price-required" class="fw-bold"> @lang('settings/warehouses/general-items-settings.item_price')</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" id="compulsory" name="is_item_price_required"
                                    value="1" {{ $settings['is_item_price_required'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="compulsory"> @lang('settings/warehouses/general-items-settings.compulsory')</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" id="non-compulsory"
                                    name="is_item_price_required" value="0"
                                    {{ !$settings['is_item_price_required'] ? 'checked' : '' }}>
                                <label class="form-check-label" for="non-compulsory">@lang('settings/warehouses/general-items-settings.optional')</label>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <input type="hidden" name="item_number_multi_parts" id="item_number_multi_parts" value="">
                    @php
                        $available_generator_priorities = [
                            'country' => 'البلد',
                            'supplier' => 'المورّد',
                            'category' => 'العائلة',
                            'general_classification' => 'التصنيف العام',
                        ];
                        $saved_priorities = $settings['item_number_multi_parts'];

                        $falseList = $trueList = [];
                        foreach ($saved_priorities as $key => $value) {
                            if ($value == false) {
                                $falseList[] = $key;
                            } else {
                                $trueList[] = $key;
                            }
                        }
                    @endphp

                    <div class=" my-4">
                        <label for="is-price-required" class="fw-bold"> @lang('settings/warehouses/general-items-settings.permanent_sequence')</label>

                        @if (!$numberWayEditable)
                            <x-tooltip
                                content="{{ __('settings/warehouses/general-items-settings.note1') }}"></x-tooltip>
                        @endif

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="normal_sequence" name="item_number_way"
                                value="normal_sequence"
                                {{ $settings['item_number_way'] == 'normal_sequence' ? 'checked' : '' }}
                                {{ $numberWayEditable ? '' : 'disabled' }}>
                            <label class="form-check-label" for="normal_sequence">@lang('settings/warehouses/general-items-settings.sequence')</label>
                        </div>

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="multi_parts" name="item_number_way"
                                value="multi_parts" {{ $settings['item_number_way'] == 'multi_parts' ? 'checked' : '' }}
                                {{ $numberWayEditable ? '' : 'disabled' }}>
                            <label class="form-check-label" for="multi_parts">@lang('settings/warehouses/general-items-settings.by_components')</label>
                        </div>

                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" id="single_part" name="item_number_way"
                                value="single_part" {{ $settings['item_number_way'] == 'single_part' ? 'checked' : '' }}
                                {{ $numberWayEditable ? '' : 'disabled' }}>
                            <label class="form-check-label" for="single_part">@lang('settings/warehouses/general-items-settings.by_one_component_previous')</label>
                        </div>
                    </div>

                    <div class="row mb-3" id="multi_parts_section"
                        style="{{ $settings['item_number_way'] == 'multi_parts' ? 'display:flex;' : 'display:none;' }}">
                        <p id="multi_parts_warning" style="color: var(--bs-red); display: none;">
                            @lang('settings/warehouses/general-items-settings.message_warning')
                        </p>
                        <label class="fw-bold">@lang('settings/warehouses/general-items-settings.components_items_numbering')
                            <x-tooltip
                                content="{{ __('settings/warehouses/general-items-settings.note2') }}"></x-tooltip>
                        </label>
                        <br>

                        <div class="col-md-2">
                            <h6>@lang('settings/warehouses/general-items-settings.available_components_numbering')</h6>
                            <ul id="falseList" class="list-group p-0 bg-white" style="min-height: 38px">
                                @foreach ($falseList as $key)
                                    <li class="list-group-item" data-value="{{ $key }}">
                                        {{ $available_generator_priorities[$key] ?? $key }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="col-md-2">
                            <h6>@lang('settings/warehouses/general-items-settings.specified_components_numbering')</h6>
                            <ul id="trueList" class="list-group p-0 bg-white" style="min-height: 38px">
                                @foreach ($trueList as $key)
                                    <li class="list-group-item" data-value="{{ $key }}">
                                        {{ $available_generator_priorities[$key] ?? $key }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    {{-- Single part select --}}
                    <div class="row mb-3" id="single_part_section"
                        style="{{ $settings['item_number_way'] == 'single_part' ? 'display:flex;' : 'display:none;' }}">
                        <label class="fw-bold">@lang('settings/warehouses/general-items-settings.component_numbering_items')
                            <x-tooltip content="{{ __('settings/warehouses/general-items-settings.note3') }}"></x-tooltip>
                        </label>
                        <div class="col-md-2">
                            <select name="item_number_single_part" id="item_number_single_part"
                                {{ !$numberWayEditable ? 'disabled' : '' }}>
                                @foreach ($available_generator_priorities as $priority => $label)
                                    <option value="{{ $priority }}"
                                        {{ $settings['item_number_single_part'] == $priority ? 'selected' : '' }}>
                                        {{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="text-center">
                        <button class="btn orange-btn" type="submit">@lang('general.edit')</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="dynamic-inputs" role="tabpanel" aria-labelledby="dynamic-inputs-tab">
            <item-dynamic-input :data="{{ json_encode($itemDynamicInputs) }}"></item-dynamic-input>
        </div>
    </div>
@endsection

@push('script')
    <script src="/js/tenent/sortable.js"></script>

    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#general_items_settings').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('general_items_settings', {
                    type: 'green'
                });
            });

            $('input[name="item_number_way"]').change(function() {
                if ($(this).val() == 'multi_parts') {
                    $('#multi_parts_section').show();
                    $('#multi_parts_warning').show();
                } else {
                    $('#multi_parts_section').hide();
                    $('#multi_parts_warning').hide();
                }
                if ($(this).val() == 'single_part') {
                    $('#single_part_section').show();
                } else {
                    $('#single_part_section').hide();
                }
            });

            @if ($numberWayEditable)
                Sortable.create(falseList, {
                    group: 'shared',
                    animation: 150,
                    onEnd: function(evt) {
                        updateOrder();
                    }
                });

                Sortable.create(trueList, {
                    group: 'shared',
                    animation: 150,
                    onEnd: function(evt) {
                        updateOrder();
                    }
                });

                function updateOrder() {
                    var trueOrder = Array.from(trueList.children).map(li => li.dataset.value);
                    var falseOrder = Array.from(falseList.children).map(li => li.dataset.value);

                    var orderObject = {};
                    trueOrder.forEach(key => {
                        orderObject[key] = true;
                    });

                    falseOrder.forEach(key => {
                        orderObject[key] = false;
                    });
                    document.getElementById('item_number_multi_parts').value = JSON.stringify(orderObject);
                }
            @endif
        });
    </script>
@endpush