@extends('company.layout.content')

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

@section('customStyle')
<link href='{{ asset("company/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href="{{ asset('canvas.css') }}" rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$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.car_information') }} :</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <form action="{{ route('company.contract.close') }}" method="POST" enctype="multipart/form-data">

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

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

                                    <input type="hidden" class="form-control" id="reservation_id" placeholder="آي دي العقد" name="reservation_id" value="{{ $reservation->id }}" readonly>

                                    <input type="hidden" class="form-control" id="car_id" placeholder="آي دي السيارة" name="car_id" value="{{ $reservation->car_id }}" readonly>
                                    
                                    <input type="hidden" class="form-control" id="car_details_id" placeholder="آي دي معلومة السيارة" name="car_details_id" value="{{ $reservation->contract->car_details_id }}" readonly>

                                    <div class="form-group col-md-4">
                                        <label for="car_name">{{ __('validation.attributes.car') }}</label>
                                        <input type="text" class="form-control" id="car_name" placeholder="{{ __('validation.attributes.car') }}" name="car_name" value="{{ $reservation->car->models->name }}" readonly>
                                    </div>

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

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

                                    <div class="form-group col-md-4">
                                        <label for="car_model">{{ __('validation.attributes.model') }}</label>
                                        <input type="text" class="form-control" id="car_model" placeholder="{{ __('validation.attributes.model') }}" name="car_model" value="{{ $reservation->car->model }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car_gear">{{ __('validation.attributes.gear') }}</label>
                                        <input type="text" class="form-control" id="car_gear" placeholder="{{ __('validation.attributes.gear') }}" name="car_gear" value="{{ $reservation->car->gear }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="old_mileage">{{ __('validation.attributes.mileage_from_the_last_check') }}</label>
                                        <input type="text" class="form-control" id="old_mileage" placeholder="{{ __('validation.attributes.mileage_from_the_last_check') }}" name="old_mileage" value="{{ $reservation->checks()->latest()->first()?->mileage }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="old_fuel_meter">{{ __('validation.attributes.fuel_from_the_last_check') }}</label>
                                        <input type="text" class="form-control" id="old_fuel_meter" placeholder="{{ __('validation.attributes.fuel_from_the_last_check') }}" name="old_fuel_meter" value="{{ $reservation->checks()->latest()->first()?->fuel_meter }}" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="old_car_wash">{{ __('validation.attributes.car_wash_from_the_last_check') }}</label>
                                        <input type="text" class="form-control" id="old_car_wash" placeholder="{{ __('validation.attributes.car_wash_from_the_last_check') }}" name="old_car_wash" value="{{ $reservation->checks()->latest()->first()?->car_wash == true ? __('general.yes') : __('general.no') }}" readonly>
                                    </div>

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

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

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

                                    <div class="form-group col-md-4">
                                        <label for="contract_end_time">{{ __('validation.attributes.end_time') }}</label>
                                        <input type="time" class="form-control" id="contract_end_time" placeholder="{{ __('validation.attributes.end_time') }}" name="contract_end_time" value="{{ $reservation->start_time }}" readonly>
                                    </div>


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

                                    <div class="col-12 mb-3">
                                        <h6>{{ __('general.car_check') }} :</h6>
                                    </div>


                                    <!-------------------------------------------------------------------------------------------->
                                    <!-------------------------------------------------------------------------------------------->
                                    <!-------------------------------------------------------------------------------------------->
                                    <!-------------------------------------------------------------------------------------------->
                                    <!-------------------------------------------------------------------------------------------->
                                    <!-------------------------------------------------------------------------------------------->

                                    <div id="signature-pad1" class="signature-pad col-md-6 mb-4" style="height:300px;">
                                        <div class="signature-pad--body">
                                            <canvas id="mycanvas1" style="touch-action: none; h-100 w-100">
                                            </canvas>
                                        </div>
                                        <div class="signature-pad--footer">
                                            <div class="description">
                                                <strong>{{ __('validation.attributes.the_right_side') }}</strong>
                                            </div>

                                            <div class="signature-pad--actions justify-content-center">
                                                <div>
                                                    <button type="button" class="btn btn-warning" data-action="clear">{{ __('general.clear') }}</button>
                                                    {{-- <button type="button" class="button" data-action="change-color">Change color</button> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="signature-pad2" class="signature-pad col-md-6 mb-4" style="height:300px;">
                                        <div class="signature-pad--body">
                                            <canvas id="mycanvas2" style="touch-action: none; h-100 w-100">
                                            </canvas>
                                        </div>
                                        <div class="signature-pad--footer">
                                            <div class="description">
                                                <strong>{{ __('validation.attributes.the_left_side') }}</strong>
                                            </div>

                                            <div class="signature-pad--actions justify-content-center">
                                                <div>
                                                    <button type="button" class="btn btn-warning" data-action="clear">{{ __('general.clear') }}</button>
                                                    {{-- <button type="button" class="button" data-action="change-color">Change color</button> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="signature-pad3" class="signature-pad col-md-6 mb-4" style="height:300px;">
                                        <div class="signature-pad--body">
                                            <canvas id="mycanvas3" style="touch-action: none; h-100 w-100">
                                            </canvas>
                                        </div>
                                        <div class="signature-pad--footer">
                                            <div class="description">
                                                <strong>{{ __('validation.attributes.the_front_side') }}</strong>
                                            </div>

                                            <div class="signature-pad--actions justify-content-center">
                                                <div>
                                                    <button type="button" class="btn btn-warning" data-action="clear">{{ __('general.clear') }}</button>
                                                    {{-- <button type="button" class="button" data-action="change-color">Change color</button> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="signature-pad4" class="signature-pad col-md-6 mb-4" style="height:300px;">
                                        <div class="signature-pad--body">
                                            <canvas id="mycanvas4" style="touch-action: none; h-100 w-100">
                                            </canvas>
                                        </div>
                                        <div class="signature-pad--footer">
                                            <div class="description">
                                                <strong>{{ __('validation.attributes.the_back_side') }}</strong>
                                            </div>

                                            <div class="signature-pad--actions justify-content-center">
                                                <div>
                                                    <button type="button" class="btn btn-warning" data-action="clear">{{ __('general.clear') }}</button>
                                                    {{-- <button type="button" class="button" data-action="change-color">Change color</button> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="signature-pad5" class="signature-pad col-md-6 mb-4" style="height:300px;">
                                        <div class="signature-pad--body">
                                            <canvas id="mycanvas5" style="touch-action: none; h-100 w-100">
                                            </canvas>
                                        </div>
                                        <div class="signature-pad--footer">
                                            <div class="description">
                                                <strong>{{ __('validation.attributes.the_top_side') }}</strong>
                                            </div>

                                            <div class="signature-pad--actions justify-content-center">
                                                <div>
                                                    <button type="button" class="btn btn-warning" data-action="clear">{{ __('general.clear') }}</button>
                                                    {{-- <button type="button" class="button" data-action="change-color">Change color</button> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="signature-pad6" class="signature-pad col-md-6 mb-4" style="height:300px;">
                                        <div class="signature-pad--body">
                                            <canvas id="mycanvas6" style="touch-action: none; h-100 w-100">
                                            </canvas>
                                        </div>
                                        <div class="signature-pad--footer">
                                            <div class="description">
                                                <strong>{{ __('validation.attributes.customer_signature') }}</strong>
                                            </div>

                                            <div class="signature-pad--actions justify-content-center">
                                                <div>
                                                    <button type="button" class="btn btn-warning" data-action="clear">{{ __('general.clear') }}</button>
                                                    {{-- <button type="button" class="button" data-action="change-color">Change color</button> --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>


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

                                    <div class="form-group col-md-4">
                                        <label for="car_delivery_date">{{ __('validation.attributes.delivery_date') }}</label>
                                        <input type="date" class="form-control basicFlatpickr flatpickr flatpickr-input" id="car_delivery_date" placeholder="{{ __('validation.attributes.delivery_date') }}" name="car_delivery_date">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car_delivery_time">{{ __('validation.attributes.delivery_time') }}</label>
                                        <input type="time" class="form-control" id="car_delivery_time" placeholder="{{ __('validation.attributes.delivery_time') }}" name="car_delivery_time">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="fuel_meter">{{ __('validation.attributes.fuel_meter') }}</label>
                                        <select id="fuel_meter" class="form-control" name="fuel_meter">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="35">35</option>
                                            <option value="50">50</option>
                                            <option value="75">75</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 d-none">
                                        <label for="fuel_input">{{ __('validation.attributes.fuel_cost') }}</label>
                                        <input type="number" class="form-control" id="fuel_input" min="0" value="0" placeholder="{{ __('validation.attributes.fuel_cost') }}" name="fuel_input">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="car_wash">{{ __('validation.attributes.is_the_car_washed') }}</label>
                                        <select id="car_wash" class="form-control" name="car_wash">
                                            <option value="1">{{ __('general.yes') }}</option>
                                            <option value="0">{{ __('general.no') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4 d-none">
                                        <label for="car_wash_input">{{ __('validation.attributes.car_wash_cost') }}</label>
                                        <input type="number" class="form-control" id="car_wash_input" min="0" value="0" placeholder="{{ __('validation.attributes.car_wash_cost') }}" name="car_wash_input">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="damage_input">{{ __('validation.attributes.damage_cost') }}</label>
                                        <input type="number" class="form-control" id="damage_input" min="0" value="0" placeholder="{{ __('validation.attributes.miles') }}" name="damage_input">
                                    </div>


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


                                    <div class="col-md-12 mb-3">
                                        <a id="calculate" class="btn btn-warning">{{ __('general.calculate_the_cost') }}</a>
                                    </div>

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

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

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

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

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

                                    <div class="form-group col-md-4">
                                        <label for="total_costs">{{ __('validation.attributes.total_additional_fees') }}</label>
                                        <input type="number" class="form-control" id="total_costs" placeholder="{{ __('company.Close Contract.fields.Total') }}" name="total_costs" readonly>
                                    </div>

                                    {{-- <div class="form-group col-md-4">
                                        <label for="total_amounts_for_user">{{ __('مبالغ مستحقة للعميل') }}</label>
                                        <input type="number" class="form-control" id="total_amounts_for_user" placeholder="{{ __('company.Close Contract.fields.Total') }}" name="total_amounts_for_user" readonly>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="total_amounts_for_company">{{ __('مبالغ مستحقة للشركة') }}</label>
                                        <input type="number" class="form-control" id="total_amounts_for_company" placeholder="{{ __('company.Close Contract.fields.Total') }}" name="total_amounts_for_company" readonly>
                                    </div>

                                    <div id="outcome" class="col-12"></div> --}}

                                </div>

                                <input id="check_submit" 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('signature_pad.umd.js') }}"></script>
<script src="{{ asset('canvas1.js') }}"></script>
<script src="{{ asset('canvas2.js') }}"></script>
<script src="{{ asset('canvas3.js') }}"></script>
<script src="{{ asset('canvas4.js') }}"></script>
<script src="{{ asset('canvas5.js') }}"></script>
<script src="{{ asset('canvas6.js') }}"></script>

<script src='{{ asset("company/$locale/plugins/flatpickr/flatpickr.js") }}'></script>

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

<script>
    $("#contracts-menu-box").attr("data-active", "true");
</script>

<script>
    $(document).ready(function() {
            function draw_image(canvasID, imageLink) {
                var img = new Image();
                img.onload = function() {
                    var ctx = $(canvasID)[0].getContext('2d');
                    var canvasWidth = $(canvasID).width();
                    var canvasHeight = $(canvasID).height();

                    // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
                    const imageWidth = img.naturalWidth;
                    const imageHeight = img.naturalHeight;

                    // Set scale to fit image to canvas,
                    const scale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);

                    // Set new image dimensions.
                    const scaledWidth = imageWidth * scale;
                    const scaledHeight = imageHeight * scale;

                    ctx.drawImage(img, (canvasWidth - scaledWidth) / 2, (canvasHeight - scaledHeight) / 2,
                        scaledWidth,
                        scaledHeight);
                }
                img.src = imageLink;
            }

            draw_image("#mycanvas1", '{{ $last_check->right_side }}');
            clearButton1.addEventListener("click", function(event) {
                signaturePad1.clear();
                draw_image("#mycanvas1", '{{ $last_check->right_side }}');
            });

            draw_image("#mycanvas2", '{{ $last_check->left_side }}');
            clearButton2.addEventListener("click", function(event) {
                signaturePad2.clear();
                draw_image("#mycanvas2", '{{ $last_check->left_side }}');
            });

            draw_image("#mycanvas3", '{{ $last_check->front_side }}');
            clearButton3.addEventListener("click", function(event) {
                signaturePad3.clear();
                draw_image("#mycanvas3", '{{ $last_check->front_side }}');
            });

            draw_image("#mycanvas4", '{{ $last_check->back_side }}');
            clearButton4.addEventListener("click", function(event) {
                signaturePad4.clear();
                draw_image("#mycanvas4", '{{ $last_check->back_side }}');
            });

            draw_image("#mycanvas5", '{{ $last_check->top_side }}');
            clearButton5.addEventListener("click", function(event) {
                signaturePad5.clear();
                draw_image("#mycanvas5", '{{ $last_check->top_side }}');
            });

            /*
            var img2 = new Image();
            img2.onload = function() {
                var ctx2 = $('#mycanvas2')[0].getContext('2d');

                var canvasWidth = $("#mycanvas2").width();
                var canvasHeight = $("#mycanvas2").height();

                // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
                const imageWidth = img2.naturalWidth;
                const imageHeight = img2.naturalHeight;

                // Set scale to fit image to canvas,
                const scale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);

                // Set new image dimensions.
                const scaledWidth = imageWidth * scale;
                const scaledHeight = imageHeight * scale;

                ctx2.drawImage(img2, (canvasWidth - scaledWidth) / 2, (canvasHeight - scaledHeight) / 2,
                    scaledWidth, scaledHeight);
            }
            img2.src = '{{ asset($last_check->left_side) }}';


            var img3 = new Image();
            img3.onload = function() {
                var ctx3 = $('#mycanvas3')[0].getContext('2d');
                var canvasWidth = $("#mycanvas3").width();
                var canvasHeight = $("#mycanvas3").height();

                // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
                const imageWidth = img3.naturalWidth;
                const imageHeight = img3.naturalHeight;

                // Set scale to fit image to canvas,
                const scale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);

                // Set new image dimensions.
                const scaledWidth = imageWidth * scale;
                const scaledHeight = imageHeight * scale;

                ctx3.drawImage(img3, (canvasWidth - scaledWidth) / 2, (canvasHeight - scaledHeight) / 2,
                    scaledWidth, scaledHeight);
            }
            img3.src = '{{ asset($last_check->front_side) }}';


            var img4 = new Image();
            img4.onload = function() {
                var ctx4 = $('#mycanvas4')[0].getContext('2d');

                var canvasWidth = $("#mycanvas4").width();
                var canvasHeight = $("#mycanvas4").height();

                // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
                const imageWidth = img4.naturalWidth;
                const imageHeight = img4.naturalHeight;

                // Set scale to fit image to canvas,
                const scale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);

                // Set new image dimensions.
                const scaledWidth = imageWidth * scale;
                const scaledHeight = imageHeight * scale;

                ctx4.drawImage(img4, (canvasWidth - scaledWidth) / 2, (canvasHeight - scaledHeight) / 2,
                    scaledWidth, scaledHeight);

            }
            img4.src = '{{ asset($last_check->back_side) }}';


            var img5 = new Image();
            img5.onload = function() {
                var ctx5 = $('#mycanvas5')[0].getContext('2d');

                var canvasWidth = $("#mycanvas5").width();
                var canvasHeight = $("#mycanvas5").height();

                // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
                const imageWidth = img5.naturalWidth;
                const imageHeight = img5.naturalHeight;

                // Set scale to fit image to canvas,
                const scale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);

                // Set new image dimensions.
                const scaledWidth = imageWidth * scale;
                const scaledHeight = imageHeight * scale;

                ctx5.drawImage(img5, (canvasWidth - scaledWidth) / 2, (canvasHeight - scaledHeight) / 2,
                    scaledWidth, scaledHeight);

            }
            img5.src = '{{ asset($last_check->top_side) }}';
            */
        });
</script>

<script>
$('#calculate').on('click', function() {
    $.ajax({
                url: "{{ route('company.contract.calculateClose') }}",
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    reservation_id: {{ $reservation->id }},
                    old_mileage: $("#old_mileage").val(),
                    mew_mileage: $("#mew_mileage").val(),
                    car_delivery_date: $("#car_delivery_date").val(),
                    car_delivery_time: $("#car_delivery_time").val(),
                    fuel_cost: $("#fuel_input").val(),
                    car_wash_cost: $("#car_wash_input").val(),
                    damage_cost: $("#damage_input").val(),
                },
                success: function(result) {
                    if (result.status == false) {
                        let message = "<ul class='list-unstyled'>";
                        $.each(result.message, function(key, value) {
                            message+= `<li>${value}</li>`;
                        });
                        message += "</ul>";
                        swal({
                            html: message,
                            type: 'warning',
                            confirmButtonText: '{{__("general.ok")}}',
                        });

                    } else if (result.status == true) {
                        $("#mileage_cost").val(result.mileage_cost);
                        $("#hours_cost").val(result.hours_cost);
                        $("#fuel_cost").val(result.fuel_cost);
                        $("#car_wash_cost").val(result.car_wash_cost);
                        $("#damage_cost").val(result.damage_cost);
                        $("#total_costs").val(result.total_costs);
                        /* $("#total_amounts_for_user").val(result.total_amounts_for_user);
                        $("#total_amounts_for_company").val(result.total_amounts_for_company);
                        $("#outcome").html(result.outcome_message) */
                    }
                },
            });
});
</script>


{{-- <script>
    $('#calculate').on('click', function() {
            var difference_between_old_new_millage = Number($('#mew_mileage').val()) - Number(
                "{{ $reservation->checks()->latest()->first()?->mileage }}");
            var price_per_extra_millage = Number("{{ $reservation->car->extra_miles_price }}");
            var total_mileage_cost = difference_between_old_new_millage * price_per_extra_millage;
            $("#total_mileage_cost").val(total_mileage_cost);

            //********************************************************//

            var old_date = new Date("{{ $reservation->end_date }}" + ":" + "{{ $reservation->end_time }}");
            var new_date = new Date($("#car_delivery_date").val() + ":" + $("#car_delivery_time").val());
            var milliseconds = new_date.getTime() - old_date.getTime();
            var hours = Math.floor(milliseconds / (60 * 60 * 1000));
            var price_per_extra_hour = Number("{{ $reservation->car->extra_hour_price }}");
            var total_hours_cost = hours * price_per_extra_hour;
            $("#total_hours_cost").val(total_hours_cost);

            //********************************************************//

            var total_costs = total_mileage_cost + total_hours_cost;

            $("#total_costs").val(total_costs);

        });
</script>
 --}}

<script>
    $(document).ready(function(){

        var empty_client_signature = $('#mycanvas6')[0];
        var empty_client_signature_toDataURL = empty_client_signature.toDataURL();

    $("body").on("click", "#check_submit", function() {

            $("form").submit(function(e) {
                e.preventDefault();
            });

            var right_side_canvas = $('#mycanvas1')[0];
            var left_side_canvas = $('#mycanvas2')[0];
            var front_side_canvas = $('#mycanvas3')[0];
            var back_side_canvas = $('#mycanvas4')[0];
            var top_side_canvas = $('#mycanvas5')[0];
            var client_signature = $('#mycanvas6')[0];
            var reservation_id = $("#reservation_id").val();
            var car_id = $("#car_id").val();
            var car_details_id = $("#car_details_id").val();
            var mileage = $("#mew_mileage").val();
            var fuel_cost = $("#fuel_cost").val();
            var fuel_meter = $("#fuel_meter").val();
            var car_wash = $("#car_wash").val();
            var car_wash_cost = $("#car_wash_cost").val();
            var damage_cost = $("#damage_cost").val();
            var hours_cost = $("#hours_cost").val();
            var mileage_cost = $("#mileage_cost").val();
            var car_delivery_date = $("#car_delivery_date").val();
            var car_delivery_time = $("#car_delivery_time").val();
            var total_costs = $("#total_costs").val();
            var total_amounts_for_user = $("#total_amounts_for_user").val();
            var total_amounts_for_company = $("#total_amounts_for_company").val();

            const blank = document.createElement('canvas');
            blank.width = client_signature.width;
            blank.height = client_signature.height;
            if(client_signature.toDataURL() === empty_client_signature_toDataURL){
                swal({
                    title: "{{ __('company.Contracts.messages.you must complete the necessary signatures') }}",
                    type: 'warning',
                    confirmButtonText: '{{__("general.ok")}}',
                    });
            }else{
                $.ajax({
                url: "{{ route('company.contract.close') }}",
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    right_side: right_side_canvas.toDataURL(),
                    left_side: left_side_canvas.toDataURL(),
                    front_side: front_side_canvas.toDataURL(),
                    back_side: back_side_canvas.toDataURL(),
                    top_side: top_side_canvas.toDataURL(),
                    client_signature: client_signature.toDataURL(),
                    reservation_id: reservation_id,
                    car_id: car_id,
                    car_details_id: car_details_id,
                    mileage: mileage,
                    car_delivery_date: car_delivery_date,
                    car_delivery_time: car_delivery_time,
                    total_costs: total_costs,
                    total_amounts_for_user: total_amounts_for_user,
                    total_amounts_for_company: total_amounts_for_company,
                    fuel_meter: fuel_meter,
                    car_wash: car_wash,
                    car_wash_cost: car_wash_cost,
                    damage_cost : damage_cost,
                    fuel_cost: fuel_cost,
                    hours_cost: hours_cost,
                    mileage_cost: mileage_cost,
                    },
                success: function(result) {
                    if (result.status == false) {
                        let message = "<ul class='list-unstyled'>";
                        $.each(result.errors, function(key, value) {
                            message+= `<li>${value}</li>`;
                        });
                        message += "</ul>";
                        swal({
                            html: message,
                            type: 'warning',
                            confirmButtonText: '{{__("general.ok")}}',
                        });

                    } else if (result.status == true) {
                        swal({
                            title: result.msg,
                            type: 'success',
                            confirmButtonText: '{{__("general.ok")}}',
                        });
                        setTimeout(() => {
                            window.location = result.url;
                        }, 1500);
                    }
                },
            });
            }
        });
        });
</script>

<script>
    $("#fuel_meter").on("change", function() {
        if($(this).val() < {{ $reservation->checks()->latest()->first()->fuel_meter }})
        {
            $("#fuel_input").parent().removeClass("d-none");
        }else{
            $("#fuel_input").parent().addClass("d-none");
        }
    });
</script>

<script>
    $("#car_wash").on("change", function() {
        if($(this).val() < $("#old_car_wash").val())
        {
            $("#car_wash_input").parent().removeClass("d-none");
        }else{
            $("#car_wash_input").parent().addClass("d-none");
        }
    });
</script>


@endsection