@extends('layout.user')

@section('content')
<main id="main" class="main">
    <div class="pagetitle d-flex justify-content-between align-items-center">
        <div>
            <h1>Unggah Berkas Pendaftaran</h1>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                    <li class="breadcrumb-item active">Upload Berkas</li>
                </ol>
            </nav>
        </div>
    </div>

    <section class="section mt-3">
        <div class="row">
            <div class="col-lg-12">
                <!-- Include Stepper Component -->
                @include('User.components.rpl-stepper')

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="bi bi-check-circle me-2"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="bi bi-exclamation-octagon me-2"></i>
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if($isLocked ?? false)
                    <div class="alert alert-warning d-flex align-items-center border-0 shadow-sm" role="alert">
                        <i class="bi bi-lock-fill me-2"></i>
                        <div>Data tidak dapat diubah karena self-assessment sudah dikirim.</div>
                    </div>
                @endif

                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div>
                                <h5 class="card-title p-0 m-0 fs-4 fw-bold text-dark">Daftar Dokumen Persyaratan</h5>
                                <p class="text-muted small mb-0">Unggah seluruh dokumen wajib sebelum melanjutkan ke tahap pengisian nilai transkrip.</p>
                            </div>
                            @if(!($isLocked ?? false))
                                <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3 py-2" data-bs-toggle="modal" data-bs-target="#addBuktiModal">
                                    <i class="bi bi-plus-lg me-1"></i> Tambah Dokumen Lain
                                </button>
                            @endif
                        </div>

                        <!-- Grid of Document Cards -->
                        <div class="row g-4">
                            @php
                                // Prepare data structure for document types
                                $docs = [
                                    [
                                        'id' => 'ijazah',
                                        'title' => 'Ijazah Terakhir',
                                        'description' => 'File ijazah pendidikan terakhir (PDF, JPG, JPEG, PNG, Maks. 2MB)',
                                        'is_required' => true,
                                        'uploaded' => $ijazah ? true : false,
                                        'filename' => $ijazah ? basename($ijazah->file) : null,
                                        'filepath' => $ijazah ? asset($ijazah->file) : null,
                                        'upload_route' => route('ijazah-add'),
                                        'delete_route' => $ijazah ? route('ijazah-delete', $ijazah->id) : null,
                                        'icon' => 'bi-award text-primary bg-light-primary'
                                    ],
                                    [
                                        'id' => 'transkrip',
                                        'title' => 'Transkrip Nilai / KHS',
                                        'description' => 'Transkrip nilai akademik dari instansi sebelumnya (Hanya file PDF, Maks. 2MB)',
                                        'is_required' => true,
                                        'uploaded' => $transkrip ? true : false,
                                        'filename' => $transkrip ? basename($transkrip->file) : null,
                                        'filepath' => $transkrip ? route('view-transkrip', ['filename' => $transkrip->file]) : null,
                                        'upload_route' => route('transkrip-add-data'),
                                        'delete_route' => $transkrip ? route('delete-transkrip', $transkrip->id) : null,
                                        'icon' => 'bi-file-earmark-pdf text-danger bg-light-danger',
                                        'accept' => '.pdf'
                                    ],
                                    [
                                        'id' => 'ktp',
                                        'title' => 'Kartu Tanda Penduduk (KTP)',
                                        'description' => 'Kartu identitas resmi KTP pendaftar (PDF, JPG, JPEG, PNG, Maks. 2MB)',
                                        'is_required' => true,
                                        'uploaded' => $bukti_list->firstWhere('jenis_dokumen', 'KTP') ? true : false,
                                        'filename' => $bukti_list->firstWhere('jenis_dokumen', 'KTP') ? $bukti_list->firstWhere('jenis_dokumen', 'KTP')->file : null,
                                        'filepath' => $bukti_list->firstWhere('jenis_dokumen', 'KTP') ? route('bukti-alih-jenjang-file', ['filename' => $bukti_list->firstWhere('jenis_dokumen', 'KTP')->file]) : null,
                                        'upload_route' => route('bukti-alih-jenjang-add'),
                                        'delete_route' => $bukti_list->firstWhere('jenis_dokumen', 'KTP') ? route('bukti-alih-jenjang-delete', $bukti_list->firstWhere('jenis_dokumen', 'KTP')->nomor_dokumen) : null,
                                        'icon' => 'bi-card-image text-info bg-light-info',
                                        'fixed_jenis' => 'KTP'
                                    ]
                                ];

                                // Optional document types
                                $optional_types = [
                                    'Sertifikat' => 'Sertifikat keahlian, kompetensi, atau pelatihan penunjang',
                                    'Panduan Kurikulum' => 'Panduan kurikulum atau silabus mata kuliah prodi asal',
                                    'Surat Keterangan Pernah Kuliah' => 'Surat keterangan pernah kuliah bagi mahasiswa alih jenjang/belum lulus'
                                ];

                                foreach($optional_types as $type_name => $type_desc) {
                                    $item = $bukti_list->firstWhere('jenis_dokumen', $type_name);
                                    $docs[] = [
                                        'id' => Str::slug($type_name),
                                        'title' => $type_name,
                                        'description' => $type_desc . ' (PDF, JPG, JPEG, PNG, Maks. 2MB)',
                                        'is_required' => false,
                                        'uploaded' => $item ? true : false,
                                        'filename' => $item ? $item->file : null,
                                        'filepath' => $item ? route('bukti-alih-jenjang-file', ['filename' => $item->file]) : null,
                                        'upload_route' => route('bukti-alih-jenjang-add'),
                                        'delete_route' => $item ? route('bukti-alih-jenjang-delete', $item->nomor_dokumen) : null,
                                        'icon' => 'bi-file-earmark-check text-success bg-light-success',
                                        'fixed_jenis' => $type_name
                                    ];
                                }

                                // Custom uploaded documents
                                $all_predefined_types = array_merge(['KTP'], array_keys($optional_types));
                                $custom_docs = $bukti_list->filter(function($bukti) use ($all_predefined_types) {
                                    return !in_array($bukti->jenis_dokumen, $all_predefined_types);
                                });
                            @endphp

                            @foreach($docs as $doc)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card h-100 border border-1 rounded-4 shadow-sm doc-card {{ $doc['uploaded'] ? 'doc-uploaded' : '' }}">
                                        <div class="card-body p-4 d-flex flex-column justify-content-between">
                                            <div>
                                                <div class="d-flex justify-content-between align-items-start mb-3">
                                                    <div class="icon-box-rounded {{ explode(' ', $doc['icon'])[1] }} p-3 rounded-4">
                                                        <i class="bi {{ explode(' ', $doc['icon'])[0] }} fs-3 text-primary"></i>
                                                    </div>
                                                    @if($doc['is_required'])
                                                        <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-3 py-1 text-uppercase fw-bold" style="font-size: 0.7rem;">Wajib</span>
                                                    @else
                                                        <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3 py-1 text-uppercase fw-bold" style="font-size: 0.7rem;">Opsional</span>
                                                    @endif
                                                </div>

                                                <h6 class="fw-bold text-dark mb-1 fs-5">{{ $doc['title'] }}</h6>
                                                <p class="text-muted small mb-4">{{ $doc['description'] }}</p>
                                            </div>

                                            <div>
                                                @if($doc['uploaded'])
                                                    <div class="bg-light rounded-3 p-3 mb-3 border border-1 border-dashed">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <i class="bi bi-check-circle-fill text-success fs-5 me-2"></i>
                                                            <span class="text-success fw-bold small">Sudah Diunggah</span>
                                                        </div>
                                                        <div class="text-truncate text-muted small mb-0" title="{{ $doc['filename'] }}">
                                                            {{ $doc['filename'] }}
                                                        </div>
                                                    </div>
                                                    <div class="d-flex gap-2">
                                                        <a href="{{ $doc['filepath'] }}" target="_blank" class="btn btn-light btn-sm flex-fill rounded-pill">
                                                            <i class="bi bi-eye me-1"></i> Lihat
                                                        </a>
                                                        @if(!($isLocked ?? false))
                                                            <form action="{{ $doc['delete_route'] }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus dokumen ini?');" class="flex-fill">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-outline-danger btn-sm w-100 rounded-pill">
                                                                    <i class="bi bi-trash me-1"></i> Hapus
                                                                </button>
                                                            </form>
                                                        @endif
                                                    </div>
                                                @elseif(!($isLocked ?? false))
                                                    <!-- Drag & Drop Zone -->
                                                    <form action="{{ $doc['upload_route'] }}" method="POST" enctype="multipart/form-data" class="upload-form">
                                                        @csrf
                                                        @if(isset($doc['fixed_jenis']))
                                                            <input type="hidden" name="jenis_dokumen" value="{{ $doc['fixed_jenis'] }}">
                                                        @endif
                                                        <div class="drag-drop-zone rounded-4 text-center p-3" id="drop-zone-{{ $doc['id'] }}">
                                                            <input type="file" name="file" id="file-{{ $doc['id'] }}" accept="{{ $doc['accept'] ?? '.pdf,.jpg,.jpeg,.png' }}" class="file-input d-none" onchange="this.form.submit()">
                                                            <label for="file-{{ $doc['id'] }}" class="cursor-pointer d-block m-0 py-2">
                                                                <i class="bi bi-cloud-arrow-up fs-2 text-muted mb-2 d-block"></i>
                                                                <span class="d-block fw-bold text-primary small">Klik atau Tarik File</span>
                                                                <span class="text-muted" style="font-size: 0.75rem;">Maksimal 2MB</span>
                                                            </label>
                                                        </div>
                                                    </form>
                                                @else
                                                    <div class="bg-light rounded-3 p-3 mb-3 border border-1 border-dashed text-center text-muted small">
                                                        Tidak diunggah
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <!-- Custom Uploaded Documents -->
                            @foreach($custom_docs as $bukti)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card h-100 border border-success rounded-4 shadow-sm doc-card doc-uploaded">
                                        <div class="card-body p-4 d-flex flex-column justify-content-between">
                                            <div>
                                                <div class="d-flex justify-content-between align-items-start mb-3">
                                                    <div class="icon-box-rounded bg-light-success p-3 rounded-4">
                                                        <i class="bi bi-file-earmark-check fs-3 text-success"></i>
                                                    </div>
                                                    <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3 py-1 text-uppercase fw-bold" style="font-size: 0.7rem;">Tambahan</span>
                                                </div>

                                                <h6 class="fw-bold text-dark mb-1 fs-5">{{ $bukti->jenis_dokumen }}</h6>
                                                <p class="text-muted small mb-4">Dokumen pendukung kustom yang diunggah.</p>
                                            </div>

                                            <div>
                                                <div class="bg-light rounded-3 p-3 mb-3 border border-1 border-dashed">
                                                    <div class="d-flex align-items-center mb-2">
                                                        <i class="bi bi-check-circle-fill text-success fs-5 me-2"></i>
                                                        <span class="text-success fw-bold small">Sudah Diunggah</span>
                                                    </div>
                                                    <div class="text-truncate text-muted small mb-0" title="{{ $bukti->file }}">
                                                        {{ $bukti->file }}
                                                    </div>
                                                </div>
                                                <div class="d-flex gap-2">
                                                    <a href="{{ route('bukti-alih-jenjang-file', ['filename' => $bukti->file]) }}" target="_blank" class="btn btn-light btn-sm flex-fill rounded-pill">
                                                        <i class="bi bi-eye me-1"></i> Lihat
                                                    </a>
                                                    @if(!($isLocked ?? false))
                                                        <form action="{{ route('bukti-alih-jenjang-delete', $bukti->nomor_dokumen) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus dokumen ini?');" class="flex-fill">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-outline-danger btn-sm w-100 rounded-pill">
                                                                <i class="bi bi-trash me-1"></i> Hapus
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <!-- Stepper Navigation buttons -->
                        <div class="d-flex justify-content-between mt-5 pt-4 border-top border-1">
                            <a href="{{ route('riwayat-camaba-view') }}" class="btn btn-outline-secondary rounded-pill px-4 py-2">
                                <i class="bi bi-arrow-left me-2"></i> Sebelumnya
                            </a>
                            
                            @php
                                $next_enabled = $docs[0]['uploaded'] && $docs[1]['uploaded'] && $docs[2]['uploaded'];
                            @endphp

                            @if($next_enabled)
                                <a href="{{ route('input-transkrip') }}" class="btn btn-primary rounded-pill px-4 py-2">
                                    Selanjutnya <i class="bi bi-arrow-right ms-2"></i>
                                </a>
                            @else
                                <button type="button" class="btn btn-primary rounded-pill px-4 py-2" disabled data-bs-toggle="tooltip" data-bs-placement="top" title="Unggah seluruh berkas wajib untuk melanjutkan">
                                    Selanjutnya <i class="bi bi-arrow-right ms-2"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- Modal Tambah Bukti Kustom -->
<div class="modal fade" id="addBuktiModal" tabindex="-1" aria-labelledby="addBuktiModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header px-4 pt-4 border-0">
                <h5 class="modal-title fw-bold text-dark" id="addBuktiModalLabel">Tambah Dokumen Pendukung Lain</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('bukti-alih-jenjang-add') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label for="jenis_dokumen" class="form-label fw-bold text-muted small">Nama / Jenis Dokumen</label>
                        <input type="text" class="form-control rounded-3" id="jenis_dokumen" name="jenis_dokumen" placeholder="Contoh: Sertifikat Pelatihan ReactJS" required>
                        <div class="invalid-feedback">Masukkan jenis dokumen.</div>
                    </div>
                    <div class="mb-3">
                        <label for="custom_file" class="form-label fw-bold text-muted small">Upload File Dokumen (PDF/JPG/PNG)</label>
                        <input type="file" class="form-control rounded-3" id="custom_file" name="file" accept=".pdf,.jpg,.jpeg,.png" required>
                        <small class="text-muted" style="font-size: 0.75rem;">Maksimal file 2MB dalam format PDF, JPG, JPEG, atau PNG.</small>
                        <div class="invalid-feedback">Pilih file untuk diunggah.</div>
                    </div>
                </div>
                <div class="modal-footer px-4 pb-4 border-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Unggah Berkas</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.icon-box-rounded {
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg-light-primary { background-color: #e7f1ff; }
.bg-light-danger { background-color: #f8d7da; }
.bg-light-info { background-color: #cff4fc; }
.bg-light-success { background-color: #d1e7dd; }

.doc-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.doc-uploaded {
    background-color: #f4fbf7 !important;
    border-color: #badbcc !important;
}
.doc-uploaded .bg-light {
    background-color: #ffffff !important;
    border: 1px dashed #badbcc !important;
}

/* Drag and Drop Zone */
.drag-drop-zone {
    border: 2px dashed #ced4da;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    position: relative;
}
.drag-drop-zone:hover {
    border-color: #0d6efd;
    background-color: #f1f7ff;
}
.drag-drop-zone.dragover {
    border-color: #198754;
    background-color: #eef9f3;
}
.cursor-pointer {
    cursor: pointer;
}
</style>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Add drag and drop functionality
    const dropZones = document.querySelectorAll('.drag-drop-zone');
    dropZones.forEach(zone => {
        const input = zone.querySelector('.file-input');

        zone.addEventListener('dragover', (e) => {
            e.preventDefault();
            zone.classList.add('dragover');
        });

        zone.addEventListener('dragleave', () => {
            zone.classList.remove('dragover');
        });

        zone.addEventListener('drop', (e) => {
            e.preventDefault();
            zone.classList.remove('dragover');

            if (e.dataTransfer.files.length > 0) {
                input.files = e.dataTransfer.files;
                // Trigger form submission
                input.closest('form').submit();
            }
        });
    });
});
</script>
@endpush