@extends('layouts.frontend')

@section('content')
<link rel="stylesheet" href="{{ asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    #signature-pad {
        width: 100%;
        max-width: 100%;
    }

    #signatureCanvas {
        width: 100%;
        height: auto;
        border: 1px solid #000;
    }

    .submitbtn {
        margin-top: 10px;
    }

    #clear-signature {
        margin-top: 10px;
        margin-left: 5px;
    }
</style>
<div class="container">
    <div class="col-md-6 offset-md-3">
        <div class="authentication-inner py-4">
            <!-- Login -->
            <div class="card bg-white">
                <div class="card-body">
                    <!-- Logo -->
                    <div class="app-brand justify-content-center mb-4 mt-2" style="text-align: center;">
                        <a href="javascript::void(0);" class="app-brand-link gap-2">
                            <span class="app-brand-logo demo ">
                                <img src="{{ $setting->project_logo_dark }}" style="height:60px">
                            </span>
                        </a>
                    </div>
                    <div class="text-center">
                        <h5 class="mb-1 pt-2">Welcome to {{ $setting->project_name }}</h5>
                        <h2 class="mb-4">Driver Registration</h2>
                    </div>

                    <form id="driver_form"> @csrf
                        <div class="row">
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="name">Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" id="name"
                                        value="{{ old('name') }}">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="photo">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" name="email" id="email"
                                        value="{{ old('email') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Contact No <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="phone" id="phone"
                                        value="{{ old('phone') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">WhatsApp No <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="whatsapp_number" id="whatsapp_number"
                                        value="{{ old('whatsapp_number') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="name">Available Start Time</label>
                                    <input type="time" class="form-control" name="start" id="name"
                                        value="{{ old('start') }}">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="photo">Available End Time</label>
                                    <input type="time" class="form-control" name="end" id="email"
                                        value="{{ old('end') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_min_hour">Car Name</label>
                                    <input type="text" class="form-control" name="car_name" id="car_name"
                                        value="{{ old('car_name') }}">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Car Model</label>
                                    <input type="text" class="form-control" name="car_model" id="car_model"
                                        value="{{ old('car_model') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_min_hour">Car Number Plate</label>
                                    <input type="text" class="form-control" name="car_number_plate"
                                        id="car_number_plate" value="{{ old('car_number_plate') }}">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Social Security Number <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="social_security_number"
                                        id="social_security_number" value="{{ old('social_security_number') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_min_hour">Zelle Account Name</label>
                                    <input type="text" class="form-control" name="zelle_account_name"
                                        id="zelle_account_name" value="{{ old('zelle_account_name') }}">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Zelle Payment Information</label>
                                    <input type="text" class="form-control" name="zelle_payment_information"
                                        id="zelle_payment_information" value="{{ old('zelle_payment_information') }}">
                                </div>
                            </div>

                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_min_hour">Address <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="address" id="address"
                                        value="{{ old('address') }}">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Vehicle Type</label>
                                    <select class="select2" name="vehicle_type[]" multiple="multiple"
                                        data-placeholder="Select a Vehicle" style="width: 100%;">
                                        @foreach($vehicles as $vehicle)
                                        <option value="{{$vehicle->name}}">{{$vehicle->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Vehicle Images <span
                                            class="text-danger">*</span></label>
                                    <input type="file" class="form-control" name="vehicle_image[]" multiple="multiple"
                                        id="vehicle_image">
                                </div>
                            </div>
                            <div class="col-md-6 my-2">
                                <div class="form-group">
                                    <label for="hrly_adt_amount_per_hour">Driving License Images <span
                                            class="text-danger">*</span></label>
                                    <input type="file" class="form-control" name="driving_license_image[]"
                                        multiple="multiple" id="driving_license_image">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <label class="" for=""><b>Signature</b> <span class="text-danger">*</span></label>
                                <div id="signature-pad">
                                    <canvas id="signatureCanvas"></canvas>
                                </div>
                                <input type="hidden" name="signature_data" id="signature_data">
                                <button type="button" class="btn btn-danger" id="clear-signature"
                                    style="float: right;">Clear</button>
                            </div>

                        </div>

                        <div class="mb-3 d-flex justify-content-center w-100">
                            <button class="btn btn-primary" id="register_driver_button">Register Driver</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /Register -->
        </div>
    </div>
</div>

<!-- Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.4/signature_pad.js"></script>

<script>
    $(document).ready(function() {
        $('.select2').select2();

        var canvas = document.querySelector("canvas");
        var signaturePad = new SignaturePad(canvas);

        $("#clear-signature").click(function() {
            signaturePad.clear();
        });

        $('#driver_form').on('submit', function(e) {

            let submitBtn = $('#register_driver_button');
            let originalText = submitBtn.text();
            submitBtn.prop('disabled', true).text('Loading ...');

            e.preventDefault();
            var signatureData = signaturePad.toDataURL();
            $("#signature_data").val(signatureData);
            
            if (signaturePad.isEmpty()) {
                $(`#signature-pad`).after(`<span class="text-danger error-message">The signature is required.</span>`);
                 submitBtn.prop('disabled', false).text(originalText);
            } else {
                let formData = new FormData(this);

                $.ajax({
                    type: "POST",
                    url: "{{ route('drivers.store') }}",
                    data: formData,
                    contentType: false, // Important for file uploads
                    processData: false, // Prevents jQuery from processing the data
                    success: function(response) {
                        window.location.href = "{{ route('drivers.thankyou') }}";
                        submitBtn.prop('disabled', false).text(originalText);
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        $('.error-message').remove();
                        for (const [key, messages] of Object.entries(errors)) {
                            $(`#${key}`).after(`<span class="text-danger error-message">${messages[0]}</span>`);
                        }

                        submitBtn.prop('disabled', false).text(originalText);
                    }
                });
            }
        });
    });
</script>

<script>
    function resizeCanvas() {
            const canvas = document.getElementById('signatureCanvas');
            const container = document.getElementById('signature-pad');
            const containerWidth = container.offsetWidth;
            canvas.width = containerWidth;
            canvas.height = containerWidth / 3.625; // Assuming original aspect ratio is maintained (725/200)
        }
        window.addEventListener('resize', resizeCanvas);
        window.addEventListener('load', resizeCanvas);
</script>
@endsection