@extends('layouts.app')

@section('title', 'Tanda Terima Dokumen')

@php
    use App\Models\User;
    $userDiv = User::normalizeDivision($user->division);
@endphp

@push('styles')
<style>
    .modal-overlay { display: none; }
    .modal-overlay.active { display: flex; }
    .line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
</style>
@endpush

@section('content')
<div class="space-y-5">

    {{-- ── NOTIFIKASI ── --}}
    @if(session('success'))
    <div id="successAlert" class="flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 rounded-xl text-sm font-medium">
        <i class="fas fa-check-circle text-emerald-500 flex-shrink-0"></i>
        <span>{{ session('success') }}</span>
        <button onclick="document.getElementById('successAlert').remove()" class="ml-auto text-emerald-400 hover:text-emerald-600 transition"><i class="fas fa-times text-xs"></i></button>
    </div>
    @endif

    @if(session('error'))
    <div id="errorAlert" class="flex items-center gap-3 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-xl text-sm font-medium">
        <i class="fas fa-exclamation-circle text-red-500 flex-shrink-0"></i>
        <span>{{ session('error') }}</span>
        <button onclick="document.getElementById('errorAlert').remove()" class="ml-auto text-red-400 hover:text-red-600 transition"><i class="fas fa-times text-xs"></i></button>
    </div>
    @endif

    {{-- ── HEADER ── --}}
    <div class="flex items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-truck text-white text-sm"></i>
            </div>
            <div>
                <h1 class="text-lg font-bold text-gray-900 leading-tight">Tanda Terima Dokumen</h1>
                <p class="text-xs text-gray-500">Kelola dan pantau pengiriman dokumen antar divisi</p>
            </div>
        </div>
        <div class="flex items-center gap-2 flex-shrink-0">
            {{-- Export Excel — semua user bisa --}}
            <button onclick="openModal('exportModal')"
                class="inline-flex items-center gap-2 bg-white hover:bg-gray-50 text-emerald-700 border border-emerald-200 px-3 py-2 sm:px-4 sm:py-2.5 rounded-lg text-xs sm:text-sm font-semibold transition shadow-sm">
                <i class="fas fa-file-excel text-emerald-600"></i>
                <span class="hidden sm:inline">Export Excel</span>
                <span class="sm:hidden">Export</span>
            </button>
            @if($userDiv === 'security')
            <button onclick="openModal('createModal')"
                class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-2 sm:px-4 sm:py-2.5 rounded-lg text-xs sm:text-sm font-semibold transition shadow-sm">
                <i class="fas fa-plus"></i>
                <span class="hidden sm:inline">Tambah Dokumen</span>
                <span class="sm:hidden">Tambah</span>
            </button>
            @endif
        </div>
    </div>

    {{-- ════════════════════════════════════════ --}}
    {{-- DESKTOP TABLE                           --}}
    {{-- ════════════════════════════════════════ --}}
    <div class="hidden md:block bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-8">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Nama Petugas</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Keterangan</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Tanggal</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Foto</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Alur</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Penerima</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Oleh</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($rows as $i => $surat)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-3 text-gray-400 text-xs">{{ $rows->firstItem() + $i }}</td>
                        <td class="px-4 py-3 font-semibold text-gray-800 text-xs whitespace-nowrap">{{ $surat->nama_petugas }}</td>

                        {{-- Keterangan: terpotong saja, detail ada di tombol aksi --}}
                        <td class="px-4 py-3 max-w-[160px]">
                            <span class="block truncate text-xs text-gray-600" title="{{ $surat->keterangan }}">{{ $surat->keterangan }}</span>
                        </td>

                        <td class="px-4 py-3 text-gray-600 whitespace-nowrap text-xs">{{ $surat->tanggal?->format('d/m/Y') }}</td>

                        {{-- Foto: placeholder ringan, gambar asli load saat diklik --}}
                        <td class="px-4 py-3">
                            @if($surat->image_url)
                                @if(str_ends_with(strtolower($surat->image_url), '.pdf'))
                                    <a href="{{ $surat->image_url }}" target="_blank"
                                        class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 text-xs font-medium transition">
                                        <i class="fas fa-file-pdf"></i> PDF
                                    </a>
                                @else
                                    <button onclick="openPhoto('{{ $surat->image_url }}','{{ addslashes($surat->nama_petugas) }}')"
                                        class="w-9 h-9 rounded-lg border border-gray-200 hover:border-emerald-400 bg-gray-100 flex items-center justify-center text-gray-400 hover:text-emerald-600 transition"
                                        title="Klik untuk lihat foto">
                                        <i class="fas fa-image text-xs"></i>
                                    </button>
                                @endif
                            @else
                                <span class="text-gray-300 text-xs">—</span>
                            @endif
                        </td>

                        {{-- Status --}}
                        <td class="px-4 py-3 whitespace-nowrap">
                            @if($surat->status === 'pending')
                                <span class="px-2 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">Pending</span>
                            @elseif($surat->status === 'approved')
                                <span class="px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">Dikirim</span>
                            @elseif($surat->status === 'completed')
                                <span class="px-2 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">Selesai</span>
                            @elseif($surat->status === 'rejected')
                                <span class="px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">Ditolak</span>
                            @endif
                        </td>

                        {{-- Alur --}}
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-1 text-xs">
                                <span class="{{ $surat->approved_by_hrga ? 'text-emerald-600 font-medium' : 'text-gray-400' }}">
                                    @if($surat->approved_by_hrga)<i class="fas fa-check-circle mr-0.5"></i>@endif HR&GA
                                </span>
                                @if($surat->destination_division)
                                <i class="fas fa-chevron-right text-gray-300 text-[10px]"></i>
                                <span class="{{ $surat->approved_by_final ? 'text-emerald-600 font-medium' : 'text-gray-400' }}">
                                    @if($surat->approved_by_final)<i class="fas fa-check-circle mr-0.5"></i>@endif {{ $surat->destination_division }}
                                </span>
                                @endif
                            </div>
                        </td>

                        <td class="px-4 py-3 text-gray-600 text-xs whitespace-nowrap">{{ $surat->receiver_name ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <p class="text-gray-700 font-medium text-xs">{{ $surat->creator?->username ?? $surat->username }}</p>
                            <p class="text-[11px] text-gray-400">{{ $surat->creator?->division ?? $surat->division }}</p>
                        </td>

                        {{-- Aksi --}}
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-1.5 flex-wrap">
                                @if($userDiv === 'hrga' && $surat->status === 'pending')
                                    <button onclick="openApproveHRGA({{ $surat->id }},'{{ addslashes($surat->nama_petugas) }}')"
                                        class="inline-flex items-center gap-1 bg-blue-500 hover:bg-blue-600 text-white px-2.5 py-1 rounded-lg text-xs font-medium transition">
                                        <i class="fas fa-paper-plane text-[10px]"></i> Kirim
                                    </button>
                                    <button onclick="openReject({{ $surat->id }})"
                                        class="inline-flex items-center gap-1 bg-red-500 hover:bg-red-600 text-white px-2.5 py-1 rounded-lg text-xs font-medium transition">
                                        <i class="fas fa-times text-[10px]"></i> Tolak
                                    </button>
                                @endif

                                @if($surat->status === 'approved' && $surat->assigned_to === $user->id)
                                    <button onclick="openApproveFinal({{ $surat->id }})"
                                        class="inline-flex items-center gap-1 bg-emerald-500 hover:bg-emerald-600 text-white px-2.5 py-1 rounded-lg text-xs font-medium transition">
                                        <i class="fas fa-check text-[10px]"></i> Terima
                                    </button>
                                @endif

                                @if($surat->status === 'pending' && $userDiv === 'security' && (int)$surat->created_by === (int)$user->id)
                                    <button onclick="openEdit({{ $surat->id }},{{ Js::from($surat->nama_petugas) }},{{ Js::from($surat->keterangan) }},'{{ $surat->tanggal?->format('Y-m-d') }}',{{ Js::from($surat->image_url ?? '') }})"
                                        class="inline-flex items-center gap-1 bg-amber-500 hover:bg-amber-600 text-white px-2.5 py-1 rounded-lg text-xs font-medium transition">
                                        <i class="fas fa-pencil-alt text-[10px]"></i> Edit
                                    </button>
                                    <button onclick="confirmDelete({{ $surat->id }})"
                                        class="inline-flex items-center gap-1 bg-gray-100 hover:bg-red-50 text-gray-600 hover:text-red-600 px-2.5 py-1 rounded-lg text-xs font-medium transition border border-gray-200 hover:border-red-200">
                                        <i class="fas fa-trash text-[10px]"></i> Hapus
                                    </button>
                                @endif

                                @if($surat->status === 'rejected' && $surat->rejection_reason)
                                    <button onclick="showReason('{{ addslashes($surat->rejection_reason) }}')"
                                        class="inline-flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-gray-600 px-2.5 py-1 rounded-lg text-xs font-medium transition">
                                        <i class="fas fa-info-circle text-[10px]"></i> Alasan
                                    </button>
                                @endif

                                {{-- Tombol Detail — selalu ada di ujung --}}
                                <button onclick="openDetail({{ Js::from([
                                    'id'                  => $surat->id,
                                    'nama_petugas'        => $surat->nama_petugas,
                                    'keterangan'          => $surat->keterangan,
                                    'tanggal'             => $surat->tanggal?->format('d/m/Y'),
                                    'status'              => $surat->status,
                                    'image_url'           => $surat->image_url,
                                    'destination_division'=> $surat->destination_division,
                                    'approved_by_hrga'    => $surat->approved_by_hrga,
                                    'approved_by_final'   => $surat->approved_by_final,
                                    'receiver_name'       => $surat->receiver_name,
                                    'rejection_reason'    => $surat->rejection_reason,
                                    'creator_name'        => $surat->creator?->username ?? $surat->username,
                                    'creator_division'    => $surat->creator?->division ?? $surat->division,
                                ]) }})"
                                    class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-gray-100 hover:bg-emerald-50 text-gray-400 hover:text-emerald-600 transition"
                                    title="Lihat detail">
                                    <i class="fas fa-eye text-xs"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="px-4 py-16 text-center">
                            <i class="fas fa-truck text-gray-200 text-4xl mb-3 block"></i>
                            <p class="text-gray-400 text-sm font-medium">Belum ada data tanda terima dokumen</p>
                            @if($userDiv === 'security')
                            <p class="text-gray-400 text-xs mt-1">Klik "Tambah" untuk membuat baru</p>
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination desktop --}}
        @if($rows->hasPages())
        <div class="px-4 py-3 border-t border-gray-100 flex items-center justify-between gap-4">
            <p class="text-xs text-gray-500">{{ $rows->firstItem() }}–{{ $rows->lastItem() }} dari {{ $rows->total() }} data</p>
            <div class="flex items-center gap-1">
                @if($rows->onFirstPage())
                    <span class="px-3 py-1.5 rounded-lg text-xs text-gray-300 border border-gray-100 cursor-not-allowed">‹</span>
                @else
                    <a href="{{ $rows->previousPageUrl() }}" class="px-3 py-1.5 rounded-lg text-xs text-gray-600 border border-gray-200 hover:bg-gray-50 transition">‹</a>
                @endif
                @foreach($rows->getUrlRange(max(1,$rows->currentPage()-2), min($rows->lastPage(),$rows->currentPage()+2)) as $page => $url)
                    @if($page == $rows->currentPage())
                        <span class="px-3 py-1.5 rounded-lg text-xs font-bold text-white bg-emerald-600">{{ $page }}</span>
                    @else
                        <a href="{{ $url }}" class="px-3 py-1.5 rounded-lg text-xs text-gray-600 border border-gray-200 hover:bg-gray-50 transition">{{ $page }}</a>
                    @endif
                @endforeach
                @if($rows->hasMorePages())
                    <a href="{{ $rows->nextPageUrl() }}" class="px-3 py-1.5 rounded-lg text-xs text-gray-600 border border-gray-200 hover:bg-gray-50 transition">›</a>
                @else
                    <span class="px-3 py-1.5 rounded-lg text-xs text-gray-300 border border-gray-100 cursor-not-allowed">›</span>
                @endif
            </div>
        </div>
        @endif
    </div>

    {{-- ════════════════════════════════════════ --}}
    {{-- MOBILE CARDS                            --}}
    {{-- ════════════════════════════════════════ --}}
    <div class="md:hidden space-y-3">
        @forelse($rows as $surat)
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 space-y-3">

            {{-- Header --}}
            <div class="flex items-start justify-between gap-2">
                <div class="flex-1 min-w-0">
                    <p class="font-bold text-gray-900 text-sm truncate">{{ $surat->nama_petugas }}</p>
                    <p class="text-xs text-gray-500 mt-0.5">{{ $surat->tanggal?->format('d M Y') }}</p>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    @if($surat->status === 'pending')
                        <span class="px-2 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">Pending</span>
                    @elseif($surat->status === 'approved')
                        <span class="px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700">Dikirim</span>
                    @elseif($surat->status === 'completed')
                        <span class="px-2 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">Selesai</span>
                    @elseif($surat->status === 'rejected')
                        <span class="px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">Ditolak</span>
                    @endif
                </div>
            </div>

            {{-- Keterangan (singkat, full ada di detail) --}}
            <p class="text-xs text-gray-600 line-clamp-2">{{ $surat->keterangan }}</p>

            {{-- Foto + Alur --}}
            <div class="flex items-center gap-3">
                @if($surat->image_url && !str_ends_with(strtolower($surat->image_url), '.pdf'))
                <button onclick="openPhoto('{{ $surat->image_url }}','{{ addslashes($surat->nama_petugas) }}')"
                    class="w-14 h-14 rounded-xl border border-gray-200 bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400 hover:text-emerald-600 hover:border-emerald-400 transition">
                    <i class="fas fa-image text-lg"></i>
                </button>
                @elseif($surat->image_url)
                <a href="{{ $surat->image_url }}" target="_blank"
                    class="flex items-center gap-1 px-3 py-2 rounded-xl bg-red-50 text-red-600 text-xs font-medium flex-shrink-0 border border-red-100">
                    <i class="fas fa-file-pdf"></i> PDF
                </a>
                @endif
                <div class="flex-1 min-w-0">
                    <p class="text-[11px] text-gray-400 mb-1 font-medium uppercase tracking-wide">Alur</p>
                    <div class="flex items-center gap-1 flex-wrap">
                        <span class="text-xs {{ $surat->approved_by_hrga ? 'text-emerald-600 font-semibold' : 'text-gray-400' }}">
                            @if($surat->approved_by_hrga)<i class="fas fa-check-circle"></i> @endif HR&GA
                        </span>
                        @if($surat->destination_division)
                        <i class="fas fa-chevron-right text-gray-300 text-[10px]"></i>
                        <span class="text-xs {{ $surat->approved_by_final ? 'text-emerald-600 font-semibold' : 'text-gray-400' }}">
                            @if($surat->approved_by_final)<i class="fas fa-check-circle"></i> @endif {{ $surat->destination_division }}
                        </span>
                        @endif
                    </div>
                    @if($surat->receiver_name)
                    <p class="text-[11px] text-gray-500 mt-1">Penerima: <strong>{{ $surat->receiver_name }}</strong></p>
                    @endif
                </div>
            </div>

            {{-- Pembuat --}}
            <div class="flex items-center gap-2 py-2 border-t border-gray-50">
                <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-user text-gray-400 text-[10px]"></i>
                </div>
                <div>
                    <p class="text-xs font-medium text-gray-700">{{ $surat->creator?->username ?? $surat->username }}</p>
                    <p class="text-[11px] text-gray-400">{{ $surat->creator?->division ?? $surat->division }}</p>
                </div>
            </div>

            {{-- Aksi mobile --}}
            <div class="grid grid-cols-2 gap-2">
                @if($userDiv === 'hrga' && $surat->status === 'pending')
                    <button onclick="openApproveHRGA({{ $surat->id }},'{{ addslashes($surat->nama_petugas) }}')"
                        class="flex items-center justify-center gap-1.5 bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-lg text-xs font-semibold transition">
                        <i class="fas fa-paper-plane text-[10px]"></i> Approve & Kirim
                    </button>
                    <button onclick="openReject({{ $surat->id }})"
                        class="flex items-center justify-center gap-1.5 bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg text-xs font-semibold transition">
                        <i class="fas fa-times text-[10px]"></i> Tolak
                    </button>
                @endif

                @if($surat->status === 'approved' && $surat->assigned_to === $user->id)
                    <button onclick="openApproveFinal({{ $surat->id }})"
                        class="flex items-center justify-center gap-1.5 bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-2 rounded-lg text-xs font-semibold transition">
                        <i class="fas fa-check text-[10px]"></i> Terima Dokumen
                    </button>
                @endif

                @if($surat->status === 'pending' && $userDiv === 'security' && (int)$surat->created_by === (int)$user->id)
                    <button onclick="openEdit({{ $surat->id }},'{{ addslashes($surat->nama_petugas) }}','{{ addslashes($surat->keterangan) }}','{{ $surat->tanggal?->format('Y-m-d') }}','{{ $surat->image_url }}')"
                        class="flex items-center justify-center gap-1.5 bg-amber-500 hover:bg-amber-600 text-white px-3 py-2 rounded-lg text-xs font-semibold transition">
                        <i class="fas fa-pencil-alt text-[10px]"></i> Edit
                    </button>
                    <button onclick="confirmDelete({{ $surat->id }})"
                        class="flex items-center justify-center gap-1.5 bg-gray-100 hover:bg-red-50 text-gray-600 hover:text-red-600 px-3 py-2 rounded-lg text-xs font-semibold transition border border-gray-200 hover:border-red-200">
                        <i class="fas fa-trash text-[10px]"></i> Hapus
                    </button>
                @endif

                @if($surat->status === 'rejected' && $surat->rejection_reason)
                    <button onclick="showReason('{{ addslashes($surat->rejection_reason) }}')"
                        class="col-span-2 flex items-center justify-center gap-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 px-3 py-2 rounded-lg text-xs font-semibold transition">
                        <i class="fas fa-info-circle text-[10px]"></i> Lihat Alasan Penolakan
                    </button>
                @endif

                {{-- Tombol Detail --}}
                <button onclick="openDetail({{ Js::from([
                    'id'                  => $surat->id,
                    'nama_petugas'        => $surat->nama_petugas,
                    'keterangan'          => $surat->keterangan,
                    'tanggal'             => $surat->tanggal?->format('d/m/Y'),
                    'status'              => $surat->status,
                    'image_url'           => $surat->image_url,
                    'destination_division'=> $surat->destination_division,
                    'approved_by_hrga'    => $surat->approved_by_hrga,
                    'approved_by_final'   => $surat->approved_by_final,
                    'receiver_name'       => $surat->receiver_name,
                    'rejection_reason'    => $surat->rejection_reason,
                    'creator_name'        => $surat->creator?->username ?? $surat->username,
                    'creator_division'    => $surat->creator?->division ?? $surat->division,
                ]) }})"
                    class="col-span-2 flex items-center justify-center gap-1.5 bg-gray-50 hover:bg-emerald-50 text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-lg text-xs font-semibold transition border border-gray-200 hover:border-emerald-200">
                    <i class="fas fa-eye text-[10px]"></i> Lihat Detail
                </button>
            </div>
        </div>
        @empty
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm px-4 py-16 text-center">
            <i class="fas fa-truck text-gray-200 text-4xl mb-3 block"></i>
            <p class="text-gray-400 text-sm font-medium">Belum ada data</p>
            @if($userDiv === 'security')
            <p class="text-gray-400 text-xs mt-1">Klik "Tambah" untuk membuat baru</p>
            @endif
        </div>
        @endforelse

        {{-- Pagination mobile --}}
        @if($rows->hasPages())
        <div class="flex items-center justify-between gap-3 pt-1">
            <p class="text-xs text-gray-500">Hal {{ $rows->currentPage() }} / {{ $rows->lastPage() }} &nbsp;·&nbsp; {{ $rows->total() }} data</p>
            <div class="flex gap-2">
                @if(!$rows->onFirstPage())
                    <a href="{{ $rows->previousPageUrl() }}" class="px-4 py-2 rounded-lg text-xs text-gray-600 border border-gray-200 hover:bg-gray-50 transition">‹ Prev</a>
                @endif
                @if($rows->hasMorePages())
                    <a href="{{ $rows->nextPageUrl() }}" class="px-4 py-2 rounded-lg text-xs text-white bg-emerald-600 hover:bg-emerald-700 transition">Next ›</a>
                @endif
            </div>
        </div>
        @endif
    </div>

