@extends('layouts.app')

@section('title', 'Admission – Document Upload')

@section('content')

    {{-- Stepper --}}
    <div class="step-indicator mt-4">
        <div class="step-item">
            <div class="step-circle completed"><i class="bi bi-check-lg"></i></div>
            <span class="step-label completed">Admission Form</span>
        </div>
        <div class="step-connector completed"></div>
        <div class="step-item">
            <div class="step-circle active">2</div>
            <span class="step-label active">Document Upload</span>
        </div>
        <div class="step-connector"></div>
        <div class="step-item">
            <div class="step-circle">3</div>
            <span class="step-label">Payment</span>
        </div>
    </div>

    {{-- Info bar --}}
    <div class="form-topbar mb-0">
        <div class="form-number-badge">
            Form No: <strong>{{ $application->form_number }}</strong>
        </div>
        <div style="font-size:0.85rem;color:#6b7280;">
            <i class="bi bi-person me-1"></i>{{ $application->applicant_name }}
            &nbsp;&bull;&nbsp;
            <i class="bi bi-mortarboard me-1"></i>{{ $admission->course ?? $application->course }}
        </div>
    </div>

    <div class="hint-box mt-3 mb-4">
        <i class="bi bi-info-circle me-1"></i>
        <strong>Document Upload Instructions:</strong>
        <ul class="mb-0 mt-2">
            <li>Documents marked <span style="color:#b91c1c;font-weight:600">Required</span> must be uploaded to proceed to payment.</li>
            <li><strong>Student's Signature</strong> and <strong>Photograph</strong> must be in <strong>JPEG format only</strong>.</li>
            <li>All other documents can be uploaded as <strong>JPEG or PDF</strong>.</li>
            <li>Max file size: 2 MB for signature/photograph, 5 MB for other documents.</li>
        </ul>
    </div>

    @if (session('success'))
        <div class="alert" style="background:#f0fdf4;border:1.5px solid #86efac;border-radius:8px;padding:12px 18px;margin-bottom:1rem;color:#15803d;font-size:0.88rem">
            <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert" style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:8px;padding:12px 18px;margin-bottom:1rem;color:#b91c1c;font-size:0.88rem">
            <i class="bi bi-exclamation-circle-fill me-2"></i>{{ session('error') }}
        </div>
    @endif

    @php
        $uploadedTypes  = $admission->documents->pluck('document_type')->toArray();
        $requiredTypes  = \App\Models\AdmissionDocument::requiredTypes();
        $allRequired    = collect($requiredTypes)->every(fn($t) => in_array($t, $uploadedTypes));
    @endphp

    <div class="form-card">
        <div class="form-card-header">
            <div class="section-icon"><i class="bi bi-cloud-upload-fill"></i></div>
            <h3>Upload Documents</h3>
        </div>
        <div class="form-card-body">

            @foreach ($allDocs as $type => $doc)
                @php $uploaded = in_array($type, $uploadedTypes); @endphp
                <div class="doc-upload-item {{ $uploaded ? 'uploaded' : ($doc['required'] ? 'required-missing' : '') }}">

                    <div class="doc-header">
                        <div>
                            <p class="doc-title">{{ $doc['label'] }}</p>
                            <p class="doc-format-hint"><i class="bi bi-paperclip me-1"></i>Format: {{ $doc['formats'] }}</p>
                            <p style="font-size:0.8rem;color:#6b7280;margin:0">{{ $doc['help'] }}</p>
                        </div>
                        <div>
                            @if ($uploaded)
                                <span class="doc-badge-uploaded"><i class="bi bi-check-circle-fill"></i> Uploaded</span>
                            @elseif ($doc['required'])
                                <span class="doc-badge-required">Required</span>
                            @else
                                <span class="doc-badge-optional">Optional</span>
                            @endif
                        </div>
                    </div>

                    @if ($uploaded)
                        @php $docModel = $admission->documents->firstWhere('document_type', $type); @endphp
                        <div class="uploaded-file-info mb-3">
                            <i class="bi bi-file-earmark-check-fill" style="color:#059669"></i>
                            <div>
                                <div style="font-weight:600">{{ $docModel->original_filename ?? 'File uploaded' }}</div>
                                @if ($docModel)
                                    <div style="font-size:0.78rem;color:#6b7280">
                                        {{ number_format($docModel->file_size / 1024, 1) }} KB
                                        &bull; Uploaded {{ $docModel->created_at->format('d M Y, h:i A') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                        <details style="font-size:0.82rem;color:#6b7280;cursor:pointer">
                            <summary>Replace this document</summary>
                            <div class="mt-2">
                                <form action="{{ route('application.admissionUploadDocument', $application->form_number) }}"
                                      method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="document_type" value="{{ $type }}">
                                    <div class="d-flex gap-2 align-items-center flex-wrap">
                                        <input type="file" name="document" class="form-control" style="max-width:320px"
                                               accept="{{ $doc['accept'] }}" required>
                                        <button type="submit" class="upload-submit-btn">
                                            <i class="bi bi-arrow-repeat me-1"></i>Replace
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </details>
                    @else
                        <form action="{{ route('application.admissionUploadDocument', $application->form_number) }}"
                              method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="document_type" value="{{ $type }}">
                            <div class="custom-file-wrapper mb-3">
                                <label class="file-input-label" for="file_{{ $type }}">
                                    <i class="bi bi-cloud-upload"></i>
                                    <span class="file-name-display">Click to choose file or drag &amp; drop</span>
                                </label>
                                <input type="file" id="file_{{ $type }}" name="document"
                                       class="hidden-file-input" accept="{{ $doc['accept'] }}" required>
                            </div>
                            @error('document')
                                <div class="invalid-feedback d-block mb-2">{{ $message }}</div>
                            @enderror
                            <button type="submit" class="upload-submit-btn">
                                <i class="bi bi-upload me-1"></i>Upload Document
                            </button>
                        </form>
                    @endif

                </div>
            @endforeach

        </div>
    </div>

    {{-- Proceed to Payment --}}
    <div class="form-card">
        <div class="form-card-body">

            @if (!$allRequired)
                <div class="alert" style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:8px;font-size:0.88rem;color:#b91c1c;padding:14px 18px">
                    <i class="bi bi-exclamation-circle-fill me-2"></i>
                    Please upload all <strong>Required</strong> documents before proceeding to payment.
                </div>
            @else
                <div class="alert" style="background:#f0fdf4;border:1.5px solid #86efac;border-radius:8px;font-size:0.88rem;color:#15803d;padding:14px 18px">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    All required documents uploaded. You may now proceed to payment.
                </div>
            @endif

            <div class="form-check mb-4">
                <input class="form-check-input declaration-checkbox" type="checkbox" id="doc_declaration_0"
                    {{ !$allRequired ? 'disabled' : '' }} required>
                <label class="form-check-label" for="doc_declaration_0" style="font-size:0.88rem">
                    I confirm that all uploaded documents are genuine and belong to me.
                </label>
            </div>

            <div class="declaration-list mb-4">
                <div class="form-check mb-2">
                    <input class="form-check-input declaration-checkbox" type="checkbox" id="doc_declaration_1"
                        {{ !$allRequired ? 'disabled' : '' }} required>
                    <label class="form-check-label" for="doc_declaration_1" style="font-size:0.88rem">
                        I hereby declare that all the information furnished by me in this Admission Form and the documents submitted in support of my application are true, complete, and correct to the best of my knowledge and belief.
                    </label>
                </div>
                <div class="form-check mb-2">
                    <input class="form-check-input declaration-checkbox" type="checkbox" id="doc_declaration_2"
                        {{ !$allRequired ? 'disabled' : '' }} required>
                    <label class="form-check-label" for="doc_declaration_2" style="font-size:0.88rem">
                        I confirm that I have submitted all the required clear documents as prescribed by the College for admission.
                    </label>
                </div>
                <div class="form-check mb-2">
                    <input class="form-check-input declaration-checkbox" type="checkbox" id="doc_declaration_3"
                        {{ !$allRequired ? 'disabled' : '' }} required>
                    <label class="form-check-label" for="doc_declaration_3" style="font-size:0.88rem">
                        I undertake that I shall not indulge in ragging in any form, either directly or indirectly, and shall abide by all the rules, regulations, and disciplinary measures of the College/UGC. I understand that ragging is a punishable offence under the law and may result in disciplinary action, including cancellation of admission.
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input declaration-checkbox" type="checkbox" id="doc_declaration_4"
                        {{ !$allRequired ? 'disabled' : '' }} required>
                    <label class="form-check-label" for="doc_declaration_4" style="font-size:0.88rem">
                        I understand and agree that if any information furnished by me is found to be false, misleading, incomplete, or if any discrepancy is detected in the documents submitted by me at any stage, my admission shall be liable to be cancelled without prior notice, and any action deemed fit by the College/University may be taken against me.
                    </label>
                </div>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ route('application.admissionCreate', $application->form_number) }}"
                   class="btn-secondary-custom text-decoration-none">
                    <i class="bi bi-arrow-left me-2"></i>Back to Form
                </a>

                <form action="{{ route('application.admissionSubmitDocuments', $application->form_number) }}"
                      method="POST" id="doc-submit-form">
                    @csrf
                    <button type="submit" class="btn-primary-custom" id="doc-submit-btn"
                        {{ !$allRequired ? 'disabled' : '' }}>
                        Proceed to Payment <i class="bi bi-arrow-right ms-2"></i>
                    </button>
                </form>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
<script>
    // Enable/disable submit button based on all checkboxes
    function updateSubmitButton() {
        const btn = document.getElementById('doc-submit-btn');
        const checkboxes = document.querySelectorAll('.declaration-checkbox');
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        if (btn) btn.disabled = !allChecked;
    }

    // Add event listeners to all declaration checkboxes
    document.querySelectorAll('.declaration-checkbox').forEach(function (checkbox) {
        checkbox.addEventListener('change', updateSubmitButton);
    });

    // Initial button state
    updateSubmitButton();

    // Show selected filename in custom file input
    document.querySelectorAll('.hidden-file-input').forEach(function (input) {
        input.addEventListener('change', function () {
            const label = this.previousElementSibling?.querySelector('.file-name-display');
            if (label) label.textContent = this.files[0]?.name || 'Click to choose file';
        });
    });
</script>
@endpush