<!DOCTYPE html>
<html lang="en">
@include('includes.head')
<body id="kt_body" class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed aside-enabled aside-fixed">
    <div class="d-flex flex-column flex-root">
        <div class="page d-flex flex-row flex-column-fluid">
            @include('includes.side-nav')
            <div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
                @include('includes.header')
                <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                    <!-- Toolbar -->
                    <div class="toolbar" id="kt_toolbar">
                        <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                            <div class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                                <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">
                                    Painting Category Management
                                    <span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
                                    <small class="text-muted fs-7 fw-bold my-1 ms-1">Categories</small>
                                </h1>
                            </div>
                            <div class="d-flex align-items-center py-1">
                                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#categoryModal" onclick="resetModalForm()">
                                    Add Category
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Post content -->
                    <div class="post d-flex flex-column-fluid" id="kt_post">
                        <div id="kt_content_container" class="container-xxl">
                            <div class="card">
                                @include('includes.messages')
                                <!-- Filter form -->
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <form method="GET" action="{{ route('PaintingCategory.list') }}" class="d-flex align-items-center">
                                            <div class="d-flex align-items-center position-relative me-5">
                                                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                                                    </svg>
                                                </span>
                                                <input type="text" name="search" value="{{ request('search') }}" class="form-control form-control-solid w-250px ps-15" placeholder="Search by name..." />
                                            </div>
                                            <button type="submit" class="btn btn-primary me-2">Filter</button>
                                            <a href="{{ route('PaintingCategory.list') }}" class="btn btn-secondary">Reset</a>
                                        </form>
                                    </div>
                                </div>

                                <!-- Table -->
                                <div class="card-body pt-0">
                                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                                        <thead>
                                            <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase">
                                                <th>ID</th>
                                                <th>Name (English)</th>
                                                <th>Slug</th>
                                                <th>Home Show</th>
                                                <th>Status</th>
                                                <th class="text-end">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody class="fw-bold text-gray-600">
                                            @foreach ($categories as $cat)
                                            <tr id="cat-row-{{ $cat->id }}">
                                                <td>{{ $cat->id }}</td>
                                                <td>{{ $cat->name_en }}</td>
                                                <td>{{ $cat->slug }}</td>
                                                <td>
                                                    @if($cat->is_show_in_home)
                                                        <span class="badge badge-success">Yes</span>
                                                    @else
                                                        <span class="badge badge-secondary">No</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <span class="badge {{ $cat->status ? 'badge-success' : 'badge-danger' }}">
                                                        {{ $cat->status ? 'Active' : 'Inactive' }}
                                                    </span>
                                                </td>
                                                <td class="text-end">
                                                    <button class="btn btn-sm btn-primary edit-btn" data-id="{{ $cat->id }}">
                                                        <i class="fas fa-edit"></i> Edit
                                                    </button>
                                                    <button class="btn btn-sm btn-danger delete-btn" data-id="{{ $cat->id }}">
                                                        <i class="fas fa-trash"></i> Delete
                                                    </button>
                                                </td>
                                             </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{ $categories->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @include('includes.footer')
            </div>
        </div>
    </div>
    @include('includes.scripts')

    <!-- Modal for Add/Edit -->
    <div class="modal fade" id="categoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="categoryForm">
                        @csrf
                        <input type="hidden" name="id" id="catId">
                        <div class="mb-3">
                            <label class="form-label required">Category Name (English)</label>
                            <input type="text" name="name_en" id="name_en" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Slug (auto-generated)</label>
                            <input type="text" id="slug_preview" class="form-control" readonly disabled>
                        </div>
                        <div class="mb-3">
                            <div class="form-check form-switch form-check-custom form-check-solid">
                                <input type="checkbox" name="is_show_in_home" id="is_show_in_home" class="form-check-input" value="1">
                                <label class="form-check-label" for="is_show_in_home">
                                    Show on Home Page
                                </label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select name="status" id="status" class="form-select">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function resetModalForm() {
            $('#categoryForm')[0].reset();
            $('#catId').val('');
            $('#slug_preview').val('');
            $('#is_show_in_home').prop('checked', false);
            $('#modalTitle').text('Add Category');
        }

        $(document).ready(function() {
            // Auto-generate slug preview
            $('#name_en').on('keyup', function() {
                let slug = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
                $('#slug_preview').val(slug);
            });

            // Save (create or update)
            $('#saveBtn').click(function() {
                let id = $('#catId').val();
                let url = id ? "{{ route('PaintingCategory.update', '') }}/" + id : "{{ route('PaintingCategory.store') }}";
                let formData = {
                    name_en: $('#name_en').val(),
                    is_show_in_home: $('#is_show_in_home').is(':checked') ? 1 : 0,
                    status: $('#status').val(),
                    _token: '{{ csrf_token() }}'
                };
                if (id) formData._method = 'PUT';

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    success: function(res) {
                        if (res.success) {
                            $('#categoryModal').modal('hide');
                            location.reload();
                        } else {
                            alert('Error saving category');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        if (errors) alert(Object.values(errors).flat().join('\n'));
                        else alert('Something went wrong');
                    }
                });
            });

            // Edit button click
            $('.edit-btn').click(function() {
                let id = $(this).data('id');
                $.get("{{ route('PaintingCategory.edit', '') }}/" + id, function(res) {
                    if (res.success) {
                        let c = res.category;
                        $('#catId').val(c.id);
                        $('#name_en').val(c.name_en);
                        $('#status').val(c.status);
                        $('#slug_preview').val(c.slug);
                        $('#is_show_in_home').prop('checked', c.is_show_in_home == 1);
                        $('#modalTitle').text('Edit Category');
                        $('#categoryModal').modal('show');
                    } else {
                        alert('Category not found');
                    }
                });
            });

            // Delete button click
            $('.delete-btn').click(function() {
                if (confirm('Are you sure you want to delete this category?')) {
                    let id = $(this).data('id');
                    $.ajax({
                        url: "{{ route('PaintingCategory.delete', '') }}/" + id,
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                $('#cat-row-' + id).remove();
                                if ($('tbody tr').length === 0) location.reload();
                            } else {
                                alert('Delete failed');
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
