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

@section('content')
<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>
                @forelse($productCategories as $index => $category)
                <tr>
                    <td class="text-center">{{ $index + 1 }}</td>
                    <td>{{ $category->name }}</td>
                    <td>{{ $category->description ?? '-' }}</td>
                    <td class="text-center">
                        <div class="form-check form-switch form-check-custom form-check-solid d-inline-block">
                            <input class="form-check-input toggle-status" type="checkbox" 
                                data-url="{{ route('admin.product-categories.toggle-status', $category->id) }}"
                                {{ $category->is_active ? 'checked' : '' }} />
                        </div>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-icon btn-active-light-primary w-30px h-30px me-3 edit-btn"
                            data-id="{{ $category->id }}"
                            data-name="{{ $category->name }}"
                            data-description="{{ $category->description }}"
                            data-active="{{ $category->is_active }}">
                            <i class="fas fa-edit fs-3"></i>
                        </button>
                        <button type="button" class="btn btn-icon btn-active-light-danger w-30px h-30px delete-btn"
                            data-id="{{ $category->id }}">
                            <i class="fas fa-trash fs-3"></i>
                        </button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center text-muted">No product categories found</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </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>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </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 id="add_is_active"/>
                            <label class="form-check-label" for="add_is_active">
                                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>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </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" for="edit_is_active">
                                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>
const addModalEl = document.getElementById('add_modal');
const editModalEl = document.getElementById('edit_modal');
const addModal = new bootstrap.Modal(addModalEl);
const editModal = new bootstrap.Modal(editModalEl);

$(document).ready(function () {
    // Reset forms when modals close
    addModalEl.addEventListener('hidden.bs.modal', () => {
        $('#addForm')[0].reset();
        clearFieldErrors($('#addForm'));
    });

    editModalEl.addEventListener('hidden.bs.modal', () => {
        $('#editForm')[0].reset();
        clearFieldErrors($('#editForm'));
    });

    // Helper functions
    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 successAlert = (message = 'Operation completed successfully!') => {
        Swal.fire({
            icon: 'success',
            title: 'Success!',
            html: message,
            timer: 2000,
            timerProgressBar: true,
            showConfirmButton: false
        }).then(() => {
            location.reload();
        });
    };

    const errorAlert = (message) => {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            html: message
        });
    };

    // ADD FORM SUBMIT
    $('#addForm').on('submit', function (e) {
        e.preventDefault();
        clearFieldErrors($(this));

        const $form = $(this);
        const $btn = $form.find('button[type="submit"]').prop('disabled', true);

        $.post($form.attr('action'), $form.serialize())
            .done(res => {
                addModal.hide();
                successAlert(res.message || 'Product Category created successfully!');
            })
            .fail(xhr => {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    showFieldErrors($form, errors);
                    errorAlert(Object.values(errors).flat().join('<br>'));
                } else {
                    errorAlert('Something went wrong. Please try again.');
                }
            })
            .always(() => $btn.prop('disabled', false));
    });

    // EDIT BUTTON CLICK
    $(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'));

        // Set form action dynamically
        const updateUrl = '{{ route("admin.product-categories.update", ":id") }}'.replace(':id', btn.data('id'));
        $('#editForm').attr('action', updateUrl);

        editModal.show();
    });

    // EDIT FORM SUBMIT
    $('#editForm').on('submit', function (e) {
        e.preventDefault();
        clearFieldErrors($(this));

        const $form = $(this);
        const $btn = $form.find('button[type="submit"]').prop('disabled', true);

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize() + '&_method=PUT'
        })
        .done(res => {
            editModal.hide();
            successAlert(res.message || 'Product Category updated successfully!');
        })
        .fail(xhr => {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON.errors;
                showFieldErrors($form, errors);
                errorAlert(Object.values(errors).flat().join('<br>'));
            } else {
                errorAlert('Update failed: ' + (xhr.responseJSON?.message || 'Please try again.'));
            }
        })
        .always(() => $btn.prop('disabled', false));
    });

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

        Swal.fire({
            title: 'Delete Product Category?',
            text: 'This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Delete!',
            cancelButtonText: 'Cancel',
            buttonsStyling: true,
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                const originalText = $btn.html();
                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status"></span>');

                $.ajax({
                    url: deleteUrl,
                    method: 'POST',
                    data: { 
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    }
                })
                .done(() => {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Product Category has been deleted successfully.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                })
                .fail((xhr) => {
                    $btn.prop('disabled', false).html(originalText);
                    Swal.fire({
                        title: 'Error!',
                        text: 'Cannot delete product category. It may be in use.',
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                });
            }
        });
    });

    // TOGGLE STATUS
    $('.toggle-status').on('change', function () {
        const $cb = $(this);
        const url = $cb.data('url');
        const was = $cb.is(':checked');

        $.post(url, { _token: '{{ csrf_token() }}' })
            .done((res) => {
                Swal.fire({ 
                    icon: 'success', 
                    title: 'Status Updated!', 
                    timer: 1500, 
                    showConfirmButton: false 
                });
            })
            .fail(() => {
                $cb.prop('checked', !was);
                errorAlert('Failed to update status');
            });
    });
});
</script>
@endpush