@extends('frontend.layouts.app');

@section('page_title')
    {{  (!empty($page_title) && isset($page_title) ) ? $page_title : '' }}
@endsection

@push('head-scripts')

@endpush

@section('content')

    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}"  alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                 style="background: rgba(0, 47, 108, 0.85);">
                <h1 class="display-4 fw-bold text-white mb-3" style="font-family: 'Poppins', sans-serif; letter-spacing: 1px;" data-aos="fade-up" data-aos-delay="400">
                    Contact Us
                </h1>
                {{--                <!-- Breadcrumb Bar -->--}}
                {{--                <div class="container my-3">--}}
                {{--                    <nav aria-label="breadcrumb">--}}
                {{--                        <ol class="breadcrumb bg-primary rounded-pill px-4 py-2 mb-0 d-flex justify-content-center justify-content-md-start">--}}
                {{--                            <li class="breadcrumb-item">--}}
                {{--                                <a href="{{ route('index') }}" class="text-white fw-semibold text-decoration-none">Home</a>--}}
                {{--                            </li>--}}
                {{--                            <li class="breadcrumb-item active text-white fw-bold" aria-current="page">About Us</li>--}}
                {{--                        </ol>--}}
                {{--                    </nav>--}}
                {{--                </div>--}}

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

        <section class="mt-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="info-style2">
                            <div class="info-icon">
                                <img src="{{asset('assets/img/Asset-31.png')}}" alt="icon">
                            </div>
                            <h3 class="info-title">Phone No</h3>
                            <p class="info-text text-dark">041 8777772 - 0330 1980695</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-style2">
                            <div class="info-icon">
                                <img src="{{asset('assets/img/clock-icon.png')}}" alt="icon">
                            </div>
                            <h3 class="info-title">Monday to Friday</h3>
                            <p class="info-text">08:00 AM to 02:30 PM</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-style2">
                            <div class="info-icon">
                                <img src="{{asset('assets/img/Asset-29.png')}}" alt="icon">
                            </div>
                            <h3 class="info-title">Email Address</h3>
                            <p class="info-text">
                                <a href="mailto:info@igss.edu.pk" class="text-inherit text-decoration-none text-dark">
                                    info@igss.edu.pk
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    <div class="container-fluid px-0 clock-mg" style="position: relative; bottom: -200px;">
        <div class="position-relative w-100 view-clock">
            <!-- Background Image -->
            <img src="{{ asset('assets/img/contact-us-bg.jpg') }}"
                 alt="Contact Background"
                 class="w-100 h-100 object-fit-cover ">

            <!-- Overlay Content -->
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center">
                <div class="container py-5">
                    <div class="row flex-row-reverse align-items-center g-5">
                        <div class="col-md-6 col-12">

                        </div>

                        <!-- Form Column -->
                        <div class="col-md-6 col-12 p-4">
                            <div style="margin-bottom: 100px">
                                <span class="text-danger fw-semibold text-uppercase small">Your question Matter</span>
                                <h2 class="fw-bold mt-1">Feel Free to Contact!</h2>
                            </div>

                            <form method="POST" action="{{ route('contact.store') }}" class="needs-validation" novalidate>
                                @csrf
                                <div class="mb-3">
                                    <label class="form-label">Name <span class="text-danger small">(Required)</span></label>
                                    <input name="name" type="text" class="form-control" required>
                                </div>

                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Email Address <span class="text-danger small">(Required)</span></label>
                                        <input name="email" type="email" class="form-control" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Phone Number <span class="text-danger small">(Required)</span></label>
                                        <input type="text" class="form-control" name="number" placeholder="03XX-XXXXXXX" maxlength="12" required>
                                    </div>
                                </div>

                                <div class="mb-3 mt-3">
                                    <label class="form-label">Message <span class="text-danger small">(Required)</span></label>
                                    <textarea name="message" rows="10" placeholder="Type your message" class="form-control contact-message" required></textarea>
                                </div>

                                <!-- Button -->
                                <button class="btn btn-warning text-white fw-semibold px-4 py-2" type="submit">Send Message</button>
                            </form>

                            @if(session('success'))
                                <div class="alert alert-success mt-3">
                                    {{ session('success') }}
                                </div>
                            @endif
                        </div>

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



    <section class="my-5" style="position: relative; bottom: -250px;z-index: 1">
        <div class="container-fluid p-0">
            <div class="title-area">
{{--                <h2 class="mt-n2">How To Find Us</h2>--}}
                <h3 class="text-center mb-4" data-aos="fade-down" data-aos-delay="100">
                    <img src="{{ asset('assets/img/Asset_28.png') }}" alt="" style="height:90px;" data-aos="zoom-in"
                         data-aos-delay="200">
                    <br>
                    How To Find Us
                </h3>
            </div>
            <div class="map-style1" >
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3620.603965518824!2d73.1235463150018!3d31.3824391813891!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3922693bedf0e295%3A0x868ba0f59e6e59b6!2sIgnite%20School%20System!5e0!3m2!1sen!2s!4v1725428770218!5m2!1sen!2s"
                    width="100%"
                    height="950px"
                    style="border:0;"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </section>


@endsection