@extends('dashboard.layout.content')

@section('customTitle')
{{ __('general.add_car') }}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="container">
        <div class="container">
            <div class="row">
                <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-12">
                                    <h4>{{ __('general.add_car') }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <form class="uroad-form" action="{{ route('dashboard.car.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-row mb-4">
                                    <div class="form-group col-md-3">
                                        <label for="models">{{ __('validation.attributes.car') }}</label>
                                        <select required id="models" class="form-control" name="models_id">
                                            <option value="" selected>{{ __('validation.attributes.car') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="company">{{ __('validation.attributes.company') }}</label>
                                        <select required id="company" class="form-control " name="company_id">
                                            <option value="" selected>{{ __('validation.attributes.company') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="branch">{{ __('validation.attributes.branch') }}</label>
                                        <select required id="branch" class="form-control basic jquery-branch-result" name="branch_id">
                                            <option value="" selected>{{ __('validation.attributes.branch') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="quantity">{{ __('validation.attributes.quantity') }}</label>
                                        <input required type="number" class="form-control" id="quantity" placeholder="{{ __('validation.attributes.quantity') }}" min="1" value="1" name="quantity">
                                    </div>
                                </div>

                                <hr style="border-top: 1px solid #2E9BD8;">

                                <div id="tkrar">
                                    <div class="form-row mb-4">
                                        <div class="col-12">
                                            <h5 id="counter">{{ __('general.special_information') }}</h5>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.chassis_number') }}</label>
                                            <input required type="text" class="form-control" placeholder="{{ __('validation.attributes.chassis_number') }}" name="chassis_number[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.plate') }}</label>
                                            <input required type="text" class="form-control" placeholder="{{ __('validation.attributes.plate') }}" name="plate[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.speedometer') }}</label>
                                            <input required type="number" class="form-control" placeholder="{{ __('validation.attributes.speedometer') }}" name="speedometer[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.gear') }}</label>
                                            <select required class="form-control basic" name="gear[]">
                                                <option value="" selected>{{ __('validation.attributes.gear') }}</option>
                                                <option value="manual">{{ __('validation.attributes.manual') }}</option>
                                                <option value="automatic">{{ __('validation.attributes.automatic') }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.fuel') }}</label>
                                            <select required class="form-control basic" name="fuel[]">
                                                <option value="" selected>{{ __('validation.attributes.fuel') }}</option>
                                                <option value="petrol">{{ __('validation.attributes.petrol') }}</option>
                                                <option value="diesel">{{ __('validation.attributes.diesel') }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.document_number') }}</label>
                                            <input required type="number" class="form-control" placeholder="{{ __('validation.attributes.document_number') }}" name="document_number[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.document_expiry') }}</label>
                                            <input required class="form-control basicFlatpickr flatpickr flatpickr-input" placeholder="{{ __('validation.attributes.document_expiry') }}" name="document_expiry[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.insurance_number') }}</label>
                                            <input required type="text" class="form-control" placeholder="{{ __('validation.attributes.insurance_number') }}" name="insurance_number[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.insurance_expiry') }}</label>
                                            <input required class="form-control basicFlatpickr flatpickr flatpickr-input" placeholder="{{ __('validation.attributes.insurance_expiry') }}" name="Insurance_expiry[]">
                                        </div>

                                        <div class="form-group col-md-2">
                                            <label>{{ __('validation.attributes.status') }}</label>
                                            <select required class="form-control basic" name="car_status[]">
                                                <option value="" selected>{{ __('validation.attributes.status') }}</option>
                                                <option value="available">{{ __('general.available') }}</option>
                                                <option value="rented">{{ __('general.rented') }}</option>
                                                <option value="maintenance">{{ __('general.maintenance') }}</option>
                                                <option value="parked for sale">{{ __('general.parked_for_sale') }}</option>
                                                <option value="out of service">{{ __('general.out_of_service') }}</option>
                                            </select>
                                        </div>

                                        <div class="form-group col-12" style="border-top: 1px solid #2E9BD8;"></div>
                                    </div>
                                </div>

                                <script>
                                    var specialDataForm = document.getElementById("tkrar").innerHTML;
                                </script>

                                <div class="form-row mb-4">

                                    <div class="form-group col-md-3 application_prices">
                                        <label for="daily_price">{{ __('validation.attributes.daily_price') }}</label>
                                        <input type="number" class="form-control" id="daily_price" placeholder="{{ __('validation.attributes.daily_price') }}" name="daily_price">
                                    </div>

                                    <div class="form-group col-md-3 application_prices">
                                        <label for="weekly_price">{{ __('validation.attributes.weekly_price') }}</label>
                                        <input type="number" class="form-control" id="weekly_price" placeholder="{{ __('validation.attributes.weekly_price') }}" name="weekly_price">
                                    </div>

                                    <div class="form-group col-md-3 application_prices">
                                        <label for="monthly_price">{{ __('validation.attributes.monthly_price') }}</label>
                                        <input type="number" class="form-control" id="monthly_price" placeholder="{{ __('validation.attributes.monthly_price') }}" name="monthly_price">
                                    </div>

                                    <div class="form-group col-md-3 system_prices">
                                        <label for="daily_price_system">{{ __('validation.attributes.daily_price System') }}</label>
                                        <input type="number" class="form-control" id="daily_price_system" placeholder="{{ __('validation.attributes.daily_price System') }}" name="daily_price_system">
                                    </div>

                                    <div class="form-group col-md-3 system_prices">
                                        <label for="weekly_price_system">{{ __('validation.attributes.weekly_price System') }}</label>
                                        <input type="number" class="form-control" id="weekly_price_system" placeholder="{{ __('validation.attributes.weekly_price System') }}" name="weekly_price_system">
                                    </div>

                                    <div class="form-group col-md-3 system_prices">
                                        <label for="monthly_price_system">{{ __('validation.attributes.monthly_price System') }}</label>
                                        <input type="number" class="form-control" id="monthly_price_system" placeholder="{{ __('validation.attributes.monthly_price System') }}" name="monthly_price_system">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="permitted_hours">{{ __('validation.attributes.permitted_hours') }}</label>
                                        <input required type="number" class="form-control" id="permitted_hours" placeholder="{{ __('validation.attributes.permitted_hours') }}" name="permitted_hours">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="extra_hour_price">{{ __('validation.attributes.extra_hour_price') }}</label>
                                        <input required type="number" class="form-control" id="extra_hour_price" placeholder="{{ __('validation.attributes.extra_hour_price') }}" name="extra_hour_price">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="permitted_mileage">{{ __('validation.attributes.permitted_mileage') }}</label>
                                        <input required type="number" class="form-control" id="permitted_mileage" placeholder="{{ __('validation.attributes.permitted_mileage') }}" name="permitted_mileage">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="extra_miles_price">{{ __('validation.attributes.extra_mile_price') }}</label>
                                        <input required type="number" class="form-control" id="extra_miles_price" placeholder="{{ __('validation.attributes.extra_mile_price') }}" name="extra_miles_price">
                                    </div>
                                </div>

                                <hr style="border-top: 1px solid #2E9BD8;">

                                <div class="form-row mb-4">
                                    <div class="col-12 mb-4">
                                        <h5>{{ __('general.services') }}</h5>
                                    </div>

                                    @foreach ($services as $key => $service)
                                    <div class="form-group col-md-3">
                                        <div class="d-flex flex-column">
                                            <div>
                                                <label for="extra_miles_price">{{ $service->name }}</label>
                                                <input required type="hidden" name="services[{{ $key + 1 }}][id]" value="{{ $service->id }}">
                                                <input type="number" class="form-control" id="extra_miles_price" placeholder="{{ $service->name }}" name="services[{{ $key + 1 }}][price]" value="">

                                            </div>
                                            <div>
                                                <select required class="form-control basic" name="services[{{ $key + 1 }}][is_one_time_payment]">
                                                    <option value="1" selected>{{__('dashboard.One Time Payment')}}</option>
                                                    <option value="0">{{__('dashboard.Pay Per Day')}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <input type="submit" class="btn btn-primary mt-3" value="{{ __('general.submit') }}">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("dashboard/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>

<script>
    $("#companies-cars-menu-box").attr("data-active", "true")

    $('#company').on('change', function () {
        $.ajax({
            url: "{{ route('dashboard.BranchDependsOnCompany') }}",
            type: 'GET',
            data: {
                company_id: $(this).val(),
            },
            success: function (result) {
                $('.jquery-branch-result').html(result);
            },
        });

        $.ajax({
            url: "{{ route('dashboard.SubscriptionDependsOnCompany') }}",
            type: 'GET',
            data: {
                company_id: $(this).val(),
            },
            success: function (result) {
                if (result == 'system') {
                    $('.application_prices').hide();
                    $('.system_prices').show();
                } else if (result == 'application') {
                    $('.system_prices').hide();
                    $('.application_prices').show();

                } else if (result == 'application & system') {
                    $('.system_prices').show();
                    $('.application_prices').show();
                }
            },
        });
    });

    var quantity = 1;

    $("#quantity").change(function () {
        let newQuantity = parseInt($(this).val());

        if (newQuantity < 1) {
            $(this).val(quantity);
            return swal({
                title: '{{__("dashboard.quantity_must_be_bigger_than_0")}}',
                type: 'warning',
                confirmButtonText: '{{__("dashboard.ok")}}',
            });
        }

        if (newQuantity > quantity) {
            for (let i = 0; i < (newQuantity - quantity); i++) {
                $('#tkrar').append(specialDataForm);
            }
            let newAppends = $(`#tkrar > div:nth-child(n + ${newQuantity - quantity})`);
            newAppends.find(".basic").select2();
            newAppends.find(".basicFlatpickr").flatpickr();

        } else {
            $(`#tkrar > div:nth-child(n + ${newQuantity + 1})`).remove();
        }

        quantity = newQuantity;
    });

    ajaxSelect2('#car','/dashboard/select2/cars')
    ajaxSelect2('#company','/dashboard/select2/companies')
</script>
@endsection