@extends('template.layouts.template-base')
@section('title', 'Blog - Category')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content { background-color: #F0F4F8 !important; padding: 80px 10px; }
        span.required-star { color: red !important; font-weight: bold; }
    </style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="javascript:void(0);">Blog / <span class="breadcrumb-link">Category</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class="action-buttons d-none" id="bulkActions">
                        <button type="button" class="btn-delete-category" data-bs-toggle="modal" data-bs-target=".remove-blog-list-screen">
                            Delete List <i class='bx bxs-trash fs-5'></i>
                        </button>
                    </div>

                    <a href="{{ route('backend.blog-category.export') }}" class="btn-export-category">
                        Export
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </a>

                    <a class="btn-add-category" data-bs-toggle="offcanvas" data-bs-target="#addCategoryOffcanvas" id="openAddOffcanvas" href="javascript:void(0);">
                        Add Category<i class="ri-add-fill fs-5"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec customer-page">
        <div class="content-wrapper blog-category">
            <div class="filter-section">
                <span class="badge-total-cus">Total Categories - {{ str_pad($totalCategories, 2, '0', STR_PAD_LEFT) }}</span>
                <span class="badge-active-cus">Active - {{ str_pad($activeCategories, 2, '0', STR_PAD_LEFT) }}</span>
                <span class="badge-inacive-cus">Inactive - {{ str_pad($inactiveCategories, 2, '0', STR_PAD_LEFT) }}</span>

                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="statusFilter" class="dropdown-btn">
                            <option value="">Status</option>
                            <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>

                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput" value="{{ request('search') }}">
                    <i class="bx bx-search"></i>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    <form id="bulkDeleteForm" method="POST" action="{{ route('backend.blog-category.bulk-delete') }}">
                        @csrf
                        <table id="categoriesTable" class="table align-middle mb-0 orders-table-container">
                            <thead class="custom-table-header">
                                <tr>
                                    <th scope="col"><input type="checkbox" id="selectAll"></th>
                                    <th scope="col">Category Name</th>
                                    <th scope="col">Slug</th>
                                    <th scope="col">Description</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody id="categoryList"></tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== ADD OFFCANVAS ===== --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Add Blog Category</h5>
        </div>
        <div class="offcanvas-body">
            <form id="addCategoryForm" method="POST" action="{{ route('backend.blog-category.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Category Name English <span class="required-star">*</span></label>
                        <input type="text" class="form-control" name="category_name_en" id="add_category_name_en" placeholder="Enter category name english">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Name Tamil</label>
                        <input type="text" class="form-control" name="category_name_tamil" id="add_category_name_tamil" placeholder="Enter category name tamil">
                    </div>

                    <div class="col-md-12 my-4">
                        <label class="form-label">Slug Name <span class="required-star">*</span></label>
                        <div class="slug-wrapper">
                            <div class="slug-prefix">annapurana.com/category/</div>
                            <input type="text" class="slug-input" name="slug" id="add_slug" placeholder="Slug Name" readonly>
                        </div>
                    </div>

                    <div class="col-md-6 my-3">
                        <label class="form-label">Category Status <span class="required-star">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusActive" value="1" checked>
                                <label class="form-check-label" for="addStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusInactive" value="0">
                                <label class="form-check-label" for="addStatusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description English</label>
                    <textarea class="form-control description-textarea" name="description_en" id="add_description_en" placeholder="Type Here" maxlength="1000"></textarea>
                    <div class="char-count" id="add_charCount_en">0/1000</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Description Tamil</label>
                    <textarea class="form-control description-textarea" name="description_tamil" id="add_description_tamil" placeholder="Type Here" maxlength="1000"></textarea>
                    <div class="char-count" id="add_charCount_tamil">0/1000</div>
                </div>

                <div class="d-flex justify-content-end gap-4 offcan-btn">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn">Save</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ===== EDIT OFFCANVAS ===== --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="editCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Edit Blog Category</h5>
        </div>
        <div class="offcanvas-body">
            <form id="editCategoryForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <input type="hidden" id="edit_id">

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Category Name English <span class="required-star">*</span></label>
                        <input type="text" class="form-control" name="category_name_en" id="edit_category_name_en" placeholder="Enter category name english">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Category Name Tamil</label>
                        <input type="text" class="form-control" name="category_name_tamil" id="edit_category_name_tamil" placeholder="Enter category name tamil">
                    </div>

                    <div class="col-md-12 my-4">
                        <label class="form-label">Slug Name <span class="required-star">*</span></label>
                        <div class="slug-wrapper">
                            <div class="slug-prefix">annapurna.com/category/</div>
                            <input type="text" class="slug-input" name="slug" id="edit_slug" placeholder="Slug Name" readonly>
                        </div>
                    </div>

                    <div class="col-md-6 my-3">
                        <label class="form-label">Category Status <span class="required-star">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="editStatusActive" value="1">
                                <label class="form-check-label" for="editStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="editStatusInactive" value="0">
                                <label class="form-check-label" for="editStatusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description English</label>
                    <textarea class="form-control description-textarea" name="description_en" id="edit_description_en" placeholder="Type Here" maxlength="1000"></textarea>
                    <div class="char-count" id="edit_charCount_en">0/1000</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Description Tamil</label>
                    <textarea class="form-control description-textarea" name="description_tamil" id="edit_description_tamil" placeholder="Type Here" maxlength="1000"></textarea>
                    <div class="char-count" id="edit_charCount_tamil">0/1000</div>
                </div>

                <div class="d-flex justify-content-end gap-4 offcan-btn">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn">Update</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ===== VIEW OFFCANVAS ===== --}}
    <div class="offcanvas offcanvas-end" tabindex="-1" id="viewCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">View Blog Category</h5>
        </div>
        <div class="offcanvas-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Category Name English</label>
                    <input type="text" class="form-control bg-light" id="view_category_name_en" readonly>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Category Name Tamil</label>
                    <input type="text" class="form-control bg-light" id="view_category_name_tamil" readonly>
                </div>

                <div class="col-md-12 my-4">
                    <label class="form-label">Slug Name</label>
                    <div class="slug-wrapper">
                        <div class="slug-prefix">yourblog.com/category/</div>
                        <input type="text" class="slug-input bg-light" id="view_slug" readonly>
                    </div>
                </div>

                <div class="col-md-6 my-3">
                    <label class="form-label">Category Status</label>
                    <input type="text" class="form-control bg-light" id="view_status" readonly>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Description English</label>
                <textarea class="form-control description-textarea bg-light" id="view_description_en" readonly></textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">Description Tamil</label>
                <textarea class="form-control description-textarea bg-light" id="view_description_tamil" readonly></textarea>
            </div>
        </div>
    </div>

    {{-- ===== DELETE SINGLE MODAL ===== --}}
    <div class="modal fade remove-blog-cate-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box"><i class="bx bxs-trash"></i></div>
                    <h5>Delete Blog Category?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <p>Are you sure you want to delete this Category? This category will be permanently removed from the category list. This action cannot be undone.</p>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <form id="deleteForm" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn delete-btn">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== BULK DELETE MODAL ===== --}}
    <div class="modal fade remove-blog-list-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box"><i class="bx bxs-trash"></i></div>
                    <h5>Delete Categories List?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <p>Are you sure you want to delete these categories? They will be permanently removed. This action cannot be undone.</p>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <button type="button" class="btn delete-btn" onclick="submitBulkDelete()">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {

    var CHECK_NAME_URL = "{{ route('backend.blog-category.check-name') }}";
    var categoryTable = $('#categoriesTable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        searching: false,
        responsive: true,
        pageLength: 10,
        ajax: {
            url: "{{ route('backend.blog-category.index') }}",
            data: function (d) {
                d.search = $('#searchInput').val();
                d.status = $('#statusFilter').val();
            }
        },
        columns: [
            { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
            { data: 'name', name: 'category_name_en' },
            { data: 'slug_name', name: 'slug' },
            { data: 'description', name: 'description_en' },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        drawCallback: function () {
            $('#selectAll').prop('checked', false);
            toggleBulkActions();
        }
    });

    /* ── SELECT ALL + BULK TOGGLE ── */
    function toggleBulkActions() {
        var anyChecked = $('.category-checkbox:checked').length > 0;
        $('#bulkActions').toggleClass('d-none', !anyChecked);
    }

    $('#selectAll').on('change', function () {
        $('#categoriesTable .category-checkbox').prop('checked', this.checked);
        toggleBulkActions();
    });

    $(document).on('change', '.category-checkbox', function () {
        $('#selectAll').prop('checked',
            $('.category-checkbox').length === $('.category-checkbox:checked').length
        );
        toggleBulkActions();
    });

    /* ── SEARCH + STATUS FILTER ── */
    var searchTimer;
    $('#searchInput').on('input', function () {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(function () {
            categoryTable.ajax.reload();
        }, 400);
    });

    $('#statusFilter').on('change', function () {
        categoryTable.ajax.reload();
    });

    /* ── CHAR COUNTERS ── */
    $('#add_description_en').on('input', function () {
        $('#add_charCount_en').text(this.value.length + '/1000');
    });
    $('#add_description_tamil').on('input', function () {
        $('#add_charCount_tamil').text(this.value.length + '/1000');
    });
    $('#edit_description_en').on('input', function () {
        $('#edit_charCount_en').text(this.value.length + '/1000');
    });
    $('#edit_description_tamil').on('input', function () {
        $('#edit_charCount_tamil').text(this.value.length + '/1000');
    });

    /* ── SLUG GENERATOR HELPER ── */
    function generateSlug(value) {
        return value.toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .trim()
            .replace(/\s+/g, '-');
    }

    /* ── AUTO SLUG (ADD form) ── */
    var addSlugManual = false;
    $('#add_category_name_en').on('input', function () {
        if (!addSlugManual) {
            $('#add_slug').val(generateSlug($(this).val()));
        }
    });
    $('#add_slug').on('input', function () {
        addSlugManual = !!this.value;
    });

    /* ── AUTO SLUG (EDIT form) ── */
    var editSlugManual = false;
    $('#edit_category_name_en').on('input', function () {
        if (!editSlugManual) {
            $('#edit_slug').val(generateSlug($(this).val()));
        }
    });
    $('#edit_slug').on('input', function () {
        editSlugManual = !!this.value;
    });

    /* ── RESET ADD FORM when offcanvas opens ── */
    $('#addCategoryOffcanvas').on('show.bs.offcanvas', function () {
        $('#addCategoryForm')[0].reset();
        $('#add_charCount_en').text('0/1000');
        $('#add_charCount_tamil').text('0/1000');
        addSlugManual = false;
        // Clear AJAX cache so fresh check runs next time
        $('#add_category_name_en').removeData('uniqueResult').removeData('uniqueLastVal');
        $('#addCategoryForm .error').remove();
        $('#addCategoryForm input, #addCategoryForm textarea').removeClass('error is-invalid');
    });

    /* ── CUSTOM VALIDATOR: unique category name (sync AJAX) ── */
    $.validator.addMethod('uniqueCategoryName', function (value, element, params) {
        if (!value) return true; // let "required" handle empty

        var $el      = $(element);
        var cached   = $el.data('uniqueResult');
        var lastVal  = $el.data('uniqueLastVal');

        // Return cached result if the value hasn't changed since last check
        if (lastVal === value.toLowerCase() && cached !== undefined) {
            return cached;
        }

        var excludeId = params.excludeId || null;
        var isUnique  = true;

        $.ajax({
            url:   CHECK_NAME_URL,
            data:  { name: value, exclude_id: excludeId },
            async: false, // synchronous so the validator gets the result immediately
            success: function (res) {
                isUnique = !res.exists;
            }
        });

        // Cache the result against the current value
        $el.data('uniqueLastVal', value.toLowerCase());
        $el.data('uniqueResult', isUnique);

        return isUnique;
    }, 'This category name already exists.');

    /* ── ADD FORM VALIDATION ── */
    $('#addCategoryForm').validate({
        ignore: [],
        rules: {
            category_name_en: {
                required:           true,
                minlength:          2,
                uniqueCategoryName: { excludeId: null }
            },
            status: { required: true }
        },
        messages: {
            category_name_en: {
                required:  'Category name (English) is required.',
                minlength: 'At least 2 characters required.'
            },
            status: { required: 'Please select a status.' }
        },
        errorClass:   'text-danger small mt-1',
        errorElement: 'div',
        highlight:   function (element) { $(element).addClass('is-invalid'); },
        unhighlight: function (element) { $(element).removeClass('is-invalid'); },
        submitHandler: function (form) { form.submit(); }
    });

    /* ── EDIT FORM VALIDATION ── */
    $('#editCategoryForm').validate({
        ignore: [],
        rules: {
            category_name_en: {
                required:           true,
                minlength:          2,
                uniqueCategoryName: { excludeId: null } // dynamically updated in openEditCategory
            },
            status: { required: true }
        },
        messages: {
            category_name_en: {
                required:  'Category name (English) is required.',
                minlength: 'At least 2 characters required.'
            },
            status: { required: 'Please select a status.' }
        },
        errorClass:   'text-danger small mt-1',
        errorElement: 'div',
        highlight:   function (element) { $(element).addClass('is-invalid'); },
        unhighlight: function (element) { $(element).removeClass('is-invalid'); },
        submitHandler: function (form) { form.submit(); }
    });

    /* ── OPEN EDIT ── */
    window.openEditCategory = function (id) {
        $.get("{{ route('backend.blog-category.edit', ':id') }}".replace(':id', id), function (data) {

            // Reset flags
            editSlugManual = false;

            $('#edit_id').val(data.id);
            $('#edit_category_name_en').val(data.category_name_en);
            $('#edit_category_name_tamil').val(data.category_name_tamil);
            $('#edit_slug').val(data.slug);
            $('#edit_description_en').val(data.description_en);
            $('#edit_description_tamil').val(data.description_tamil);
            $('#edit_charCount_en').text((data.description_en   || '').length + '/1000');
            $('#edit_charCount_tamil').text((data.description_tamil || '').length + '/1000');

            if (data.status == 1) {
                $('#editStatusActive').prop('checked', true);
            } else {
                $('#editStatusInactive').prop('checked', true);
            }

            $('#editCategoryForm').attr(
                'action',
                "{{ route('backend.blog-category.update', ':id') }}".replace(':id', data.id)
            );

            // Update uniqueCategoryName rule to exclude this record from the check
            $('#edit_category_name_en').rules('remove', 'uniqueCategoryName');
            $('#edit_category_name_en').rules('add', {
                uniqueCategoryName: { excludeId: data.id },
                messages: { uniqueCategoryName: 'This category name already exists.' }
            });

            // Clear AJAX cache so the name is re-checked fresh for this record
            $('#edit_category_name_en').removeData('uniqueResult').removeData('uniqueLastVal');

            $('#editCategoryForm .error').remove();
            $('#editCategoryForm input, #editCategoryForm textarea').removeClass('error is-invalid');

            new bootstrap.Offcanvas('#editCategoryOffcanvas').show();
        });
    };

    /* ── OPEN VIEW ── */
    window.openViewCategory = function (id) {
        $.get("{{ route('backend.blog-category.edit', ':id') }}".replace(':id', id), function (data) {
            $('#view_category_name_en').val(data.category_name_en);
            $('#view_category_name_tamil').val(data.category_name_tamil);
            $('#view_slug').val(data.slug);
            $('#view_description_en').val(data.description_en);
            $('#view_description_tamil').val(data.description_tamil);
            $('#view_status').val(data.status == 1 ? 'Active' : 'Inactive');

            new bootstrap.Offcanvas('#viewCategoryOffcanvas').show();
        });
    };

    /* ── DELETE SINGLE ── */
    window.confirmDelete = function (id) {
        $('#deleteForm').attr(
            'action',
            "{{ route('backend.blog-category.delete', ':id') }}".replace(':id', id)
        );
        new bootstrap.Modal($('.remove-blog-cate-screen')[0]).show();
    };

    /* ── BULK DELETE ── */
    window.submitBulkDelete = function () {
        $('#bulkDeleteForm').submit();
    };

});
</script>
@endsection