</div>

{{-- ══════════════════════════════════════════════════════════════════════════ --}}
{{-- MODALS                                                                    --}}
{{-- ══════════════════════════════════════════════════════════════════════════ --}}

{{-- ── MODAL DETAIL ── --}}
<div id="detailModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-lg shadow-2xl max-h-[90vh] flex flex-col">
        {{-- Header --}}
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <i class="fas fa-eye text-emerald-600 text-xs"></i>
                </div>
                <h2 class="text-sm font-bold text-gray-800">Detail Tanda Terima</h2>
            </div>
            <button type="button" onclick="closeModal('detailModal')" class="text-gray-400 hover:text-gray-600 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>

        {{-- Body --}}
        <div class="px-6 py-5 overflow-y-auto space-y-4">

            {{-- Foto --}}
            <div id="detailPhotoWrap" class="hidden">
                <img id="detailPhoto" src="" alt="Foto dokumen"
                    class="w-full max-h-56 object-contain rounded-xl border border-gray-100 bg-gray-50 cursor-pointer shadow-sm"
                    onclick="openPhoto(this.src, document.getElementById('detailNama').textContent)">
                <p class="text-[11px] text-gray-400 text-center mt-1.5">Klik foto untuk memperbesar</p>
            </div>
            <div id="detailPdfWrap" class="hidden">
                <a id="detailPdfLink" href="#" target="_blank"
                    class="flex items-center gap-3 p-3 rounded-xl bg-red-50 border border-red-100 text-red-700 hover:bg-red-100 transition">
                    <i class="fas fa-file-pdf text-2xl flex-shrink-0"></i>
                    <div><p class="text-xs font-semibold">Dokumen PDF</p><p class="text-[11px] text-red-500">Klik untuk membuka</p></div>
                </a>
            </div>

            {{-- Grid info --}}
            <div class="grid grid-cols-2 gap-3">
                <div class="col-span-2 bg-gray-50 rounded-xl p-3">
                    <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide mb-1">Nama Petugas</p>
                    <p id="detailNama" class="text-sm font-bold text-gray-800"></p>
                </div>
                <div class="bg-gray-50 rounded-xl p-3">
                    <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide mb-1">Tanggal</p>
                    <p id="detailTanggal" class="text-sm font-semibold text-gray-700"></p>
                </div>
                <div class="bg-gray-50 rounded-xl p-3">
                    <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide mb-1">Status</p>
                    <p id="detailStatus" class="text-sm font-semibold"></p>
                </div>
                <div class="col-span-2 bg-gray-50 rounded-xl p-3">
                    <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide mb-1">Keterangan</p>
                    <p id="detailKeterangan" class="text-sm text-gray-700 leading-relaxed whitespace-pre-line"></p>
                </div>
            </div>

            {{-- Alur approval --}}
            <div class="bg-gray-50 rounded-xl p-3">
                <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide mb-2">Alur Approval</p>
                <div class="flex items-center gap-2 flex-wrap">
                    <div id="detailStepHRGA" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold border">
                        <i class="fas fa-circle text-[8px]"></i> HR&GA
                    </div>
                    <i id="detailArrow" class="fas fa-chevron-right text-gray-300 text-xs hidden"></i>
                    <div id="detailStepDest" class="hidden flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold border">
                        <i class="fas fa-circle text-[8px]"></i>
                        <span id="detailDestName"></span>
                    </div>
                </div>
                <div id="detailReceiverWrap" class="hidden mt-2 text-xs text-gray-600">
                    Diterima oleh: <span id="detailReceiver" class="font-semibold text-gray-800"></span>
                </div>
            </div>

            {{-- Alasan ditolak --}}
            <div id="detailRejectionWrap" class="hidden bg-red-50 border border-red-100 rounded-xl p-3">
                <p class="text-[11px] text-red-500 font-semibold uppercase tracking-wide mb-1">Alasan Penolakan</p>
                <p id="detailRejection" class="text-sm text-red-700 leading-relaxed"></p>
            </div>

            {{-- Dibuat oleh --}}
            <div class="flex items-center gap-3 bg-gray-50 rounded-xl p-3">
                <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-user text-gray-500 text-xs"></i>
                </div>
                <div>
                    <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide">Dibuat Oleh</p>
                    <p id="detailCreatorName" class="text-xs font-bold text-gray-800"></p>
                    <p id="detailCreatorDiv" class="text-[11px] text-gray-500"></p>
                </div>
            </div>
        </div>

        <div class="px-6 py-4 border-t border-gray-100 flex-shrink-0">
            <button onclick="closeModal('detailModal')"
                class="w-full py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl text-sm font-semibold transition">
                Tutup
            </button>
        </div>
    </div>
