@extends('layouts.app')

@section('subtitle', 'Master Surat')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Master Surat" 
        subtitle="Kelola template surat resmi yang digunakan sistem untuk menghasilkan surat secara otomatis."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Master Surat' => route('master-surat.index')
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('master-surat.create') }}" class="btn btn-primary font-weight-bold shadow-sm">
                <i class="fas fa-plus mr-1"></i> Tambah Jenis Surat
            </a>
        </x-slot>
    </x-page-header>

    <!-- Tabel Master Surat (x-data-table) -->
    <x-data-table 
        id="masterSuratTable" 
        :export-columns="[1, 2, 3, 4]" 
        order="[[1, 'asc']]" 
        title="Daftar Template Surat" 
        placeholder="Cari nama atau kode surat..."
        :show-export="false"
    >
        <thead>
            <tr>
                <th style="width: 50px;">No</th>
                <th style="width: 120px;">Kode Surat</th>
                <th>Nama Surat</th>
                <th style="width: 120px;">Status</th>
                <th style="width: 200px;">Terakhir Diubah</th>
                <th style="width: 180px; text-align: center;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach($templates as $index => $template)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td><strong>{{ $template->kode_surat }}</strong></td>
                    <td>{{ $template->nama_surat }}</td>
                    <td>
                        @if($template->status === 'aktif')
                             <span class="badge-pill-soft status-disetujui">Aktif</span>
                        @else
                             <span class="badge-pill-soft status-ditolak">Nonaktif</span>
                        @endif
                    </td>
                    <td>{{ $template->updated_at->translatedFormat('d M Y, H:i') }} WIB</td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center align-items-center" style="gap: 6px;">
                            <a href="{{ route('master-surat.show', $template->id) }}" class="btn btn-action-view btn-sm" title="Lihat Detail"
                                style="width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px !important;">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('master-surat.edit', $template->id) }}" class="btn btn-action-edit btn-sm" title="Edit"
                                style="width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px !important;">
                                <i class="fas fa-edit"></i>
                            </a>
                            @php
                                $isUsed = \App\Models\PengajuanSurat::where('jenis_surat_id', $template->id)->exists();
                            @endphp
                            <form action="{{ route('master-surat.destroy', $template->id) }}" method="POST" class="delete-form d-inline" style="margin: 0;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-action-delete btn-sm btn-delete-surat" title="Hapus"
                                    style="width: 32px; height: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px !important; border: none; background-color: #FEE2E2 !important; color: #DC2626 !important;"
                                    data-nama="{{ $template->nama_surat }}"
                                    data-used="{{ $isUsed ? 'true' : 'false' }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </x-data-table>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {
            // SweetAlert2 Form Delete Confirmation
            $('.btn-delete-surat').on('click', function(e) {
                e.preventDefault();
                let button = $(this);
                let form = button.closest('form');
                let nama = button.data('nama');
                let used = button.data('used');

                if (used === 'true' || used === true) {
                    Swal.fire({
                        title: 'Tidak Dapat Dihapus',
                        text: 'Jenis surat "' + nama + '" tidak dapat dihapus karena sudah digunakan pada pengajuan surat.',
                        icon: 'error',
                        confirmButtonColor: '#64748b',
                        confirmButtonText: 'Tutup'
                    });
                    return;
                }

                Swal.fire({
                    title: 'Hapus Jenis Surat?',
                    text: 'Apakah Anda yakin ingin menghapus jenis surat "' + nama + '"? Tindakan ini tidak dapat dibatalkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endpush