@php use App\Models\Shipping\ShippingMethod; @endphp
@php /** @var ShippingMethod $shippingMethod */  @endphp

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title">{{ $shippingMethod->title }} tariffs</h4>
                <p class="text-muted font-14 mb-4">
                    This section allows you to manage the tariffs for {{ $shippingMethod->title }}. You can change
                    prices, enable or disable countries for delivery, and set the status to "inactive" for countries you
                    want to exclude from delivery. Please make the necessary changes below:
                </p>

                @php
                    $tariffsGroupedByZone = $shippingMethod->tariffs->groupBy(['zone', 'country_id']);
                @endphp

                @foreach($tariffsGroupedByZone as $zoneNumber => $tariffsGroupByCountry)

                    <table class="table tariff-table mb-4">

                        <tbody>
                        <tr class="mb-2 mt-2">
                            <td colspan="{{ $tariffsGroupByCountry->first()->count() + 1 }}">
                                <b>Zone: {{ $zoneNumber }}</b>
                            </td>
                        </tr>

                        @foreach($tariffsGroupByCountry as $countryId => $ccc)

                            @php
                                $chunks = $ccc->chunk(8);
                            @endphp


                            @foreach($chunks as $countryTariff)

                                <tr>
                                    <td></td>
                                    @foreach($countryTariff as $col)
                                        <td class="sizes">
                                            {{ $col->weight_from }} - {{ $col->weight_to }} (kg)
                                        </td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <td>{{ $countryTariff->first()->country->title }}</td>

                                    @foreach($countryTariff as $key => $tariff)
                                        <td>
                                            <div class="d-flex tariff-control-container">
                                                <input type="text"
                                                       class="form-control form-control-sm tariff-price-input"
                                                       placeholder="Price"
                                                       name="tariffs[{{ $tariff->id }}][price]"
                                                       data-id="{{ $tariff->id }}"
                                                       value="{{ old('tariffs.' . $tariff->id . '.price', $tariff->price) }}"
                                                       step="0.01"
                                                >
                                                <div class="ml-2 custom-control custom-switch">
                                                    <input type="hidden"
                                                           name="tariffs[{{ $tariff->id }}][is_active]"
                                                           value="0"
                                                    >
                                                    <input type="checkbox"
                                                           class="custom-control-input tariff-checkbox"
                                                           name="tariffs[{{ $tariff->id }}][is_active]"
                                                           data-id="{{ $tariff->id }}"
                                                           id="{{ $countryId .'_' .$key . '_' . $tariff->id }}"
                                                            {{ old('tariffs.' . $tariff->id . '.is_active', $tariff->is_active) ? 'checked' : '' }}
                                                    >
                                                    <label class="custom-control-label"
                                                           for="{{ $countryId .'_' .$key . '_' . $tariff->id }}"
                                                           title="Off/On"
                                                    ></label>
                                                </div>
                                            </div>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        @endforeach
                        </tbody>
                    </table>
                @endforeach
            </div>
        </div>
    </div>
</div>

@push('script')
    <script>
        $(() => {
            $('.tariff-price-input').on('blur', function () {
                axios.put('/admin/api/shipping-tariff/' + $(this).data('id') + '/courier', {
                    'price': parseFloat($(this).val()),
                }).catch((error) => {
                    window.toastr.error(error.response.data.message);
                });
            });
            $('.tariff-checkbox').change(function () {
                axios.put('/admin/api/shipping-tariff/' + $(this).data('id') + '/courier', {
                    'is_active': this.checked,
                }).catch((error) => {
                    window.toastr.error(error.response.data.message);
                });
            });
        });
    </script>
@endpush