@extends('layouts.app')
@section('title', 'Arsip Surat')

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

    {{-- HEADER --}}
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center">
            <i class="fas fa-archive text-white"></i>
        </div>
        <div>
            <h1 class="text-xl font-bold text-gray-900">Arsip Surat</h1>
            <p class="text-sm text-gray-500">Riwayat surat berdasarkan tahun, tipe, dan departemen</p>
        </div>
    </div>

    {{-- NOTIFIKASI --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center gap-2 text-green-700 text-sm">
        <i class="fas fa-check-circle text-green-500"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-2 text-red-700 text-sm">
        <i class="fas fa-exclamation-circle text-red-400"></i> {{ session('error') }}
    </div>
    @endif

    {{-- FILTER --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
        <h2 class="font-bold text-gray-800 mb-4">Filter Arsip</h2>
        <form method="GET" action="{{ route('surat.arsip') }}" id="filterForm">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">

                {{-- Tahun --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-600 mb-1">
                        <i class="fas fa-calendar text-gray-400 mr-1"></i> Tahun
                    </label>
                    <select name="year" onchange="this.form.submit()"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                        @foreach(range(now()->year, 2020) as $y)
                            <option value="{{ $y }}" {{ ($year ?? now()->year) == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Tipe --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-600 mb-1">
                        <i class="fas fa-file-alt text-gray-400 mr-1"></i> Tipe Surat
                    </label>
                    <select name="type" onchange="this.form.submit()"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                        <option value="all"        {{ ($type ?? 'all') === 'all'        ? 'selected' : '' }}>Semua Tipe</option>
                        <option value="internal"   {{ ($type ?? '') === 'internal'      ? 'selected' : '' }}>Surat Internal</option>
                        <option value="eksternal"  {{ ($type ?? '') === 'eksternal'     ? 'selected' : '' }}>Surat Eksternal</option>
                        <option value="sket-kerja" {{ ($type ?? '') === 'sket-kerja'    ? 'selected' : '' }}>Surat Keterangan Kerja</option>
                    </select>
                </div>

                {{-- Division (hanya jika internal) --}}
                @if(($type ?? 'all') === 'internal' && auth()->user()->isAdminHR())
                <div>
                    <label class="block text-sm font-semibold text-gray-600 mb-1">
                        <i class="fas fa-building text-gray-400 mr-1"></i> Departemen
                    </label>
                    <select name="division" onchange="this.form.submit()"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-emerald transition">
                        <option value="all">Semua Departemen</option>
                        @foreach($divisions as $div)
                            <option value="{{ $div }}" {{ ($division ?? 'all') === $div ? 'selected' : '' }}>{{ $div }}</option>
                        @endforeach
                    </select>
                </div>
                @endif
            </div>

            {{-- Search --}}
            <div class="flex gap-2 pt-4 border-t border-gray-100">
                <div class="relative flex-1 max-w-md">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                    <input type="text" name="search" value="{{ $search ?? '' }}"
                        placeholder="Cari nomor, keterangan, atau pembuat..."
                        class="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                </div>
                <button type="submit"
                    class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition">
                    Cari
                </button>
                @if(!empty($search))
                <a href="{{ route('surat.arsip', ['year' => $year, 'type' => $type, 'division' => $division]) }}"
                   class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg text-sm font-semibold transition">
                    Reset
                </a>
                @endif
            </div>
        </form>

        {{-- Info bar --}}
        <div class="mt-4 flex items-center justify-between p-3 bg-blue-50 border border-emerald-100 rounded-lg">
            <p class="text-sm text-gray-700">
                <i class="fas fa-info-circle mr-1"></i>
                Menampilkan <strong>{{ $suratList->total() }}</strong> arsip tahun <strong>{{ $year ?? now()->year }}</strong>
                @if(($type ?? 'all') !== 'all') &mdash; Tipe: <strong>{{ $type }}</strong> @endif
                @if(($type ?? 'all') === 'internal' && ($division ?? 'all') !== 'all') &mdash; Dept: <strong>{{ $division }}</strong> @endif
                @if(!empty($search)) &mdash; Cari: "<strong>{{ $search }}</strong>" @endif
            </p>
            <a href="{{ route('surat.arsip.export', ['year' => $year ?? now()->year, 'type' => $type ?? 'all', 'division' => $division ?? 'all']) }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded-lg text-xs font-semibold transition">
                <i class="fas fa-download"></i> Export CSV
            </a>
        </div>
    </div>

    {{-- TABEL --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100">
            <h2 class="font-bold text-gray-800">Arsip Surat Tahun {{ $year ?? now()->year }}</h2>
            <p class="text-xs text-gray-400 mt-0.5">Total: {{ $suratList->total() }} surat</p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <th class="px-5 py-3 text-left">No</th>
                        <th class="px-5 py-3 text-left">Nomor Surat</th>
                        <th class="px-5 py-3 text-left">Pembuat</th>
                        <th class="px-5 py-3 text-left">Tipe</th>
                        <th class="px-5 py-3 text-left">Keterangan</th>
                        <th class="px-5 py-3 text-left">Divisi</th>
                        <th class="px-5 py-3 text-center">PDF</th>
                        <th class="px-5 py-3 text-left">Tanggal</th>
                        @if(auth()->user()->isAdminHR())
                        <th class="px-5 py-3 text-center">Aksi</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @forelse($suratList as $i => $surat)
                    <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors group">
                        <td class="px-5 py-3.5 text-gray-400 text-xs">{{ $suratList->firstItem() + $i }}</td>
                        <td class="px-5 py-3.5">
                            <span class="font-mono font-bold text-gray-700 text-sm">{{ $surat->nomor_surat }}</span>
                        </td>
                        <td class="px-5 py-3.5 text-gray-700">{{ $surat->pembuat_surat ?? '-' }}</td>
                        <td class="px-5 py-3.5">
                            @php
                                $badge = ['internal' => 'bg-blue-100 text-blue-700', 'eksternal' => 'bg-purple-100 text-purple-700', 'sket-kerja' => 'bg-orange-100 text-orange-700'][$surat->type] ?? 'bg-gray-100 text-gray-600';
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $badge }}">
                                {{ ucfirst($surat->type) }}
                            </span>
                        </td>
                        <td class="px-5 py-3.5 text-gray-600 max-w-xs truncate">{{ $surat->keterangan }}</td>
                        <td class="px-5 py-3.5">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                                {{ $surat->division ?? '-' }}
                            </span>
                        </td>
                        <td class="px-5 py-3.5 text-center">
                            @if($surat->pdf_url)
                                <div class="flex items-center justify-center gap-1">
                                    <a href="{{ $surat->pdf_url }}" target="_blank"
                                        class="inline-flex items-center gap-1 px-2 py-1 bg-red-50 text-red-600 rounded-lg text-xs font-bold hover:bg-red-100 transition">
                                        <i class="fas fa-file-pdf"></i> Lihat
                                    </a>
                                    <form method="POST" action="{{ route('surat.arsip.delete-pdf', $surat) }}" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" onclick="return confirm('Hapus PDF ini?')"
                                            class="px-2 py-1 bg-gray-100 text-gray-400 rounded-lg text-xs hover:bg-red-50 hover:text-red-500 transition opacity-0 group-hover:opacity-100">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </form>
                                </div>
                            @else
                                <button onclick="openUploadModal({{ $surat->id }})"
                                    class="inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 text-gray-400 rounded-lg text-xs font-bold hover:bg-yellow-50 hover:text-yellow-600 transition">
                                    <i class="fas fa-upload"></i> Upload
                                </button>
                            @endif
                        </td>
                        <td class="px-5 py-3.5 text-gray-400 text-xs">
                            {{ $surat->created_at?->format('d M Y H:i') }}
                        </td>
                        @if(auth()->user()->isAdminHR())
                        <td class="px-5 py-3.5 text-center">
                            <form method="POST" action="{{ route('surat.arsip.destroy', $surat) }}"
                                onsubmit="return confirm('Hapus surat {{ $surat->nomor_surat }}?')" class="inline">
                                @csrf @method('DELETE')
                                <button type="submit"
                                    class="p-2 text-red-400 hover:bg-red-50 rounded-lg transition opacity-0 group-hover:opacity-100">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </form>
                        </td>
                        @endif
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-5 py-12 text-center text-gray-400">
                            <i class="fas fa-archive text-2xl mb-2 block opacity-30"></i>
                            Tidak ada arsip surat ditemukan
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($suratList->hasPages())
        <div class="px-5 py-3 border-t border-gray-100">
            {{ $suratList->withQueryString()->links() }}
        </div>
        @endif
    </div>
</div>

{{-- Modal Upload PDF --}}
<div id="uploadModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-bold text-gray-800">Upload PDF Surat</h3>
            <button onclick="closeUploadModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="uploadForm" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-600 mb-2">Pilih File PDF</label>
                <label class="flex items-center gap-2 px-4 py-3 border-2 border-dashed border-gray-200 rounded-lg cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition">
                    <i class="fas fa-paperclip text-gray-400"></i>
                    <span class="text-sm text-gray-500" id="uploadFileName">Klik untuk pilih file PDF</span>
                    <input type="file" name="pdf" accept=".pdf" required class="hidden"
                        onchange="document.getElementById('uploadFileName').textContent = this.files[0]?.name || 'Klik untuk pilih file PDF'">
                </label>
                <p class="text-xs text-gray-400 mt-1">Maksimal 10MB</p>
            </div>
            <div class="flex gap-3">
                <button type="submit"
                    class="flex-1 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-sm transition">
                    <i class="fas fa-upload mr-1"></i> Upload PDF
                </button>
                <button type="button" onclick="closeUploadModal()"
                    class="flex-1 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg font-semibold text-sm transition">
                    Batal
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openUploadModal(suratId) {
    document.getElementById('uploadForm').action = `/arsip-surat/${suratId}/upload-pdf`;
    document.getElementById('uploadModal').classList.remove('hidden');
}
function closeUploadModal() {
    document.getElementById('uploadModal').classList.add('hidden');
}
</script>
@endsection