@extends('admin.layouts.base')
@section('title', 'Product Categories')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">Product Category Management</h3>
            </div>
            <div class="card-toolbar">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_modal">
                    Add Product Category
                </button>
            </div>
        </div>

        <div class="card-body py-4">
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="product_categories_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th class="text-center min-w-50px">#</th>
                        <th class="min-w-200px">Name</th>
                        <th class="min-w-200px">Description</th>
                        <th class="text-center min-w-100px">Status</th>
                        <th class="text-center min-w-120px">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="add_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="addForm" action="{{ route('admin.product-categories.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h2>Add Product Category</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. Electronics">
                    </div>
                    <div class="mb-5">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="mb-5">
                        <div class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" checked />
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Product Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="edit_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <form id="editForm" method="POST">
                @csrf @method('PUT')
                <div class="modal-header">
                    <h2>Edit Product Category</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="mb-5">
                        <label class="form-label required">Name</label>
                        <input type="text" name="name" id="edit_name" class="form-control" required>
                    </div>
                    <div class="mb-5">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="edit_description" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="mb-5">
                        <div class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="edit_is_active"/>
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let table;
const addModal = new bootstrap.Modal(document.getElementById('add_modal'));
const editModal = new bootstrap.Modal(document.getElementById('edit_modal'));

$(document).ready(function () {
    table = $('#product_categories_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("admin.product-categories.data") }}',
        order: [[0, 'desc']],
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'name' },
            { data: 'description' },
            { data: 'status', className: 'text-center', orderable: false },
            { data: 'actions', className: 'text-center', orderable: false, searchable: false }
        ],
        language: {
            processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
            emptyTable: 'No product categories found',
            zeroRecords: 'No matching records found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100]
    });

    const clearFieldErrors = (form) => {
        form.find('.is-invalid').removeClass('is-invalid');
        form.find('.invalid-feedback').remove();
    };

    const showFieldErrors = (form, errors) => {
        Object.keys(errors).forEach(key => {
            const input = form.find(`[name="${key}"]`);
            input.addClass('is-invalid');
            let feedback = input.next('.invalid-feedback');
            if (feedback.length === 0) {
                feedback = $('<div class="invalid-feedback"></div>');
                input.after(feedback);
            }
            feedback.text(errors[key][0]);
        });
    };

    const reloadTable = () => table.ajax.reload(null, false);

    const successAlert = (msg) => {
        toastr.success(msg);
        reloadTable();
    };

    const errorAlert = (msg) => toastr.error(msg);

    // Add Form
    $('#addForm').on('submit', function (e) {
        e.preventDefault();
        clearFieldErrors($(this));
        const $btn = $(this).find('button[type="submit"]').prop('disabled', true);

        $.post(this.action, $(this).serialize())
            .done(res => {
                addModal.hide();

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: res.message,
                    timer: 1200,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            })

            .fail(xhr => {
                if (xhr.status === 422) {
                    showFieldErrors($(this), xhr.responseJSON.errors);
                } else {
                    errorAlert('Something went wrong.');
                }
            })
            .always(() => $btn.prop('disabled', false));
    });

    // Edit Button
    $(document).on('click', '.edit-btn', function () {
        const btn = $(this);
        $('#edit_name').val(btn.data('name'));
        $('#edit_description').val(btn.data('description'));
        $('#edit_is_active').prop('checked', btn.data('active') === 'true');

        $('#editForm').attr('action', 
            '{{ route("admin.product-categories.update", ":id") }}'.replace(':id', btn.data('id'))
        );
        editModal.show();
    });

    // Edit Form
    $('#editForm').on('submit', function (e) {
        e.preventDefault();
        clearFieldErrors($(this));
        const $btn = $(this).find('button[type="submit"]').prop('disabled', true);

        $.ajax({
            url: this.action,
            method: 'POST',
            data: $(this).serialize() + '&_method=PUT'
        })
        .done(res => {
            editModal.hide();
            successAlert(res.message);
        })
        .fail(xhr => {
            if (xhr.status === 422) {
                showFieldErrors($(this), xhr.responseJSON.errors);
            } else {
                errorAlert('Update failed.');
            }
        })
        .always(() => $btn.prop('disabled', false));
    });

    // Delete
    $(document).on('click', '.delete-btn', function () {
        const id = $(this).data('id');
        const url = '{{ route("admin.product-categories.destroy", ":id") }}'.replace(':id', id);

        Swal.fire({
            title: 'Delete Product Category?',
            text: 'This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Delete!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: { _token: '{{ csrf_token() }}', _method: 'DELETE' }
                })
                .done(() => successAlert('Product Category deleted successfully!'))
                .fail(() => errorAlert('Cannot delete. It may be in use.'));
            }
        });
    });

    // Toggle Status
    $(document).on('change', '.toggle-status', function () {
        const $cb = $(this);
        const url = $cb.data('url');
        const wasChecked = $cb.is(':checked');

        $.post(url, { _token: '{{ csrf_token() }}' })
            .done(() => {
                toastr.success('Status updated successfully!');
            })
            .fail(() => {
                $cb.prop('checked', !wasChecked);
                toastr.error('Failed to update status');
            });
    });
});
</script>
@endpush