@extends('company.layout.content')

@section('customHead')
<meta name="token" content="{{ csrf_token() }}">
@endsection

@section('customTitle')
{{ __('company.Change Car.fields.Change Car') }}
@endsection

@section('customStyle')
<link href='{{ asset("company/$locale/assets/css/elements/alert.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>{{ __('company.Change Car.fields.Change Car') }}</h4>
                                </div>
                            </div>
                        </div>

                        <div class="widget-content widget-content-area">
                            <form action="{{ route('company.ContractChangeCar') }}" method="POST" enctype="multipart/form-data">
                                @method('PATCH')
                                @csrf

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

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

                                    <div class="col-12 mb-4">
                                        <h5 id="counter">{{ __('company.Change Car.fields.Contract Information') }} :</h5>
                                    </div>

                                    <input type="hidden" name="contract_id" value="{{ $contract->id }}" readonly>

                                    <div class="form-group col-md-4">
                                        <label for="name">{{ __('validation.attributes.serial_number') }}</label>
                                        <input type="number" class="form-control" id="name" placeholder="{{ __('validation.attributes.serial_number') }}" name="contract_number" value="{{ $contract->serial_number }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="name">{{ __('company.Change Car.fields.Total Value Of The Previous Contract') }}</label>
                                        <input type="number" class="form-control" id="name" placeholder="{{ __('company.Change Car.fields.Total Value Of The Previous Contract') }}" name="contract_number" value="{{ $contract->total_price }}" readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="name">{{ __('company.Change Car.fields.Previous Car Plate') }}</label>
                                        <input type="text" class="form-control" id="name" placeholder="{{ __('company.Change Car.fields.Previous Car Plate') }}" name="contract_number" value="{{ $contract->car->plate }}" readonly>
                                    </div>


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

                                    <div class="col-12 mb-4">
                                        <h5 id="counter">{{ __('company.Change Car.fields.Car Info') }} :</h5>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-id">{{ __('company.Change Car.fields.Choose The Car') }}</label>
                                        <select id="car-id" class="form-control" name="car_id">
                                            <option value="" selected>{{ __('company.Change Car.fields.Choose The Car') }}</option>
                                            @foreach ($cars as $car)
                                            <option value="{{ $car->id }}">
                                                {{ $car->models->ar_name }} || {{ $car->plate }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <input type="hidden" class="form-control" id="city_id" placeholder="المدينة" name="city_id" readonly>

                                    <input type="hidden" class="form-control" id="category_id" placeholder="التصنيف" name="category_id" readonly>

                                    <div class="form-group col-md-4">
                                        <label for="brand">{{ __('company.Change Car.fields.Car Brand') }}</label>
                                        <input type="text" class="form-control" id="brand" placeholder="{{ __('company.Change Car.fields.Car Brand') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-model">{{ __('company.Change Car.fields.Car Model') }}</label>
                                        <input type="text" class="form-control" id="car-model" placeholder="{{ __('company.Change Car.fields.Car Model') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="chassis_number">{{ __('company.Change Car.fields.Chassis Number') }}</label>
                                        <input type="text" class="form-control" id="chassis_number" placeholder="{{ __('company.Change Car.fields.Chassis Number') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="document_number">{{ __('company.Change Car.fields.Car Model Number') }}</label>
                                        <input type="text" class="form-control" id="document_number" placeholder="{{ __('company.Change Car.fields.Car Model Number') }}" readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="document_expiry">{{ __('company.Change Car.fields.Car Registration Expiry Date') }}</label>
                                        <input type="text" class="form-control" id="document_expiry" placeholder="{{ __('company.Change Car.fields.Car Registration Expiry Date') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="insurance_number">{{ __('company.Change Car.fields.Insurance Number') }}</label>
                                        <input type="text" class="form-control" id="insurance_number" placeholder="{{ __('company.Change Car.fields.Insurance Number') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="Insurance_expiry">{{ __('company.Change Car.fields.Insurance Expiry Date') }}</label>
                                        <input type="text" class="form-control" id="Insurance_expiry" placeholder="{{ __('company.Change Car.fields.Insurance Expiry Date') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="gear">{{ __('company.Change Car.fields.Transmission (Gear)') }}</label>
                                        <input type="text" class="form-control" id="gear" placeholder="{{ __('company.Change Car.fields.Transmission (Gear)') }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-daily-price">{{ __('company.Change Car.fields.Daily Price') }}</label>
                                        <input type="text" class="form-control" id="car-daily-price" placeholder="{{ __('company.Change Car.fields.Daily Price') }}" name="daily_price" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-weekly-price">{{ __('company.Change Car.fields.Weekly Price') }}</label>
                                        <input type="text" class="form-control" id="car-weekly-price" placeholder="{{ __('company.Change Car.fields.Weekly Price') }}" name="weekly_price" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car-monthly-price">{{ __('company.Change Car.fields.Monthly Price') }}</label>
                                        <input type="text" class="form-control" id="car-monthly-price" placeholder="{{ __('company.Change Car.fields.Monthly Price') }}" name="monthly_price" readonly>
                                    </div>

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

                                    <div class="col-12 mb-4">
                                        <h5 id="counter">{{ __('company.Change Car.fields.Services') }} :</h5>
                                    </div>

                                    <div id="services_container" class="d-flex flex-wrap">

                                    </div>

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

                                    <div class="col-12 mb-4">
                                        <h5 id="counter">{{ __('company.Change Car.fields.Contract Procedures') }} :</h5>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="contract-start-date">{{ __('company.Change Car.fields.Contract Starting Date') }}</label>
                                        <input type="date" class="form-control" id="contract-start-date" placeholder="{{ __('company.Change Car.fields.Contract Starting Date') }}" name="start_date" value="{{ $contract->start_date }}" readonly>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="contract-start-time">{{ __('company.Change Car.fields.Contract Start Time') }}</label>
                                        <input type="time" class="form-control" id="contract-start-time" placeholder="{{ __('company.Change Car.fields.Contract Start Time') }}" name="start_time" value="{{$contract->start_time}}" readonly>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="contract-end-date">{{ __('company.Change Car.fields.Contract Expiry Date') }}</label>
                                        <input type="date" class="form-control" id="contract-end-date" placeholder="{{ __('company.Change Car.fields.Contract Expiry Date') }}" name="end_date" value="{{ $contract->end_date }}" readonly>
                                    </div>


                                    <div class="form-group col-md-3">
                                        <label for="contract-end-time">{{ __('company.Change Car.fields.Contract Expiry Time') }}</label>
                                        <input type="time" class="form-control" id="contract-end-time" placeholder="{{ __('company.Change Car.fields.Contract Expiry Time') }}" name="end_time" value="{{$contract->end_time}}" readonly>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="number-of-days">{{ __('company.Change Car.fields.The Number Of Days') }}</label>
                                        <input type="number" class="form-control" id="contract-number-of-days" placeholder="{{ __('company.Change Car.fields.The Number Of Days') }}" name="number_of_days" value="{{$contract->days_number}}" readonly>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="down_payment">{{ __('company.Change Car.fields.Down Payment') }}</label>
                                        <input type="number" class="form-control" id="down_payment" placeholder="{{ __('company.Change Car.fields.Down Payment') }}" name="down_payment" value="{{$contract->down_payment}}" readonly>
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="payment_method">{{ __('company.Change Car.fields.Payment Type') }}</label>
                                        <select id="payment_method" class="form-control" name="down_payment_method" disabled>
                                            <option {{$contract->down_payment_method == 'cash' ? 'selected' : ''}} value="cash">{{ __('company.Change Car.fields.Payment Type') }}</option>
                                            <option {{$contract->down_payment_method == 'network' ? 'selected' : ''}} value="network">{{ __('company.Change Car.fields.Payment Type') }}</option>
                                            <option {{$contract->down_payment_method == 'check' ? 'selected' : ''}} value="check">{{ __('company.Change Car.fields.Payment Type') }}</option>
                                        </select>
                                    </div>


                                    <div class="form-group col-md-3">
                                        <label for="car_receipt_branch">{{ __('company.Change Car.fields.Receiving Branch') }}</label>
                                        <select id="car_receipt_branch" class="form-control" name="car_receipt_branch" disabled>
                                            @foreach ($branches as $branch)
                                            <option {{ $contract->carReceiptBranch->id == $branch->id ? 'selected' : '' }} value="{{ $branch->id }}">
                                                {{ $branch->ar_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="form-group col-md-3">
                                        <label for="car_delivery_branch">{{ __('company.Change Car.fields.Delivery Branch') }}</label>
                                        <select id="car_delivery_branch" class="form-control" name="car_delivery_branch" disabled>
                                            @foreach ($branches as $branch)
                                            <option {{ $contract->carDeliveryBranch->id == $branch->id ? 'selected' : '' }} value="{{ $branch->id }}">
                                                {{ $branch->ar_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="form-group col-md-3">
                                        <label for="contract-type">{{ __('company.Change Car.fields.Type Of Contract') }}</label>
                                        <select id="contract-type" class="form-control" name="contract_type">
                                            <option value="" selected>{{ __('company.Change Car.fields.Type Of Contract') }}</option>
                                            <option value="daily">{{ __('company.Change Car.fields.Daily') }}</option>
                                            <option value="weekly">{{ __('company.Change Car.fields.Weekly') }}</option>
                                            <option value="monthly">{{ __('company.Change Car.fields.Monthly') }}</option>
                                        </select>
                                    </div>

                                    <input type="hidden" class="form-control" id="total_services_price" placeholder="إجمالي {{ __('company.Change Car.fields.Services') }}" name="total_services_price" readonly>

                                    <div class="form-group col-md-3">
                                        <label for="contract-total">{{ __('company.Change Car.fields.Total Contract Value') }}</label>
                                        <input type="number" class="form-control" id="contract-total" placeholder="{{ __('company.Change Car.fields.Total Contract Value') }}" name="contract_total" readonly>
                                    </div>

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

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')
<script>
    $('#user-id').on('change', function() {
            $.ajax({
                url: "{{ route('company.UserInformationDependsOnUserID') }}",
                type: 'POST',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'user_id': $('#user-id').val()
                },
                success: function(result) {
                    $('#identification_number').val(result['identification_number']);
                    $('#name').val(result['name']);
                    $('#nationality').val(result['nationality']);
                    $('#driver_license_number').val(result['driver_license_number']);
                    $('#driver_license_expiry').val(result['driver_license_expiry']);
                    $('#date_of_birth').val(result['date_of_birth']);
                    $('#mobile').val(result['mobile']);
                    $('#home_phone_number').val(result['home_phone_number']);
                    $('#work_phone_number').val(result['work_phone_number']);
                    $('#address').val(result['address']);
                    $('#work_address').val(result['work_address']);
                    $('#image').attr('src', result['image']);
                    $('#driver_licence_image').attr('src', result['driver_licence_image']);
                },
            });
        });
</script>

<script>
    $('#car-id').on('change', function() {
            $.ajax({
                url: "{{ route('company.CarDetailsDependsOnCompanyCarID') }}",
                type: 'POST',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'car_id': $('#car-id').val()
                },
                success: function(result) {
                    $('#brand').val(result['brand']['en_name']);
                    $('#car-model').val(result['car']['model']);
                    $('#chassis_number').val(result['chassis_number']);
                    $('#document_number').val(result['document_number']);
                    $('#document_expiry').val(result['document_expiry']);
                    $('#insurance_number').val(result['insurance_number']);
                    $('#Insurance_expiry').val(result['Insurance_expiry']);
                    $('#gear').val(result['gear']);
                    $('#car-daily-price').val(result['daily_price']);
                    $('#car-weekly-price').val(result['weekly_price']);
                    $('#car-monthly-price').val(result['monthly_price']);
                    $('#city_id').val(result['city']['id']);
                    $('#category_id').val(result['car']['category']['id']);
                },
            });
        });
</script>

<script>
    var arrayOfServices = {};

        $('body').on('click', '.is_check', function() {
            var services_id = $(this).parent().find('#services_id').val();
            var services_price = $(this).parent().find('#services_price').val();
            var is_one_time_payment = $(this).parent().parent().find('#is_one_time_payment').val();
            if ($(this)[0].checked == true) {
                arrayOfServices[services_id] = {
                    //'is_check': $(this)[0].checked == true ? true : false,
                    'services_id': services_id,
                    'services_price': services_price,
                    'is_one_time_payment': is_one_time_payment
                };
            } else {
                delete arr[services_id]
            }
        });


        function calculateselectedServicesAmount() {
            var total = 0;
            if (Object.keys(arrayOfServices).length > 0) {
                $.each(arrayOfServices, function(index, value) {
                    if (value['is_one_time_payment'] == false) {
                        total = total + Number(value['services_price']) * Number(contractDaysNumber());
                    } else {
                        total = total + Number(value['services_price']);
                    }
                });
            }
            return total;
        }

        function contractDaysNumber() {
            var startDate = new Date($('#contract-start-date').val());
            var endDate = new Date($('#contract-end-date').val());
            if (endDate < startDate) {
                $('#contract-start-date').val(null);
                $('#contract-end-date').val(null);
                $('#contract-number-of-days').val(null);
            } else {
                var millisBetween = endDate.getTime() - startDate.getTime();
                var days = millisBetween / (1000 * 3600 * 24);
                $('#contract-number-of-days').val(Math.round(Math.abs(days)));
            }
            return Math.round(Math.abs(days));
        }

        $('#contract-type').on('change', function() {
            if ($(this).val() == 'daily' || $(this).val() == 'monthly' || $(this).val() == 'weekly') {
                if ($(this).val() == 'daily') {
                    var dailyPrice = $('#car-daily-price').val();
                    var contract_total = Number(calculateselectedServicesAmount()) + (Number(dailyPrice) *
                        Number(contractDaysNumber()));
                    $('#contract-total').val(contract_total);
                    $('#total_services_price').val(calculateselectedServicesAmount());
                } else if ($(this).val() == 'monthly') {
                    var monthlyPrice = $('#car-monthly-price').val();
                    var contract_total = Number(calculateselectedServicesAmount()) + (Number(monthlyPrice) *
                        Number(contractDaysNumber()));
                    $('#contract-total').val(contract_total);
                    $('#total_services_price').val(calculateselectedServicesAmount());
                } else if ($(this).val() == 'weekly') {
                    var yearlyPrice = $('#car-weekly-price').val();
                    var contract_total = Number(calculateselectedServicesAmount()) + (Number(yearlyPrice) *
                        Number(contractDaysNumber()));
                    $('#contract-total').val(contract_total);
                    $('#total_services_price').val(calculateselectedServicesAmount());
                }
            } else {
                $(this).val(null);
            }
        });

        contractDaysNumber();

        $('#contract-start-date, #contract-end-date').on('change', function() {
            contractDaysNumber();
        });

        $('#car-id').on('change', function() {
            $.ajax({
                url: "{{ route('company.CarServicesDependsOnCompanyCarID') }}",
                type: 'POST',
                data: {
                    '_token': $('meta[name="token"]').attr('content'),
                    'car_id': $('#car-id').val()
                },
                success: function(result) {
                    $('#services_container').html(" ");

                    $.each(result, function(index, value) {
                        var is_one_time_payment = (value['is_one_time_payment'] == 1) ?
                            "الدفع لمرة واحدة" : "الدفع لكل يوم حجز";
                        $('#services_container').append(
                            '<div class="col-md-3 mb-3"><div class="d-flex flex-column"><div><input type="checkbox" class="is_check mr-2" id="service" name="services[' +
                            (index + 1) + '][is_check]"><label for="services_price">' +
                            value['service']['ar_name'] +
                            '</label><input type="hidden" id="services_id" name="services[' +
                            (index + 1) + '][id]" value="' + value['id'] +
                            '"><input type="number" class="form-control" id="services_price" placeholder="' +
                            value['service']['ar_name'] + '" name="services[' + (
                                index + 1) + '][price]" value="' + value['price'] +
                            '" readonly></div><div><input type="text" class="form-control" value="' +
                            is_one_time_payment +
                            '" disabled><input type="hidden" id="is_one_time_payment" class="form-control" name="services[' +
                            (index + 1) + '][is_one_time_payment]" value="' + value[
                                'is_one_time_payment'] + '" readonly></div></div></div>'
                        );
                    });
                },
            });
        });
</script>
@endsection