@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        @include('admin.layouts.notifications')

        <!-- Page Heading & Search Area -->
        <div class="row mb-3">
            <div class="col-md-9">
                <h4 class="c-grey-900">{{ $title }} <a class="btn btn-primary" href="{{ route('ch-admin.ticket.category.create') }}"><i class="ti-plus"></i></a></h4>
            </div>

            <div class="col-md-3">
                <form method="GET" action="{{ route('ch-admin.ticket.category.index') }}">
                    <div class="input-group">
                        <input type="text" name="search" class="form-control" placeholder="Search…" aria-label="Search" value="{{ request('search') }}">
                        <button class="btn btn-info" type="submit"><i class="ti ti-search"></i></button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Main Content -->
        <div class="row">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">

                <!-- Bulk Delete Button -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <button class="btn btn-danger" id="delete-bulk-btn" type="button" disabled><i class="ti-trash"></i> Delete</button>
                    </div>
                </div>

                <!-- Tickets Table -->
                <div class="row">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all" class="form-check-input"></th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Ticket Count</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if($ticketCategories->isEmpty())
                            <tr><td colspan="10" class="text-center">No records found</td></tr>
                        @else
                            @foreach($ticketCategories as $ticketCategory)
                                <tr>
                                    <td><input type="checkbox" class="form-check-input select-category" value="{{ $ticketCategory->id }}"></td>
                                    <td>{{ $ticketCategory->id }}</td>
                                    <td>{{ $ticketCategory->name }}</td>
                                    <td>{{ $ticketCategory->description }}</td>
                                    <td>{{ $ticketCategory->tickets->count() }}</td>
                                    <td class="d-flex flex-row">
                                        <a href="{{ route('ch-admin.ticket.category.edit', $ticketCategory->id) }}" class="btn btn-sm btn-primary me-1"><i class="ti-pencil"></i></a>
                                        <button type="button" class="btn btn-sm btn-danger delete-category" data-category-id="{{ $ticketCategory->id }}"><i class="ti-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>

                <!-- Pagination Link -->
                @if($ticketCategories->hasPages())
                    <div class="mt-4">
                        {{ $ticketCategories->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Delete Category Modal -->
    <div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteCategoryModalLabel">Delete Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <p>Do you also want to delete the associated tickets?</p>

                    <div class="form-group" id="category-dropdown" style="display: none;">
                        <p>Choose a category to move the associated tickets.</p>
                        <label for="category-select">Select Category</label>
                        <select name="category-select" id="category-select" class="form-control" required>
                            <option value="" disabled selected>Select a Category</option>
                            @foreach($allTicketCategories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-danger mt-3" id="delete-move">Delete &amp; Move</button>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="delete-with-tickets">Yes</button>
                    <button type="button" class="btn btn-danger" id="delete-without-tickets">No</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{url('assets/custom/js/axios.min.js')}}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const selectAll = document.getElementById('select-all');
            const categoryChecks = document.querySelectorAll('.select-category');
            const bulkDeleteBtn = document.getElementById('delete-bulk-btn');
            const singleDeleteBtns = document.querySelectorAll('.delete-category');
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteCategoryModal'));
            const deleteWithTicketsBtn = document.getElementById('delete-with-tickets');
            const deleteWithoutTicketsBtn = document.getElementById('delete-without-tickets');
            const categoryDropdown = document.getElementById('category-dropdown');
            const deleteMoveBtn = document.getElementById('delete-move');
            const categorySelect = document.getElementById('category-select');

            let categoryIds = [];
            let singleDelete = null;

            function toggleBulkDeleteBtn() {
                bulkDeleteBtn.disabled = !Array.from(categoryChecks).some(checkbox => checkbox.checked);
            }

            function updateCategoryDropdown() {
                Array.from(categorySelect.options).forEach(option => {
                    option.style.display = categoryIds.includes(option.value) ? 'none' : 'block';
                });
            }

            function getSelectedCategories() {
                return Array.from(document.querySelectorAll('.select-category:checked')).map(checkbox => checkbox.value);
            }

            function handleDeleteRequest(deleteArticles, movingCategoryId = null) {

                httpClient.delete('{{ route("ch-admin.ticket.category.destroy") }}', {
                    data: {
                        categoryIds: categoryIds,
                        deleteArticles: deleteArticles,
                        singleDelete: singleDelete,
                        movingCategoryId: movingCategoryId,
                    }
                })
                    .then((response) => {
                        if (response.data.success) {
                            window.location.href = '{{ route("ch-admin.ticket.category.index") }}';
                        } else {
                            alert('Failed to delete categories and tickets.');
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                        alert('An error occurred. Please try again.');
                    });
            }

            selectAll.addEventListener('click', function () {
                const isChecked = this.checked;
                categoryChecks.forEach(checkbox => checkbox.checked = isChecked);
                toggleBulkDeleteBtn();
            });

            categoryChecks.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    selectAll.checked = Array.from(categoryChecks).every(checkbox => checkbox.checked);
                    toggleBulkDeleteBtn();
                });
            });

            singleDeleteBtns.forEach(button => {
                button.addEventListener('click', function () {
                    singleDelete = true;
                    categoryIds = [button.getAttribute('data-category-id')];
                    updateCategoryDropdown();
                    deleteModal.show();
                });
            });

            bulkDeleteBtn.addEventListener('click', function () {
                singleDelete = false;
                categoryIds = getSelectedCategories();
                updateCategoryDropdown();
                deleteModal.show();
            });

            deleteWithTicketsBtn.addEventListener('click', function () {
                handleDeleteRequest(true);
            });

            deleteWithoutTicketsBtn.addEventListener('click', function () {
                categoryDropdown.style.display = 'block';
                deleteWithTicketsBtn.style.display = 'none';
                deleteWithoutTicketsBtn.style.display = 'none';
            });

            deleteMoveBtn.addEventListener('click', function () {
                handleDeleteRequest(false, categorySelect.value);
            });

            categorySelect.addEventListener('change', function () {
                deleteMoveBtn.disabled = !categorySelect.value;
            });

            // Ensure deleteMoveBtn is initially disabled
            deleteMoveBtn.disabled = true;

            toggleBulkDeleteBtn();
        });
    </script>
@endpush