@extends('layouts.central.app')

@section('page_css')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&family=Birthstone&family=Dancing+Script:wght@400..700&family=Ephesis&family=Great+Vibes&family=Kalam:wght@300;400;700&family=Marck+Script&family=MonteCarlo&family=Satisfy&family=Whisper&display=swap" rel="preload" as="style">
    <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&family=Birthstone&family=Dancing+Script:wght@400..700&family=Ephesis&family=Great+Vibes&family=Kalam:wght@300;400;700&family=Marck+Script&family=MonteCarlo&family=Satisfy&family=Whisper&display=swap" rel="stylesheet">

    <style>
        .hidden {
            display: none;
        }

        label {
            color: #666;
        }

        .alex-brush {
            font-family: "Alex Brush", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .birthstone {
            font-family: "Birthstone", cursive;
            font-weight: 400;
            font-style: normal;
        }


        .dancing-script {
            font-family: "Dancing Script", cursive;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        }

        .ephesis {
            font-family: "Ephesis", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .great-vibes {
            font-family: "Great Vibes", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .kalam {
            font-family: "Kalam", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .marck-script {
            font-family: "Marck Script", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .montecarlo {
            font-family: "MonteCarlo", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .satisfy {
            font-family: "Satisfy", cursive;
            font-weight: 400;
            font-style: normal;
        }

        .whisper {
            font-family: "Whisper", cursive;
            font-weight: 400;
            font-style: normal;
        }
    </style>
@endsection

@section('page_hero')
    <!-- Hero Area Start -->
    <div id="hero-area" class="hero-area-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-12 col-sm-12 col-xs-12">
                    <div class="contents">
                        <h2 class="head-title">Already Registered?</h2>
                        <p>Please click the button below to be redirected to the logic site. </p>
                        <div class="header-button">
                            <a rel="nofollow" href="{{ route('central.tenants.login') }}" class="btn btn-common">Login Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5 col-md-12 col-sm-12 col-xs-12">
                    <div class="intro-img">
                        <img class="img-fluid" src="{{ asset('/central/assets/img/intro-mobile.png') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->
@endsection

@section('page_content')
    <!-- Preload fonts section -->
    <div id="hidden-fonts-section"></div>

    <!-- Services Section Start -->
    <section id="services" class="section-padding bg-gray">
        <div class="container">
            <div class="section-header text-center">
                <h2 class="section-title wow fadeInDown" data-wow-delay="0.3s"> Signature </h2>
                <p class="mt-2 text-sm text-center text-gray-600 leading-5 max-w">
                    You may use the signature pad to draw your signature, or you may enter your name and select the style of font to generate a signature.
                </p>
            </div>
            <ul class="nav nav-tabs justify-content-center mb-3" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="signature-pad-tab" data-toggle="tab" href="#signature-pad" role="tab" aria-controls="signature-pad" aria-selected="true">Signature Pad</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="signature-text-field" data-toggle="tab" href="#signature-text" role="tab" aria-controls="signature-text" aria-selected="false">Signature text</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="signature-pad" role="tabpanel" aria-labelledby="signature-pad-tab">
                    <form action="{{ route('central.tenants.signature_pad.submit') }}" method="POST" novalidate="true" id="form">
                        @csrf
                        @honeypot
                        <x-creagia-signature-pad border-color="#eaeaea" pad-classes="me-2 rounded" button-classes="btn btn-primary mt-2" :disabled-without-signature="true" />
                    </form>
                </div>

                <div class="tab-pane fade" id="signature-text" role="tabpanel" aria-labelledby="signature-text-field">
                    <form action="{{ route('central.tenants.signature_text.submit') }}" method="POST" novalidate="true" id="form">
                        <div class="row">
                            <div class="col-12 col-lg-6">
                                <div class="form-group">
                                    <label for="signature_name">Name</label>
                                    <input id="signature_name" type="text" class="form-control" name="signature_name" value="" autocomplete="off" placeholder="Enter your name" />
                                </div>
                            </div>

                            <div class="col-12 col-lg-6">
                                <div class="form-group">
                                    <label for="signature_style">Style</label>
                                    <select id="signature_style" class="form-select" name="signature_style">
                                        <option value="" selected disabled hidden>Select Style</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-12">
                                <p>Preview</p>
                                <canvas id="preview" height="100" style="display: none;"></canvas>
                                <img id="preview_image">
                                <input type="text" class="hidden" name="signature_data" id="signature_data" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script src="{{ asset('vendor/sign-pad/sign-pad.min.js') }}"></script>
    <script>
        document.fonts.ready.then(() => {
            // Define variables
            var signature_name = document.getElementById('signature_name');
            var signature_style = document.getElementById("signature_style");
            var signature_data = document.getElementById("signature_data");
            var preview = document.getElementById('preview').getContext('2d');
            var preview_image = document.getElementById('preview_image');
            var hidden_fonts_section = document.getElementById('hidden-fonts-section');
            var dataUrl = null;

            // Populate list
            var list = ["Alex Brush", "Birthstone", "Dancing Script", "Ephesis", "Great Vibes", "Kalam", "Marck Script", "MonteCarlo", "Satisfy", "Whisper"];
            for (var i = 0; i < list.length; i++) {
                var option = document.createElement("option");
                option.text = list[i];
                option.value = list[i];
                signature_style.add(option);

                hidden_fonts_section.innerHTML += `<span style="font-family: '${list[i]}';visibility: hidden; position: absolute;">${list[i]}</span>`;
            }


            // Input listener from text to modify preview
            signature_name.addEventListener('input', function(e) {
                preview.canvas.width = preview.measureText(e.target.value).width + 100;
                preview.font = `50px '${signature_style.value}'`;
                preview.fillText(e.target.value, 5, 50);

                dataUrl = preview.canvas.toDataURL();
                preview_image.src = dataUrl;
                signature_data.value = dataUrl;
            });
            signature_style.addEventListener('change', function(e) {
                preview.canvas.width = preview.measureText(signature_name.value).width + 100;
                preview.font = `50px '${e.target.value}'`;
                preview.fillText(signature_name.value, 5, 50);

                dataUrl = preview.canvas.toDataURL();
                preview_image.src = dataUrl;
                signature_data.value = dataUrl;
            });
        })
    </script>
@endsection