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

@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-green-500 to-emerald-600 flex items-center justify-center">
            <i class="fas fa-file-alt text-white"></i>
        </div>
        <div>
            <h1 class="text-xl font-bold text-gray-900">Generate Surat Eksternal</h1>
            <p class="text-sm text-gray-500">Divisi: <strong>{{ auth()->user()->division }}</strong></p>
        </div>
    </div>

    {{-- SUCCESS --}}
    @if(session('success') && session('nomor_surat'))
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-start gap-3">
        <i class="fas fa-check-circle text-green-600 text-xl mt-0.5"></i>
        <div>
            <p class="font-bold text-green-800">Nomor Surat Berhasil Dibuat!</p>
            <p class="text-2xl font-mono font-bold text-green-700 mt-1">{{ session('nomor_surat') }}</p>
            <div class="flex flex-wrap gap-4 mt-2 text-sm text-green-800">
                <span><span class="opacity-60">Divisi:</span> <strong>{{ session('division') }}</strong></span>
                <span><span class="opacity-60">Pembuat:</span> <strong>{{ session('pembuat_surat') }}</strong></span>
                <span><span class="opacity-60">Perihal:</span> <strong>{{ session('keterangan') }}</strong></span>
            </div>
            <button onclick="navigator.clipboard.writeText('{{ session('nomor_surat') }}').then(()=>{ this.innerHTML='<i class=\'fas fa-check mr-1\'></i>Tersalin!'; setTimeout(()=>this.innerHTML='<i class=\'fas fa-copy mr-1\'></i>Salin Nomor',2000) })"
                class="mt-3 inline-flex items-center gap-1.5 px-4 py-1.5 border border-green-500 text-green-700 rounded-lg text-sm font-semibold hover:bg-green-50 transition">
                <i class="fas fa-copy"></i> Salin Nomor
            </button>
        </div>
    </div>
    @elseif(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center gap-3">
        <i class="fas fa-check-circle text-green-600 text-xl"></i>
        <p class="font-semibold text-green-800">{{ session('success') }}</p>
    </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

    {{-- WARNING: PENDING PDF --}}
    @if($pendingSurat)
    <div class="bg-yellow-50 border-2 border-yellow-300 rounded-xl p-4 flex items-start gap-3">
        <i class="fas fa-exclamation-triangle text-yellow-500 text-xl mt-0.5"></i>
        <div class="flex-1">
            <p class="font-bold text-yellow-800">Upload PDF Diperlukan</p>
            <p class="text-sm text-yellow-700 mt-1">
                Surat <span class="font-mono font-bold">{{ $pendingSurat->nomor_surat }}</span>
                belum memiliki scan PDF. Upload terlebih dahulu untuk bisa generate surat baru.
            </p>
            <form method="POST" action="{{ route('surat.upload-pdf', $pendingSurat->id) }}"
                enctype="multipart/form-data" class="flex items-center gap-3 mt-3">
                @csrf
                <label class="flex items-center gap-2 px-4 py-2 bg-white border-2 border-yellow-300 rounded-lg cursor-pointer hover:bg-yellow-50 transition">
                    <i class="fas fa-paperclip text-yellow-500"></i>
                    <span class="text-sm font-semibold text-yellow-700" id="pendingFileName">Pilih File PDF</span>
                    <input type="file" name="pdf" accept=".pdf" class="hidden"
                        onchange="document.getElementById('pendingFileName').textContent = this.files[0]?.name || 'Pilih File PDF'">
                </label>
                <button type="submit"
                    class="px-5 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-bold text-sm transition">
                    <i class="fas fa-upload mr-1"></i> Upload & Lanjutkan
                </button>
            </form>
        </div>
    </div>
    @endif

    {{-- FORM GENERATE --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="mb-5 p-4 bg-gray-50 rounded-lg border border-gray-200">
            <p class="text-sm text-gray-600 mb-1">Preview Nomor Surat:</p>
            <p class="text-2xl font-mono font-bold text-gray-800">{{ $formatPreview }}</p>
            <p class="text-xs text-gray-500 mt-1">Eksternal: Nomor sesuai divisi Anda ({{ auth()->user()->division }})</p>
        </div>

        <form method="POST" action="{{ route('surat.generate.store') }}" class="space-y-5">
            @csrf
            <input type="hidden" name="type" value="eksternal">

            <div class="space-y-1.5">
                <label class="block text-gray-700 font-semibold text-sm">Nama Pembuat Surat </label>
                <input type="text" name="pembuat_surat" value="{{ old('pembuat_surat') }}" required
                    {{ $pendingSurat ? 'disabled' : '' }}
                    placeholder="Masukkan nama pembuat surat..."
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60">
            </div>

            <div class="space-y-1.5">
                <label class="block text-gray-700 font-semibold text-sm">Keterangan Surat </label>
                <textarea name="keterangan" rows="4" required
                    {{ $pendingSurat ? 'disabled' : '' }}
                    placeholder="Masukkan keterangan atau perihal surat..."
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60 resize-none">{{ old('keterangan') }}</textarea>
            </div>

            <div class="pt-2">
                @if($pendingSurat)
                <button type="button" disabled
                    class="w-full py-3.5 rounded-lg font-semibold bg-gray-300 text-gray-500 cursor-not-allowed flex items-center justify-center gap-2">
                    <i class="fas fa-lock"></i> Upload PDF Dulu
                </button>
                @else
                <button type="submit"
                    class="w-full py-3 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-700 text-white transition flex items-center justify-center gap-2 shadow-sm">
                    <i class="fas fa-magic"></i> Generate Nomor Surat
                </button>
                @endif
            </div>
        </form>
    </div>

    {{-- TABEL RIWAYAT --}}
    <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 flex items-center justify-between">
            <h2 class="font-bold text-gray-800">Riwayat Surat Eksternal {{ now()->year }}</h2>
            <div class="relative">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                <input type="text" id="searchInput" value="{{ request('search') }}"
                    placeholder="Cari surat..."
                    class="pl-9 pr-9 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition w-48">
                <div id="searchSpinner" class="hidden absolute right-3 top-1/2 -translate-y-1/2">
                    <i class="fas fa-spinner fa-spin text-gray-400 text-xs"></i>
                </div>
            </div>
        </div>

        <div id="tableWrapper">
            <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">Nomor Surat</th>
                            <th class="px-5 py-3 text-left">Divisi</th>
                            <th class="px-5 py-3 text-left">Pembuat</th>
                            <th class="px-5 py-3 text-left">Keterangan</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 id="suratTableBody">
                        @forelse($suratList as $surat)
                        <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors group">
                            <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">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-blue-700">
                                    {{ $surat->division }}
                                </span>
                            </td>
                            <td class="px-5 py-3.5 text-gray-700">{{ $surat->pembuat_surat }}</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 text-center">
                                @if($surat->pdf_url)
                                    <a href="{{ $surat->pdf_url }}" target="_blank"
                                        class="inline-flex items-center gap-1 px-2.5 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>
                                @else
                                    <form method="POST" action="{{ route('surat.upload-pdf', $surat->id) }}"
                                        enctype="multipart/form-data" class="inline-block">
                                        @csrf
                                        <label 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 cursor-pointer">
                                            <i class="fas fa-upload"></i> Upload
                                            <input type="file" name="pdf" accept=".pdf" class="hidden"
                                                onchange="this.closest('form').submit()">
                                        </label>
                                    </form>
                                @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.destroy', $surat->id) }}"
                                    onsubmit="return confirm('Hapus surat ini?')" 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="7" class="px-5 py-12 text-center text-gray-400">
                                <i class="fas fa-file-alt text-2xl mb-2 block opacity-30"></i>
                                Belum ada surat Eksternal
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

@push('scripts')
<script>
(function() {
    const input   = document.getElementById('searchInput');
    const spinner = document.getElementById('searchSpinner');
    let timer;

    function doSearch(keyword, page) {
        spinner?.classList.remove('hidden');
        const url = new URL(window.location.href);
        keyword ? url.searchParams.set('search', keyword) : url.searchParams.delete('search');
        page    ? url.searchParams.set('page', page)      : url.searchParams.delete('page');

        fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(r => r.text())
        .then(html => {
            const doc        = new DOMParser().parseFromString(html, 'text/html');
            const newWrapper = doc.getElementById('tableWrapper');
            const oldWrapper = document.getElementById('tableWrapper');
            if (newWrapper && oldWrapper) {
                oldWrapper.innerHTML = newWrapper.innerHTML;
                bindPaginationLinks();
            }
            window.history.pushState({}, '', url.toString());
            spinner?.classList.add('hidden');
        })
        .catch(() => spinner?.classList.add('hidden'));
    }

    function bindPaginationLinks() {
        document.getElementById('tableWrapper')?.querySelectorAll('a[href]').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const page = new URL(this.href).searchParams.get('page');
                doSearch(input?.value || '', page);
            });
        });
    }

    // Enter untuk search
    input?.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            clearTimeout(timer);
            doSearch(this.value, null);
        }
    });

    // Auto search debounce 600ms
    input?.addEventListener('input', function() {
        clearTimeout(timer);
        timer = setTimeout(() => doSearch(this.value, null), 600);
    });

    bindPaginationLinks();
})();
</script>
@endpush
@endsection