@extends('dashboard.layouts.app')
@section('title', trans('admin.edit') . ' - ')
@section('speedbar')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">@lang('admin.edit')</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item ">
                                <a href="{{ route('dashboard') }}">@lang('admin.home')</a>
                            </li>
                            <li class="breadcrumb-item ">
                                <a href="{{ route('dashboard.regions') }}">@lang('admin.regions.title')</a>
                            </li>
                            <li class="breadcrumb-item active">
                                @lang('admin.edit')
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">@lang('admin.edit')</h4>
                </div>
                <div class="card-content">
                    <form class="form form-vertical" action="{{ route('dashboard.region.update', $region->id) }}"
                        enctype="multipart/form-data" method="post">
                        @csrf
                        <div class="card-body">
                            <div class="form-body">
                                <p>@lang('admin.all_fields_with')</p>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label for="first-name-vertical">@lang('admin.regions.name') UZ *</label>
                                                    <input type="text" id="first-name-vertical" required
                                                        class="form-control @error('name.uz') is-invalid @enderror"
                                                        name="name[uz]" value="{{ old('name.uz', $region->name['uz']) }}"
                                                        placeholder="@lang('admin.regions.name') UZ">
                                                    @error('name.uz')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label for="nameru">@lang('admin.regions.name') RU *</label>
                                                    <input type="text" id="nameru" required
                                                        class="form-control @error('name.ru') is-invalid @enderror"
                                                        value="{{ old('name.ru', $region->name['ru']) }}" name="name[ru]"
                                                        placeholder="@lang('admin.regions.name') RU">
                                                    @error('name.ru')
                                                        <div class="invalid-feedback">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <fieldset>
                                            <div class="vs-checkbox-con vs-checkbox-primary">
                                                <input type="checkbox" name="cash"
                                                    @if ($region->cash) checked @endif value="1">
                                                <span class="vs-checkbox">
                                                    <span class="vs-checkbox--check">
                                                        <i class="vs-icon feather icon-check"></i>
                                                    </span>
                                                </span>
                                                <span class="">Принимать наличные</span>
                                            </div>
                                        </fieldset>
                                    </div>

                                    {{--  Delivery Price Part Start  --}}
                                    <div class="col-md-12">
                                        <div class="row g-3" id="delivery-price-part">
                                            <div class="col-md-3 mt-0 top-right">
                                                <button type="button"
                                                    class="form-control mt-4 btn btn-primary btn-sm add-delivery-price-button">
                                                    @lang('admin.regions.add_delivery_price')
                                                </button>
                                            </div>

                                            <div class="col-md-12 hidden-section m-0"
                                                id="labels-container-for-delivery-price">
                                                <div class="row g-3 mt-2">
                                                    <div class="col-md-5">
                                                        <label class="form-label">@lang('admin.regions.power')</label>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <label class="form-label">@lang('admin.regions.price')</label>
                                                    </div>
                                                    <div class="col-md-2">
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Hidden input to keep track of the number of sets of inputs --}}
                                            <input type="hidden" id="inputCounter" value="0">
                                        </div>
                                    </div>
                                    {{--  Delivery Price Part End  --}}

                                </div>
                            </div>
                        </div>
                        <div class="card-footer pb-0 pl-0 pt-1">
                            <div class="col-12 mb-0">
                                <div class="row">
                                    <div class="col-3">
                                        <button type="submit"
                                            class="btn btn-primary mr-1 mb-1 waves-effect waves-light btn-icon">
                                            <i class="feather icon-save"></i> @lang('admin.save')
                                        </button>
                                    </div>

                                    <div class="col-9">
                                        <a href="{{ route('dashboard.regions') }}"
                                            class="btn btn-danger mr-1 mb-1 waves-effect waves-light btn-icon pull-right">
                                            <i class="feather icon-x-circle"></i> @lang('admin.cancel')
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script type="text/javascript">
        var powers = @json($powers);
        var lang = @json($lang);
        var deliveryPrices = @json($region->deliveryPrice);
        // Create the select options dynamically using the 'powers' data
        var powerOptions = `<option disabled selected>@lang('admin.regions.choose_power')</option>`;

        // Populate existing deliveryPrices
        for (var i = 0; i < deliveryPrices.length; i++) {
            let element = $(deliveryPrices[i]);
            let id = element[0].id;
            let power_id = element[0].power_id;
            let price = element[0].price;

            let inputCounter = parseInt($("#inputCounter").val());
            let newSetOfElements = '';

            powers.forEach(function(power) {
                powerOptions +=
                    `<option value="${power.id}" ${power.id == power_id ? 'selected' : ''}>${power.name[lang]}</option>`;
            });

            newSetOfElements = newSetOfElements + `
                    <div class="row g-3 mb-2 delivery-price-row-${inputCounter}">
                        <input type="hidden" class="form-control" name="deliveryPrice[${inputCounter}][id]" placeholder=""
                                value="${id}" />
                        <div class="col-md-5">
                            <select class="select2 form-control" name="deliveryPrice[${inputCounter}][power_id]" required>
                                ${powerOptions}
                            </select>
                        </div>
                        <div class="col-md-5">
                            <input type="text" name="deliveryPrice[${inputCounter}][price]" value="${price}"  class="form-control time-mask" placeholder="@lang('admin.regions.price')">
                        </div>
                        <div class="col-md-2 d-flex align-items-center">
                            <button type="button" class="btn btn-danger btn-sm delivery-price-remove-btn" data-counter="${inputCounter}">
                                <i class="feather icon-trash"></i>
                            </button>
                        </div>
                    </div>
                    `;

            inputCounter++;

            // Update the value of "inputCounter" in the hidden input
            $("#inputCounter").val(inputCounter);

            $("#labels-container-for-delivery-price").removeClass("hidden-section");

            $(`${"#labels-container-for-delivery-price"} .row.g-3:last`).after(newSetOfElements);
        }


        //  Add Delivery Prices
        // Add new set of elements
        $(".add-delivery-price-button").on("click", function() {
            var inputCounter = parseInt($("#inputCounter").val());

            // Create the select options dynamically using the 'powers' data
            var powerOptions = `<option disabled selected>@lang('admin.regions.choose_power')</option>`;
            powers.forEach(function(power) {
                powerOptions += `<option value="${power.id}">${power.name[lang]}</option>`;
            });

            var newSetOfElements = `
                    <div class="row g-3 mb-2 delivery-price-row-${inputCounter}">
                        <div class="col-md-5">
                            <select class="select2 form-control" name="deliveryPrice[${inputCounter}][power_id]" required>
                                ${powerOptions}
                            </select>
                        </div>

                        <div class="col-md-5">
                            <input type="text" name="deliveryPrice[${inputCounter}][price]" class="form-control time-mask" placeholder="@lang('admin.regions.price')">
                        </div>
                        <div class="col-md-2 d-flex align-items-center">
                            <button type="button" class="btn btn-danger btn-sm delivery-price-remove-btn" data-counter="${inputCounter}">
                                <i class="feather icon-trash"></i>
                            </button>
                        </div>
                    </div>
                `;

            // Remove the "hidden-section" class before adding new elements
            $("#labels-container-for-delivery-price").removeClass("hidden-section");

            // Find the specific <div class="row g-3"> and insert newSetOfElements after it
            $(`${"#labels-container-for-delivery-price"} .row.g-3:last`).after(
                newSetOfElements);

            inputCounter++;

            // Update the value of "inputCounter" in the hidden input
            $("#inputCounter").val(inputCounter);
        });

        // Handle the remove button click event (for dynamically added elements)
        $(document).on("click", ".delivery-price-remove-btn", function() {
            let counter = $(this).data("counter");
            let rows_to_delete = $('.delivery-price-row-' + counter);
            // Remove the specific row
            rows_to_delete.remove();
        });
    </script>
@endpush