</div>

{{-- ── MODAL EXPORT EXCEL ── --}}
<div id="exportModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <i class="fas fa-file-excel text-emerald-600 text-sm"></i>
                </div>
                <div>
                    <h2 class="text-sm font-bold text-gray-800">Export Excel</h2>
                    <p class="text-[11px] text-gray-400">Hanya data berstatus Selesai yang diekspor</p>
                </div>
            </div>
            <button type="button" onclick="closeModal('exportModal')" class="text-gray-400 hover:text-gray-600 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="GET" action="{{ route('surat-jalan.export') }}" class="px-6 py-5 space-y-4">

            {{-- Info divisi otomatis --}}
            <div class="flex items-center gap-3 bg-gray-50 rounded-xl px-3 py-2.5 border border-gray-100">
                <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-building text-emerald-600 text-xs"></i>
                </div>
                <div>
                    <p class="text-[11px] text-gray-400 font-semibold uppercase tracking-wide">Divisi</p>
                    @if($userDiv === 'hrga' || auth()->user()->isAdminHR())
                        <p class="text-xs font-semibold text-gray-800">Semua Divisi</p>
                    @else
                        <p class="text-xs font-semibold text-gray-800">{{ $user->division }}</p>
                    @endif
                </div>
                <span class="ml-auto text-[11px] text-gray-400 italic">otomatis</span>
            </div>

            {{-- Filter Tanggal --}}
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Tanggal Dari <span class="text-gray-400 font-normal">(opsional)</span></label>
                    <input type="date" name="date_from"
                        class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Tanggal Sampai <span class="text-gray-400 font-normal">(opsional)</span></label>
                    <input type="date" name="date_to"
                        class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                </div>
            </div>

            {{-- Info kolom --}}
            <div class="flex items-start gap-2 bg-blue-50 border border-blue-100 rounded-xl px-3 py-2.5">
                <i class="fas fa-info-circle text-blue-400 text-xs mt-0.5 flex-shrink-0"></i>
                <p class="text-[11px] text-blue-700 leading-relaxed">
                    Kolom: No · Tanggal · Nama Petugas · Divisi Pengirim · Keterangan · Divisi Tujuan · Nama Penerima · Dibuat Oleh
                </p>
            </div>

            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('exportModal')"
                    class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit"
                    class="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2">
                    <i class="fas fa-download text-xs"></i> Download Excel
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ── Tambah ── --}}
<div id="createModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl max-h-[90vh] flex flex-col">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center"><i class="fas fa-plus text-emerald-600 text-xs"></i></div>
                <h2 class="text-sm font-bold text-gray-800">Tambah Tanda Terima Dokumen</h2>
            </div>
            <button type="button" onclick="closeModal('createModal')" class="text-gray-400 hover:text-gray-600 transition"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ route('surat-jalan.store') }}" enctype="multipart/form-data" class="px-6 py-5 space-y-4 overflow-y-auto">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Nama Petugas <span class="text-red-500">*</span></label>
                <input type="text" name="nama_petugas" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Keterangan <span class="text-red-500">*</span></label>
                <textarea name="keterangan" rows="3" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition resize-none"></textarea>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Tanggal <span class="text-red-500">*</span></label>
                <input type="date" name="tanggal" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Upload Foto / File <span class="text-gray-400 font-normal">(opsional, maks. 10MB)</span></label>
                <div class="border-2 border-dashed border-gray-200 rounded-xl px-4 py-3 text-center hover:border-emerald-400 transition cursor-pointer"
                    onclick="document.getElementById('fileInput').click()"
                    ondragover="event.preventDefault();this.classList.add('border-emerald-400','bg-emerald-50')"
                    ondragleave="this.classList.remove('border-emerald-400','bg-emerald-50')"
                    ondrop="handleDrop(event,'fileInput','cDropPh','cImgWrap','cImg','cName','cPdfWrap','cPdfName','cPdfSize','cClearBtn')">
                    <div id="cDropPh" class="py-2"><i class="fas fa-cloud-upload-alt text-gray-300 text-xl mb-1"></i><p class="text-xs text-gray-400">Klik atau drag & drop</p><p class="text-[11px] text-gray-300 mt-0.5">JPG, PNG, WEBP, PDF — maks. 10MB</p></div>
                    <div id="cImgWrap" class="hidden items-center gap-3 py-1"><img id="cImg" src="" class="w-12 h-12 rounded-lg object-cover shadow-sm flex-shrink-0"><p id="cName" class="text-xs text-gray-500 truncate text-left flex-1"></p></div>
                    <div id="cPdfWrap" class="hidden items-center gap-3 py-1"><i class="fas fa-file-pdf text-red-400 text-2xl flex-shrink-0"></i><div class="text-left min-w-0"><p id="cPdfName" class="text-xs font-semibold text-gray-700 truncate"></p><p id="cPdfSize" class="text-[11px] text-gray-400"></p></div></div>
                </div>
                <input type="file" id="fileInput" name="image" accept="image/*,application/pdf" class="hidden"
                    onchange="handleFileSelect(this.files[0],'cDropPh','cImgWrap','cImg','cName','cPdfWrap','cPdfName','cPdfSize','cClearBtn')">
                <button type="button" id="cClearBtn" onclick="clearFile('fileInput','cDropPh','cImgWrap','cPdfWrap','cClearBtn')" class="hidden mt-2 text-xs text-red-500 hover:text-red-700 font-medium transition"><i class="fas fa-times mr-1"></i>Hapus file</button>
            </div>
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('createModal')" class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit" class="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition">Simpan</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Edit ── --}}
<div id="editModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl max-h-[90vh] flex flex-col">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center"><i class="fas fa-pencil-alt text-amber-600 text-xs"></i></div>
                <h2 class="text-sm font-bold text-gray-800">Edit Tanda Terima Dokumen</h2>
            </div>
            <button type="button" onclick="closeModal('editModal')" class="text-gray-400 hover:text-gray-600 transition"><i class="fas fa-times"></i></button>
        </div>
        <form id="editForm" method="POST" enctype="multipart/form-data" class="px-6 py-5 space-y-4 overflow-y-auto">
            @csrf @method('PUT')
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Nama Petugas <span class="text-red-500">*</span></label>
                <input type="text" name="nama_petugas" id="editNamaPetugas" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Keterangan <span class="text-red-500">*</span></label>
                <textarea name="keterangan" id="editKeterangan" rows="3" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition resize-none"></textarea>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Tanggal <span class="text-red-500">*</span></label>
                <input type="date" name="tanggal" id="editTanggal" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition">
            </div>
            <div id="editCurrentPhotoWrap" class="hidden">
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Foto Saat Ini</label>
                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-100">
                    <img id="editCurrentPhoto" src="" alt="Foto" class="w-12 h-12 rounded-lg object-cover flex-shrink-0 cursor-pointer border border-gray-200" onclick="openPhoto(this.src,'Foto saat ini')">
                    <div><p class="text-xs text-gray-600 font-medium">Foto tersimpan</p><p class="text-[11px] text-gray-400">Klik untuk preview</p></div>
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Ganti Foto <span class="text-gray-400 font-normal">(kosongkan jika tidak ingin mengganti)</span></label>
                <div class="border-2 border-dashed border-gray-200 rounded-xl px-4 py-3 text-center hover:border-amber-400 transition cursor-pointer"
                    onclick="document.getElementById('editFileInput').click()"
                    ondragover="event.preventDefault();this.classList.add('border-amber-400','bg-amber-50')"
                    ondragleave="this.classList.remove('border-amber-400','bg-amber-50')"
                    ondrop="handleDrop(event,'editFileInput','eDropPh','eImgWrap','eImg','eName','ePdfWrap','ePdfName','ePdfSize','eClearBtn')">
                    <div id="eDropPh" class="py-2"><i class="fas fa-cloud-upload-alt text-gray-300 text-xl mb-1"></i><p class="text-xs text-gray-400">Klik atau drag & drop foto baru</p></div>
                    <div id="eImgWrap" class="hidden items-center gap-3 py-1"><img id="eImg" src="" class="w-12 h-12 rounded-lg object-cover shadow-sm flex-shrink-0"><p id="eName" class="text-xs text-gray-500 truncate text-left flex-1"></p></div>
                    <div id="ePdfWrap" class="hidden items-center gap-3 py-1"><i class="fas fa-file-pdf text-red-400 text-2xl flex-shrink-0"></i><div class="text-left min-w-0"><p id="ePdfName" class="text-xs font-semibold text-gray-700 truncate"></p><p id="ePdfSize" class="text-[11px] text-gray-400"></p></div></div>
                </div>
                <input type="file" id="editFileInput" name="image" accept="image/*,application/pdf" class="hidden"
                    onchange="handleFileSelect(this.files[0],'eDropPh','eImgWrap','eImg','eName','ePdfWrap','ePdfName','ePdfSize','eClearBtn')">
                <button type="button" id="eClearBtn" onclick="clearFile('editFileInput','eDropPh','eImgWrap','ePdfWrap','eClearBtn')" class="hidden mt-2 text-xs text-red-500 hover:text-red-700 font-medium transition"><i class="fas fa-times mr-1"></i>Hapus file baru</button>
            </div>
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('editModal')" class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit" class="flex-1 py-2.5 bg-amber-500 hover:bg-amber-600 text-white rounded-lg text-sm font-semibold transition">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Approve HRGA ── --}}
<div id="approveHRGAModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2"><div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center"><i class="fas fa-paper-plane text-blue-600 text-xs"></i></div><h2 class="text-sm font-bold text-gray-800">Approve & Kirim Dokumen</h2></div>
            <button type="button" onclick="closeModal('approveHRGAModal')" class="text-gray-400 hover:text-gray-600 transition"><i class="fas fa-times"></i></button>
        </div>
        <form id="approveHRGAForm" method="POST" class="px-6 py-5 space-y-4">
            @csrf
            <p class="text-xs text-gray-500 bg-gray-50 rounded-lg px-3 py-2">Dokumen: <strong id="suratName" class="text-gray-800"></strong></p>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Divisi Tujuan <span class="text-red-500">*</span></label>
                <select name="destination_division" id="destinationSelect" required onchange="filterUsers()" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                    <option value="">— Pilih divisi —</option>
                    @foreach($availableDivisions as $div)<option value="{{ $div }}">{{ $div }}</option>@endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">User Penerima <span class="text-red-500">*</span></label>
                <select name="assigned_user_id" id="userSelect" required class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
                    <option value="">— Pilih divisi terlebih dahulu —</option>
                </select>
            </div>
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('approveHRGAModal')" class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit" class="flex-1 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold transition">Approve & Kirim</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Approve Final ── --}}
<div id="approveFinalModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2"><div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center"><i class="fas fa-check text-emerald-600 text-xs"></i></div><h2 class="text-sm font-bold text-gray-800">Konfirmasi Penerimaan</h2></div>
            <button type="button" onclick="closeModal('approveFinalModal')" class="text-gray-400 hover:text-gray-600 transition"><i class="fas fa-times"></i></button>
        </div>
        <form id="approveFinalForm" method="POST" class="px-6 py-5 space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Nama Penerima <span class="text-red-500">*</span></label>
                <input type="text" name="receiver_name" required placeholder="Masukkan nama penerima..." class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
            </div>
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('approveFinalModal')" class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit" class="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition">Konfirmasi Terima</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Tolak ── --}}
<div id="rejectModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-md shadow-2xl">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2"><div class="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center"><i class="fas fa-times text-red-600 text-xs"></i></div><h2 class="text-sm font-bold text-gray-800">Tolak Dokumen</h2></div>
            <button type="button" onclick="closeModal('rejectModal')" class="text-gray-400 hover:text-gray-600 transition"><i class="fas fa-times"></i></button>
        </div>
        <form id="rejectForm" method="POST" class="px-6 py-5 space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Alasan Penolakan <span class="text-red-500">*</span></label>
                <textarea name="reason" rows="3" required placeholder="Masukkan alasan penolakan..." class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 transition resize-none"></textarea>
            </div>
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('rejectModal')" class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit" class="flex-1 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-semibold transition">Tolak Dokumen</button>
            </div>
        </form>
    </div>
