@extends('admin.layouts.container')

@section('content')

    <div class="side-title">
        <h3>{{ $head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row add_form" method="post" action="{{ route('delivery-cost.update') }}"
              enctype="multipart/form-data" style="padding-bottom: 80px;">
            @method('PUT')
            @csrf

            <div class="card card-info w-100">
                <div class="card-header">
                    <h3 class="card-title">{{ __('settings.delivery_cost_distance') }}</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">

                    <div class="form-group">
                        <label for="">{{ __('settings.delivery_cost_distance') }}</label>
                        <div class="delivery-cost-block">
                            @for($deliveryCounter = 0; $deliveryCounter < count($deliveryCostItems); $deliveryCounter++)
                                <div class="row item-row" id="block-1-row{{ $deliveryCounter }}">
                                    <div class="form-group col-md-3">
                                        <label>
                                            {{  __('settings.from_kilometers') }}
                                        </label>
                                        <input type="number" step="0.01" min="0"
                                               class="form-control {{ $errors->has("delivery_cost.$deliveryCounter.from") ? 'is-invalid' : '' }}"
                                               name="delivery_cost[{{ $deliveryCounter }}][from]"
                                               placeholder="{{  __('settings.from_kilometers') }}"
                                               value='{{ old("delivery_cost.$deliveryCounter.from", $deliveryCostItems[$deliveryCounter]['from'] ?? "") }}'/>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>
                                            {{  __('settings.to_kilometers') }}
                                        </label>
                                        <input type="number" step="0.01" min="0"
                                               class="form-control {{ $errors->has("delivery_cost.$deliveryCounter.to") ? 'is-invalid' : '' }}"
                                               name="delivery_cost[{{ $deliveryCounter }}][to]"
                                               placeholder="{{  __('settings.to_kilometers') }}"
                                               value='{{ old("delivery_cost.$deliveryCounter.to", $deliveryCostItems[$deliveryCounter]['to'] ?? "") }}'/>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>
                                            {{  __('settings.delivery_cost') }}
                                        </label>
                                        <input type="number" step="0.01" min="0"
                                               class="form-control {{ $errors->has("delivery_cost.$deliveryCounter.cost") ? 'is-invalid' : '' }}"
                                               name="delivery_cost[{{ $deliveryCounter }}][cost]"
                                               placeholder="{{  __('settings.delivery_cost') }}"
                                               value='{{ old("delivery_cost.$deliveryCounter.cost", $deliveryCostItems[$deliveryCounter]['cost'] ?? "") }}'/>
                                    </div>
                                    <div class="col-md-3 del-btn-div">
                                        <button type="button"
                                                onclick="$('#block-1-row{{ $deliveryCounter }}').remove();" data-toggle="tooltip"
                                                title="{{ __('general.delete') }}" class="btn btn-danger btn-sm py-2">
                                            <i class="fa fa-minus-circle"></i>
                                        </button>
                                    </div>
                                </div>
                            @endfor
                        </div>
                        <div class="text-right">
                            <button type="button" onclick="addBlockDeliveryCost();"
                                    data-toggle="tooltip" title="{{ __('general.add_new') }}" class="btn btn-info-lte btn-sm py-2 px-2">
                                <i class="fa fa-plus-circle"></i>
                            </button>
                        </div>
                    </div> <!-- end of form-group -->

                </div>
                <!-- /.card-body -->
            </div>

            <div class="text-center mt-5 col-12">
                <button type="submit" class="butn add_button"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>

@endsection

<script>
    let deliveryCounter = {{ $deliveryCounter ?? 0 }};
    let html;
    function addBlockDeliveryCost() {
        let elementId = 'block-1-row'+deliveryCounter;
        html  = '<div class="row item-row" id="'+elementId+'">';
        html += '   <div class="form-group col-md-3">';
        html += '       <label>{{  __('settings.from_kilometers') }}</label>';
        html += '       <input type="number" step="0.01" min="0" class="form-control" name="delivery_cost['+deliveryCounter+'][from]" placeholder="{{  __('settings.from_kilometers') }}" />';
        html += '   </div>';
        html += '   <div class="form-group col-md-3">';
        html += '       <label>{{  __('settings.to_kilometers') }}</label>';
        html += '       <input type="number" step="0.01" min="0" class="form-control" name="delivery_cost['+deliveryCounter+'][to]" placeholder="{{  __('settings.to_kilometers') }}" />';
        html += '   </div>';
        html += '   <div class="form-group col-md-3">';
        html += '       <label>{{  __('settings.delivery_cost') }}</label>';
        html += '       <input type="number" step="0.01" min="0" class="form-control" name="delivery_cost['+deliveryCounter+'][cost]" placeholder="{{  __('settings.delivery_cost') }}" />';
        html += '   </div>';
        html += '   <div class="col-md-3 del-btn-div">';
        html += '      <button type="button" onclick="$(\'#block-1-row'+deliveryCounter+'\').remove();" data-toggle="tooltip" title="{{ __('general.delete') }}" class="btn btn-danger btn-sm py-2">';
        html += '         <i class="fa fa-minus-circle"></i>';
        html += '      </button>';
        html += '   </div>';
        html += '</div>';

        $('.delivery-cost-block').append(html);
        deliveryCounter++;
    }
</script>