@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection

@section('content')

    <!-- Hero Section -->
    <div id="admissionHeroCarousel" class="carousel slide" data-bs-ride="carousel" data-aos="fade-in" style="margin-top: 100px">
        <div class="carousel-inner">
            <div class="carousel-item-admission active">
                <img src="{{asset("assets/images/contact-us-hero.png")}}" class="hero-image d-block w-100"
                     alt="Banner Image">
                <div class="hero-gradient-overlay-contact-us"></div>
                <div class="carousel-caption-admission text-start">
                    <div class="container">
                        <div class="row justify-content-end">
                            <div class="col-lg-6 col-md-8 col-sm-12">
                                <div class="hero-text-box" data-aos="fade-up" data-aos-delay="200">
                                    <h1 class="hero-title-text" data-aos="zoom-in" data-aos-delay="300">
                                    <span class="highlight" style="font-family: 'Poppins', sans-serif;">We're Here to Help You <br>
                                        Get in Touch Today</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{{--                <a href="{{route('onlineApplication')}}" class="hero-apply-btn text-decoration-none"--}}
{{--                   data-aos-delay="400" style="font-family: 'Poppins', sans-serif;">Apply Now</a>--}}
            </div>
        </div>
    </div>

    @if(session('success'))
        <div id="successToast"
             class="alert alert-success position-fixed top-0 end-0 m-4 shadow-lg"
             role="alert"
             style="z-index: 9999; min-width: 280px;">
            <strong>Success!</strong> {{ session('success') }}
        </div>

        <script>
            setTimeout(() => {
                const toast = document.getElementById('successToast');
                if (toast) toast.remove();
            }, 4000);
        </script>
    @endif


    <section class="py-3 py-md-5 py-xl-8" data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <div class="row gy-4 gy-md-5 align-items-md-center">

                <!-- Contact Info Card -->
                <div class="col-12 col-lg-6" data-aos="flip-left" data-aos-delay="100">
                    <div class="contact-info-card p-4 p-md-5 h-100" data-aos="slide-right" data-aos-delay="200">
                        <h4 class="fw-bold text-start text-black" data-aos="fade-down" data-aos-delay="300"
                            style="font-size: 35px;padding-bottom: 75px; font-family: 'Poppins', sans-serif;font-weight: 700;">
                            Contact Our<br>Friendly Team
                        </h4>

                        <div class="row mb-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="col-md-6">
                                <h5 class="mb-3 text-black" style=" font-family: 'Poppins', sans-serif; font-weight: 700;">Call
                                    Center</h5>
                                <p class="mb-3">
{{--                                    <i class="fa-solid fa-phone me-2 text-primary"></i>--}}
                                    <img class="me-1" src="{{asset('assets/images/contact-phone.png')}}" alt="" style="width: 30px;height: 30px;">
                                    0330 1980746
                                </p>
                                <p class="mb-1">
{{--                                    <i class="fa-brands fa-whatsapp me-2 text-success"></i>--}}
                                    <img class="me-1" src="{{asset('assets/images/contact-whatsapp.png')}}" alt="" style="width: 30px;height: 30px;">
                                    0330 1980746
                                </p>

                            </div>

                            <div class="col-md-6">
                                <h5 class="mb-3" style=" font-family: 'Poppins', sans-serif; font-weight: 700;">
                                    Email</h5>
                                <p class="mb-1" style="font-family: 'Poppins', sans-serif;">
{{--                                    <i class="fa-solid fa-envelope me-2 text-primary"></i>--}}
                                    <img class="me-1" src="{{asset('assets/images/contact-email.png')}}" alt="" style="width: 32px;height: 23px;">
                                    info@aliz.edu.pk
                                </p>
                            </div>
                        </div>

                        <div data-aos="fade-up" data-aos-delay="500">
                            <h3 class="mb-2 fw-bold text-black" style="font-family: 'Poppins', sans-serif;">Locations</h3>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-4" data-aos="slide-right" data-aos-delay="550" style="font-family: 'Poppins', sans-serif;">
                                    <strong  style="font-family: 'Poppins', sans-serif;">Prime Campus for Girls</strong><br>
{{--                                    <i class="fa-solid fa-location-dot me-2 text-danger" ></i>--}}
                                    <img class="me-2" src="{{asset('assets/images/contact-location.png')}}" alt="" style="width: 24px;height: 30px;">
                                    Shahzad Colony, Satyana Road, Faisalabad.
                                </li>
                                <li class="mb-4" data-aos="slide-right" data-aos-delay="600"  style="font-family: 'Poppins', sans-serif;">
                                    <strong  style="font-family: 'Poppins', sans-serif;">Prime Campus for Boys</strong><br>
{{--                                    <i class="fa-solid fa-location-dot me-2 text-danger"></i>--}}
                                    <img class="me-2" src="{{asset('assets/images/contact-location.png')}}" alt="" style="width: 24px;height: 30px;">
                                    Shahzad Colony, Satyana Road, Faisalabad.
                                </li>
                                <li data-aos="slide-right" data-aos-delay="650"  style="font-family: 'Poppins', sans-serif;">
                                    <strong  style="font-family: 'Poppins', sans-serif;">Premier Campus for Girls</strong><br>
{{--                                    <i class="fa-solid fa-location-dot me-2 text-danger"></i>--}}
                                    <img class="me-2" src="{{asset('assets/images/contact-location.png')}}" alt="" style="width: 24px;height: 30px;">
                                    University Town, Sargodha Road, Faisalabad.
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="col-12 col-lg-6" data-aos="flip-right" data-aos-delay="100">
                    <div class="contact-form-wrapper border overflow-hidden shadow-sm rounded-3"
                         style="background-color: #e8e8ff" data-aos="zoom-in" data-aos-delay="200">
                        <form method="POST" action="{{ route('contact.store') }}" class="needs-validation" novalidate>
                            @csrf
                            <div class="row gy-4 p-4">
                                <div class="col-12 text-center mb-3" data-aos="fade-down" data-aos-delay="300">
                                    <h3 class="fw-bold text-black mt-4" style="font-family: 'Poppins', sans-serif;">Ask Your Queries</h3>
                                </div>

                                <div class="col-12" data-aos="fade-up" data-aos-delay="350">
                                    <label for="fullname" class="form-label" style="font-family: 'Poppins', sans-serif;">Full Name <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control custom-input" id="fullname" name="fullname"
                                           required>
                                </div>

                                <div class="col-12" data-aos="fade-up" data-aos-delay="400">
                                    <label for="email" class="form-label" style="font-family: 'Poppins', sans-serif;">Email <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        {{--                                        <span class="input-group-text"><i class="fa-solid fa-envelope"></i></span>--}}
                                        <input type="email" class="form-control custom-input" id="email" name="email"
                                               required>
                                    </div>
                                </div>

                                <div class="col-12" data-aos="fade-up" data-aos-delay="450">
                                    <label for="phone" class="form-label" style="font-family: 'Poppins', sans-serif;">Phone Number</label>
                                    <div class="input-group">
                                        {{--                                        <span class="input-group-text"><i class="fa-solid fa-phone"></i></span>--}}
                                        <input type="tel" class="form-control custom-input" id="phone" name="phone">
                                    </div>
                                </div>

                                <div class="col-12" data-aos="fade-up" data-aos-delay="500">
                                    <label for="message" class="form-label" style="font-family: 'Poppins', sans-serif;">Message <span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control custom-input" id="message" name="message" rows="3"
                                              required></textarea>
                                </div>

                                <div class="col-12" data-aos="zoom-in" data-aos-delay="550">
                                    <div class="d-grid">
                                        <button class="btn btn-lg custom-submit" style="background-color: black; color: white; border: none; border-radius: 0;" type="submit">Send
                                            Message
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </section>

@endsection