@extends('company.layout.content')

@section('customTitle')
{{ __('general.add_check') }}
@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" />
<style>
    @font-face {
        font-family: 'GE_SS';
        src: url('https://arbfonts.com//wp-content/fonts/new-arabic-fonts//GE_SS_Two_Light.otf');
        font-weight: normal;
        font-style: normal;
    }

    body * {
        font-family: "GE_SS";
        font-weight: bold;
    }
</style>
@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.Car Check.fields.Contract And Car Information') }} :</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">



                            <form id="check_form" action="{{ route('company.check.store') }}" 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="{{ $contract?->serial_number }}" readonly>
                                    </div>

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

                                    <input type="hidden" class="form-control" id="car_id" placeholder="آي دي السيارة" name="car_id" value="{{ $contract?->reservation?->car?->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="{{ $contract?->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="{{ $contract?->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="{{ $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="{{ $contract?->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="{{ __('company.Car Check.fields.' . $contract?->reservation?->car->gear) }}" readonly>
                                    </div>


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

                                    <div class="col-12 mb-3">
                                        <h6>{{ __('general.add_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="mileage">{{ __('validation.attributes.miles') }}</label>
                                        <input type="number" id="mileage" class="form-control" placeholder="{{ __('validation.attributes.miles') }}" name="mileage">
                                    </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">
                                        <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>

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

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

@section('customScript')

{{-- <script src="https://dozo-store.uroad.app/jSignature.min.js"></script> --}}
<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>
    $(document).ready(function() {
            /*
                        var img = new Image();
                        $("#right_side").jSignature();
                        img.onload = function() {
                            var ctx = $('.jSignature')[0].getContext('2d');
                            ctx.drawImage(img, 0, 0, );
                        }
                        img.src = 'http://127.0.0.1:8000/company/ar/assets/img/right_side.jpeg';

                        $("#right_side_clear").click(function() {
                            var canvas = $('#right_side .jSignature')[0];
                            canvas.width = canvas.width;
                        });



                        var img2 = new Image();
                        $("#left_side").jSignature();
                        img2.onload = function() {
                            var ctx = $('.jSignature')[1].getContext('2d');
                            ctx.drawImage(img2, 0, 0, );
                        }
                        img2.src = 'http://127.0.0.1:8000/company/ar/assets/img/left_side.jpeg';

                        $("#right_side_clear").click(function() {
                            var canvas = $('#right_side .jSignature')[0];
                            canvas.width = canvas.width;
                        });


                        var img3 = new Image();
                        $("#fb_side").jSignature();
                        img3.onload = function() {
                            var ctx = $('.jSignature')[2].getContext('2d');
                            ctx.drawImage(img3, 0, 0, );
                        }
                        img3.src = 'http://127.0.0.1:8000/company/ar/assets/img/fb_side.jpg';

                        $("#right_side_clear").click(function() {
                            var canvas = $('#right_side .jSignature')[0];
                            canvas.width = canvas.width;
                        });

                        var img4 = new Image();
                        $("#top_side").jSignature();
                        */

            /*
            var img1 = new Image();
            img1.onload = function() {
                var ctx1 = $('#mycanvas1')[0].getContext('2d');
                ctx1.drawImage(img1, 0, 0, $("#mycanvas1").width(), $("#mycanvas1").height());
            }
            img1.src = '{{ asset('company/ar/assets/img/right_side.png') }}';
            */

            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", '{{ asset('company/ar/assets/img/right_side.png') }}');
            clearButton1.addEventListener("click", function(event) {
                signaturePad1.clear();
                draw_image("#mycanvas1", '{{ asset('company/ar/assets/img/right_side.png') }}');
            });

            draw_image("#mycanvas2", '{{ asset('company/ar/assets/img/left_side.png') }}');
            clearButton2.addEventListener("click", function(event) {
                signaturePad2.clear();
                draw_image("#mycanvas2", '{{ asset('company/ar/assets/img/left_side.png') }}');
            });

            draw_image("#mycanvas3", '{{ asset('company/ar/assets/img/front_side.png') }}');
            clearButton3.addEventListener("click", function(event) {
                signaturePad3.clear();
                draw_image("#mycanvas3", '{{ asset('company/ar/assets/img/front_side.png') }}');
            });

            draw_image("#mycanvas4", '{{ asset('company/ar/assets/img/back_side.png') }}');
            clearButton4.addEventListener("click", function(event) {
                signaturePad4.clear();
                draw_image("#mycanvas4", '{{ asset('company/ar/assets/img/back_side.png') }}');
            });

            draw_image("#mycanvas5", '{{ asset('company/ar/assets/img/above_side.png') }}');
            clearButton5.addEventListener("click", function(event) {
                signaturePad5.clear();
                draw_image("#mycanvas5", '{{ asset('company/ar/assets/img/above_side.png') }}');
            });

            /*
            var img1 = new Image();
            img1.onload = function() {
                var ctx1 = $('#mycanvas1')[0].getContext('2d');
                var canvasWidth = $("#mycanvas1").width();
                var canvasHeight = $("#mycanvas1").height();

                // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
                const imageWidth = img1.naturalWidth;
                const imageHeight = img1.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;

                ctx1.drawImage(img1, (canvasWidth - scaledWidth) / 2, (canvasHeight - scaledHeight) / 2,
                    scaledWidth,
                    scaledHeight);
            }
            img1.src = '{{ asset('company/ar/assets/img/right_side.png') }}';
            */


            /*
            var img2 = new Image();
            img2.onload = function() {
                var ctx2 = $('#mycanvas2')[0].getContext('2d');
                ctx2.drawImage(img2, 0, 0, $("#mycanvas2").width(), $("#mycanvas2").height());
            }
            img2.src = '{{ asset('company/ar/assets/img/left_side.png') }}';
            */

            /*
            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('company/ar/assets/img/left_side.png') }}';
            */

            /*
            var img3 = new Image();
            img3.onload = function() {
                var ctx3 = $('#mycanvas3')[0].getContext('2d');
                ctx3.drawImage(img3, 0, 0, $("#mycanvas3").width(), $("#mycanvas3").height());
            }
            img3.src = '{{ asset('company/ar/assets/img/front_side.png') }}';
            */

            /*             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('company/ar/assets/img/front_side.png') }}';
             */
            /*
            var img4 = new Image();
            img4.onload = function() {
                var ctx4 = $('#mycanvas4')[0].getContext('2d');
                ctx4.drawImage(img4, 0, 0, $("#mycanvas4").width(), $("#mycanvas4").height());
            }
            img4.src = '{{ asset('company/ar/assets/img/front_side.png') }}';
            */

            /*             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('company/ar/assets/img/back_side.png') }}';


                        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('company/ar/assets/img/above_side.png') }}';
             */
            /*
                        var canvas = document.getElementsByTagName('canvas')[3];

                         $('#top_side canvas')
                            .width("100%")
                            .height("auto");

                        $('#top_side canvas').removeAttr("height");
                        $('#top_side canvas').removeAttr("width");

                        $("#right_side_clear").click(function() {
                            var canvas = $('#right_side .jSignature')[0];
                            canvas.width = canvas.width;
                        });

             */


        });
</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 contract_id = $("#contract_id").val();
            var car_id = $("#car_id").val();
            var mileage = $("#mileage").val();
            var fuel_meter = $("#fuel_meter").val();
            var car_wash = $("#car_wash").val();

            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.check.store') }}",
                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(),
                    contract_id: contract_id,
                    car_id: car_id,
                    mileage: mileage,
                    fuel_meter : fuel_meter,
                    car_wash : car_wash
                },
                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>

@endsection