@extends('layouts.app')

@section('title', 'Ajukan Laporan Baru - KITA AKADEMIK')
@section('page-title', 'Ajukan Aduan atau Layanan KITA')

@section('content')
<div class="row">
    <div class="col-lg-10 offset-lg-1">
        <div class="card card-custom p-4">
            <div class="d-flex align-items-center gap-3 mb-4">
                <div class="bg-primary text-white rounded-3 p-3 fs-4 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                    <i class="fa-solid fa-file-circle-plus"></i>
                </div>
                <div>
                    <h5 class="fw-bold mb-0">Formulir Pengajuan Baru</h5>
                    <p class="text-muted mb-0" style="font-size: 0.85rem;">Isi formulir secara lengkap untuk mengajukan aduan atau permohonan bimbingan konseling.</p>
                </div>
            </div>

            <form action="{{ route('laporan.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row g-4">
                    <!-- Kolom Kiri -->
                    <div class="col-md-6 border-end-md">
                        <!-- Nama Lengkap -->
                        <div class="mb-3">
                            <label for="pelapor_nama" class="form-label fw-semibold text-dark">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('pelapor_nama') is-invalid @enderror" id="pelapor_nama" name="pelapor_nama" value="{{ old('pelapor_nama', auth()->user()->name) }}" placeholder="Masukkan nama" required>
                            @error('pelapor_nama')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Pelapor -->
                        <div class="mb-3">
                            <label for="pelapor_tipe" class="form-label fw-semibold text-dark">Pelapor <span class="text-danger">*</span></label>
                            <select class="form-select @error('pelapor_tipe') is-invalid @enderror" id="pelapor_tipe" name="pelapor_tipe" required>
                                <option value="" disabled selected>Pilih</option>
                                <option value="Mahasiswa" {{ old('pelapor_tipe') === 'Mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
                                <option value="Dosen" {{ old('pelapor_tipe') === 'Dosen' ? 'selected' : '' }}>Dosen</option>
                                <option value="Tenaga Kependidikan" {{ old('pelapor_tipe') === 'Tenaga Kependidikan' ? 'selected' : '' }}>Tenaga Kependidikan</option>
                                <option value="Masyarakat Umum" {{ old('pelapor_tipe') === 'Masyarakat Umum' ? 'selected' : '' }}>Masyarakat Umum</option>
                            </select>
                            @error('pelapor_tipe')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>



                        <!-- NIK/NIP/NIM -->
                        <div class="mb-3">
                            <label for="pelapor_nim_nidn" class="form-label fw-semibold text-dark">NIK/NIP/NIM <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('pelapor_nim_nidn') is-invalid @enderror" id="pelapor_nim_nidn" name="pelapor_nim_nidn" value="{{ old('pelapor_nim_nidn', auth()->user()->nim_nidn) }}" placeholder="Masukkan NIK/NIP/NIM" required>
                            @error('pelapor_nim_nidn')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Nomor Telepon -->
                        <div class="mb-3">
                            <label for="no_telepon" class="form-label fw-semibold text-dark">Nomor Telepon <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('no_telepon') is-invalid @enderror" id="no_telepon" name="no_telepon" value="{{ old('no_telepon') }}" placeholder="Masukkan nomor telepon" required>
                            @error('no_telepon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Upload Identitas -->
                        <div class="mb-3">
                            <label for="file_identitas" class="form-label fw-semibold text-dark mb-1">
                                Upload Identitas 
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle ms-1 px-2" style="font-size: 0.7em; font-weight: 600; letter-spacing: 0.5px;">KTM / KTD</span>
                            </label>
                            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.4;">
                                *Silakan unggah <strong>KTM</strong> (Kartu Tanda Mahasiswa) atau <strong>KTD</strong> (Kartu Tanda Dosen) sesuai peran Anda.
                            </p>
                            <input type="file" class="form-control @error('file_identitas') is-invalid @enderror" id="file_identitas" name="file_identitas" accept=".png,.jpeg,.jpg,.zip">
                            <div class="form-text text-muted mt-1" style="font-size: 0.75rem;"><i class="fa-solid fa-circle-info me-1"></i>Format yang diizinkan: .png, .jpg, .jpeg, .zip (Maks 5MB)</div>
                            @error('file_identitas')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Upload Bukti Kejadian -->
                        <div class="mb-3">
                            <label for="file_bukti" class="form-label fw-semibold text-dark">Upload Bukti Kejadian</label>
                            <input type="file" class="form-control @error('file_bukti') is-invalid @enderror" id="file_bukti" name="file_bukti" accept=".png,.jpeg,.jpg,.zip">
                            <div class="form-text text-muted" style="font-size: 0.75rem;">File yang boleh di upload .png .jpeg .zip .jpg dan maksimal file 5 MB</div>
                            @error('file_bukti')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Kolom Kanan -->
                    <div class="col-md-6">
                        <!-- Kategori -->
                        <div class="mb-3">
                            <label for="tipe_laporan" class="form-label fw-semibold text-dark">Kategori <span class="text-danger">*</span></label>
                            <select class="form-select @error('tipe_laporan') is-invalid @enderror" id="tipe_laporan" name="tipe_laporan" required onchange="toggleFormFields()">
                                <option value="" disabled selected>Pilih</option>
                                <option value="preventif_konseling" {{ old('tipe_laporan') === 'preventif_konseling' ? 'selected' : '' }}>Preventif & Bimbingan Konseling</option>
                                <option value="kekerasan_bullying" {{ old('tipe_laporan') === 'kekerasan_bullying' ? 'selected' : '' }}>Aduan Kekerasan atau Bullying</option>
                                <option value="integritas_akademik" {{ old('tipe_laporan') === 'integritas_akademik' ? 'selected' : '' }}>Aduan Pelanggaran Integritas Akademik</option>
                            </select>
                            @error('tipe_laporan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jenis Kelamin -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-dark d-block">Jenis Kelamin <span class="text-danger">*</span></label>
                            <div class="form-check form-check-inline mt-1">
                                <input class="form-check-input" type="radio" name="jenis_kelamin" id="jk_l" value="Laki-Laki" {{ old('jenis_kelamin', auth()->user()->jenis_kelamin) === 'Laki-Laki' ? 'checked' : '' }} required>
                                <label class="form-check-label text-dark" for="jk_l">Laki-Laki</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="jenis_kelamin" id="jk_p" value="Perempuan" {{ old('jenis_kelamin', auth()->user()->jenis_kelamin) === 'Perempuan' ? 'checked' : '' }} required>
                                <label class="form-check-label text-dark" for="jk_p">Perempuan</label>
                            </div>
                            @error('jenis_kelamin')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="mb-3">
                            <label for="pelapor_email" class="form-label fw-semibold text-dark">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control @error('pelapor_email') is-invalid @enderror" id="pelapor_email" name="pelapor_email" value="{{ old('pelapor_email', auth()->user()->email) }}" placeholder="Masukkan alamat email" required>
                            @error('pelapor_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Tanggal Kejadian -->
                        <div class="mb-3">
                            <label for="tanggal_kejadian" class="form-label fw-semibold text-dark">Tanggal Kejadian <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('tanggal_kejadian') is-invalid @enderror" id="tanggal_kejadian" name="tanggal_kejadian" value="{{ old('tanggal_kejadian') }}" required>
                            @error('tanggal_kejadian')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Lokasi Kejadian -->
                        <div class="mb-3">
                            <label for="lokasi_kejadian" class="form-label fw-semibold text-dark">Lokasi Kejadian <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('lokasi_kejadian') is-invalid @enderror" id="lokasi_kejadian" name="lokasi_kejadian" value="{{ old('lokasi_kejadian') }}" placeholder="Lokasi Kejadian" required>
                            @error('lokasi_kejadian')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jenis Kekerasan (Conditional) -->
                        <div class="mb-3 d-none" id="jenis_kekerasan_container">
                            <label for="jenis_kekerasan" class="form-label fw-semibold text-dark">Jenis Kekerasan <span class="text-danger">*</span></label>
                            <select class="form-select @error('jenis_kekerasan') is-invalid @enderror" id="jenis_kekerasan" name="jenis_kekerasan">
                                <option value="" disabled selected>Pilih</option>
                                <option value="Kekerasan Fisik" {{ old('jenis_kekerasan') === 'Kekerasan Fisik' ? 'selected' : '' }}>Kekerasan Fisik</option>
                                <option value="Kekerasan Psikis" {{ old('jenis_kekerasan') === 'Kekerasan Psikis' ? 'selected' : '' }}>Kekerasan Psikis</option>
                                <option value="Kekerasan Seksual" {{ old('jenis_kekerasan') === 'Kekerasan Seksual' ? 'selected' : '' }}>Kekerasan Seksual</option>
                                <option value="Perundungan (Bullying)" {{ old('jenis_kekerasan') === 'Perundungan (Bullying)' ? 'selected' : '' }}>Perundungan (Bullying)</option>
                                <option value="Kekerasan Daring (Cyberbullying)" {{ old('jenis_kekerasan') === 'Kekerasan Daring (Cyberbullying)' ? 'selected' : '' }}>Kekerasan Daring (Cyberbullying)</option>
                                <option value="Lainnya" {{ old('jenis_kekerasan') === 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
                            </select>
                            @error('jenis_kekerasan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Jalur Konseling (Conditional) -->
                        <div class="mb-3 d-none" id="jalur_container">
                            <label for="jalur" class="form-label fw-semibold text-dark">Jalur Konseling <span class="text-danger">*</span></label>
                            <select class="form-select @error('jalur') is-invalid @enderror" id="jalur" name="jalur">
                                <option value="" disabled selected>Pilih</option>
                                <option value="mandiri" {{ old('jalur') === 'mandiri' ? 'selected' : '' }}>Jalur Mandiri (Inisiatif Sendiri)</option>
                                <option value="rujukan" {{ old('jalur') === 'rujukan' ? 'selected' : '' }}>Jalur Rujukan (Rekomendasi Kampus/Dosen)</option>
                            </select>
                            @error('jalur')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Bagian Bawah Form (Judul & Kronologi) -->
                <hr class="my-4">

                <div class="mb-3">
                    <label for="judul" class="form-label fw-semibold text-dark">JUDUL LAPORAN / ADUAN <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('judul') is-invalid @enderror" id="judul" name="judul" value="{{ old('judul') }}" placeholder="Tuliskan judul laporan yang jelas..." required>
                    @error('judul')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="deskripsi" class="form-label fw-semibold text-dark">DESKRIPSI KRONOLOGIS ATAU KELUHAN <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('deskripsi') is-invalid @enderror" id="deskripsi" name="deskripsi" rows="6" placeholder="Tuliskan keluhan atau kronologi kejadian secara lengkap..." required>{{ old('deskripsi') }}</textarea>
                    @error('deskripsi')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="d-flex justify-content-end gap-3">
                    <a href="{{ route('laporan.index') }}" class="btn btn-light rounded-3 px-4">Batal</a>
                    <button type="submit" class="btn btn-primary rounded-3 px-4 fw-bold">
                        <i class="fa-solid fa-paper-plane me-1"></i> Kirim Laporan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function toggleFormFields() {
        const tipeVal = document.getElementById('tipe_laporan').value;
        
        // Handle Jalur Container
        const jalurContainer = document.getElementById('jalur_container');
        const selectJalur = document.getElementById('jalur');
        if (tipeVal === 'preventif_konseling') {
            jalurContainer.classList.remove('d-none');
            selectJalur.setAttribute('required', 'required');
        } else {
            jalurContainer.classList.add('d-none');
            selectJalur.removeAttribute('required');
            selectJalur.value = '';
        }

        // Handle Jenis Kekerasan Container
        const kekerasanContainer = document.getElementById('jenis_kekerasan_container');
        const selectKekerasan = document.getElementById('jenis_kekerasan');
        if (tipeVal === 'kekerasan_bullying') {
            kekerasanContainer.classList.remove('d-none');
            selectKekerasan.setAttribute('required', 'required');
        } else {
            kekerasanContainer.classList.add('d-none');
            selectKekerasan.removeAttribute('required');
            selectKekerasan.value = '';
        }
    }

    // Trigger on page load in case of validation back
    document.addEventListener('DOMContentLoaded', function() {
        toggleFormFields();
    });
</script>
@endpush