@extends('layouts.app')

@section('title', 'Upload Data Pendukung')

@section('content')
<main class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Upload Data Pendukung</div>
                    <div class="card-body">
                        @if(session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif
                        @if(session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <div class="alert alert-info mb-3">
                            <strong>Jadwal Pendaftaran</strong>
                            <hr class="my-2">
                            <small>
                                <strong>Tahun Pelajaran:</strong> {{ $schedule['tahun_pelajaran'] ?? '2025/2026' }}<br>
                                <strong>Dibuka:</strong> {{ $schedule['dibuka_formatted'] ?? '1 Juni 2026' }}<br>
                                <strong>Ditutup:</strong> {{ $schedule['ditutup_formatted'] ?? '30 Juni 2026' }}<br>
                                <strong>Pengumuman:</strong> {{ $schedule['pengumuman_formatted'] ?? '15 Juli 2026' }}
                            </small>
                        </div>

                        <div class="alert alert-success mb-3">
                            <strong>Kontak Support</strong>
                            <hr class="my-2">
                            <small>
                                <strong>Telepon:</strong> {{ $schedule['telepon'] ?? '+62-341-XXXXXX' }}<br>
                                <strong>Email:</strong> {{ $schedule['email'] ?? 'ppdb@sekolah.id' }}<br>
                                <strong>Jam Operasional:</strong> {{ explode("\n", $schedule['jam_operasional'] ?? "Senin-Jumat: 08:00-12:00\nSabtu: libur")[0] }}<br>
                                {{ explode("\n", $schedule['jam_operasional'] ?? "Senin-Jumat: 08:00-12:00\nSabtu: libur")[1] ?? '' }}
                            </small>
                        </div>

                        <p class="text-muted"><strong>Format:</strong> JPG | <strong>Ukuran Maksimal:</strong> 5 MB per file</p>

                        <!-- Alert untuk notifikasi ukuran file -->
                        <div id="fileSizeAlert" class="alert alert-warning d-none" role="alert">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>Peringatan!</strong> <span id="fileSizeMessage"></span>
                        </div>

                        <form method="POST" action="{{ route('peserta.upload.submit') }}" enctype="multipart/form-data" id="uploadForm">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Kartu Keluarga (JPG)</label>
                                <input type="file" name="kartu_keluarga" accept=".jpg,.jpeg,image/jpeg" class="form-control file-input">
                                <small class="text-muted d-block mt-1">Maks. 5 MB</small>
                                @error('kartu_keluarga') <div class="text-danger small">{{ $message }}</div> @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Akta Kelahiran (JPG)</label>
                                <input type="file" name="akta_kelahiran" accept=".jpg,.jpeg,image/jpeg" class="form-control file-input">
                                <small class="text-muted d-block mt-1">Maks. 5 MB</small>
                                @error('akta_kelahiran') <div class="text-danger small">{{ $message }}</div> @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Sertifikat Prestasi (JPG)</label>
                                <input type="file" name="sertifikat_prestasi" accept=".jpg,.jpeg,image/jpeg" class="form-control file-input">
                                <small class="text-muted d-block mt-1">Maks. 5 MB</small>
                                @error('sertifikat_prestasi') <div class="text-danger small">{{ $message }}</div> @enderror
                            </div>

                            <div class="d-flex justify-content-end">
                                <a href="{{ route('peserta.data-diri') }}" class="btn btn-secondary me-2">Batal</a>
                                <button class="btn btn-primary" type="submit" id="submitBtn">Upload</button>
                            </div>
                        </form>

                        <script>
                            const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
                            const MAX_FILE_SIZE_MB = 5;
                            const fileInputs = document.querySelectorAll('.file-input');
                            const fileSizeAlert = document.getElementById('fileSizeAlert');
                            const fileSizeMessage = document.getElementById('fileSizeMessage');
                            const uploadForm = document.getElementById('uploadForm');
                            const submitBtn = document.getElementById('submitBtn');

                            const fileLabels = {
                                'kartu_keluarga': 'Kartu Keluarga',
                                'akta_kelahiran': 'Akta Kelahiran',
                                'sertifikat_prestasi': 'Sertifikat Prestasi'
                            };

                            // Format bytes to readable format
                            function formatBytes(bytes) {
                                if (bytes === 0) return '0 Bytes';
                                const k = 1024;
                                const sizes = ['Bytes', 'KB', 'MB'];
                                const i = Math.floor(Math.log(bytes) / Math.log(k));
                                return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
                            }

                            // Check file size when file is selected
                            fileInputs.forEach(input => {
                                input.addEventListener('change', function() {
                                    validateFiles();
                                });
                            });

                            function validateFiles() {
                                let hasError = false;
                                let errorMessages = [];

                                fileInputs.forEach(input => {
                                    if (input.files.length > 0) {
                                        const file = input.files[0];
                                        const fileSize = file.size;
                                        const fieldName = fileLabels[input.name];

                                        if (fileSize > MAX_FILE_SIZE) {
                                            hasError = true;
                                            errorMessages.push(
                                                `${fieldName}: ${formatBytes(fileSize)} (Melebihi batas 5 MB)`
                                            );
                                        }
                                    }
                                });

                                // Show or hide alert
                                if (hasError) {
                                    fileSizeMessage.innerHTML = errorMessages.join('<br>');
                                    fileSizeAlert.classList.remove('d-none');
                                    submitBtn.disabled = true;
                                    submitBtn.classList.add('disabled');
                                } else {
                                    fileSizeAlert.classList.add('d-none');
                                    submitBtn.disabled = false;
                                    submitBtn.classList.remove('disabled');
                                }
                            }

                            // Prevent form submission if file is too large
                            uploadForm.addEventListener('submit', function(e) {
                                validateFiles();
                                fileInputs.forEach(input => {
                                    if (input.files.length > 0 && input.files[0].size > MAX_FILE_SIZE) {
                                        e.preventDefault();
                                        return false;
                                    }
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection