@extends('adminlte::page')

@section('title', 'Kategori Surat | E-Office')

@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <div class="d-flex align-items-center mb-1">
                <div class="bg-primary-gradient p-2 rounded-lg mr-3 shadow-sm" style="background: linear-gradient(135deg, #007bff, #0056b3);">
                    <i class="fas fa-tags text-white fa-lg"></i>
                </div>
                <h1 class="text-dark font-weight-bold mb-0" style="font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; letter-spacing: -0.5px;">
                    Kategori Surat (Klasifikasi)
                </h1>
            </div>
            <p class="text-muted small mb-0 ml-md-5 font-weight-500">
                Manajemen master data kode dan klasifikasi untuk pengarsipan surat E-Office.
            </p>
        </div>
        <div class="mt-3 mt-md-0 d-flex align-items-center">
            <a href="{{ route('eoffice.kategori.create') }}" class="btn btn-primary rounded-pill px-4 shadow-sm hover-lift font-weight-bold" style="background: linear-gradient(135deg, #007bff, #0056b3); border: none;">
                <i class="fas fa-plus-circle mr-2"></i> Tambah Kategori
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="table-kategori" class="table table-hover align-middle mb-0 w-100">
                    <thead class="bg-light">
                        <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                            <th width="5%" class="pl-4 py-3 text-center">No</th>
                            <th width="20%" class="py-3">Kode Kategori</th>
                            <th width="35%" class="py-3">Nama Kategori</th>
                            <th width="25%" class="py-3">Keterangan</th>
                            <th width="15%" class="py-3 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($kategoris as $item)
                            <tr>
                                <td class="text-center align-middle font-weight-bold text-muted pl-4">{{ $loop->iteration }}</td>
                                <td class="align-middle">
                                    <span class="badge bg-light-primary text-primary px-3 py-2 rounded-pill font-weight-bold text-sm border-0" style="background-color: #e1f0ff;">
                                        <i class="fas fa-qrcode mr-1 opacity-50"></i> {{ $item->kode_kategori }}
                                    </span>
                                </td>
                                <td class="align-middle">
                                    <span class="text-dark font-weight-bold d-block text-sm">{{ $item->nama_kategori }}</span>
                                </td>
                                <td class="align-middle text-muted text-sm">
                                    {{ $item->keterangan ?: '-' }}
                                </td>
                                <td class="text-center align-middle">
                                    <div class="d-flex justify-content-center">
                                        <a href="{{ route('eoffice.kategori.edit', $item->id) }}" class="btn btn-sm btn-light text-primary mr-2 hover-lift rounded-circle" style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('eoffice.kategori.destroy', $item->id) }}" method="POST" id="form-delete-{{ $item->id }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-sm btn-light text-danger hover-lift rounded-circle btn-delete" data-id="{{ $item->id }}" data-name="{{ $item->nama_kategori }}" style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;" title="Hapus">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="fas fa-folder-open fa-3x mb-3 opacity-25"></i><br>
                                    <span class="font-weight-bold d-block mb-1">Belum Ada Kategori Surat</span>
                                    <small>Silakan klik "Tambah Kategori" untuk membuat klasifikasi surat baru.</small>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #F8FAFC; }
    
    .hover-lift { transition: all 0.2s ease; }
    .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    
    /* Table Fixes */
    table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; border-collapse: collapse !important;}
    .dataTables_wrapper .dataTables_filter { padding: 15px 20px 5px; float: right; }
    .dataTables_wrapper .dataTables_info { padding: 15px 20px; font-size: 0.85rem; color: #6c757d; }
    .dataTables_wrapper .dataTables_paginate { padding: 10px 20px 15px; }
    .table-hover tbody tr:hover { background-color: #F8FAFC; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Init DataTable
        $('#table-kategori').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Indonesian.json"
            },
            "responsive": true,
            "ordering": true,
            "columnDefs": [
                { "orderable": false, "targets": 4 } // Matikan sorting untuk kolom Aksi
            ],
            "dom": '<"top"f>rt<"bottom"lip><"clear">', // Desain pencarian yang bersih
        });

        // Tampilkan Alert Sukses dari Controller
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: '{{ session('success') }}',
                showConfirmButton: false,
                timer: 3000,
                toast: true,
                position: 'top-end'
            });
        @endif

        // Tampilkan Alert Error dari Controller
        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: '{{ session('error') }}',
                confirmButtonColor: '#007bff'
            });
        @endif

        // Konfirmasi Hapus
        $('.btn-delete').on('click', function() {
            let id = $(this).data('id');
            let name = $(this).data('name');
            
            Swal.fire({
                title: 'Hapus Kategori?',
                html: "Kategori <b>" + name + "</b> akan dihapus secara permanen.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                customClass: {
                    confirmButton: 'rounded-pill px-4',
                    cancelButton: 'rounded-pill px-4'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#form-delete-' + id).submit();
                }
            });
        });
    });
</script>
@stop