</div>

{{-- ── Alasan Penolakan ── --}}
<div id="reasonModal" class="modal-overlay fixed inset-0 bg-black/50 items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-sm shadow-2xl">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2"><div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center"><i class="fas fa-info text-amber-600 text-xs"></i></div><h2 class="text-sm font-bold text-gray-800">Alasan Penolakan</h2></div>
            <button type="button" onclick="closeModal('reasonModal')" class="text-gray-400 hover:text-gray-600 transition"><i class="fas fa-times"></i></button>
        </div>
        <div class="px-6 py-5"><p id="reasonText" class="text-sm text-gray-700 leading-relaxed"></p></div>
    </div>
</div>

{{-- ── Lightbox Foto ── --}}
<div id="photoModal" class="modal-overlay fixed inset-0 bg-black/80 items-center justify-center z-[60] p-4" onclick="if(event.target===this)closeModal('photoModal')">
    <div class="relative max-w-3xl w-full">
        <button onclick="closeModal('photoModal')" class="absolute -top-10 right-0 text-white/70 hover:text-white text-sm font-medium flex items-center gap-1.5 transition"><i class="fas fa-times"></i> Tutup</button>
        <p id="photoModalTitle" class="text-white/80 text-xs font-medium mb-3 truncate"></p>
        <img id="photoModalImg" src="" alt="Foto dokumen" class="w-full max-h-[80vh] object-contain rounded-xl shadow-2xl">
        <a id="photoModalLink" href="#" target="_blank" class="mt-3 inline-flex items-center gap-2 text-white/70 hover:text-white text-xs font-medium transition"><i class="fas fa-external-link-alt text-xs"></i> Buka di tab baru</a>
    </div>
