@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>Edit Pengajuan Surat #{{ $pengajuan->no_pengajuan }}</div>
                        <a href="{{ route('pengajuan.index') }}" class="btn btn-primary btn-sm">Kembali ke Daftar
                            Pengajuan</a>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('pengajuan.update', $pengajuan->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <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" 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 }}"
                                                    @if ($user->id == $pengajuan->user_id) selected @endif>
                                                    {{ $user->nomor_induk }} - {{ $user->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">Nama</label>
                                        <input type="text" class="form-control" id="name"
                                            value="{{ $pengajuan->user->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="{{ $pengajuan->user->nomor_induk }}" disabled>
                                        <input type="hidden" name="user_id" value="{{ $pengajuan->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="{{ $pengajuan->user->name }}"
                                            disabled>
                                    </div>
                                @endif
                                @if ($pengajuan->status_id == 4)
                                    {{-- Asumsikan 4 adalah ID untuk 'Revisi' --}}
                                    <input type="hidden" name="new_status_id" value="5"> {{-- 5 adalah ID untuk 'Pengajuan Setelah Revisi' --}}
                                @endif
                                <div class="col-md-6 mb-3">
                                    <label for="pangkat_golongan_id" class="form-label">Pangkat / Golongan</label>
                                    <select class="form-control" id="pangkat_golongan_id" name="pangkat_golongan_id"
                                        required>
                                        <option value="">-- Pilih Pangkat / Golongan --</option>
                                        @foreach ($pangkatGolongan as $pg)
                                            <option value="{{ $pg->id }}"
                                                @if ($pg->id == $pengajuan->pangkat_golongan_id) selected @endif>
                                                {{ $pg->nama_pangkat }} / {{ $pg->golongan }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="no_hp" class="form-label">Nomor HP</label>
                                    <input type="text" class="form-control" id="no_hp" name="no_hp"
                                        value="{{ old('no_hp', $pengajuan->no_hp) }}" required>
                                </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 }}"
                                                {{ old('perangkat_daerah_asal_id', $pengajuan->perangkat_daerah_asal_id) == $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', $pengajuan->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" id="unit_kerja_asal" name="unit_kerja_asal"
                                        value="{{ old('unit_kerja_asal', $pengajuan->unit_kerja_asal) }}" required>
                                </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" id="unit_kerja_tujuan"
                                        name="unit_kerja_tujuan"
                                        value="{{ old('unit_kerja_tujuan', $pengajuan->unit_kerja_tujuan) }}" required>
                                </div> --}}
                                <div class="col-md-12 mb-3">
                                    <label for="alasan_pengajuan" class="form-label">Alasan Pengajuan</label>
                                    <textarea class="form-control" id="alasan_pengajuan" name="alasan_pengajuan" rows="3" required>{{ old('alasan_pengajuan', $pengajuan->alasan_pengajuan) }}</textarea>
                                </div>
                            </div>

                            <hr>
                            <h5 class="mb-4">Dokumen yang Diperlukan</h5>
                            <div class="row">
                                @php
                                    $dokumenPengajuan = $pengajuan->dokumen
                                        ->pluck('path_file', 'jenis_dokumen')
                                        ->toArray();
                                    $dokumenLabels = [
                                        'surat_permohonan' => 'Surat Permohonan',
                                        'sk_cpns' => 'SK CPNS',
                                        'sk_pns' => 'SK PNS',
                                        'sk_pangkat_terakhir' => 'SK Pangkat Terakhir',
                                        'skp_terakhir' => 'SKP Terakhir',
                                    ];
                                @endphp
                                @foreach ($dokumenLabels as $key => $label)
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ $key }}" class="form-label">
                                            {{ $label }} (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" name="{{ $key }}"
                                            id="{{ $key }}" accept="image/*,application/pdf">
                                        <div class="file-preview mt-2" id="preview_{{ $key }}">
                                            @if (isset($dokumenPengajuan[$key]))
                                                @php
                                                    $filePath = Storage::url($dokumenPengajuan[$key]);
                                                    $fileExtension = pathinfo($filePath, PATHINFO_EXTENSION);
                                                @endphp
                                                @if (in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif']))
                                                    <a href="{{ $filePath }}" target="_blank">
                                                        <img src="{{ $filePath }}" class="img-thumbnail"
                                                            style="max-width: 150px; max-height: 150px;">
                                                    </a>
                                                @elseif ($fileExtension === 'pdf')
                                                    <a href="{{ $filePath }}" target="_blank">
                                                        <i class="fa-solid fa-file-pdf fa-5x text-danger"></i>
                                                        <p class="mt-2">{{ basename($filePath) }}</p>
                                                    </a>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </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">
                                @if ($pengajuan->status_id == 4)
                                    Kirim Ulang
                                @else
                                    Perbarui Pengajuan
                                @endif
                            </button>
                            <a href="{{ route('pengajuan.index') }}" class="btn btn-secondary mt-4">Kembali ke Daftar
                                Pengajuan</a>
                        </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');
            if (userIdSelect && nameInput) {
                userIdSelect.addEventListener('change', function() {
                    const selectedOption = this.options[this.selectedIndex];
                    nameInput.value = selectedOption.dataset.name || '';
                });
            }

            // 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 =
                                `<a href="#">${icon}${fileName}</a>`; // Use a dummy link for display
                        }
                    }
                });
            });

            // 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();
                    }
                });
            });
        });
    </script>
@endpush