@extends('site.layouts.master')

@section('title')
    <title>@lang('site.confidentiality_agreement')</title>
@endsection
@section('metatags')
    <link rel="canonical" href="{{str_replace('public/', '', url()->current())}}">
    <link rel="alternate" hreflang="@if (app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
        href="@if (app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')){{str_replace('/en/', '/ar/', str_replace('public/', '', url()->current()))}}@else{{str_replace('/ar/', '/en/', str_replace('public/', '', url()->current()))}}@endif">
    <link rel="alternate" hreflang="@if (app()->getLocale() == 'ar'){{'ar'}} @else{{'en'}}@endif"
        href="{{str_replace('public/', '', url()->current())}}">
@endsection
@section('content')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.6/signature_pad.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <div class="customWidth">
        @if (session()->get('success') != null)
            <div class="alert alert-light col-auto mx-auto text-center" role="alert">
                <p class="text-success p-1 m-1">@lang('site.' . session()->get('success'))</p>
            </div>
        @endif
        @if ($errors)
            <div class="mx-auto text-center d-flex flex-wrap justify-content-around" role="alert">
                @foreach ($errors->all() as $error)
                    <p class="alert alert-danger p-1 m-1 col-12 col-md-5">{{ $error }}</p>
                @endforeach
            </div>
        @endif
        <h1 class="text-blue SF26_31Bold SF60_50Bold-lg">@lang('site.confidentiality_agreement')</h1>
        <form class="my-4" method="post" action="{{ route('saveConfidentialityAgreement') }}">
            @csrf
            <p class="text-3b3b3b SF20_24Bold-Important SF40_50Bold-lg">@lang('site.license_quote')</p>
            <div class="d-lg-flex justify-content-lg-between">
                <div class="w-48">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder" placeholder="@lang('site.first_name')" name="text_first_name">
                </div>
                <div class="w-48">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder" placeholder="@lang('site.last_name')" name="text_last_name">
                </div>
            </div>
            <p class="text-3b3b3b SF14_25Bold SF22_35Bold-lg">@lang('site.hereinafter_referred')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">@lang('site.parties_agree')</p>
            <p class="text-3b3b3b SF20_24Bold-Important SF40_50Bold-lg">@lang('site.parties_agree1')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">1- @lang('site.agreement_rule1')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">2- @lang('site.agreement_rule2')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">3- @lang('site.agreement_rule3')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">4- @lang('site.agreement_rule4')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">5- @lang('site.agreement_rule5')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">6- @lang('site.agreement_rule6')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">7- @lang('site.agreement_rule7')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">8- @lang('site.agreement_rule8')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">9- @lang('site.agreement_rule9')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">10- @lang('site.agreement_rule10')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">11- @lang('site.agreement_rule11')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">12- @lang('site.agreement_rule12')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">13- @lang('site.agreement_rule13')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">14- @lang('site.agreement_rule14')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">@lang('site.a')- @lang('site.agreement_rule15')</p>
            <p class="text-9b9b9b SF14_20Medium SF22_35Regular-lg">@lang('site.b')- @lang('site.agreement_rule16')</p>
            <input type="hidden" id="gtokenagreement" name="gToken">
            <div class="d-lg-flex justify-content-lg-between">
                <div class="w-48 d-lg-flex flex-lg-column justify-content-lg-between">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.first_name')" name="first_name">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.last_name')" name="last_name">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.Email')" name="email" type="email">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.Mobile')" name="mobile">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.country')" name="country">
                </div>
                <div class="w-48 d-lg-flex flex-lg-column justify-content-lg-between">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.detailed_address')" name="address">
                    <input class="form-control rounded-3 border-d1d1d1 my-2 whereLivePlaceholder py-lg-3" placeholder="@lang('site.how_find')" name="how_find">
                    <div id="signature-pad">
                        <p class="text-3b3b3b SF20_24Bold-Important">@lang('site.sign_here') :</p>
                        <canvas class="rounded-3 border border-d1d1d1 p-0 canvasStyle"></canvas>
                        <p id="sign_alert" class="d-none alert alert-danger">@lang('site.You Must Sign First')</p>
                        <input type="hidden" name="signature" id="signature-data">
                    </div>
                    <input type="hidden" name="agreement_image" id="agreement_image">
                    <div class="form-group text-center">
                        <a id="submit" class="text-white py-3 btn bg-red w-100 SF20_24Bold-Important my-2">@lang('site.submit')</a>
                        <button hidden type="submit" id="doSubmitWithCaptchagtokenagreement"></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        var canvas = document.querySelector("canvas");
        var signaturePad = new SignaturePad(canvas);
        var written = false;
        signaturePad.addEventListener("beginStroke", () => {
          console.log("Signature started");
            written = true;
            $("#sign_alert").addClass('d-none');
        }, { once: true });
        $("#submit").on("click", function(e) {
            if(written == true){
                var signatureData = signaturePad.toDataURL();
                $("#signature-data").val(signatureData);
                var elementToCapture = document.body;
                html2canvas(elementToCapture).then(function(canvos) {
                    // Convert canvas to image data URL
                    var imageDataUrl = canvos.toDataURL('image/webp');
                    $("#agreement_image").val(imageDataUrl);
                    Captcha('gtokenagreement');
                });
            }
            if(written == false){
                $("canvas").removeClass('border-dark');
                $("#sign_alert").removeClass('d-none');
                $("canvas").addClass('border-danger');
            }
        });
    </script>
@endsection