@extends('frontend.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@section('description', 'Submit your Online application form at Aliz College. Complete the process easily, meet all requirements and secure your seat in your chosen program.')
@section('keywords', 'Online application form,Admission Form Guidelines,Required documents for online application')
@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/apply-online-hero.png') }}" class="hero-image d-block w-100"
                     alt="Banner Image">
                <div class="program-hero-overlay"></div>
                <div class="carousel-caption-admission text-start">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 col-md-8 col-sm-12">
                                <div class="hero-content hero-text-box" data-aos="fade-up" data-aos-delay="200">
                                    <p class="hero-slogan-wrapper mb-0">
                                        <span class="h3-style d-block underline-blue" data-aos="fade-right" data-aos-delay="300">Apply Online and</span>
                                        <span class="h1-style d-block highlight " data-aos="zoom-in" data-aos-delay="400">STEP INTO</span>
                                        <span class="h3-style d-block" data-aos="fade-left" data-aos-delay="500">your <span class="highlight">Future</span></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

    <div class="form-container" data-aos="fade-up" data-aos-duration="1000">
        <h1 class="apply-heading text-black" data-aos="fade-down text-black" data-aos-delay="100">Apply Now for Online application</h1>
        <p class="apply-description text-black" data-aos="fade-up" data-aos-delay="200">
            Start your enrollment at Aliz College today by following our Admission Form Guidelines to ensure a smooth process.
            Make sure you have all the required documents for online application ready before submitting. Learn more about
            the <a href="/admission-process">admission process</a> and then proceed to Online Application to complete your admission quickly and securely.
        </p>

        <form method="POST" action="{{ route('onlineApplication.store') }}" class="needs-validation" novalidate>
            @csrf
            <div class="mb-3" data-aos="fade-up" data-aos-delay="150">
                <label for="fullName" class="form-label" style="font-family: 'Poppins', sans-serif;">Full Name*</label>
                <input type="text" class="form-control" id="fullName" name="full_name" placeholder="Enter your name"
                       required>
            </div>
            <div class="mb-3" data-aos="fade-up" data-aos-delay="200">
                <label for="fatherName" class="form-label" style="font-family: 'Poppins', sans-serif;">Father Name*</label>
                <input type="text" class="form-control" id="fatherName" name="father_name"
                       placeholder="Enter your father name" required>
            </div>

            <div class="mb-3" data-aos="fade-up" data-aos-delay="250">
                <label for="gender" class="form-label" style="font-family: 'Poppins', sans-serif;">Gender*</label>
                <select class="form-select" id="gender" name="gender" required>
                    <option selected disabled>Select your gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select>
            </div>

            <div class="mb-3" data-aos="fade-up" data-aos-delay="300">
                <label for="campus" class="form-label" style="font-family: 'Poppins', sans-serif;">Campus*</label>
                <select class="form-select" id="campus" name="campus" required>
                    <option selected disabled>Select your campus</option>
                    <option value="Girls Prime Campus">Girls Prime Campus</option>
                    <option value="Girls Premier Campus">Girls Premier Campus</option>
                    <option value="Boys Prime Campus">Boys Prime Campus</option>
                </select>
            </div>

            <div class="mb-3" data-aos="fade-up" data-aos-delay="350">
                <label for="cnic" class="form-label" style="font-family: 'Poppins', sans-serif;">CNIC*</label>
                <input type="text" class="form-control" id="cnic" name="cnic" placeholder="Enter CNIC number" required>
            </div>

            <div class="mb-3" data-aos="fade-up" data-aos-delay="400">
                <label for="dob" class="form-label" style="font-family: 'Poppins', sans-serif;">Date of Birth*</label>
                <input type="date" class="form-control" id="dob" name="dob" required>
            </div>

            <div class="mb-4" data-aos="fade-up" data-aos-delay="450">
                <label for="email" class="form-label" style="font-family: 'Poppins', sans-serif;">Email*</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email">
            </div>

            <button type="submit" class="btn btn-submit" data-aos="zoom-in" data-aos-delay="500">Submit</button>
        </form>
    </div>

@endsection