@extends('layouts.apex')

@section('title', 'Master Kategori')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Master Kategori</h1>
            <p class="page-header-subtitle">Kelola data kategori barang</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kategoriModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Tambah Kategori
        </button>
    </div>
</div>

<div class="page-body">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Daftar Kategori</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="kategoriTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nama Kategori</th>
                            <th>Keterangan</th>
                            <th>Jumlah Barang</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Kategori Modal -->
<div id="kategoriModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="kategoriForm" action="{{ route('master.kategori.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="kategoriMethod">
                <input type="hidden" name="kategori_id" id="kategori_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="kategoriModalTitle">Tambah Kategori Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Nama Kategori *</label>
                        <input type="text" name="nama" id="kategoriNama" class="form-control" placeholder="Contoh: Pakan, Obat, Peralatan" required maxlength="100">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="3" maxlength="500" placeholder="Keterangan kategori..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
let kategoriTable;

function editKategori(id) {
    $.ajax({
        url: '/master/kategori/' + id,
        method: 'GET',
        success: function(data) {
            $('#kategoriModalTitle').text('Edit Kategori');
            $('#kategoriMethod').val('PUT');
            $('#kategori_id').val(id);
            $('#kategoriForm').attr('action', '/master/kategori/' + id);
            $('#kategoriNama').val(data.nama);
            $('textarea[name="keterangan"]').val(data.keterangan || '');
            const modal = new bootstrap.Modal(document.getElementById('kategoriModal'));
            modal.show();
        },
        error: function() {
            Swal.fire({ icon: 'error', title: 'Gagal', text: 'Gagal mengambil data kategori!' });
        }
    });
}

function viewKategori(id) {
    $.ajax({
        url: '/master/kategori/' + id,
        method: 'GET',
        success: function(data) {
            Swal.fire({
                title: data.nama,
                html: '<div style="text-align: left;"><p><strong>Keterangan:</strong> ' + (data.keterangan || '-') + '</p><p><strong>Jumlah Barang:</strong> ' + data.barang_count + '</p></div>',
                icon: 'info',
                confirmButtonText: 'Tutup',
                confirmButtonColor: '#435ebe'
            });
        },
        error: function() {
            Swal.fire({ icon: 'error', title: 'Gagal', text: 'Gagal mengambil data kategori!' });
        }
    });
}

function deleteKategori(id) {
    Swal.fire({
        title: 'Hapus Kategori?',
        text: 'Apakah Anda yakin ingin menghapus kategori ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/master/kategori/' + id,
                method: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    $('#kategoriTable').DataTable().ajax.reload(null, false);
                    Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Kategori berhasil dihapus!', timer: 2000, showConfirmButton: false });
                },
                error: function(xhr) {
                    Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message || 'Gagal menghapus kategori!' });
                }
            });
        }
    });
}

function resetKategoriForm() {
    $('#kategoriForm')[0].reset();
    $('#kategoriModalTitle').text('Tambah Kategori Baru');
    $('#kategoriMethod').val('POST');
    $('#kategori_id').val('');
    $('#kategoriForm').attr('action', '{{ route("master.kategori.store") }}');
}

$(document).ready(function() {
    kategoriTable = $('#kategoriTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        responsive: true,
        dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex gap-2"B><"d-flex gap-2"lf>>rt<"d-flex justify-content-between align-items-center mt-3"<"info"i><"pagination"p>>',
        buttons: [
            {
                extend: 'copy',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> Copy',
                className: 'btn btn-sm'
            },
            {
                extend: 'csv',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> CSV',
                className: 'btn btn-sm'
            },
            {
                extend: 'excel',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> Excel',
                className: 'btn btn-sm'
            },
            {
                extend: 'pdf',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg> PDF',
                className: 'btn btn-sm'
            },
            {
                extend: 'print',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print',
                className: 'btn btn-sm'
            }
        ],
        ajax: {
            url: '{{ route("master.kategori.data") }}',
            type: 'GET',
            data: function(d) { d._token = '{{ csrf_token() }}'; }
        },
        columns: [
            { data: 'nama', name: 'nama' },
            { data: 'keterangan', name: 'keterangan' },
            { data: 'barang_count', name: 'id' },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' }
    });

    $('#kategoriForm').on('submit', function(e) {
        e.preventDefault();
        const method = $('#kategoriMethod').val();
        const url = $(this).attr('action');

        $.ajax({
            url: url,
            method: method === 'PUT' ? 'PUT' : 'POST',
            data: $(this).serialize(),
            success: function(response) {
                const modalEl = document.getElementById('kategoriModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();
                $('#kategoriTable').DataTable().ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: method === 'PUT' ? 'Kategori berhasil diperbarui!' : 'Kategori berhasil ditambahkan!', timer: 2000, showConfirmButton: false });
                resetKategoriForm();
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan!';
                Swal.fire({ icon: 'error', title: 'Gagal', text: errorMsg });
            }
        });
    });

    $('#kategoriModal').on('hidden.bs.modal', function() { resetKategoriForm(); });
});
</script>
@endpush
@endsection