</div>

{{-- Form DELETE --}}
<form id="deleteForm" method="POST" class="hidden">@csrf @method('DELETE')</form>

@endsection

@push('scripts')
<script>
const allUsers = @json($users);

// ── MODAL ──
function openModal(id)  { document.getElementById(id).classList.add('active');    document.body.style.overflow='hidden'; }
function closeModal(id) { document.getElementById(id).classList.remove('active'); document.body.style.overflow=''; }
document.querySelectorAll('.modal-overlay').forEach(el => {
    el.addEventListener('click', e => { if (e.target===el) closeModal(el.id); });
});

// ── LIGHTBOX ──
function openPhoto(url, name) {
    document.getElementById('photoModalImg').src   = url;
    document.getElementById('photoModalLink').href = url;
    document.getElementById('photoModalTitle').textContent = 'Foto: '+name;
    openModal('photoModal');
}

// ── MODAL DETAIL ──
function openDetail(d) {
    // Nama & info dasar
    document.getElementById('detailNama').textContent    = d.nama_petugas;
    document.getElementById('detailTanggal').textContent = d.tanggal;
    document.getElementById('detailKeterangan').textContent = d.keterangan;
    document.getElementById('detailCreatorName').textContent = d.creator_name;
    document.getElementById('detailCreatorDiv').textContent  = d.creator_division;

    // Status badge
    const statusMap = {
        pending:   { label:'Pending',  cls:'text-amber-700'  },
        approved:  { label:'Dikirim',  cls:'text-blue-700'   },
        completed: { label:'Selesai',  cls:'text-emerald-700'},
        rejected:  { label:'Ditolak',  cls:'text-red-700'    },
    };
    const st = statusMap[d.status] || { label: d.status, cls:'text-gray-700' };
    const el = document.getElementById('detailStatus');
    el.textContent  = st.label;
    el.className    = 'text-sm font-semibold ' + st.cls;

    // Foto
    const photoWrap = document.getElementById('detailPhotoWrap');
    const pdfWrap   = document.getElementById('detailPdfWrap');
    if (d.image_url && d.image_url.endsWith('.pdf')) {
        photoWrap.classList.add('hidden'); pdfWrap.classList.remove('hidden');
        document.getElementById('detailPdfLink').href = d.image_url;
    } else if (d.image_url) {
        pdfWrap.classList.add('hidden'); photoWrap.classList.remove('hidden');
        document.getElementById('detailPhoto').src = d.image_url;
    } else {
        photoWrap.classList.add('hidden'); pdfWrap.classList.add('hidden');
    }

    // Alur approval — HR&GA step
    const stepHRGA = document.getElementById('detailStepHRGA');
    if (d.approved_by_hrga) {
        stepHRGA.className = 'flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold border bg-emerald-50 text-emerald-700 border-emerald-200';
        stepHRGA.innerHTML = '<i class="fas fa-check-circle text-[10px]"></i> HR&GA';
    } else {
        stepHRGA.className = 'flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold border bg-gray-50 text-gray-400 border-gray-200';
        stepHRGA.innerHTML = '<i class="fas fa-circle text-[8px]"></i> HR&GA';
    }

    // Destinasi step
    const arrow    = document.getElementById('detailArrow');
    const stepDest = document.getElementById('detailStepDest');
    if (d.destination_division) {
        arrow.classList.remove('hidden');
        stepDest.classList.remove('hidden');
        document.getElementById('detailDestName').textContent = d.destination_division;
        if (d.approved_by_final) {
            stepDest.className = 'flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold border bg-emerald-50 text-emerald-700 border-emerald-200';
            stepDest.querySelector('i').className = 'fas fa-check-circle text-[10px]';
        } else {
            stepDest.className = 'flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-semibold border bg-gray-50 text-gray-400 border-gray-200';
            stepDest.querySelector('i').className = 'fas fa-circle text-[8px]';
        }
    } else {
        arrow.classList.add('hidden');
        stepDest.classList.add('hidden');
    }

    // Penerima
    const receiverWrap = document.getElementById('detailReceiverWrap');
    if (d.receiver_name) {
        receiverWrap.classList.remove('hidden');
        document.getElementById('detailReceiver').textContent = d.receiver_name;
    } else {
        receiverWrap.classList.add('hidden');
    }

    // Alasan penolakan
    const rejWrap = document.getElementById('detailRejectionWrap');
    if (d.rejection_reason) {
        rejWrap.classList.remove('hidden');
        document.getElementById('detailRejection').textContent = d.rejection_reason;
    } else {
        rejWrap.classList.add('hidden');
    }

    openModal('detailModal');
}

