@extends('themes.six.master')

@section("style")
    <style>
        .invalid-feedback {
            margin-top: -11px !important; /* adjust this if it’s too large */
            font-size: 12px; /* you can adjust this for better positioning */
        }
        input.is-invalid, textarea.is-invalid {
            border-color: red; /* make sure there's no margin/padding issue */
        }
    </style>
@endsection

@section('content')

    <!--Google Map Area Start -->
    @if(isset($setting)  && !empty($setting['embed_url']))
    <div class="google-map-area">
        <!--  Map Section -->
        <div id="contacts" class="map-area">
            <iframe
                src="{{ $setting['embed_url'] ?? '' }}"
                width="100%"
                height="600px"
                style="border:0;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>

        <div class="breadcrumb-bar">
            <ul class="breadcrumb">
                <li><a href="{{ url('/') }}">Home</a></li>
                <li>About Us</li>
            </ul>
        </div>
    </div>
    @endif
    <!--End of Google Map Area-->

    <!--Contact Area Strat-->
    <div class="contact-area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="contact-area-container">
                        <div class="single-title">
                            <h3>{{ $contact['title'] ?? "Contact Info" }}</h3>
                        </div>
                        <p>{!! $contact['description'] ?? "" !!}</p>
                        <div class="contact-address-container">
                            <div class="contact-address-info">
                                <div class="contact-icon">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div class="contact-text">
                                    <h4>Address</h4>
                                    <span>{{ $contact['address'] ?? "" }}</span>
                                </div>
                            </div>
                            <div class="contact-address-info">
                                <div class="contact-icon">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div class="contact-text">
                                    <h4>Phone</h4>
                                    <span>{{ $contact['contact_no'] ?? "" }}</span>
                                </div>
                            </div>
                            <div class="contact-address-info">
                                <div class="contact-icon">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div class="contact-text">
                                    <h4>Email</h4>
                                    <span>{{ $contact['email'] ?? "" }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="contact-form">
                        <div class="single-title">
                        <h3>Need Admission? Please Complete The Contact Form</h3>
                        </div>
                        <div class="contact-form-container">
                        <form method="post" id="admissionForm" autocomplete="off">
                           @csrf

                            <input type="hidden" name="section" value="contactus-details">

                            <div class="col-md-12">
                            <div id="admissionAlert" class="alert d-none" role="alert"></div>
                            </div>

                            <div class="row">
                            <div class="col-md-6">
                                <input type="text" name="first_name" id="first_name" placeholder="Enter First Name *">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-md-6">
                                <input type="text" name="middle_name" id="middle_name" placeholder="Enter Middle Name">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-md-6">
                                <input type="text" name="last_name" id="last_name" placeholder="Enter Last Name *">
                                <div class="invalid-feedback"></div>
                            </div>
                            </div>

                            <div class="row">
                            <div class="col-md-6">
                                <input type="email" name="email" id="email" placeholder="Enter Email Address *">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="col-md-6">
                                <input type="text" name="phone_no" id="phone_no" placeholder="Enter Phone no. *">
                                <div class="invalid-feedback"></div>
                            </div>
                            </div>

                            <div class="col-md-12">
                            <input type="text" name="subject" id="subject" placeholder="Subject *">
                            <div class="invalid-feedback"></div>
                            </div>

                            <div class="col-md-12">
                            <textarea name="message" id="message" class="yourmessage" placeholder="Your message"></textarea>
                            <div class="invalid-feedback"></div>
                            </div>

                            <button type="submit" id="admissionSubmitBtn" class="button-default button-yellow submit">
                            <i class="fa fa-send"></i>Submit
                            </button>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End of Contact Area-->

@endsection

@section('script')

<script>
    $(function() {
        var $form  = $('#admissionForm');
        var $btn   = $('#admissionSubmitBtn');
        var $alert = $('#admissionAlert');

        // --- CSRF setup (header) ---
        // var CSRF = $('meta[name="csrf-token"]').attr('content');

        // $.ajaxSetup({
        //     headers: { 'X-CSRF-TOKEN': CSRF }
        // });

        // --- Helpers ---
        function showError($field, message) {
            $field.addClass('is-invalid');
            // choose container based on column size
            var $container = $field.closest('.col-md-6').length ? $field.closest('.col-md-6') : $field.closest('.col-md-12');
            $container.find('.invalid-feedback').text(message).show();
        }
        function clearAllErrors() {
            $form.find('.is-invalid').removeClass('is-invalid');
            $form.find('.invalid-feedback').text('').hide();
        }
        function showAlert(type, message) {
            $alert.removeClass('d-none alert-success alert-danger').addClass('alert-' + type).text(message);
        }
        function clearAlert() {
            $alert.addClass('d-none').removeClass('alert-success alert-danger').text('');
        }
        function isEmail(str)   { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str); }
        function isPhone(str)   { var d=(str.match(/\d/g)||[]).length; return /^[0-9+\-\s()]+$/.test(str) && d>=7; }

        function validate() {
            clearAllErrors();
            var ok = true;
            var $first_name = $('#first_name');
            var $middle_name = $('#middle_name');
            var $last_name = $('#last_name');
            var $email = $('#email');
            var $phone = $('#phone_no');
            var $subject = $('#subject');
            var $message = $('#message');

            var firstName = ($first_name.val()||'').trim();
            var lastName  = ($last_name.val()||'').trim();
            var email     = ($email.val()||'').trim();
            var phone     = ($phone.val()||'').trim();
            var subject   = ($subject.val()||'').trim();
            var message   = ($message.val()||'').trim();

            if (!firstName) showError($first_name, 'First name is required.'), ok=false;
            else if (firstName.length < 2) showError($first_name, 'Please enter at least 2 characters.'), ok=false;

            if (!lastName) showError($last_name, 'Last name is required.'), ok=false;
            else if (lastName.length < 2) showError($last_name, 'Please enter at least 2 characters.'), ok=false;

            if (!email) showError($email, 'Email is required.'), ok=false;
            else if (!isEmail(email)) showError($email, 'Please enter a valid email address.'), ok=false;

            if (!phone) showError($phone, 'Phone number is required.'), ok=false;
            else if (!isPhone(phone)) showError($phone, 'Please enter a valid phone number.'), ok=false;

            if (!subject) showError($subject, 'Subject is required.'), ok=false;
            else if (subject.length < 5) showError($subject, 'Please enter at least 5 characters.'), ok=false;

            if (!message) showError($message, 'Message is required.'), ok=false;
            else if (message.length < 5) showError($message, 'Please enter at least 5 characters.'), ok=false;

            return ok;
        }

        $form.on('submit', function(e) {
            
            e.preventDefault();
            clearAlert();

            if ($form.data('busy')) return;

            if (!validate()) {
                showAlert('danger', 'Please fix the highlighted errors.');
                return;
            }

            // Lock UI
            $form.data('busy', true);
            var originalText = $btn.text();
            $btn.prop('disabled', true).text('Sending...');

            var payload = $form.serializeArray();
            console.log(payload);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '