@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="col-md-6 mb-4">
                        <label class="form-label">Still at school?</label>
                        <select name="gender" class="form-select">
                            <option selected disabled>Select Your Option</option>
                            <option value="Male">Yes</option>
                            <option value="Female">No</option>
                            
                        </select>
                    </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">Contact Number <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