@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" />
@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_transport.fields.check.transport_information') }} :</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">



                            <form id="check_form" action="" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-row mb-4">

                                    <div class="form-group col-md-6">
                                        <label for="from_branch">{{ __('company.car_transport.fields.check.from_branch') }}</label>
                                        <input type="text" class="form-control" id="from_branch" placeholder="{{ __('company.car_transport.fields.check.from_branch') }}" name="from_branch" value="{{ $car_transport?->fromBranch?->name }}" readonly>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="to_branch">{{ __('company.car_transport.fields.check.to_branch') }}</label>
                                        <input type="text" class="form-control" id="to_branch" placeholder="{{ __('company.car_transport.fields.check.to_branch') }}" name="to_branch" value="{{ $car_transport?->toBranch?->name }}" readonly>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="car_type">{{ __('company.car_transport.fields.check.car_type') }}</label>
                                        <input type="text" class="form-control" id="car_type" placeholder="{{ __('company.car_transport.fields.check.car_type') }}" name="car_type" value="{{ $car_transport?->carDetails?->car?->models->name }}" readonly>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="car">{{ __('company.car_transport.fields.check.car') }}</label>
                                        <input type="text" class="form-control" id="car" placeholder="{{ __('company.car_transport.fields.check.car') }}" name="car_type" value="{{ $car_transport?->carDetails?->car?->models->name }} | {{ $car_transport?->carDetails?->car?->model }} | {{ $car_transport?->carDetails?->plate }}" readonly>
                                    </div>

                                    <input type="hidden" class="form-control" id="transport_request_id" value="{{ $car_transport?->id }}" readonly>
                                    <input type="hidden" class="form-control" id="from_branch_id" value="{{ $car_transport?->from_branch_id }}" readonly>
                                    <input type="hidden" class="form-control" id="car_id" value="{{ $car_transport?->car_id  }}" readonly>
                                    <input type="hidden" class="form-control" id="car_details_id" value="{{ $car_transport?->car_details_id  }}" readonly>

                                    <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-12">
                                        <label for="mileage">{{ __('validation.attributes.miles') }}</label>
                                        <input type="number" id="mileage" class="form-control" placeholder="{{ __('validation.attributes.miles') }}" name="mileage">
                                    </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="إرسال">
                            </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() {

            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') }}');
            });

        });
</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 transport_request_id = $("#transport_request_id").val();
            var from_branch_id = $("#from_branch_id").val();
            var car_id = $("#car_id").val();
            var car_details_id = $("#car_details_id").val();
            var mileage = $("#mileage").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.car_transport_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(),
                    transport_request_id: transport_request_id,
                    from_branch_id: from_branch_id,
                    car_id: car_id,
                    car_details_id: car_details_id,
                    mileage: mileage,
                },
                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