// ── FILE UPLOAD (generic) ──
function handleDrop(event, inputId, phId, imgWrapId, imgId, nameId, pdfWrapId, pdfNameId, pdfSizeId, clearBtnId) {
    event.preventDefault();
    const file = event.dataTransfer.files[0]; if (!file) return;
    const dt = new DataTransfer(); dt.items.add(file);
    document.getElementById(inputId).files = dt.files;
    handleFileSelect(file, phId, imgWrapId, imgId, nameId, pdfWrapId, pdfNameId, pdfSizeId, clearBtnId);
}
function handleFileSelect(file, phId, imgWrapId, imgId, nameId, pdfWrapId, pdfNameId, pdfSizeId, clearBtnId) {
    if (!file) return;
    const isPDF = file.type === 'application/pdf';
    document.getElementById(phId).classList.add('hidden');
    document.getElementById(clearBtnId).classList.remove('hidden');
    if (isPDF) {
        document.getElementById(imgWrapId).classList.add('hidden'); document.getElementById(imgWrapId).classList.remove('flex');
        document.getElementById(pdfWrapId).classList.remove('hidden'); document.getElementById(pdfWrapId).classList.add('flex');
        document.getElementById(pdfNameId).textContent = file.name;
        document.getElementById(pdfSizeId).textContent = (file.size/1024).toFixed(1)+' KB';
    } else {
        document.getElementById(pdfWrapId).classList.add('hidden'); document.getElementById(pdfWrapId).classList.remove('flex');
        document.getElementById(imgWrapId).classList.remove('hidden'); document.getElementById(imgWrapId).classList.add('flex');
        document.getElementById(nameId).textContent = file.name;
        const r = new FileReader(); r.onload = e => { document.getElementById(imgId).src = e.target.result; }; r.readAsDataURL(file);
    }
}
function clearFile(inputId, phId, imgWrapId, pdfWrapId, clearBtnId) {
    document.getElementById(inputId).value = '';
    document.getElementById(phId).classList.remove('hidden');
    document.getElementById(imgWrapId).classList.add('hidden'); document.getElementById(imgWrapId).classList.remove('flex');
    document.getElementById(pdfWrapId).classList.add('hidden'); document.getElementById(pdfWrapId).classList.remove('flex');
    document.getElementById(clearBtnId).classList.add('hidden');
}

