@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Form Pengajuan Surat Bebas Temuan</div>
                    <div class="card-body">
                        <form action="{{ route('pengajuan.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                {{-- Data Diri --}}
                                @if (Auth::user()->hasRole('admin'))
                                    <div class="col-md-6 mb-3">
                                        <label for="user_id" class="form-label">Nomor Induk / Nama</label>
                                        <select class="form-control @error('user_id') is-invalid @enderror" id="user_id"
                                            name="user_id" required>
                                            <option value="">-- Pilih Pengguna --</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}"
                                                    data-nomor-induk="{{ $user->nomor_induk }}"
                                                    data-name="{{ $user->name }}"
                                                    data-perangkatdaerah="{{ $user->perangkatDaerah->id }}"
                                                    {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                                    {{ $user->nomor_induk }} - {{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('user_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">Nama</label>
                                        <input type="text" class="form-control" id="name" disabled>
                                    </div>
                                @else
                                    <div class="col-md-6 mb-3">
                                        <label for="nomor_induk" class="form-label">Nomor Induk</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->nomor_induk }}"
                                            disabled>
                                        <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">Nama</label>
                                        <input type="text" class="form-control" value="{{ Auth::user()->name }}"
                                            disabled>
                                    </div>
                                @endif
                                <div class="col-md-6 mb-3">
                                    <label for="pangkat_golongan_id" class="form-label">Pangkat / Golongan</label>
                                    <select class="form-control @error('pangkat_golongan_id') is-invalid @enderror"
                                        id="pangkat_golongan_id" name="pangkat_golongan_id" required>
                                        <option value="">-- Pilih Pangkat / Golongan --</option>
                                        @foreach ($pangkatGolongan as $pg)
                                            <option value="{{ $pg->id }}"
                                                {{ old('pangkat_golongan_id') == $pg->id ? 'selected' : '' }}>
                                                {{ $pg->nama_pangkat }} / {{ $pg->golongan }}</option>
                                        @endforeach
                                    </select>
                                    @error('pangkat_golongan_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="no_hp" class="form-label">Nomor HP</label>
                                    <input type="text" class="form-control @error('no_hp') is-invalid @enderror"
                                        id="no_hp" name="no_hp" value="{{ old('no_hp') }}" required>
                                    @error('no_hp')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="perangkat_daerah_asal_id" class="form-label">Perangkat Daerah Asal</label>
                                    <select class="form-control @error('perangkat_daerah_asal_id') is-invalid @enderror"
                                        id="perangkat_daerah_asal_id" name="perangkat_daerah_asal_id" required>
                                        <option value="">-- Pilih Perangkat Daerah --</option>
                                        @foreach ($perangkatDaerahs as $pd)
                                            <option value="{{ $pd->id }}"
                                                @php
                                                    $opdAsal = old('perangkat_daerah_asal_id') ?? Auth::user()->perangkatDaerah->id;
                                                @endphp
                                                {{ $opdAsal == $pd->id ? 'selected' : '' }}>
                                                {{ $pd->nama_pd }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('perangkat_daerah_asal_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="perangkat_daerah_tujuan_id" class="form-label">Perangkat Daerah
                                        Tujuan</label>
                                    <select class="form-control @error('perangkat_daerah_tujuan_id') is-invalid @enderror"
                                        id="perangkat_daerah_tujuan_id" name="perangkat_daerah_tujuan_id" required>
                                        <option value="">-- Pilih Perangkat Daerah --</option>
                                        @foreach ($perangkatDaerahs as $pd)
                                            <option value="{{ $pd->id }}"
                                                {{ old('perangkat_daerah_tujuan_id') == $pd->id ? 'selected' : '' }}>
                                                {{ $pd->nama_pd }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('perangkat_daerah_tujuan_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                {{-- <div class="col-md-6 mb-3">
                                    <label for="unit_kerja_asal" class="form-label">Unit Kerja Asal</label>
                                    <input type="text"
                                        class="form-control @error('unit_kerja_asal') is-invalid @enderror"
                                        id="unit_kerja_asal" name="unit_kerja_asal" value="{{ old('unit_kerja_asal') }}"
                                        required>
                                    @error('unit_kerja_asal')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="unit_kerja_tujuan" class="form-label">Unit Kerja Tujuan</label>
                                    <input type="text"
                                        class="form-control @error('unit_kerja_tujuan') is-invalid @enderror"
                                        id="unit_kerja_tujuan" name="unit_kerja_tujuan"
                                        value="{{ old('unit_kerja_tujuan') }}" required>
                                    @error('unit_kerja_tujuan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div> --}}
                                <div class="col-md-12 mb-3">
                                    <label for="alasan_pengajuan" class="form-label">Alasan Pengajuan</label>
                                    <textarea class="form-control @error('alasan_pengajuan') is-invalid @enderror" id="alasan_pengajuan"
                                        name="alasan_pengajuan" rows="3" required>{{ old('alasan_pengajuan') }}</textarea>
                                    @error('alasan_pengajuan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <hr>
                            <h5 class="mb-4">Dokumen yang Diperlukan</h5>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="surat_permohonan" class="form-label">
                                        Surat Permohonan (PDF, JPG, PNG)
                                        <small class="text-muted d-block">Maksimal ukuran file 2MB. Harap unggah kembali
                                            jika terjadi kesalahan.</small>
                                    </label>
                                    <input type="file"
                                        class="form-control file-input @error('surat_permohonan') is-invalid @enderror"
                                        name="surat_permohonan" id="surat_permohonan" accept="image/*,application/pdf"
                                        required>
                                    <div class="file-preview mt-2" id="preview_surat_permohonan"></div>
                                    @error('surat_permohonan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="sk_cpns" class="form-label">
                                        SK CPNS (PDF, JPG, PNG)
                                        <small class="text-muted d-block">Maksimal ukuran file 2MB. Harap unggah kembali
                                            jika terjadi kesalahan.</small>
                                    </label>
                                    <input type="file"
                                        class="form-control file-input @error('sk_cpns') is-invalid @enderror"
                                        name="sk_cpns" id="sk_cpns" accept="image/*,application/pdf" required>
                                    <div class="file-preview mt-2" id="preview_sk_cpns"></div>
                                    @error('sk_cpns')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="sk_pns" class="form-label">
                                        SK PNS (PDF, JPG, PNG)
                                        <small class="text-muted d-block">Maksimal ukuran file 2MB. Harap unggah kembali
                                            jika terjadi kesalahan.</small>
                                    </label>
                                    <input type="file"
                                        class="form-control file-input @error('sk_pns') is-invalid @enderror"
                                        name="sk_pns" id="sk_pns" accept="image/*,application/pdf" required>
                                    <div class="file-preview mt-2" id="preview_sk_pns"></div>
                                    @error('sk_pns')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="sk_pangkat_terakhir" class="form-label">
                                        SK Pangkat Terakhir (PDF, JPG, PNG)
                                        <small class="text-muted d-block">Maksimal ukuran file 2MB. Harap unggah kembali
                                            jika terjadi kesalahan.</small>
                                    </label>
                                    <input type="file"
                                        class="form-control file-input @error('sk_pangkat_terakhir') is-invalid @enderror"
                                        name="sk_pangkat_terakhir" id="sk_pangkat_terakhir"
                                        accept="image/*,application/pdf" required>
                                    <div class="file-preview mt-2" id="preview_sk_pangkat_terakhir"></div>
                                    @error('sk_pangkat_terakhir')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="skp_terakhir" class="form-label">
                                        SKP Terakhir (PDF, JPG, PNG)
                                        <small class="text-muted d-block">Maksimal ukuran file 2MB. Harap unggah kembali
                                            jika terjadi kesalahan.</small>
                                    </label>
                                    <input type="file"
                                        class="form-control file-input @error('skp_terakhir') is-invalid @enderror"
                                        name="skp_terakhir" id="skp_terakhir" accept="image/*,application/pdf" required>
                                    <div class="file-preview mt-2" id="preview_skp_terakhir"></div>
                                    @error('skp_terakhir')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="progress mt-3 d-none" id="upload-progress">
                                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                            <button type="submit" class="btn btn-primary mt-4">Ajukan Surat</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle dropdown change for admin
            const userIdSelect = document.getElementById('user_id');
            const nameInput = document.getElementById('name');
            const perangkatDaerahAsalInput = document.getElementById('perangkat_daerah_asal_id');
            if (userIdSelect && nameInput && perangkatDaerahAsalInput) {
                userIdSelect.addEventListener('change', function() {
                    const selectedOption = this.options[this.selectedIndex];
                    nameInput.value = selectedOption.dataset.name || '';
                    perangkatDaerahAsalInput.value = selectedOption.dataset.perangkatdaerah || '';
                });
            }

            // Handle file previews
            const fileInputs = document.querySelectorAll('.file-input');
            fileInputs.forEach(input => {
                input.addEventListener('change', function(e) {
                    const previewContainer = document.getElementById(`preview_${e.target.id}`);
                    previewContainer.innerHTML = ''; // Clear existing preview

                    const file = e.target.files[0];
                    if (file) {
                        const fileType = file.type;
                        if (fileType.startsWith('image/')) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const img = document.createElement('img');
                                img.src = e.target.result;
                                img.className = 'img-thumbnail';
                                img.style.maxWidth = '150px';
                                img.style.maxHeight = '150px';
                                previewContainer.appendChild(img);
                            };
                            reader.readAsDataURL(file);
                        } else if (fileType === 'application/pdf') {
                            const icon = `<i class="fa-solid fa-file-pdf fa-5x text-danger"></i>`;
                            const fileName = `<p class="mt-2">${file.name}</p>`;
                            previewContainer.innerHTML = icon + fileName;
                        }
                    }
                });
            });

            // Simple progress indicator on form submit
            const form = document.querySelector('form');
            const progressBar = document.getElementById('upload-progress');

            form.addEventListener('submit', function(e) {
                progressBar.classList.remove('d-none');
                const progressElement = progressBar.querySelector('.progress-bar');
                let width = 0;
                const interval = setInterval(() => {
                    width += 10;
                    progressElement.style.width = width + '%';
                    progressElement.setAttribute('aria-valuenow', width);
                    progressElement.textContent = width + '%';
                    if (width >= 100) {
                        clearInterval(interval);
                    }
                }, 200);

                // Menampilkan SweetAlert saat form disubmit
                Swal.fire({
                    title: 'Mengunggah...',
                    text: 'Proses pengunggahan sedang berlangsung, mohon tunggu.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            });

            // Show SweetAlert for success message from session flash
            @if (session('success'))
                Swal.fire({
                    title: 'Berhasil!',
                    text: '{{ session('success') }}',
                    icon: 'success',
                    confirmButtonText: 'OK'
                });
            @endif
        });
    </script>
@endpush