@extends('layouts.app')

@section('title', 'Apply Now')

@section('content')

<style>
    body {
        font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
        background: #F8FAFC;
        color: #1E293B;
    }

    :root {
        /* Premium Modern Automotive Palette */
        --primary: #3E51B8;           /* Tech Blue */
        --primary-dark: #001395;      /* Deep Accent Blue */
        --secondary: #6a2525;         /* Muted Racing Red */
        --secondary-hover: #822424;   /* Dark Burnt Red */
        --accent-yellow: #FFE618;     /* High-Visibility Electric Yellow */
        --bg-light: #F8FAFC;          /* Clean grey background */
        --card-border: rgba(62, 81, 184, 0.12);
    }

    .hero {
        height: 240px;
        background: linear-gradient(rgba(0, 19, 149, 0.75), rgba(106, 37, 37, 0.85)),
                    url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
    }

    .hero h1 {
        font-size: 36px; 
        font-weight: 800;
        margin: 0;
        letter-spacing: -0.5px;
    }

    .apply-area {
        margin-top: -50px;
        margin-bottom: 50px;
    }

    .form-container-sm {
        max-width: 850px;
        margin: 0 auto;
    }

    .form-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--card-border);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    }

    .form-header {
        background: linear-gradient(135deg, #0028FFBA 0%, #343030fa 100%);
        color: white;
        padding: 25px 30px;
        border-bottom: 3px solid var(--accent-yellow);
    }

    .form-header h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
    }

    .section-title {
        background: var(--secondary);
        color: white;
        padding: 10px 16px;
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: 14px;
        border-radius: 6px;
        font-weight: 600;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 10px rgba(106, 37, 37, 0.15);
    }

    .form-label {
        font-weight: 600;
        font-size: 13px; 
        margin-bottom: 6px;
        color: #000;
    }

    .form-control,
    .form-select {
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 10px 14px; 
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(62, 81, 184, 0.15);
        outline: 0;
    }

    .required {
        color: var(--secondary-hover);
        font-weight: bold;
    }

    .submit-btn {
        background: var(--primary);
        color: white;
        border: none;
        padding: 14px 30px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
    }

    .submit-btn:hover {
        background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
        color: var(--accent-yellow);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(130, 36, 36, 0.35);
    }
    
    .mb-3-custom {
        margin-bottom: 1.25rem !important; 
    }

    .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }
</style>

<div class="hero">
    <div class="text-center px-3">
        <h1>Course Enrolment Form</h1>
        <p class="lead mb-0 mt-2 fw-semibold" style="font-size: 15px; opacity: 0.95; color: var(--accent-yellow);">
            Automobile Engineering Academy
        </p>
    </div>
</div>

