@extends('themes.one.master')

@php
    $ContactUsMeta = ($pageSettingsBySlug ?? collect())->get('contact-us');
    $title = transField($ContactUsMeta, 'title') ??  __('Contact Us');

@endphp

@section('title', $title)

@section('content')

    <!--=================================
    inner-header -->
    @if(!empty($banner))
        <section class="inner-banner bg-overlay-black-70 bg-holder" style="background-image: url('');">
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-12">
                        <div class="text-center">
                            <h1 class="text-white">{{ transField($banner, 'title') }}</h1>
                        </div>
                        <div class="d-flex justify-content-center ">
                            <ol class="breadcrumb mb-0 p-0">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                                <li class="breadcrumb-item active"><span>{{ $title }}</span></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @else
        <section class="inner-banner bg-overlay-black-70 bg-holder" style="background-image: url('assets/themes/one/images/bg/06.jpg');">
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-12">
                        <div class="text-center">
                            <h1 class="text-white">{{ $title }}</h1>
                        </div>
                        <div class="d-flex justify-content-center ">
                            <ol class="breadcrumb mb-0 p-0">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                                <li class="breadcrumb-item active"><span>{{ $title }}</span></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!--=================================
    inner-header -->

    <!--=================================
    contact -->
    <section class="space-ptb">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 mb-4 mb-lg-0">
                    <h4 class="mb-4">{{ __('Need Admission? Please Complete The Contact Form') }}</h4>
                    <form id="admissionForm" autocomplete="false">
                        <input type="hidden" name="section" value="contactus-details">
                        <input type="hidden" name="subject" value="Apply for admission">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <input type="text" class="form-control bg-white border" name="first_name" id="first_name" placeholder="{{ __('Enter First Name') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <input type="text" class="form-control bg-white border" name="middle_name" id="middle_name" placeholder="{{ __('Enter Middle Name') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <input type="text" class="form-control bg-white border" name="last_name" id="last_name" placeholder="{{ __('Enter Last Name') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <input type="email" class="form-control bg-white border" name="email" id="email" placeholder="{{ __('Enter Email Address') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <input type="text" class="form-control bg-white border" name="phone_no" id="phone_no" placeholder="{{ __('Enter Phone no.') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="form-group col-md-12">
                                <textarea class="form-control bg-white border" rows="4" name="message" id="message" placeholder="{{ __('Message') }}"></textarea>
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary" id="admissionSubmitBtn">{{ __('Send') . " " . __('Message') }}</button>
                            </div>

                            <!-- Optional global success/error notice -->
                            <div class="col-md-12 mt-3">
                                <div id="admissionAlert" class="alert d-none" role="alert"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="d-flex mb-3 bg-primary p-4 border-radius mb-4">
                                <div class="text-primary mr-3">
                                    <i class="fas fa-3x fa-map-signs text-white"></i>
                                </div>
                                <div class="recent-post-info">
                                    <span class="text-white">{{ $contact['address'] ?? "" }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="d-flex mb-3 bg-light p-4 border-radius mb-4">
                                <div class="text-primary mr-3">
                                    <i class="far fa-3x fa-envelope"></i>
                                </div>
                                <div class="recent-post-info">
                                    <span>{{ $contact['email'] ?? "" }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="d-flex bg-dark p-4 border-radius">
                                <div class="text-white mr-3">
                                    <i class="fas fa-3x fa-headphones-alt"></i>
                                </div>
                                <div class="recent-post-info">
                                    <span class="text-white">{{ $contact['contact_no'] ?? "" }}<br> {{ __('24 X 7 online support') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=================================
    contact -->

    <!--=================================
    Map -->
    @if(!empty($banner) && !empty($banner['iframe_url']))
    <section class="map">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <div class="col-sm-12">
                    <div class="map h-500">
                        <!-- iframe START -->
                        <iframe src="{{ $banner['iframe_url'] }}" style="width: 100%; height: 100%;"></iframe>
                        <!-- iframe END -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    <!--=================================
    Map -->


    <div id="app-translations"
        data-first_name_required="{{ __('First name is required.') }}"
        data-first_name_min="{{ __('Please enter at least 2 characters.') }}"
        data-last_name_required="{{ __('Last name is required.') }}"
        data-email_required="{{ __('Email is required.') }}"
        data-email_invalid="{{ __('Please enter a valid email address.') }}"
        data-phone_required="{{ __('Phone number is required.') }}"
        data-phone_invalid="{{ __('Please enter a valid phone number.') }}"
        data-message_required="{{ __('Message is required.') }}"
        data-message_min="{{ __('Please enter at least 5 characters.') }}">
    </div>

@endsection

@section('script')
<script>
    $(document).ready(function() {
        var t = document.getElementById('app-translations').dataset;

        var $form = $('#admissionForm');
        var $btn = $('#admissionSubmitBtn');
        var $alert = $('#admissionAlert');

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

        // Helpers
        function showError($field, message) {
            $field.addClass('is-invalid');
            $field.closest('.form-group').find('.invalid-feedback').text(message).show();
        }

        function clearError($field) {
            $field.removeClass('is-invalid');
            $field.closest('.form-group').find('.invalid-feedback').text('').hide();
        }

        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 digits = (str.match(/\d/g) || []).length;
            return /^[0-9+\-\s()]+$/.test(str) && digits >= 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 $message = $('#message');

            var firstName = $first_name.val().trim();
            var middleName = $middle_name.val().trim();
            var lastName = $last_name.val().trim();
            var email = $email.val().trim();
            var phone = $phone.val().trim();
            var message = $message.val().trim();

            if (!firstName) {
                showError($first_name, t.first_name_required);
                ok = false;
            } else if (firstName.length < 2) {
                showError($first_name, t.first_name_min);
                ok = false;
            }

            if (!lastName) {
                showError($last_name, t.last_name_required);
                ok = false;
            } else if (lastName.length < 2) {
                showError($last_name, t.first_name_min);
                ok = false;
            }

            if (!email) {
                showError($email, t.email_required);
                ok = false;
            } else if (!isEmail(email)) {
                showError($email, t.email_invalid);
                ok = false;
            }

            if (!phone) {
                showError($phone, t.phone_required);
                ok = false;
            } else if (!isPhone(phone)) {
                showError($phone, t.phone_invalid);
                ok = false;
            }

            if (!message) {
                showError($message, t.message_required);
                ok = false;
            } else if (message.length < 5) {
                showError($message, t.message_min);
                ok = false;
            }

            return ok;
        }

        $form.on('input change', 'input, textarea, select', function() {
            clearError($(this));
            clearAlert();
        });

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

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

            var originalText = $btn.text();
            $btn.prop('disabled', true).text('Sending...');

            $.post('