@extends('layout', ['page' => 'apply-scholarship'])
@section('title', 'Apply Scholarship - ' . config('app.name'))

@section('content')
   @if(isset($breadcrumb) && !empty($breadcrumb))
      @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
   @endif

   <section class="wrap">
        <div class="container">
            <div class="row">
                <div class="box-shadow">
                    <div class="col-lg-12 col-md-12">
                        <div class="candidates-resume-content">
                            <form
                                action="{{ route('student.apply_scholarship') }}"
                                method="post"
                                class="resume-info m-4"
                                name="collaboration_enquiry_form"
                                id="collaboration_enquiry_form"
                                enctype="multipart/form-data" 
                            >
                             @csrf
                                <h3>Apply Scholarship Form</h3>
                                <p><small>Please fill out the following fields.</small></p>
                                <br>
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="course">Course</label>
                                            <select class="form-control boxss select2_single" name="course_id" required>
                                                <option value="">-- Select Course --</option>
                                                @foreach ($courses as $course)
                                                    <option value="{{ $course->id }}" {{ old('course_id') == $course->id ? 'selected' : '' }}>
                                                        {{ $course->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('course_id') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Candidate Name</label>
                                            <input type="text"  class="form-control boxss" autocomplete="off" id="name" name="name" placeholder="Candidate Name" value="{{ old('name', '') }}" required>
                                            @error('name')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label>Father's Name</label>
                                            <input type="text" class="form-control boxss" name="father_name" value="{{ old('father_name', '') }}" required>
                                            @error('father_name') <span class="text-danger mt-2">{{ $message }}</span> @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="gender">Gender</label>
                                            <select class="form-control boxss select2_single" name="gender" id="gender" required>
                                                <option value="">Select Gender</option>
                                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                                <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                                            </select>

                                            <i class="ri-arrow-down-s-line"></i>
                                            @error('gender')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="mobile">Contact No. </label>
                                            <input class="form-control boxss charector" autocomplete="off"  type="number" name="mobile" id="mobile" placeholder="Contact No. " value="{{ old('mobile', '') }}" required>
                                            @error('mobile')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="dob">Date of Birth</label>
                                            <input class="form-control boxss charector" type="date" name="dob" id="dob" placeholder="DOB" value="{{ old('dob', '') }}" required>
                                            @error('dob')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-4 my-2">
                                        <div class="form-group">
                                            <label for="photo">Photo</label>
                                            <input type="file" name="photo" id="photo" placeholder="photo" value="{{ old('photo', '') }}" class="form-control boxss" accept=".jpg,.png,.jpeg" required>

                                            @error('photo')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-4 my-2" id="upload_document">
                                        <div class="form-group">
                                             <label for="documents">Other Documents</label>
                                            <input type="file" class="form-control boxss"name="documents[]" id="documents" multiple placeholder="Upload Document" accept=".jpg,.png,.jpeg">

                                            @error('documents.*')
                                            <span class="text-danger mt-2">{{ $message }}</span><br>
                                            @enderror
                                            <small class="text-muted">Only image and multiple files are allowed (ex Aadhar, PAN Card, Certificates and etc.).</small>
                                        </div>
                                    </div>
                                </div>
                                <hr>

                                <div class="col-lg-12 d-flex justify-content-end">
                                    <button type="submit" class="default-btn" id="submitBtn">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script>
        document.getElementById("collaboration_enquiry_form").addEventListener("submit", function() {
            var submitBtn = document.getElementById("submitBtn");
            submitBtn.disabled = true;
            submitBtn.innerText = "Processing...";
        });
    </script>
@endpush