@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@section('description', 'Contact Us at Aliz College for any queries or support. Our team is here to help you with admissions, programs and all your academic questions.')
@section('keywords', 'Contact Us,Aliz College address,Aliz College campus location')
@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">
                                    <p 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>
                                    </p>
                                </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">
            <h1 class="contact-heading text-black" data-aos="fade-down" data-aos-delay="100">Contact Us for Information and Guidance</h1>
            <p class="contact-description text-black" data-aos="fade-up" data-aos-delay="200">
                If you have any questions about admissions, programs or student services, our team is here
                to help. Find our Aliz College address and explore the Aliz College campus location to
                plan your visit and get the guidance you need to start your educational journey.
            </p>
            <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">
                        <h2 class="fw-bold text-start text-black h4" 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
                        </h2>

                        <div class="row mb-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="col-md-6">
                                <p class="mb-3 text-black h5" style=" font-family: 'Poppins', sans-serif; font-weight: 700;">Call Center</p>
                                <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">
                                <p class="mb-3 h5" style=" font-family: 'Poppins', sans-serif; font-weight: 700;">Email</p>
                                <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">
                            <h2 class="mb-3 fw-bold text-black h3" style="font-family: 'Poppins', sans-serif;">Locations</h2>
                            <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">
                                    <h2 class="fw-bold text-black mt-4 h3" style="font-family: 'Poppins', sans-serif;">Ask Your Queries</h2>
                                </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