@extends('layouts.app')

@section('title', 'Step 3 – 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">Personal Information</span>
        </div>
        <div class="step-connector completed"></div>
        <div class="step-item">
            <div class="step-circle completed"><i class="bi bi-check-lg"></i></div>
            <span class="step-label completed">Payment</span>
        </div>
        <div class="step-connector completed"></div>
        <div class="step-item">
            <div class="step-circle active">3</div>
            <span class="step-label active">Document Upload</span>
        </div>
    </div>

    {{-- Form 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>{{ $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 submit your
                application.</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>Maximum file size: 2 MB for signature/photograph, 5 MB for other documents.</li>
            <li>Ensure all documents are clearly legible and not blurry.</li>
            <li>Upload your <strong>Application Fee Payment Receipt</strong> if it was generated separately after payment.
            </li>
        </ul>
    </div>

    @php
        $requiredDocs = ['signature', 'photograph', 'admit_card_x', 'hs_marksheet'];
        $uploadedTypes = $application->documents->pluck('document_type')->toArray();

        $allDocs = [
            'signature' => [
                'label' => "1. Student's Signature",
                'formats' => 'JPEG only',
                'accept' => 'image/jpeg',
                'required' => true,
                'help' => 'Scan or photograph your signature on plain white paper. JPEG format only.',
            ],
            'photograph' => [
                'label' => '2. Photograph of the Applicant',
                'formats' => 'JPEG only',
                'accept' => 'image/jpeg',
                'required' => true,
                'help' => 'Recent passport-size photograph. Clear background. JPEG format only.',
            ],
            'admit_card_x' => [
                'label' => '3. Admit Card – Class X',
                'formats' => 'JPEG or PDF',
                'accept' => 'image/jpeg,application/pdf',
                'required' => true,
                'help' => 'Scanned copy of your Class X Admit Card. JPEG or PDF.',
            ],
            'hs_marksheet' => [
                'label' => '4. Higher Secondary Mark Sheet',
                'formats' => 'JPEG or PDF',
                'accept' => 'image/jpeg,application/pdf',
                'required' => true,
                'help' => 'Your H.S. or equivalent examination mark sheet. JPEG or PDF.',
            ],
            'payment_receipt' => [
                'label' => '5. Application Fee Payment Receipt',
                'formats' => 'JPEG or PDF',
                'accept' => 'image/jpeg,application/pdf',
                'required' => false,
                'help' => 'Upload if a receipt was generated separately after paying the application fee.',
            ],
            'category_certificate' => [
                'label' => '6. Category Certificate (SC / ST / OBC / EWS)',
                'formats' => 'JPEG or PDF',
                'accept' => 'image/jpeg,application/pdf',
                'required' => false,
                'help' => 'Required only for SC, ST, OBC, or EWS applicants. Upload if applicable.',
            ],
        ];
    @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)
                        {{-- Show uploaded info + re-upload option --}}
                        @php
                            $docModel = $application->documents->where('document_type', $type)->first();
                        @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.upload', $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
                        {{-- Upload form --}}
                        <form action="{{ route('application.upload', $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>

    {{-- Final Submit --}}
    <div class="form-card">
        <div class="form-card-body">

            @php
                $allRequired = collect($requiredDocs)->every(fn($t) => in_array($t, $uploadedTypes));
            @endphp

            @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 final submission.
                </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 have been uploaded. You may now submit your application.
                </div>
            @endif

            <div class="form-check mb-4">
                <input class="form-check-input" type="checkbox" id="final_declaration"
                    {{ !$allRequired ? 'disabled' : '' }}>
                <label class="form-check-label" for="final_declaration" style="font-size:0.88rem">
                    I confirm that I have paid the application fee and all uploaded documents are genuine.
                    I understand that submission of false documents will result in disqualification.
                </label>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ route('application.payment', $application->form_number) }}"
                    class="btn-secondary-custom text-decoration-none">
                    <i class="bi bi-arrow-left me-2"></i>Back to Payment
                </a>
                <form action="{{ route('application.submit', $application->form_number) }}" method="POST"
                    id="final-submit-form">
                    @csrf
                    <button type="submit" class="btn-primary-custom" id="final-submit-btn"
                        {{ !$allRequired ? 'disabled' : '' }}>
                        Submit Application <i class="bi bi-send-fill ms-2"></i>
                    </button>
                </form>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
    <script>
        document.getElementById('final_declaration')?.addEventListener('change', function() {
            const btn = document.getElementById('final-submit-btn');
            if (btn) btn.disabled = !this.checked;
        });
        // Keep submit btn disabled until checkbox checked
        (function() {
            const btn = document.getElementById('final-submit-btn');
            if (btn && !btn.disabled) btn.disabled = true;
            const chk = document.getElementById('final_declaration');
            if (!chk?.disabled) {
                if (btn) btn.disabled = true; // require checkbox even when docs ready
            }
        })();
    </script>
@endpush