<!DOCTYPE html>
<html lang="en">

    <!-- Start - Head Section -->
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="csrf-token" content="{{ csrf_token() }}" /> 
        @yield('metades')
        @yield('title')
        <link rel="icon" href="{{ asset('favicon.ico') }}" />
        <link rel="stylesheet" href="{{ asset('css/utility.css') }}" />
        <link rel="stylesheet" href="{{ asset('css/header.css') }}" />
        <link rel="stylesheet" href="{{ asset('css/common.css') }}" />
        <link rel="stylesheet" href="{{ asset('css/footer.css') }}" />
        <script src="https://kit.fontawesome.com/235466af06.js" crossorigin="anonymous"></script>
        <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=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
        @yield('css')
        <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
        <section>
            <div class="TopBar">
                <div class="Left">
                    <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/Logo.png') }}" alt="Smart Education" class="Logo" loading="lazy" /></a>
                    <div class="Links">
                        <a href="{{ url('/') }}">Google Reviews</a>
                        <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/Facebook.png') }}" alt="Facebook" loading="lazy" /></a>
                        <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/Instagram-02.png') }}" alt="Instagram" loading="lazy" /></a>
                        <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/YouTube.png') }}" alt="YouTube" loading="lazy" /></a>
                    </div>
                </div>
                <div class="Right">
                    <!-- CTA Links -->
                    <div class="CTA-Links">
                        <p class="Callback" onclick="callBackOpen()">Request A Callback</p>
                        <a class="Payment" href="{{ url('/') }}">
                            <img src="{{ asset('assets/image/common/Wallet-02.png') }}" loading="lazy" />
                            <p>Online Payment</p>
                        </a>
                    </div>
                    <a class="Login" href="{{ url('/') }}">Login/Register</a>
                </div>
            </div>
            <header>
                <div class="container">
                    <input type="checkbox" id="check">
                    <div class="logoContainer">
                        <a class="Active" href="{{ url('/') }}">
                            <img src="{{ asset('assets/image/common/Logo.png') }}" alt="Smart Education" />
                        </a>
                    </div>
                    <div class="btnNav">
                        @include('layouts.top-menu')
                    </div>
                    <div class="btnMenuWrapper">
                        <div class="btnMenu">
                            <div></div>
                        </div>
                    </div>
                </div>
            </header>
        </section>
        <div class="btn-Float" onclick="callBackOpen()">
            <p>GET A CALLBACK</p>    
        </div>
        <div class="Callback-Form-BG">
            <form class="Callback-Form" action="action-callback.php" method="POST">
                <div class="Heading">
                    <h1>Get A Callback</h1>
                    <p>Please Provide These Details</p>
                </div>            
                <div class="Input">
                    <h4>Your Name</h4>
                    <input type="text" id="callback-name" name="name" required>
                </div>
                <div class="Input">
                    <h4>Mobile Number</h4>
                    <input type="text" id="callback-mobile" name="mobile" required>
                </div>
                <div class="Input">
                    <h4>Email Address</h4>
                    <input type="email" id="callback-email" name="email" required>
                </div>
                <div class="Buttons">
                    <button type="submit" class="Submit" name="submit">Send Request</button>
                    <p class="Close" onclick="callBackClose()">Close Form</p>
                </div>
            </form>
        </div>
        <script type="text/javascript">
            const Name = document.getElementById('callback-name')
            const Mobile = document.getElementById('callback-mobile')
            const Email = document.getElementById('callback-email')
            const Form = document.querySelector('.Callback-Form')
            const NameVerify = /^[a-zA-Z\s]{1,30}$/
            const MobileVerify = /^[0-9+]{1,15}$/
            const EmailVerify = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
            Form.addEventListener('submit' , (e) => {
                if ((NameVerify.test(Name.value))==false) {
                    alert(`Please Provide A Proper Name With No Numbers & Special Charaters`)
                    e.preventDefault()
                } else if ((MobileVerify.test(Mobile.value))==false) {
                    alert(`Invalid Mobile Number`)
                    e.preventDefault()
                }  else if ((EmailVerify.test(Email.value))==false) {
                    alert(`Invalid Email Address`)
                    e.preventDefault()
                } else {
                    return
                }
            })
        </script>
        @yield('content')
        <footer>
            <div class="Links">
                <div class="Social-Media">
                    <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/Facebook-Black.png') }}" loading="lazy" /></a>
                    <a href="{{ url('/') }}"><img src="{{ asset('assets/image/common/YouTube-Black.png') }}" loading="lazy" /></a>
                </div>
                <div class="CTA-Links">
                    <p class="Callback" onclick="callBackOpen()">Request A Callback</p>
                    <a class="Payment" href="{{ url('/') }}">
                        <img src="{{ asset('assets/image/common/Wallet-02.png') }}" loading="lazy" />
                        <p>Online Payment</p>
                    </a>
                </div>
            </div>
            @include('layouts.footer-menu')
            <div class="Copyright">
                <p>&copy 2021 <span><a href="{{ url('/') }}">Smart Education</a></span>, All Rights Reserved | Powered By <span><a href="http://iudyog.com/" target="_blank">iUdyog</a></span></p>
            </div>
        </footer>
        <script src="{{ asset('js/script.js') }}"></script>
        @yield('js')
        @stack('scripts')
    </body>
</html>