<div class="container apply-area">
    <div class="form-container-sm">
        <div class="form-card">
            <div class="form-header">
                <h2>
                    <i class="fa-solid fa-file-circle-check me-2"></i>
                    New Student Registration
                </h2>
            </div>

            <div class="p-4 p-md-5">
                <form action="#" method="POST" enctype="multipart/form-data">
                    @csrf

                    {{-- STUDENT INFORMATION --}}
                    <div class="section-title">
                        <i class="fa-solid fa-user me-2"></i> Student Information
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">First Name <span class="required">*</span></label>
                            <input type="text" name="first_name" class="form-control" placeholder="Enter your first name" required>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Last Name <span class="required">*</span></label>
                            <input type="text" name="last_name" class="form-control" placeholder="Enter your last name" required>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">NIC / Passport Number</label>
                            <input type="text" name="nic" class="form-control" placeholder="Identity Document No.">
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Nationality</label>
                            <input type="text" name="nationality" class="form-control" placeholder="e.g. Sri Lankan">
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Residential Address <span class="required">*</span></label>
                            <input type="text" name="address" class="form-control" placeholder="Street address" required>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">District / City / State <span class="required">*</span></label>
                            <input type="text" name="state" class="form-control" placeholder="City or region" required>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Gender</label>
                            <select name="gender" class="form-select">
                                <option selected disabled>Select Gender</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Date of Birth</label>
                            <input type="date" name="dob" class="form-control">
                        </div>
                    </div>

                    {{-- CONTACT INFORMATION --}}
                    <div class="section-title">
                        <i class="fa-solid fa-envelope me-2"></i> Contact Information
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Contact Number <span class="required">*</span></label>
                            <input type="tel" name="mobile" class="form-control" placeholder="Primary phone number" required>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Alternative Contact Number</label>
                            <input type="tel" name="mobile2" class="form-control" placeholder="Backup phone number">
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Email Address <span class="required">*</span></label>
                            <input type="email" name="email" class="form-control" placeholder="name@example.com" required>
                        </div>
                        
                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Preferred Contact Method</label>
                            <select name="preferred_contact_method" class="form-select">
                                <option selected disabled>Select Your Option</option>
                                <option value="email">Email</option>
                                <option value="phone">Phone Call</option>
                                <option value="sms">SMS</option>
                            </select>
                        </div>
                    </div>

                    {{-- EDUCATION --}}
                    <div class="section-title">
                        <i class="fa-solid fa-graduation-cap me-2"></i> Academic Qualifications
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Are you currently a school student?</label>
                            <select name="still_at_school" class="form-select">
                                <option selected disabled>Select Your Option</option>
                                <option value="Yes">Yes</option>
                                <option value="No">No</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Highest Educational Qualification</label>
                            <select name="highest_qualification" class="form-select">
                                <option selected disabled>Select Qualification</option>
                                <option value="O/L">G.C.E. O/L</option>
                                <option value="A/L">G.C.E. A/L</option>
                                <option value="NVQ Level 3">NVQ Level 3</option>
                                <option value="NVQ Level 4">NVQ Level 4</option>
                                <option value="Certificate">Certificate</option>
                                <option value="Diploma">Diploma</option>
                                <option value="Higher Diploma">Higher Diploma</option>
                                <option value="Degree">Degree</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">School / College Name</label>
                            <input type="text" name="school_name" class="form-control" placeholder="Enter last attended school name">
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Year Completed</label>
                            <input type="number" name="year_completed" class="form-control" min="1980" max="2100" placeholder="e.g. 2025">
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Examination Passed</label>
                            <select name="exam_passed" class="form-select">
                                <option selected disabled>Select Final Examination</option>
                                <option value="G.C.E. O/L">G.C.E. O/L</option>
                                <option value="G.C.E. A/L">G.C.E. A/L</option>
                                <option value="NVQ">NVQ Standards</option>
                                <option value="Certificate">Certificate</option>
                                <option value="Diploma">Diploma</option>
                                <option value="Degree">Degree</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Core Subjects</label>
                            <input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science, Tech">
                        </div>

                        <div class="col-12 mb-3-custom">
                            <label class="form-label">Grades / Academic Results Summary</label>
                            <textarea name="grades_results" class="form-control" rows="3" placeholder="List your relevant examination grades or index summaries..."></textarea>
                        </div>

                        <div class="col-12 mb-3-custom">
                            <label class="form-label">Upload Educational Certificates (Multiple Allowed)</label>
                            <input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
                        </div>
                    </div>

                    {{-- EMERGENCY CONTACTS --}}
                    <div class="section-title">
                        <i class="fa-solid fa-phone-flip me-2"></i> Emergency Contacts
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Emergency Contact Name <span class="required">*</span></label>
                            <input type="text" name="emergency_contact_name" class="form-control" placeholder="Full name of guardian/relative" required>
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Relationship <span class="required">*</span></label>
                            <input type="text" name="emergency_contact_relationship" class="form-control" placeholder="e.g. Father, Mother, Spouse" required>
                        </div>
                    </div>

                    {{-- TERMS AND CONDITIONS --}}
                    <div class="form-check mb-4 mt-3">
                        <input class="form-check-input" type="checkbox" id="terms" required>
                        <label class="form-check-label fw-semibold" for="terms" style="font-size: 13px; color: #000; cursor: pointer;">
                            I hereby declare that the details furnished above are true and correct to the best of my knowledge <span class="required">*</span>
                        </label>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="submit-btn">Submit Application</button>
                    </div>

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

@endsection