@extends('warga.layouts.warga')

@section('subtitle', 'Detail Pengajuan')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Detail Pengajuan Surat" 
        subtitle="Lihat perkembangan pengajuan surat Anda."
        :breadcrumbs="[
            'Dashboard' => route('warga.dashboard'),
            'Riwayat Surat' => route('warga.riwayat'),
            'Detail' => '#'
        ]"
    />

    <div class="container-fluid px-0">
        <div class="row justify-content-center">
            <div class="col-lg-9 col-md-10">
                
                <!-- SECTION 1: INFORMASI PENGAJUAN -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title font-weight-bold text-dark mb-0">
                            <i class="fas fa-file-invoice mr-2 text-primary" style="color: #0F766E !important;"></i>Informasi Pengajuan
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-bordered mb-0">
                            <tr>
                                <th width="35%" class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Nomor Pengajuan</th>
                                <td class="font-weight-bold text-dark" style="font-size: 0.9rem;">{{ $pengajuan->nomor_pengajuan }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Tanggal Pengajuan</th>
                                <td class="text-dark" style="font-size: 0.9rem;">{{ $pengajuan->tanggal_pengajuan->translatedFormat('d M Y') }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Jenis Surat</th>
                                <td class="font-weight-bold text-success" style="color: #0F766E !important; font-size: 0.9rem;">{{ $pengajuan->jenisSurat->nama_surat ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Status Saat Ini</th>
                                <td style="font-size: 0.9rem;">
                                    <x-status-badge :status="$pengajuan->status" :pengajuan="$pengajuan" />
                                </td>
                            </tr>
                            @if($pengajuan->status == 'selesai' && $pengajuan->suratCetak)
                                <tr>
                                    <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Nomor Surat Resmi</th>
                                    <td class="font-weight-bold text-success" style="color: #10B981 !important; font-size: 0.9rem;">{{ $pengajuan->suratCetak->nomor_surat }}</td>
                                </tr>
                            @endif
                            
                            <!-- Custom Fields based on Surat Type -->
                            @if($pengajuan->keperluan)
                                <tr>
                                    <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Keperluan</th>
                                    <td class="text-dark" style="font-size: 0.9rem;">{{ $pengajuan->keperluan }}</td>
                                </tr>
                            @endif
                            @if($pengajuan->alamat_domisili)
                                <tr>
                                    <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Alamat Domisili</th>
                                    <td class="text-dark" style="font-size: 0.9rem;">{{ $pengajuan->alamat_domisili }}</td>
                                </tr>
                            @endif
                            @if($pengajuan->jenisSurat->kode_surat === 'SKU')
                                @if($pengajuan->alamat_usaha)
                                    <tr>
                                        <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Alamat Usaha</th>
                                        <td class="text-dark" style="font-size: 0.9rem;">{{ $pengajuan->alamat_usaha }}</td>
                                    </tr>
                                @endif
                                @if($pengajuan->jenis_usaha)
                                    <tr>
                                        <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Jenis Usaha</th>
                                        <td class="text-dark" style="font-size: 0.9rem;">{{ $pengajuan->jenis_usaha }}</td>
                                    </tr>
                                @endif
                                @if($pengajuan->tahun_mulai_usaha)
                                    <tr>
                                        <th class="bg-light font-weight-bold text-muted" style="font-size: 0.9rem;">Mulai Usaha Sejak</th>
                                        <td class="text-dark" style="font-size: 0.9rem;">{{ $pengajuan->tahun_mulai_usaha }}</td>
                                    </tr>
                                @endif
                            @endif
                        </table>
                    </div>
                </div>

                <!-- SECTION 2: STATUS PENGAJUAN -->
                @php
                    $statusIcon = 'fa-hourglass-half text-warning';
                    $statusTitle = 'Menunggu Verifikasi';
                    $statusDesc = 'Pengajuan Anda telah berhasil diterima dan sedang menunggu proses verifikasi oleh petugas desa.';
                    
                    if ($pengajuan->status == 'diajukan' && !empty($pengajuan->catatan_admin)) {
                        $statusIcon = 'fa-history text-info';
                        $statusTitle = 'Menunggu Verifikasi (Pengajuan Ulang)';
                        $statusDesc = 'Perbaikan permohonan Anda telah berhasil dikirim dan sedang menunggu verifikasi ulang oleh petugas desa.';
                    } elseif ($pengajuan->status == 'diproses') {
                        $statusIcon = 'fa-cog fa-spin text-info';
                        $statusTitle = 'Sedang Diproses';
                        $statusDesc = 'Surat Anda sedang diproses oleh petugas desa.';
                    } elseif ($pengajuan->status == 'selesai') {
                        if (!$pengajuan->suratCetak || !$pengajuan->suratCetak->file_scan_ttd) {
                            $statusIcon = 'fa-pen-nib text-warning';
                            $statusTitle = 'Menunggu Tanda Tangan Basah';
                            $statusDesc = 'Pengajuan telah disetujui secara digital, menunggu tanda tangan basah Kepala Desa & stempel resmi.';
                        } else {
                            $statusIcon = 'fa-check-circle text-success';
                            $statusTitle = 'Selesai';
                            $statusDesc = 'Surat Anda telah selesai ditandatangani dan distempel basah, silakan unduh berkas resmi di bawah.';
                        }
                    } elseif ($pengajuan->status == 'ditolak') {
                        $statusIcon = 'fa-times-circle text-danger';
                        $statusTitle = 'Pengajuan Ditolak';
                        $statusDesc = 'Pengajuan tidak dapat diproses. Silakan ajukan ulang permohonan dengan berkas/data perbaikan.';
                    }
                @endphp
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4 text-center">
                        <div class="mb-3">
                            <i class="fas {{ $statusIcon }}" style="font-size: 48px;"></i>
                        </div>
                        <h4 class="font-weight-bold text-dark mb-2">{{ $statusTitle }}</h4>
                        <div class="mb-3">
                            <x-status-badge :status="$pengajuan->status" :pengajuan="$pengajuan" />
                        </div>
                        <p class="text-secondary mb-0 mx-auto" style="max-width: 500px; font-size: 0.95rem; line-height: 1.6;">
                            {{ $statusDesc }}
                        </p>
                        @if ($pengajuan->status == 'ditolak' && $pengajuan->catatan_admin)
                            <div class="alert alert-danger border-0 shadow-sm text-left mt-3 mb-0 d-inline-block mx-auto" style="border-radius: 8px; font-size: 0.9rem; background-color: #FEF2F2; color: #991B1B; max-width: 500px; width: 100%;">
                                <i class="fas fa-exclamation-circle mr-2"></i><strong>Alasan Penolakan:</strong> {{ $pengajuan->catatan_admin }}
                            </div>
                        @elseif ($pengajuan->status != 'ditolak' && $pengajuan->catatan_admin)
                            <div class="alert alert-warning border-0 shadow-sm text-left mt-3 mb-0 d-inline-block mx-auto" style="border-radius: 8px; font-size: 0.9rem; background-color: #FFFBEB; color: #92400E; max-width: 500px; width: 100%;">
                                <i class="fas fa-history mr-2"></i><strong>Catatan Penolakan Sebelumnya:</strong> {{ $pengajuan->catatan_admin }}
                                <div class="text-muted mt-1" style="font-size: 0.82rem;"><i class="fas fa-info-circle mr-1"></i> (Anda telah mengirimkan perbaikan dan pengajuan sedang dalam proses verifikasi ulang)</div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- SECTION 3: TIMELINE -->
                @php
                    $hasBeenRejected = !empty($pengajuan->catatan_admin);
                @endphp
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title font-weight-bold text-dark mb-0">
                            <i class="fas fa-stream mr-2 text-primary" style="color: #0F766E !important;"></i>Status Progres
                        </h5>
                    </div>
                    <div class="card-body py-4">
                        <div class="timeline-compact" style="max-width: 420px; margin: 0 auto; padding-left: 20px; position: relative;">
                            <!-- Vertical line background -->
                            <div class="timeline-line" style="position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background-color: #E2E8F0; z-index: 1;"></div>
                            
                            @if (!$hasBeenRejected)
                                <!-- Standard Timeline (Belum Pernah Ditolak) -->
                                <!-- Step 1: Pengajuan dibuat -->
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle d-flex align-items-center justify-content-center" 
                                         style="width: 16px; height: 16px; background-color: #10B981; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #10B981; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="font-weight-bold text-sm text-dark d-block">Pengajuan Dibuat</span>
                                        <small class="text-muted">{{ $pengajuan->tanggal_pengajuan->translatedFormat('d M Y') }}</small>
                                    </div>
                                </div>
                                
                                <!-- Step 2: Menunggu Verifikasi -->
                                @php
                                    $step2Color = in_array($pengajuan->status, ['diproses', 'selesai']) ? '#10B981' : '#0F766E';
                                    $step2Text = 'text-dark font-weight-bold';
                                    $step2Sub = in_array($pengajuan->status, ['diproses', 'selesai']) ? 'Berkas terverifikasi' : 'Menunggu verifikasi';
                                @endphp
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $step2Color }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $step2Color }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $step2Text }} d-block">Menunggu Verifikasi</span>
                                        <small class="text-muted">{{ $step2Sub }}</small>
                                    </div>
                                </div>
                                
                                <!-- Step 3: Diproses -->
                                @php
                                    $step3Color = $pengajuan->status == 'selesai' ? '#10B981' : ($pengajuan->status == 'diproses' ? '#0F766E' : '#E2E8F0');
                                    $step3Text = in_array($pengajuan->status, ['diproses', 'selesai']) ? 'text-dark font-weight-bold' : 'text-muted';
                                    $step3Sub = $pengajuan->status == 'selesai' ? 'Selesai diproses' : ($pengajuan->status == 'diproses' ? 'Sedang diproses' : 'Menunggu antrean');
                                @endphp
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $step3Color }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $step3Color }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $step3Text }} d-block">Diproses</span>
                                        <small class="text-muted">{{ $step3Sub }}</small>
                                    </div>
                                </div>
                                
                                <!-- Step 4: Selesai -->
                                @php
                                    $step4Color = $pengajuan->status == 'selesai' ? '#10B981' : '#E2E8F0';
                                    $step4Text = $pengajuan->status == 'selesai' ? 'text-dark font-weight-bold' : 'text-muted';
                                @endphp
                                <div class="timeline-item d-flex align-items-center" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $step4Color }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $step4Color }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $step4Text }} d-block">Selesai</span>
                                        <small class="text-muted">Surat diterbitkan</small>
                                    </div>
                                </div>
                            @else
                                <!-- Timeline Pengajuan yang Pernah Ditolak & Diajukan Ulang -->
                                <!-- Step 1: Pengajuan Dibuat -->
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle d-flex align-items-center justify-content-center" 
                                         style="width: 16px; height: 16px; background-color: #10B981; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #10B981; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="font-weight-bold text-sm text-dark d-block">Pengajuan Dibuat</span>
                                        <small class="text-muted">{{ $pengajuan->created_at ? $pengajuan->created_at->translatedFormat('d M Y') : $pengajuan->tanggal_pengajuan->translatedFormat('d M Y') }}</small>
                                    </div>
                                </div>

                                <!-- Step 2: Diverifikasi -->
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: #10B981; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #10B981; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm text-dark font-weight-bold d-block">Diverifikasi</span>
                                        <small class="text-muted">Verifikasi awal selesai</small>
                                    </div>
                                </div>

                                <!-- Step 3: Ditolak -->
                                @php
                                    $stepDitolakActive = $pengajuan->status == 'ditolak';
                                    $stepDitolakColor = $stepDitolakActive ? '#EF4444' : '#10B981';
                                    $stepDitolakText = $stepDitolakActive ? 'text-danger font-weight-bold' : 'text-dark font-weight-bold';
                                    $stepDitolakSub = $stepDitolakActive ? 'Pengajuan ditolak oleh admin' : 'Tahapan penolakan sebelumnya';
                                @endphp
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $stepDitolakColor }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $stepDitolakColor }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $stepDitolakText }} d-block">Ditolak</span>
                                        <small class="text-muted">{{ $stepDitolakSub }}</small>
                                    </div>
                                </div>

                                <!-- Step 4: Ajukan Ulang -->
                                @php
                                    $stepAjukanUlangDone = $pengajuan->status != 'ditolak';
                                    $stepAjukanUlangColor = $stepAjukanUlangDone ? '#10B981' : '#E2E8F0';
                                    $stepAjukanUlangText = $stepAjukanUlangDone ? 'text-dark font-weight-bold' : 'text-muted';
                                    $stepAjukanUlangSub = $stepAjukanUlangDone ? 'Perbaikan telah dikirim' : 'Menunggu perbaikan warga';
                                @endphp
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $stepAjukanUlangColor }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $stepAjukanUlangColor }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $stepAjukanUlangText }} d-block">Ajukan Ulang</span>
                                        <small class="text-muted">{{ $stepAjukanUlangSub }}</small>
                                    </div>
                                </div>

                                <!-- Step 5: Menunggu Verifikasi Ulang -->
                                @php
                                    $stepVerifUlangActive = $pengajuan->status == 'diajukan';
                                    $stepVerifUlangDone = in_array($pengajuan->status, ['diproses', 'selesai']);
                                    $stepVerifUlangColor = $stepVerifUlangDone ? '#10B981' : ($stepVerifUlangActive ? '#0F766E' : '#E2E8F0');
                                    $stepVerifUlangText = ($stepVerifUlangActive || $stepVerifUlangDone) ? 'text-dark font-weight-bold' : 'text-muted';
                                    $stepVerifUlangSub = $stepVerifUlangDone ? 'Berkas perbaikan terverifikasi' : ($stepVerifUlangActive ? 'Menunggu verifikasi ulang' : 'Belum aktif');
                                @endphp
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $stepVerifUlangColor }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $stepVerifUlangColor }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $stepVerifUlangText }} d-block">Menunggu Verifikasi</span>
                                        <small class="text-muted">{{ $stepVerifUlangSub }}</small>
                                    </div>
                                </div>

                                <!-- Step 6: Diproses -->
                                @php
                                    $stepDiprosesActive = $pengajuan->status == 'diproses';
                                    $stepDiprosesDone = $pengajuan->status == 'selesai';
                                    $stepDiprosesColor = $stepDiprosesDone ? '#10B981' : ($stepDiprosesActive ? '#0F766E' : '#E2E8F0');
                                    $stepDiprosesText = ($stepDiprosesActive || $stepDiprosesDone) ? 'text-dark font-weight-bold' : 'text-muted';
                                    $stepDiprosesSub = $stepDiprosesDone ? 'Selesai diproses' : ($stepDiprosesActive ? 'Sedang diproses' : 'Belum aktif');
                                @endphp
                                <div class="timeline-item d-flex align-items-center mb-4" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $stepDiprosesColor }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $stepDiprosesColor }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $stepDiprosesText }} d-block">Diproses</span>
                                        <small class="text-muted">{{ $stepDiprosesSub }}</small>
                                    </div>
                                </div>

                                <!-- Step 7: Selesai -->
                                @php
                                    $stepSelesaiColor = $pengajuan->status == 'selesai' ? '#10B981' : '#E2E8F0';
                                    $stepSelesaiText = $pengajuan->status == 'selesai' ? 'text-dark font-weight-bold' : 'text-muted';
                                @endphp
                                <div class="timeline-item d-flex align-items-center" style="position: relative; z-index: 2;">
                                    <div class="timeline-icon rounded-circle" 
                                         style="width: 16px; height: 16px; background-color: {{ $stepSelesaiColor }}; border: 3px solid #ffffff; box-shadow: 0 0 0 2px {{ $stepSelesaiColor }}; margin-right: 15px;">
                                    </div>
                                    <div>
                                        <span class="text-sm {{ $stepSelesaiText }} d-block">Selesai</span>
                                        <small class="text-muted">Surat diterbitkan</small>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- SECTION 4: LAMPIRAN -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title font-weight-bold text-dark mb-0">
                            <i class="fas fa-paperclip mr-2 text-primary" style="color: #0F766E !important;"></i>Dokumen Persyaratan
                        </h5>
                    </div>
                    @php
                        $ktpExists = $pengajuan->file_ktp && \Illuminate\Support\Facades\Storage::disk('public')->exists($pengajuan->file_ktp);
                        $ktpUrl    = $ktpExists ? \Illuminate\Support\Facades\Storage::url($pengajuan->file_ktp) : null;

                        $kkExists  = $pengajuan->file_kk && \Illuminate\Support\Facades\Storage::disk('public')->exists($pengajuan->file_kk);
                        $kkUrl     = $kkExists ? \Illuminate\Support\Facades\Storage::url($pengajuan->file_kk) : null;
                    @endphp

                    <div class="card-body">
                        <div class="row">
                            <!-- KTP -->
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border d-flex align-items-center justify-content-between" style="border-radius: 12px; border-color: #e2e8f0 !important; background: #ffffff;">
                                    <div class="d-flex align-items-center">
                                        <div class="rounded p-2 mr-3" style="color: #0F766E; background-color: #F0FDFA;">
                                            <i class="fas fa-id-card fa-lg"></i>
                                        </div>
                                        <div>
                                            <span class="font-weight-bold text-dark d-block" style="font-size: 0.9rem;">KTP</span>
                                            @if($ktpExists)
                                                <small class="text-success font-weight-bold"><i class="fas fa-check-circle mr-1"></i> Diunggah</small>
                                            @elseif($pengajuan->file_ktp)
                                                <small class="text-warning font-weight-bold"><i class="fas fa-exclamation-triangle mr-1"></i> File Tidak Ditemukan</small>
                                            @else
                                                <small class="text-muted"><i class="fas fa-times-circle mr-1"></i> Belum Diunggah</small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="d-flex" style="gap: 6px;">
                                        @if($ktpExists)
                                            <a href="{{ $ktpUrl }}" target="_blank" class="btn btn-action-view btn-sm d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; border-radius: 6px; padding: 0 !important;" title="Lihat">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ $ktpUrl }}" download class="btn btn-action-approve btn-sm d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; border-radius: 6px; padding: 0 !important;" title="Download">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        @else
                                            <button class="btn btn-light btn-sm text-muted" disabled style="width: 32px; height: 32px; border-radius: 6px; padding: 0 !important;">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- KK -->
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border d-flex align-items-center justify-content-between" style="border-radius: 12px; border-color: #e2e8f0 !important; background: #ffffff;">
                                    <div class="d-flex align-items-center">
                                        <div class="rounded p-2 mr-3" style="color: #0F766E; background-color: #F0FDFA;">
                                            <i class="fas fa-users fa-lg"></i>
                                        </div>
                                        <div>
                                            <span class="font-weight-bold text-dark d-block" style="font-size: 0.9rem;">Kartu Keluarga (KK)</span>
                                            @if($kkExists)
                                                <small class="text-success font-weight-bold"><i class="fas fa-check-circle mr-1"></i> Diunggah</small>
                                            @elseif($pengajuan->file_kk)
                                                <small class="text-warning font-weight-bold"><i class="fas fa-exclamation-triangle mr-1"></i> File Tidak Ditemukan</small>
                                            @else
                                                <small class="text-muted"><i class="fas fa-times-circle mr-1"></i> Belum Diunggah</small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="d-flex" style="gap: 6px;">
                                        @if($kkExists)
                                            <a href="{{ $kkUrl }}" target="_blank" class="btn btn-action-view btn-sm d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; border-radius: 6px; padding: 0 !important;" title="Lihat">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ $kkUrl }}" download class="btn btn-action-approve btn-sm d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; border-radius: 6px; padding: 0 !important;" title="Download">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        @else
                                            <button class="btn btn-light btn-sm text-muted" disabled style="width: 32px; height: 32px; border-radius: 6px; padding: 0 !important;">
                                                <i class="fas fa-ban"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 5: SURAT HASIL -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title font-weight-bold text-dark mb-0">
                            <i class="fas fa-file-pdf mr-2 text-primary" style="color: #0F766E !important;"></i>Surat Hasil
                        </h5>
                    </div>
                    <div class="card-body">
                        @if ($pengajuan->status == 'selesai' && $pengajuan->suratCetak)
                            <div class="row align-items-center text-center text-md-left">
                                <div class="col-md-8 mb-3 mb-md-0">
                                    <p class="mb-1 text-muted text-sm" style="font-size: 0.85rem;">Nomor Surat Resmi</p>
                                    <h5 class="font-weight-bold text-dark mb-3" style="font-size: 1.1rem;">{{ $pengajuan->suratCetak->nomor_surat }}</h5>
                                    <p class="mb-1 text-muted text-sm" style="font-size: 0.85rem;">Tanggal Terbit</p>
                                    <h6 class="font-weight-bold text-dark mb-0" style="font-size: 0.95rem;">{{ \Carbon\Carbon::parse($pengajuan->suratCetak->created_at)->translatedFormat('d M Y') }}</h6>
                                </div>
                                <div class="col-md-4 text-md-right">
                                    @if($pengajuan->suratCetak->file_scan_ttd)
                                        <a href="{{ route('warga.pengajuan.download-resmi', $pengajuan->id) }}" class="btn btn-success font-weight-bold px-4 py-2.5 shadow-sm" style="background-color: #10B981 !important; border-color: #10B981 !important; border-radius: 8px;">
                                            <i class="fas fa-download mr-1"></i> Download Surat
                                        </a>
                                    @else
                                        <div class="alert alert-warning py-2.5 px-3 border-0 rounded-lg text-sm mb-0 text-left" style="background-color: #FFFBEB; color: #B45309;">
                                            <i class="fas fa-info-circle mr-1"></i> Surat disetujui, menunggu berkas bertanda tangan basah diunggah oleh admin.
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @else
                            <div class="alert alert-secondary py-3 px-4 border-0 rounded-lg text-sm mb-0 text-left w-100" style="background-color: #F1F5F9; color: #475569; border-radius: 10px;">
                                <i class="fas fa-info-circle mr-2"></i> Surat belum tersedia.
                            </div>
                        @endif
                    </div>
                </div>

                <!-- SECTION 6: AKSI -->
                <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-5" style="gap: 12px; width: 100%;">
                    <a href="{{ route('warga.riwayat') }}" class="btn btn-outline-secondary px-4 py-2 font-weight-bold d-inline-flex align-items-center justify-content-center" 
                       style="border-radius: 8px; height: 44px; border-color: #cbd5e1; color: #475569; background-color: #ffffff; min-width: 180px;">
                        <i class="fas fa-arrow-left mr-2"></i> Kembali ke Riwayat
                    </a>
                    
                    @if ($pengajuan->status == 'ditolak')
                        <a href="{{ route('warga.pengajuan.ajukan-ulang.form', $pengajuan->id) }}" class="btn btn-warning font-weight-bold shadow-sm text-white d-inline-flex align-items-center justify-content-center" style="border-radius: 8px; height: 44px; background-color: #F59E0B !important; border-color: #F59E0B !important; min-width: 220px;">
                            <i class="fas fa-redo-alt mr-2"></i> Ajukan Ulang Permohonan
                        </a>
                    @endif
                </div>

            </div>
        </div>
    </div>
@stop

@section('warga_js')
    <script>
        $(document).ready(function() {
            $('#btnResubmit').click(function() {
                Swal.fire({
                    title: 'Ajukan Ulang?',
                    text: 'Ini akan membuat permohonan baru dengan data tambahan yang sama dari permohonan sebelumnya.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ffc107',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Ajukan Ulang!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#resubmitForm').submit();
                    }
                });
            });
        });
    </script>
@stop