{{-- resources/views/components/training-center/documents-declaration.blade.php --}}
@props(['documents'])

<div class="step-header text-center">
    <h2 class="step-title">Documents & Declaration</h2>
    <p class="step-subtitle">Upload required documents and complete declaration</p>
</div>

<div class="bg-light p-4 rounded mb-4">
    <div class="upload-grid">
        <!-- Registration Certificate (Required) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Registration Certificate *</label>
            @if(isset($documents['registration_certificate']) && $documents['registration_certificate'])
            <div class="document-item">
                <i class="fas fa-file-pdf document-icon"></i>
                <span>{{ $documents['registration_certificate'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-file-pdf document-icon"></i>
                <span>registration_certificate.pdf</span>
            </div>
            @endif
        </div>

        <!-- NOC from Local Authority (Optional) -->
        <div class="upload-group mb-3">
            <label class="upload-label">NOC from Local Authority</label>
            @if(isset($documents['noc_authority']) && $documents['noc_authority'])
            <div class="document-item">
                <i class="fas fa-file-pdf document-icon"></i>
                <span>{{ $documents['noc_authority'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-file-pdf document-icon"></i>
                <span>noc_authority.pdf</span>
            </div>
            @endif
        </div>

        <!-- Building Photos (Required, Multiple) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Building Photos *</label>
            @if(isset($documents['building_photos']) && $documents['building_photos'])
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>{{ is_array($documents['building_photos']) ? implode(', ', $documents['building_photos']) : $documents['building_photos'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>building_exterior.jpg, building_interior.jpg</span>
            </div>
            @endif
            <div class="form-text">Upload exterior and interior building photos</div>
        </div>

        <!-- Classroom Photos (Required, Multiple) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Classroom Photos *</label>
            @if(isset($documents['classroom_photos']) && $documents['classroom_photos'])
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>{{ is_array($documents['classroom_photos']) ? implode(', ', $documents['classroom_photos']) : $documents['classroom_photos'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>classroom1.jpg, classroom2.jpg, classroom3.jpg</span>
            </div>
            @endif
            <div class="form-text">Upload photos of all classrooms</div>
        </div>

        <!-- Laboratory Photos (Optional, Multiple) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Laboratory Photos</label>
            @if(isset($documents['laboratory_photos']) && $documents['laboratory_photos'])
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>{{ is_array($documents['laboratory_photos']) ? implode(', ', $documents['laboratory_photos']) : $documents['laboratory_photos'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>lab1.jpg, lab2.jpg</span>
            </div>
            @endif
            <div class="form-text">Upload photos of laboratory facilities</div>
        </div>

        <!-- CCTV Control Room Photos (Optional, Multiple) -->
        <div class="upload-group mb-3">
            <label class="upload-label">CCTV Control Room Photos</label>
            @if(isset($documents['cctv_photos']) && $documents['cctv_photos'])
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>{{ is_array($documents['cctv_photos']) ? implode(', ', $documents['cctv_photos']) : $documents['cctv_photos'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>cctv_room.jpg</span>
            </div>
            @endif
            <div class="form-text">Upload photos of CCTV control room setup</div>
        </div>

        <!-- Staff Qualification Certificates (Optional, Multiple) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Staff Qualification Certificates</label>
            @if(isset($documents['staff_certificates']) && $documents['staff_certificates'])
            <div class="document-item">
                <i class="fas fa-file-pdf document-icon"></i>
                <span>{{ is_array($documents['staff_certificates']) ? implode(', ', $documents['staff_certificates']) : $documents['staff_certificates'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-file-pdf document-icon"></i>
                <span>staff_cert1.pdf, staff_cert2.pdf</span>
            </div>
            @endif
            <div class="form-text">Upload trainer and staff certificates</div>
        </div>

        <!-- Washroom Photos (Required, Multiple) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Washroom Photos *</label>
            @if(isset($documents['washroom_photos']) && $documents['washroom_photos'])
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>{{ is_array($documents['washroom_photos']) ? implode(', ', $documents['washroom_photos']) : $documents['washroom_photos'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-images document-icon"></i>
                <span>washroom1.jpg, washroom2.jpg</span>
            </div>
            @endif
            <div class="form-text">Upload photos of washroom facilities</div>
        </div>

        <!-- Classroom Video (Max 10s, Max 100MB) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Classroom Video *</label>
            @if(isset($documents['classroom_video']) && $documents['classroom_video'])
            <div class="document-item">
                <i class="fas fa-video document-icon"></i>
                <span>{{ $documents['classroom_video'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-video document-icon"></i>
                <span>classroom_video.mp4</span>
            </div>
            @endif
            <div class="form-text">Upload a classroom video (max 10 seconds, max size 100MB)</div>
        </div>

        <!-- Lab Video (Max 10s, Max 100MB) -->
        <div class="upload-group mb-3">
            <label class="upload-label">Lab Video</label>
            @if(isset($documents['lab_video']) && $documents['lab_video'])
            <div class="document-item">
                <i class="fas fa-video document-icon"></i>
                <span>{{ $documents['lab_video'] }}</span>
            </div>
            @else
            <div class="document-item">
                <i class="fas fa-video document-icon"></i>
                <span>lab_video.mp4</span>
            </div>
            @endif
            <div class="form-text">Upload a lab video (max 10 seconds, max size 100MB)</div>
        </div>
    </div>

    <div class="declaration-items">
        <label class="checkbox-label declaration-item mb-3">
            <span class="checkbox-custom"><i class="fas fa-check"></i></span>
            <div class="declaration-content">
                <div class="declaration-text">I agree to the Terms and Conditions and Privacy Policy *</div>
                <div class="declaration-help">You must agree to our terms and privacy policy to proceed with registration.</div>
            </div>
        </label>

        <label class="checkbox-label declaration-item mb-3">
            <span class="checkbox-custom"><i class="fas fa-check"></i></span>
            <div class="declaration-content">
                <div class="declaration-text">I agree to facility inspection by NISD officials *</div>
                <div class="declaration-help">NISD reserves the right to inspect your facility as part of the accreditation process.</div>
            </div>
        </label>

        <label class="checkbox-label declaration-item mb-3">
            <span class="checkbox-custom"><i class="fas fa-check"></i></span>
            <div class="declaration-content">
                <div class="declaration-text">I declare that all information provided is accurate and complete *</div>
                <div class="declaration-help">Any false information may result in rejection of your application or cancellation of registration.</div>
            </div>
        </label>
    </div>
</div>