{{-- resources/views/admin/alokasi-waktu/kategori.blade.php --}}
@extends('admin.layouts.app')
@section('title', 'Menu Kategori')
@section('content')
<div class="container-fluid py-4">
    <div class="mb-4">
        <h4 class="mb-1 fw-bold">Manajemen Alokasi Waktu</h4>
        <p class="text-muted mb-0" style="font-size: 14px;">Pilih jenjang pendidikan di bawah ini untuk mengelola daftar durasi jam pelajarannya.</p>
    </div>

    @include('admin.alokasi-waktu.layout-menu')

    <div class="card shadow-sm border-0">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0">Master Data Kategori Waktu</h5>
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal"><i class="bi bi-plus"></i> Tambah Kategori</button>
        </div>
        <div class="card-body p-0">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr><th class="text-center" width="10%">NO</th><th>NAMA KATEGORI</th><th width="15%" class="text-center">AKSI</th></tr>
                </thead>
                <tbody>
                    @forelse($kategoris as $item)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="fw-medium">{{ $item->nama_kategori }}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ $item->id }}"><i class="bi bi-pencil"></i></button>
                            <form action="{{ route('admin.kategori-waktu.destroy', $item->id) }}" method="POST" id="form-delete-{{ $item->id }}" class="d-inline">
                                @csrf @method('DELETE')
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete({{ $item->id }}, 'Kategori {{ $item->nama_kategori }}')"><i class="bi bi-trash"></i></button>
                            </form>
                        </td>
                    </tr>
                    
                    <div class="modal fade" id="editModal{{ $item->id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <form action="{{ route('admin.kategori-waktu.update', $item->id) }}" method="POST">
                                @csrf @method('PUT')
                                <div class="modal-content">
                                    <div class="modal-header"><h5 class="modal-title">Edit Kategori</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                                    <div class="modal-body">
                                        <label class="form-label">Nama Kategori</label>
                                        <input type="text" name="nama_kategori" class="form-control" value="{{ $item->nama_kategori }}" required>
                                    </div>
                                    <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan Perubahan</button></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center py-4 text-muted">Belum ada data Kategori Waktu.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <form action="{{ route('admin.kategori-waktu.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Tambah Kategori</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <label class="form-label">Nama Kategori</label>
                    <input type="text" name="nama_kategori" class="form-control" required>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Simpan</button></div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, nama) {
        Swal.fire({
            title: 'Hapus ' + nama + '?',
            text: "Data yang dihapus tidak dapat dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-delete-' + id).submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ 
                icon: 'success', 
                title: 'Berhasil!', 
                text: '{!! session('success') !!}', 
                showConfirmButton: false, 
                timer: 2000 
            });
        @endif

        @if($errors->any())
            Swal.fire({ 
                icon: 'error', 
                title: 'Gagal Menyimpan!', 
                html: '<ul class="text-start mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>' 
            });
        @endif
    });
</script>
@endpush
@endsection