@extends('adminlte::page')

@section('title', 'Arsip Surat Keluar')

{{-- Aktifkan Plugin bawaan AdminLTE --}}
@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)

@section('content_header')
<div class="d-flex justify-content-between align-items-center mb-3 mt-2">
    <div>
        <h1 class="text-dark font-weight-bold h3 mb-1">Arsip Surat Keluar</h1>
        <p class="text-muted mb-0 text-sm">Kelola draf, riwayat dokumen persuratan, dan Tanda Tangan Elektronik (TTE).</p>
    </div>
    <a href="{{ route('eoffice.surat.create') }}" class="btn btn-primary btn-lg rounded-pill shadow-sm px-4 font-weight-bold transition-hover">
        <i class="fas fa-plus mr-2"></i> Buat Surat Baru
    </a>
</div>
@stop

@section('content')
<div class="container-fluid pb-4">
    <div class="card border-0 shadow-sm" style="border-radius: 15px; overflow: hidden;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 w-100" id="table-surat">
                    <thead class="bg-light text-muted">
                        <tr>
                            <th class="pl-4 border-top-0 border-bottom-0 py-3" width="5%">No</th>
                            <th class="border-top-0 border-bottom-0 py-3">Nomor & Tanggal</th>
                            <th class="border-top-0 border-bottom-0 py-3">Tujuan & Perihal</th>
                            <th class="border-top-0 border-bottom-0 py-3">Pejabat (TTE)</th>
                            <th class="text-center border-top-0 border-bottom-0 py-3">Status</th>
                            <th class="pr-4 text-right border-top-0 border-bottom-0 py-3" width="130px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($surat as $item)
                            <tr class="border-bottom">
                                {{-- 1. NO --}}
                                <td class="pl-4 align-middle font-weight-bold text-muted">
                                    {{ $loop->iteration + $surat->firstItem() - 1 }}
                                </td>

                                {{-- 2. INFO SURAT --}}
                                <td class="align-middle py-3">
                                    <span class="d-block font-weight-bold text-dark text-nowrap" style="font-size: 1.05rem;">
                                        {{ $item->no_surat ?: 'Menunggu Generate...' }}
                                    </span>
                                    <div class="d-flex align-items-center mt-1">
                                        <small class="text-muted text-nowrap mr-3">
                                            <i class="far fa-calendar-alt text-primary mr-1"></i>
                                            {{ \Carbon\Carbon::parse($item->tgl_surat)->translatedFormat('d M Y') }}
                                        </small>
                                        <span class="badge badge-light border text-xs text-muted shadow-none">
                                            <i class="fas fa-tag mr-1 opacity-50"></i> {{ $item->template->category->nama_surat ?? 'Template Khusus' }}
                                        </span>
                                    </div>
                                </td>

                                {{-- 3. TUJUAN & PERIHAL --}}
                                <td class="align-middle">
                                    <span class="d-block font-weight-bold text-dark mb-1">
                                        {{ Str::limit($item->tujuan, 35) }}
                                    </span>
                                    <small class="text-secondary" title="{{ $item->perihal }}">
                                        {{ Str::limit($item->perihal, 50) }}
                                    </small>
                                </td>

                                {{-- 4. PENANDATANGAN (AVATAR UI & ENUM FIX) --}}
                                <td class="align-middle">
                                    @php
                                        $userTte = $item->penandatangan;
                                    @endphp
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle bg-primary text-white font-weight-bold d-flex align-items-center justify-content-center mr-3 shadow-sm"
                                             style="width:38px; height:38px; border-radius:50%; font-size:15px; flex-shrink:0;">
                                            {{ $userTte ? strtoupper(substr($userTte->name, 0, 1)) : '?' }}
                                        </div>
                                        <div style="line-height: 1.3;">
                                            <span class="d-block text-sm font-weight-bold text-dark">
                                                {{ $userTte->name ?? 'Belum dipilih' }}
                                            </span>
                                            <small class="text-muted text-xs text-uppercase font-weight-bold">
                                                {{ str_replace('_', ' ', $userTte->role instanceof \App\Enums\UserRole ? $userTte->role->value : ($userTte->role ?? '-')) }}
                                            </small>
                                        </div>
                                    </div>
                                </td>

                                {{-- 5. STATUS --}}
                                <td class="align-middle text-center">
                                    @if($item->status === 'draft')
                                        <span class="badge badge-warning px-3 py-2 rounded-pill shadow-sm text-dark font-weight-bold">
                                            <i class="fas fa-pen-nib mr-1"></i> Draf
                                        </span>
                                    @elseif($item->status === 'signed')
                                        <span class="badge badge-success px-3 py-2 rounded-pill shadow-sm font-weight-bold">
                                            <i class="fas fa-check-double mr-1"></i> TTE Selesai
                                        </span>
                                    @elseif($item->status === 'rejected')
                                        <span class="badge badge-danger px-3 py-2 rounded-pill shadow-sm font-weight-bold">
                                            <i class="fas fa-times mr-1"></i> Ditolak
                                        </span>
                                    @else
                                        <span class="badge badge-secondary px-3 py-2 rounded-pill shadow-sm font-weight-bold">
                                            {{ ucfirst($item->status) }}
                                        </span>
                                    @endif
                                </td>

                                {{-- 6. AKSI --}}
                                <td class="align-middle text-right pr-4">
                                    <div class="btn-group shadow-sm" style="border-radius: 8px;">
                                        
                                        {{-- Tombol Download/Preview PDF --}}
                                        {{-- Pastikan nama route ini (preview) sesuai dengan yang ada di routes/web.php Anda, atau sesuaikan menjadi previewPdf jika itu nama routenya --}}
                                        <a href="{{ route('eoffice.surat.preview', $item->id) }}"
                                           target="_blank"
                                           class="btn btn-sm btn-white border"
                                           data-toggle="tooltip" title="Lihat Dokumen">
                                            <i class="fas fa-file-pdf text-danger" style="font-size: 1.1rem;"></i>
                                        </a>

                                        {{-- Dropdown Menu --}}
                                        <button type="button"
                                                class="btn btn-sm btn-white border dropdown-toggle dropdown-toggle-split"
                                                data-toggle="dropdown" aria-expanded="false">
                                        </button>

                                        <div class="dropdown-menu dropdown-menu-right shadow border-0 py-2" style="border-radius: 12px; min-width: 200px;">
                                            
                                            {{-- Logika Tombol TTE: Hanya Muncul Jika User = Penandatangan & Status Belum TTE --}}
                                            @if($item->status !== 'signed' && Auth::id() == $item->penandatangan_id)
                                                <form action="{{ route('eoffice.surat.sign', $item->id) }}" method="POST" class="form-sign">
                                                    @csrf
                                                    <button type="button" class="dropdown-item text-success font-weight-bold btn-sign py-2">
                                                        <i class="fas fa-qrcode mr-2 text-center" style="width:20px"></i> Bubuhkan TTE
                                                    </button>
                                                </form>
                                                <div class="dropdown-divider my-1"></div>
                                            @endif

                                            {{-- Logika Edit/Hapus: Hanya jika Draft/Rejected --}}
                                            @if(in_array($item->status, ['draft', 'rejected']))
                                                <a class="dropdown-item py-2" href="{{ route('eoffice.surat.edit', $item->id) }}">
                                                    <i class="fas fa-edit text-warning mr-2 text-center" style="width:20px"></i> Edit Dokumen
                                                </a>
                                                
                                                <form action="{{ route('eoffice.surat.destroy', $item->id) }}" method="POST" class="form-delete">
                                                    @csrf @method('DELETE')
                                                    <button type="button" class="dropdown-item text-danger btn-delete py-2">
                                                        <i class="fas fa-trash-alt mr-2 text-center" style="width:20px"></i> Hapus Draf
                                                    </button>
                                                </form>
                                            @else
                                                {{-- Jika sudah TTE, tampilkan informasi terkunci --}}
                                                <div class="dropdown-item disabled text-muted py-2 bg-light">
                                                    <i class="fas fa-lock mr-2 text-center" style="width:20px"></i> Arsip Terkunci
                                                </div>
                                            @endif

                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="py-5">
                                        <div class="d-inline-flex align-items-center justify-content-center bg-light rounded-circle mb-3" style="width: 80px; height: 80px;">
                                            <i class="fas fa-folder-open text-muted fa-2x"></i>
                                        </div>
                                        <h5 class="text-dark font-weight-bold">Arsip Kosong</h5>
                                        <p class="text-muted small mb-4">Belum ada surat keluar yang dibuat atau draf yang tersimpan.</p>
                                        <a href="{{ route('eoffice.surat.create') }}" class="btn btn-primary rounded-pill px-4 shadow-sm font-weight-bold">
                                            <i class="fas fa-plus mr-2"></i> Buat Surat Pertama
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{-- Pagination Links Laravel --}}
            @if($surat->hasPages())
                <div class="d-flex justify-content-between align-items-center px-4 py-3 bg-light border-top">
                    <span class="text-muted small">
                        Menampilkan {{ $surat->firstItem() }} hingga {{ $surat->lastItem() }} dari total {{ $surat->total() }} surat
                    </span>
                    <div>
                        {{ $surat->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>
@endsection

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
    /* Tipografi & Spasi */
    .table th { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.8px; font-weight: 700; }
    .table td { vertical-align: middle; }
    
    /* Tombol & Dropdown */
    .btn-white { background-color: #fff; color: #495057; }
    .btn-white:hover { background-color: #f8f9fa; }
    .dropdown-menu .dropdown-item { transition: all 0.2s; }
    .dropdown-menu .dropdown-item:hover:not(.disabled) { background-color: #f4f6f9; transform: translateX(3px); }
    .transition-hover { transition: all 0.3s ease; }
    .transition-hover:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,123,255,0.3) !important; }

    /* Custom Pagination AdminLTE/Bootstrap */
    .pagination { margin-bottom: 0; }
    .page-item.active .page-link { background-color: #007bff; border-color: #007bff; box-shadow: 0 2px 5px rgba(0,123,255,0.3); }
    .page-link { border-radius: 5px; margin: 0 3px; border: none; color: #495057; background: transparent; }
    .page-link:hover { background: #e9ecef; }
</style>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function () {
    // 1. Inisialisasi Tooltip
    $('[data-toggle="tooltip"]').tooltip();

    // 2. Notifikasi SweetAlert2
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: "{{ session('success') }}",
            timer: 3500,
            showConfirmButton: false,
            toast: true,
            position: 'top-end',
            customClass: { popup: 'rounded-lg shadow-sm' }
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Peringatan!',
            text: "{{ session('error') }}",
            customClass: { popup: 'rounded-lg shadow-sm' }
        });
    @endif

    // 3. Konfirmasi Hapus Data
    $(document).on('click', '.btn-delete', function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        Swal.fire({
            title: 'Hapus Draf Surat?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e3342f',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-trash-alt mr-1"></i> Ya, Hapus',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            customClass: { popup: 'rounded-lg' }
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // 4. Konfirmasi Tanda Tangan Elektronik (TTE) - FULL AJAX
    $(document).on('click', '.btn-sign', function(e) {
        e.preventDefault(); 
        var form = $(this).closest('form');
        var url = form.attr('action');
        var token = form.find('input[name="_token"]').val(); 

        Swal.fire({
            title: 'Bubuhkan TTE?',
            html: "Dokumen akan <b>disahkan secara digital</b> dan diarsipkan permanen.",
            icon: 'info',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-qrcode mr-1"></i> Ya, Sahkan',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            showLoaderOnConfirm: true, 
            preConfirm: () => {
                return $.ajax({
                    url: url,
                    type: 'POST',
                    data: { _token: token }
                }).catch(error => {
                    Swal.showValidationMessage(
                        `Terjadi kesalahan sistem: ${error.responseJSON?.message || 'Server lambat'}`
                    );
                });
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
            if (result.isConfirmed && result.value.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'TTE Berhasil!',
                    text: result.value.message,
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload(); 
                });
            } 
            else if (result.isConfirmed && !result.value.success) {
                Swal.fire('Gagal', result.value.message, 'error');
            }
        });
    });

});
</script>
@endsection