@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: 350px;
        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: 55px;
        font-weight: bold;
    }

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

    .form-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,.15);
    }

    .form-header {
        background: #887582;
        color: white;
        padding: 25px 40px;
    }

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

    .section-title {
        background: #887582;
        color: white;
        padding: 14px 20px;
        margin-top: 40px;
        margin-bottom: 30px;
        font-size: 20px;
        border-radius: 8px;
    }

    .form-label {
        font-weight: 600;
    }

    .form-control,
    .form-select {
        border-radius: 8px;
        padding: 12px;
    }

    .required {
        color: red;
    }

    .submit-btn {
        background: var(--primary);
        color: white;
        border: none;
        padding: 12px 30px;
        font-size: 18px;
        font-weight: bold;
        /* border-radius: 8px; */
        cursor: pointer;
        width: 100%;
    }
</style>

<div class="hero">
    <div class="text-center">
        <h1>Course Enrolment Form</h1>
        <p class="lead">Automobile Engineering Academy</p>
    </div>
</div>

<div class="container apply-area">
    <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-5">
            <form action="#" method="POST" enctype="multipart/form-data">
                @csrf

                <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-4">
                        <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-4">
                        <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-4">
                        <label class="form-label">NIC / Passport</label>
                        <input type="text" name="nic" class="form-control">
                    </div>

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


                    <div class="col-md-6 mb-4">
                        <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-4">
                        <label class="form-label">First Name <span class="required">*</span></label>
                        <input type="text" name="State" class="form-control" required>
                    </div>
                      <div class="col-md-6 mb-4">
                        <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-4">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" name="dob" class="form-control">
                    </div>

                </div>

                <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-4">
                        <label class="form-label">Contact Number <span class="required">*</span></label>
                        <input type="mobile" name="mobile" class="form-control" required>
                    </div>

                     <div class="col-md-6 mb-4">
                        <label class="form-label">Alternative Contact Number<span class="required">*</span></label>
                        <input type="mobile2" name="mobile2" class="form-control" required>
                    </div>


                    <div class="col-md-6 mb-4">
                        <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-4">
                        <label class="form-label">Preferred contact method </label>
                        <select name="gender" class="form-select">
                            <option selected disabled>Select Your Option</option>
                            <option value="Male">Email</option>
                            <option value="Female">Phone</option>
                            <option value="Female">Sms</option>
                            
                        </select>
                    </div>
                </div>

                <!-- <div class="section-title">
                    <i class="fa-solid fa-language me-2"></i> Language and Diversity
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">English <span class="required">*</span></label>
                        <input type="text" name="Language_Diversity" class="form-control" required>
                    </div>
                </div>

                <div class="section-title">
                    <i class="fa-solid fa-wheelchair me-2"></i> Disability
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Disability <span class="required">*</span></label>
                        <input type="text" name="Disability" class="form-control" required>
                    </div>
                </div> -->

                

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

                <div class="row">

                    <!-- Still at School -->
                    <div class="col-md-6 mb-4">
                        <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>

                    <!-- Highest Qualification -->
                    <div class="col-md-6 mb-4">
                        <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>

                    <!-- School / College -->
                    <div class="col-md-6 mb-4">
                        <label class="form-label">School / College Name</label>
                        <input type="text" name="school_name" class="form-control"
                            placeholder="Enter School / College Name">
                    </div>

                    <!-- Year Completed -->
                    <div class="col-md-6 mb-4">
                        <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>

                    <!-- Examination Passed -->
                    <div class="col-md-6 mb-4">
                        <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>

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

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

                    <!-- Certificate Upload -->
                    <div class="col-12 mb-4">
                        <label class="form-label">Educational Certificates</label>
                        <input type="file" name="certificates[]" class="form-control"
                            accept=".pdf,.jpg,.jpeg,.png" multiple>
                        <small class="text-muted">
                            Upload O/L, A/L, NVQ, Diploma or other educational certificates.
                        </small>
                    </div>

                </div>

                

<!--                     
                <div class="section-title">
                    <i class="fa-solid fa-graduation-cap me-2"></i> Qualifications
                </div> -->


                <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-4">
                        <label class="form-label"> Emergency Contact Name <span class="required">*</span></label>
                        <input type="text" name="Emergency_Contact" class="form-control" required>
                    </div>

                    <div class="col-md-6 mb-4">
                        <label class="form-label">Relationship <span class="required">*</span></label>
                        <input type="text" name="Emergency_Contact" class="form-control" required>
                    </div>
                        
                </div>
                

                <div class="form-check mb-4">
                    <input class="form-check-input" type="checkbox" id="terms" required>
                    <label class="form-check-label" href="#terms">
                        I agree to the terms and conditions <span class="required">*</span>
                    </label>
                </div>

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

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

@endsection