@extends('layouts.app')

@section('title', 'Rai University Admission Form')

@section('content')
<div class="page-border">

    {{-- Header --}}
    <div class="row mb-2">
        <div class="col-8">
            <img src="{{ asset('logo.png') }}" alt="Rai University" style="max-height:80px;">
        </div>
        <div class="col-4 text-end small">
            Form No: <strong>{{ $formNo }}</strong>
        </div>
    </div>

    <h5 class="heading mb-3">ADMISSION FORM</h5>

    <form action="{{ route('admission.submit') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="form_no" value="{{ $formNo }}">

        {{-- Program & Photo --}}
        <div class="row mb-3">
            <div class="col-8">
                <label>Course Applying For *</label>
                <select name="program" class="form-control orange-border" required>
                    <option value="">Select Program</option>
                    @foreach($programs as $p)
                        <option value="{{ $p }}" {{ old('program') == $p ? 'selected' : '' }}>{{ $p }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-4 text-center orange-border p-2">
                <label class="fw-bold">Passport Size Photo</label>
                <img id="photoPreview" style="width:80px;height:100px;border:1px solid #f36c21;display:none;margin:auto;">
                <input type="file" name="photo" class="form-control mt-2" accept=".jpg,.jpeg"
                       onchange="previewImage(this, 'photoPreview')">
            </div>
        </div>

        {{-- Personal Details --}}
        <div class="section-title">Personal Details</div>

        <label class="mt-2">Name * (As Per 10th Marksheet)</label>
        <input type="text" name="name" class="form-control orange-border mb-2"
               value="{{ old('name') }}" required>

        <div class="row mb-1">
            <div class="col-4">
                <label>Date of Birth *</label>
                <input type="date" name="dob" class="form-control orange-border"
                       value="{{ old('dob') }}" required>
            </div>
            <div class="col-4">
                <label>Gender</label><br>
                <input type="radio" name="gender" value="Male"   {{ old('gender') == 'Male'   ? 'checked' : '' }}> Male
                <input type="radio" name="gender" value="Female" {{ old('gender') == 'Female' ? 'checked' : '' }}> Female
            </div>
            <div class="col-4">
                <label>Category:</label><br>
                @foreach(['SC','ST','OBC','General'] as $cat)
                    <input type="radio" name="category" value="{{ $cat }}"
                           {{ old('category') == $cat ? 'checked' : '' }}> {{ $cat }}
                @endforeach
            </div>
        </div>

        <div class="row mb-2">
            <label>Nationality</label>
            <input type="text" name="nationality" value="{{ old('nationality', 'Indian') }}"
                   class="form-control orange-border">
        </div>

        {{-- Contact --}}
        <div class="row mb-2">
            <div class="col">
                <label>Mobile *</label>
                <input type="text" name="mobile" class="form-control orange-border"
                       maxlength="10" pattern="[0-9]{10}" inputmode="numeric"
                       value="{{ old('mobile') }}" required>
            </div>
            <div class="col">
                <label>Alternative Mobile</label>
                <input type="text" name="altmobile" class="form-control orange-border"
                       maxlength="10" pattern="[0-9]{10}" inputmode="numeric"
                       value="{{ old('altmobile') }}">
            </div>
            <div class="col">
                <label>Email *</label>
                <input type="email" name="email" class="form-control orange-border"
                       value="{{ old('email') }}" required>
            </div>
        </div>

        {{-- Address --}}
        <label>Address</label>
        <textarea name="address" class="form-control orange-border mb-2" rows="2">{{ old('address') }}</textarea>

        <div class="row mb-2">
            <div class="col-md-3">
                <label>City *</label>
                <input type="text" name="city" class="form-control orange-border"
                       value="{{ old('city') }}" required>
            </div>
            <div class="col-md-3">
                <label>District *</label>
                <input type="text" name="district" class="form-control orange-border"
                       value="{{ old('district') }}" required>
            </div>
            <div class="col-md-2">
                <label>State *</label>
                <input type="text" name="state" class="form-control orange-border"
                       value="{{ old('state') }}" required>
            </div>
            <div class="col-md-2">
                <label>Country</label>
                <input type="text" name="country" class="form-control orange-border"
                       value="{{ old('country') }}">
            </div>
            <div class="col-md-2">
                <label>Pincode</label>
                <input type="text" name="pincode" class="form-control orange-border"
                       maxlength="6" pattern="[0-9]{6}" title="Enter 6 digit pincode"
                       value="{{ old('pincode') }}">
            </div>
        </div>

        {{-- Academic Qualifications --}}
        <div class="section-title">Academic Qualifications</div>

        <table class="table table-bordered text-center small mt-2">
            <tr>
                <th>Qualification</th>
                <th>Year</th>
                <th>Board / University</th>
                <th>Stream</th>
                <th>Percentage/CGPA</th>
            </tr>
            @foreach([
                ['10th',  'year10','board10','stream10','percent10'],
                ['12th',  'year12','board12','stream12','percent12'],
                ['Graduation','yeargra','boardgra','streamgra','percentgra'],
                ['Post Graduation','yearpostgra','boardpostgra','streampostgra','percentpostgra'],
            ] as [$label, $year, $board, $stream, $pct])
            <tr>
                <td>{{ $label }}</td>
                <td><input type="number" name="{{ $year }}" class="form-control orange-border"
                           value="{{ old($year) }}"></td>
                <td><input type="text" name="{{ $board }}" class="form-control orange-border"
                           value="{{ old($board) }}"></td>
                <td><input type="text" name="{{ $stream }}" class="form-control orange-border"
                           value="{{ old($stream) }}"></td>
                <td><input type="number" step="0.01" name="{{ $pct }}" class="form-control orange-border"
                           value="{{ old($pct) }}"></td>
            </tr>
            @endforeach
        </table>

        {{-- Signature --}}
        <div class="col-4 text-center orange-border p-2 mt-2">
            <label class="fw-bold">Student Signature</label>
            <img id="signPreview" style="max-width:150px;display:none;margin:auto;">
            <input type="file" name="sign" class="form-control mt-2" accept=".jpg,.jpeg"
                   onchange="previewImage(this, 'signPreview')">
        </div>

        <div class="text-center mt-4">
            <button type="submit" class="btn btn-warning px-5">Submit</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function previewImage(input, previewId) {
    const img = document.getElementById(previewId);
    img.src = URL.createObjectURL(input.files[0]);
    img.style.display = 'block';
}
</script>
@endpush