@extends('layouts.app')

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

@section('content')

<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        background: #f5f5f5;
    }

    :root {
        --primary: #5E244E;
        --secondary: #8B3A74;
        --light: #F8F4F7;
    }

    .hero {
        height: 220px;
        background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
                    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;
    }

    .hero h1 {
        font-size: 32px; 
        font-weight: bold;
        margin: 0;
    }

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

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

    .form-card {
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }

    .form-header {
        background: var(--primary);
        color: white;
        padding: 15px 25px;
    }

    .form-header h2 {
        margin: 0;
        font-size: 20px;
        font-weight: bold;
    }

    .section-title {
        background: #735D6D;
        color: white;
        padding: 8px 12px;
        margin-top: 22px;
        margin-bottom: 15px;
        font-size: 14px;
        border-radius: 5px;
        font-weight: 600;
    }

    .form-label {
        font-weight: 600;
        font-size: 13px; 
        margin-bottom: 4px;
    }

    .form-control,
    .form-select {
        border-radius: 5px;
        padding: 6px 10px; 
        font-size: 13px;
    }

    .required {
        color: red;
    }

    .submit-btn {
        background: var(--primary);
        color: white;
        border: none;
        padding: 8px 20px;
        font-size: 15px;
        font-weight: bold;
        border-radius: 30px;
        cursor: pointer;
        width: 100%;
        transition: 0.3s ease;
    }

    .submit-btn:hover {
        background: var(--secondary);
        transform: translateY(-1px);
    }
    
   
    .mb-3-custom {
        margin-bottom: 0.75rem !important; 
    }
</style>

<div class="hero">
    <div class="text-center">
        <h1>Course Enrolment Form</h1>
        <p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">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>
                    Course Enrolment Form
                </h2>
            </div>

            <div class="p-4">
                <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" 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" required>
                        </div>

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

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Nationality</label>
                            <input type="text" name="nationality" class="form-control">
                        </div>

                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Address <span class="required">*</span></label>
                            <input type="text" name="address" class="form-control" 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" 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" 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">
                        </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" 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</option>
                                <option value="sms">SMS</option>
                            </select>
                        </div>
                    </div>

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

                    <div class="row">
                        <div class="col-md-6 mb-3-custom">
                            <label class="form-label">Still at school?</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 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 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</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">Subjects</label>
                            <input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science">
                        </div>

                        <div class="col-12 mb-3-custom">
                            <label class="form-label">Grades / Results</label>
                            <textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea>
                        </div>

                        <div class="col-12 mb-3-custom">
                            <label class="form-label">Educational Certificates</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" 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" required>
                        </div>
                    </div>

                    {{-- TERMS AND CONDITIONS --}}
                    <div class="form-check mb-3 mt-2">
                        <input class="form-check-input" type="checkbox" id="terms" required>
                        <label class="form-check-label" for="terms" style="font-size: 13px;">
                            I agree to the terms and conditions <span class="required">*</span>
                        </label>
                    </div>

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

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

@endsection