@extends('layouts.customer_no_content')

@section('content')
<div class="main-div">

    <section class="contect-sec enquiryn-page booking-confirmation">
        
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="contect-form">
                        <h3 class="text-center">Booking Confirmation</h3>
                        <form action="{{ route('send.booking-confirmation.mail') }}" class="row" method="post" enctype="multipart/form-data" name="contact_form" id="contact_form">
                            @csrf
                            @if (session()->has('success'))
                                <div class="alert alert-success">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    {{ session('success') }}
                                </div>
                            @endif
                                @if (session()->has('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif
                            @if (count($errors) > 0)    
                                <div class="row mb-2">
                                    <div class="col-12">
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="col-md-6">
                                <label for="">Name <span>*</span></label>
                                @if(Route::is('booking-confirmation'))
                                    <input type="hidden" name="page_name" value="trustmovers">
                                @else
                                    <input type="hidden" name="page_name" value="furniture-movers">
                                @endif
                                
                                <input type="text" id="name" placeholder="Name" name="name" value="{{ old('name') }}">
                                @error('name')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Reference Number <span>*</span></label>
                                <input type="text" id="reference_number" placeholder="Reference Number" name="reference_number" value="{{ old('reference_number') }}">
                                @error('reference_number')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Quotation <span>*</span></label>
                                <input type="text" id="quotation" placeholder="Quotation" name="quotation" value="{{ old('quotation') }}" >
                                @error('quotation')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">A 30% deposit is payable in advance to secure moving date:</label>
                                <input type="date" id="payable_in_advance" name="payable_in_advance_date" value="{{ old('payable_in_advance') }}">
                                @error('payable_in_advance')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="">Pick up address <span>*</span></label>
                                <textarea id="pick_up_address" placeholder="Pick up address" name="pick_up_address">{{ old('pick_up_address') }}</textarea>
                                @error('pick_up_address')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Mobile <span>*</span></label>
                                <input type="tel" placeholder="mobile" name="mobile" value="{{ old('mobile') }}">
                                @error('mobile')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Email <span>*</span></label>
                                <input type="text" placeholder="Email" name="email" value="{{ old('email') }}">
                                @error('email')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label for="">Please pack my goods on</label>
                                <input type="text" id="pack_my_goods" placeholder="Please pack my goods on" name="pack_my_goods" value="{{ old('pack_my_goods') }}">
                                @error('pack_my_goods')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Pickup my goods on <span>*</span></label>
                                <input type="text" id="pickup_my_goods" placeholder="Pickup my goods on" name="pickup_my_goods" value="{{ old('pickup_my_goods') }}">
                                @error('Pickup_my_goods')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="">Delivery address <span>*</span></label>
                                <textarea id="delivery_address" placeholder="Delivery address" name="delivery_address">{{ old('delivery_address') }}</textarea>
                                @error('delivery_address')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            
                            <div class="col-md-6">
                                <label for="">How did you hear about us <span>*</span></label>
                                    <label for="" class="labelbox">
                                    <input type="radio"  name="hear_about_us" value="Google" @checked(old('hear_about_us') == 'Google') checked>Google
                                </label>
        
                                    <label for="" class="labelbox">
                                    <input type="radio"  name="hear_about_us" value="Facebook" @checked(old('hear_about_us') == 'Facebook')>Facebook
                                </label>
                                    <label for="" class="labelbox">
                                    <input type="radio"  name="hear_about_us" value="Friends/Family" @checked(old('hear_about_us') == 'Friends/Family')>Friends/Family
                                </label>
                                <label for="" class="labelbox">
                                    <input type="radio"  name="hear_about_us" value="Radio" @checked(old('hear_about_us') == 'Radio')>Radio
                                </label>
                            </div>
                            <div class="col-md-6">
                                <label for="">Insurance <span>*</span></label>
                                <label for="" class="labelbox">
                                    <input type="radio"  name="insurance" value="1" @checked(old('insurance') == '1')>Yes</label>
                                <label for="" class="labelbox">
                                    <input type="radio"  name="insurance" value="0" @checked(old('insurance') == '0') checked>No</label>
                                @error('insurance')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label for="">Other instructions</label>
                                <textarea id="instructions" placeholder="Instructions" name="instructions">{{ old('instructions') }}</textarea>
                                @error('instructions')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="">Storage Require <span>*</span></label>
                                <label for="" class="labelbox">
                                    <input type="radio"  name="storage" value="1" @checked(old('storage') == '1') checked>Yes</label>
                                <label for="" class="labelbox">
                                    <input type="radio"  name="storage" value="0" @checked(old('storage') == '0')>No</label>
                            </div>
                            <div class="col-md-6">
                                <label for="">Date <span>*</span></label>
                                <input type="date" id="date" placeholder="Date" name="date" value="{{ old('date') }}" readonly>
                                @error('date')
                                        <span class="" role="alert">
                                            <strong class="error">{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                            {{-- Signature Code --}}
                                <div class="row signature text-center mt-3">
                                    <div class="col-md-3"></div>
                                    <div class="col-md-6 ">
                                    <label class="" for="">Signed by client :</label>
                                    <br/>
                        
                                    <canvas id="sigCanvas" style="border: 2px solid #000"></canvas>
                                    <div style="padding:10px">
                                        <button type="button" class="btn btn-secondary w-100" id="clear">Clear</button>
                                    </div>
                                    {{-- <div style="padding:10px">
                                        <button type="button" class="btn btnAddFile w-100" id="save" value="1">Save Signature</button>
                                    </div> --}}
                                    <div id="img-box">
                                        {{-- <img id="sigImg" name="sigImg"> --}}
                                        <input type="hidden" name="signature" id="signature" value="">
                                    </div>
                                    <input id="sigFile" name="sigFile" type="file" style="display: none !important">
                        
                                    <br/>
                                    <textarea id="signature64" name="signed" style="display: none"></textarea>
                                    </div>
                                    <div class="col-md-3"></div>
                                </div>
                                {{-- Signature Code --}}
                                <div class="row text-left">
                                    <div class="col-md-12">
                                        <label class="labelbox" for="terms_and_conditions">
                                            <input type="checkbox" name="terms_and_conditions" id="terms_and_conditions" required>
                                            I agree to the <a class="termsandconditions" href="{{ route('booking-terms-and-conditions') }}" target="_blank">Terms and Conditions</a>
                                        </label>
                                    </div>
                                </div>
                                
                            <div class="col-md-12">
                                <button type="submit" id="save" class="request-btn">Submit Form <svg width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.75 12H20.25" stroke="#F48120" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#F48120" stroke-width="1.5"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                    </a>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

<script>
    // Default Date Format of Today
document.addEventListener('DOMContentLoaded', (event) => {
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('date').value = today;
    });
  jQuery.validator.addMethod('alphabetsonly', function(value, element) {
    return this.optional(element) || /^[a-zA-Z\s]+$/i.test(value);
  }, "Letters and spaces only please");

  if ($("#contact_form").length > 0) {
    $.validator.addMethod("isToday", function(value, element) {
                const today = new Date().toISOString().split('T')[0];
                return this.optional(element) || value === today;
            }, "The date must be today's date.");
   $("#contact_form").validate({
    ignore: [],
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            mobile: {
                required: true
            },
            date: {
                required: true,
                isToday: true
            },
            reference_number: {
                required: true
            },
            quotation: {
                required: true
            },
            pick_up_address: {
                required: true
            },
            pickup_my_goods: {
                required: true
            },
            delivery_address: {
                required: true
            },
            signature: {
                required: true
            },
        },
        messages: {
            name: {
                required : 'Please Enter Name.',
            }, 
            email: {
                required : 'Please Enter Email.',
                email : 'Please Enter Correct Email.'
            },
            mobile: 'Please Enter Mobile.',
          reference_number: 'Please Enter Reference Number',
          quotation: 'Please Enter Quotation',
          pick_up_address: 'Please Enter Pick up Address',
          pickup_my_goods: 'Please Enter Pick up My Goods',
          delivery_address: 'Please Enter Delivery Address',
         },
       })
     }
</script>
{{-- For Signature --}}
<script type="text/javascript">
    var canvas = document.getElementById('sigCanvas');
    
    // Adjust canvas coordinate space taking into account pixel ratio,
    // to make it look crisp on mobile devices.
    // This also causes canvas to be cleared.
    
    function resizeCanvas() {
        // When zoomed out to less than 100%, for some very strange reason,
        // some browsers report devicePixelRatio as less than 1
        // and only part of the canvas is cleared then.
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }
  
    window.onresize = resizeCanvas;
    resizeCanvas();
    
    let signaturePad = new SignaturePad(canvas);
  
    document.getElementById('clear').addEventListener('click', function () {
        signaturePad.clear();
    });
    
    document.getElementById('save').addEventListener('click', function () {
        if (signaturePad.isEmpty()) {
            return; //alert("Please provide a signature first.");
        }
        
        let png = signaturePad.toDataURL('image/png');
        var blobdata = dataURLtoBlob(png.split(',')[1]);
  
        //Example var file = dataURLtoBlob(canvas.toDataURL());
        function dataURLtoBlob(dataURL) {
            // Decode the dataURL   
            var binary = atob(dataURL);
            // Create 8-bit unsigned array
            var array = [];
            for (var i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            // Return our Blob object
            return new Blob([new Uint8Array(array)], { type: 'image/png' });
        }
        let sigImg = document.getElementById("sigImg");
        document.getElementById("signature").value = png;
        //sigImg.src = png;
        //document.getElementById("sigFile").drawImage = png;
             
    });
    
    
    </script>
  {{-- For Signature --}}
@endsection