@extends('layouts.app')

@section('subtitle', 'Detail Verifikasi Surat')

@section('content_body')
    @php
        $pengajuanSurat = $pengajuan_surat ?? $pengajuanSurat;
    @endphp

    <!-- Global Hero Section -->
    <x-hero-section title="Detail Verifikasi Surat" subtitle="Verifikasi data pemohon dan kelengkapan administrasi sebelum memberikan keputusan">
        <x-slot name="actions">
            <a href="{{ route('pengajuan-surat.index') }}" class="btn btn-light bg-white border font-weight-bold shadow-sm px-4 py-2" style="border-radius: 8px !important; color: var(--primary-color) !important;">
                <i class="fas fa-arrow-left mr-1"></i> Kembali
            </a>
        </x-slot>
    </x-hero-section>

    <div class="px-3" style="margin-top: -65px; position: relative; z-index: 10;">
        <!-- Breadcrumb block -->
        <div class="card border-0 mb-4 shadow-sm p-3" style="border-radius: 10px;">
            <ol class="breadcrumb bg-transparent p-0 mb-0" style="font-size: 0.9rem;">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}" style="color: var(--primary-color); font-weight: 500;">
                        <i class="fas fa-home mr-1"></i> Dashboard
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('pengajuan-surat.index') }}" style="color: var(--primary-color); font-weight: 500;">
                        Verifikasi Surat
                    </a>
                </li>
                <li class="breadcrumb-item active text-secondary font-weight-medium">Detail Verifikasi</li>
            </ol>
        </div>

        <div class="row">
            <!-- Kolom Kiri: Data Pemohon -->
            <div class="col-lg-6 col-12 mb-4">
                <div class="card h-100 border-0 shadow-sm" style="border-top: 4px solid var(--secondary-color) !important; border-radius: 12px;">
                    <div class="card-header bg-white border-0 pt-4 pb-0">
                        <h5 class="font-weight-bold mb-0" style="color: var(--secondary-color);">
                            <i class="fas fa-user-circle mr-2"></i> Data Pemohon
                        </h5>
                    </div>
                    <div class="card-body px-4 pb-4">
                        <hr class="mt-2 mb-3">
                        <table class="table table-borderless table-striped table-hover rounded-lg overflow-hidden mb-0">
                            <tbody>
                                <tr>
                                    <th width="35%" class="text-muted font-weight-semibold">Nama Lengkap</th>
                                    <td class="font-weight-bold text-dark">: {{ $pengajuanSurat->penduduk->nama_lengkap }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">NIK</th>
                                    <td class="font-weight-bold text-dark">: {{ $pengajuanSurat->penduduk->nik }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Nomor KK</th>
                                    <td class="font-weight-bold text-dark">: {{ $pengajuanSurat->penduduk->kartuKeluarga->no_kk ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Tempat/Tgl Lahir</th>
                                    <td class="text-dark">: {{ $pengajuanSurat->penduduk->tempat_lahir }}, {{ \Carbon\Carbon::parse($pengajuanSurat->penduduk->tanggal_lahir)->translatedFormat('d F Y') }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Jenis Kelamin</th>
                                    <td class="text-dark">: {{ $pengajuanSurat->penduduk->jenis_kelamin }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Nomor WhatsApp</th>
                                    <td class="text-dark">: {{ optional($pengajuanSurat->penduduk->warga)->nomor_whatsapp ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Alamat</th>
                                    <td class="text-dark">: {{ $pengajuanSurat->penduduk->alamat }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Kolom Kanan: Data Pengajuan & Verifikasi -->
            <div class="col-lg-6 col-12 mb-4 d-flex flex-column">
                <!-- Data Pengajuan -->
                <div class="card border-0 shadow-sm mb-4 flex-grow-1" style="border-top: 4px solid var(--primary-color) !important; border-radius: 12px;">
                    <div class="card-header bg-white border-0 pt-4 pb-0">
                        <h5 class="font-weight-bold mb-0" style="color: var(--primary-color);">
                            <i class="fas fa-file-alt mr-2"></i> Data Pengajuan
                        </h5>
                    </div>
                    <div class="card-body px-4 pb-4">
                        <hr class="mt-2 mb-3">
                        <table class="table table-borderless table-striped table-hover rounded-lg overflow-hidden mb-0">
                            <tbody>
                                <tr>
                                    <th width="35%" class="text-muted font-weight-semibold">Nomor Pengajuan</th>
                                    <td class="font-weight-bold text-teal" style="color: var(--primary-color);">: {{ $pengajuanSurat->nomor_pengajuan }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Tanggal Pengajuan</th>
                                    <td class="text-dark">: {{ \Carbon\Carbon::parse($pengajuanSurat->tanggal_pengajuan)->translatedFormat('d F Y, H:i') }} WIB</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Jenis Surat</th>
                                    <td class="font-weight-bold text-dark">: {{ $pengajuanSurat->jenisSurat->nama_surat }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Keperluan</th>
                                    <td class="text-dark">: {{ $pengajuanSurat->keperluan ?? $pengajuanSurat->catatan_admin ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Lampiran</th>
                                    <td class="text-muted font-italic">: Tidak Ada Lampiran</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Status</th>
                                    <td class="text-dark">: <span class="badge badge-primary" style="background-color: var(--primary-color) !important; border-radius: 6px; padding: 4px 8px;">PROSES</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Data Verifikasi -->
                <div class="card border-0 shadow-sm" style="border-top: 4px solid var(--primary-color) !important; border-radius: 12px;">
                    <div class="card-header bg-white border-0 pt-4 pb-0">
                        <h5 class="font-weight-bold mb-0" style="color: var(--primary-color);">
                            <i class="fas fa-check-double mr-2"></i> Data Verifikasi
                        </h5>
                    </div>
                    <div class="card-body px-4 pb-4">
                        <hr class="mt-2 mb-3">
                        <table class="table table-borderless table-striped table-hover rounded-lg overflow-hidden mb-0">
                            <tbody>
                                <tr>
                                    <th width="35%" class="text-muted font-weight-semibold">Admin Verifikator</th>
                                    <td class="font-weight-bold text-dark">: {{ $pengajuanSurat->processor->name ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Tanggal Mulai</th>
                                    <td class="text-dark">: {{ $pengajuanSurat->waktu_mulai_verifikasi ? \Carbon\Carbon::parse($pengajuanSurat->waktu_mulai_verifikasi)->translatedFormat('d F Y, H:i') . ' WIB' : '-' }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted font-weight-semibold">Status Saat Ini</th>
                                    <td class="text-dark">: <span class="badge badge-primary" style="background-color: var(--primary-color) !important; border-radius: 6px; padding: 4px 8px;">PROSES</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tombol Aksi di Bagian Bawah -->
        <div class="row mt-2 mb-5">
            <div class="col-12 d-flex justify-content-between">
                <a href="{{ route('pengajuan-surat.index') }}" class="btn btn-light border font-weight-semibold px-4 py-2 text-secondary" style="border-radius: 8px;">
                    <i class="fas fa-arrow-left mr-2"></i> Kembali
                </a>
                <div>
                    <button type="button" class="btn btn-danger font-weight-bold px-4 py-2 shadow-sm rounded-lg btn-tolak mr-2" style="border-radius: 8px !important;" data-id="{{ $pengajuanSurat->id }}">
                        <i class="fas fa-times mr-2"></i> Tolak Surat
                    </button>
                    <button type="button" class="btn btn-success font-weight-bold px-4 py-2 shadow-sm rounded-lg btn-setujui" style="background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; border-radius: 8px !important;" data-id="{{ $pengajuanSurat->id }}">
                        <i class="fas fa-check mr-2"></i> Setujui Surat
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Forms Hidden -->
    <form id="formSetujuiSurat" method="POST" style="display: none;">
        @csrf
        @method('PUT')
    </form>

    <!-- Modal Tolak (menggunakan global x-modal) -->
    <x-modal id="modalTolak" title="Form Alasan Penolakan" formId="formTolakSurat" formMethod="PUT" submitLabel="Tolak Surat" submitClass="btn-danger">
        <div class="form-group mb-0">
            <label for="catatan_admin" class="font-weight-bold text-dark">Alasan Penolakan <span class="text-danger">*</span></label>
            <textarea class="form-control shadow-sm" name="catatan_admin" id="catatan_admin" rows="4" placeholder="Contoh: Dokumen tidak lengkap, Data tidak sesuai, Persyaratan belum terpenuhi..." required></textarea>
            <div class="invalid-feedback d-none" id="validationFeedback">
                Alasan penolakan tidak boleh kosong!
            </div>
        </div>
    </x-modal>
@endsection

@section('js')
    @parent
    <script>
        $(function() {
            // Setujui Surat Submit Handler
            $(document).on('click', '.btn-setujui', function() {
                let id = $(this).data('id');
                let formAction = "{{ route('pengajuan-surat.setujui', ':id') }}".replace(':id', id);
                
                Swal.fire({
                    title: 'Setujui Surat?',
                    text: 'Apakah Anda yakin ingin menyetujui surat ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0F766E',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Setujui Surat',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let form = $('#formSetujuiSurat');
                        form.attr('action', formAction);
                        form.submit();
                    }
                });
            });

            // Tolak Surat Trigger Modal
            $(document).on('click', '.btn-tolak', function() {
                let id = $(this).data('id');
                let formAction = "{{ route('pengajuan-surat.tolak', ':id') }}".replace(':id', id);
                
                $('#formTolakSurat').attr('action', formAction);
                $('#catatan_admin').val('');
                $('#catatan_admin').removeClass('is-invalid');
                $('#validationFeedback').addClass('d-none');
                $('#modalTolak').modal('show');
            });

            // Confirm Tolak Submit
            $('#formTolakSurat').submit(function(e) {
                let reason = $('#catatan_admin').val().trim();
                if (reason === '') {
                    e.preventDefault();
                    $('#catatan_admin').addClass('is-invalid');
                    $('#validationFeedback').removeClass('d-none');
                    return false;
                }
                
                let form = this;
                e.preventDefault();
                $('#modalTolak').modal('hide');

                Swal.fire({
                    title: 'Tolak Surat?',
                    text: 'Apakah Anda yakin ingin menolak surat ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Tolak Surat',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let btn = $('#formTolakSurat').find('button[type="submit"]');
                        btn.prop('disabled', true);
                        btn.html('<i class="fas fa-spinner fa-spin mr-1"></i> Memproses...');
                        form.submit();
                    } else {
                        $('#modalTolak').modal('show');
                    }
                });
            });

            // Prevent double submit on forms
            $('form').not('#formTolakSurat').submit(function() {
                let btn = $(this).find('button[type="submit"]');
                if (btn.length) {
                    btn.prop('disabled', true);
                    btn.html('<i class="fas fa-spinner fa-spin mr-1"></i> Memproses...');
                }
            });
        });
    </script>
@stop