// ── EDIT ──
function openEdit(id, nama, keterangan, tanggal, imageUrl) {
    document.getElementById('editForm').action = `/surat-jalan/${id}`;
    document.getElementById('editNamaPetugas').value = nama;
    document.getElementById('editKeterangan').value  = keterangan;
    document.getElementById('editTanggal').value     = tanggal;
    const photoWrap = document.getElementById('editCurrentPhotoWrap');
    if (imageUrl && !imageUrl.endsWith('.pdf')) {
        document.getElementById('editCurrentPhoto').src = imageUrl;
        photoWrap.classList.remove('hidden');
    } else { photoWrap.classList.add('hidden'); }
    clearFile('editFileInput','eDropPh','eImgWrap','ePdfWrap','eClearBtn');
    openModal('editModal');
}

// ── APPROVE / REJECT ──
function openApproveHRGA(id, name) {
    document.getElementById('approveHRGAForm').action = `/surat-jalan/${id}/approve-hrga`;
    document.getElementById('suratName').textContent  = name;
    document.getElementById('destinationSelect').value = '';
    document.getElementById('userSelect').innerHTML   = '<option value="">— Pilih divisi terlebih dahulu —</option>';
    openModal('approveHRGAModal');
}
function filterUsers() {
    const dest   = document.getElementById('destinationSelect').value;
    const norm   = v => (v||'').toLowerCase().trim().replace(/&/g,'').replace(/\s+/g,'');
    const select = document.getElementById('userSelect');
    const list   = allUsers.filter(u => norm(u.division) === norm(dest));
    if (!dest) { select.innerHTML='<option value="">— Pilih divisi terlebih dahulu —</option>'; return; }
    select.innerHTML = list.length
        ? '<option value="">— Pilih user —</option>'+list.map(u=>`<option value="${u.id}">${u.username} (${u.division})</option>`).join('')
        : '<option value="">Tidak ada user di divisi ini</option>';
}
function openApproveFinal(id) { document.getElementById('approveFinalForm').action=`/surat-jalan/${id}/approve-final`; openModal('approveFinalModal'); }
function openReject(id)        { document.getElementById('rejectForm').action=`/surat-jalan/${id}/reject`; openModal('rejectModal'); }
function showReason(reason)    { document.getElementById('reasonText').textContent=reason; openModal('reasonModal'); }
function confirmDelete(id) {
    if (!confirm('Hapus tanda terima ini? Data tidak dapat dikembalikan.')) return;
    const form = document.getElementById('deleteForm');
    form.action = `/surat-jalan/${id}`; form.submit();
}
</script>
@endpush