@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        <!-- 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.pages.create') }}"><i class="ti-plus"></i></a></h4>
            </div>
            <div class="col-md-3">
                <form method="GET" action="{{ route('ch-admin.pages.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>
                    <!-- Include current filter values as hidden inputs -->
                    <input type="hidden" name="is_published" value="{{ request('is_published') }}">
                </form>
            </div>
        </div>

        <div class="row">
            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                <!-- Filters Section -->
                <div class="row mb-3">
                    <form method="GET" action="{{ route('ch-admin.pages.index') }}" class="d-flex align-items-center gap-3 w-100">
                        <!-- Filter by Categories -->
                        <div class="flex-shrink-0">
                            <select name="is_published" class="form-control">
                                <option value="">All Pages</option>
                                <option value="1" {{ request('is_published') == '1' ? 'selected' : '' }}>Published</option>
                                <option value="2" {{ request('is_published') == '2' ? 'selected' : '' }}>Un-Published</option>
                            </select>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex-shrink-0">
                            <button type="submit" class="btn btn-info">Apply Filters</button>
                            @if(request('is_published') || request('search'))
                                <a href="{{ route('ch-admin.pages.index') }}" class="btn btn-secondary">Reset</a>
                            @endif
                            <button class="btn btn-danger" id="delete-bulk-btn" type="button"><i class="ti-trash"></i> Delete</button>
                        </div>
                        <input type="hidden" name="search" value="{{ request('search') }}">
                    </form>
                </div>

                <!-- Pages 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 class="w-50">Title</th>
                            <th>Published</th>
                            <th>Created</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($pages as $page)
                            <tr>
                                <td><input type="checkbox" class="form-check-input select-page" value="{{ $page->id }}"></td>
                                <th scope="row">{{ $page->id }}</th>
                                <td>{{ $page->title }}</td>
                                <td>
                                    @if ($page->is_published)
                                        <span class="badge bg-success">Yes</span>
                                    @else
                                        <span class="badge bg-danger">No</span>
                                    @endif
                                </td>
                                <td>{{ $page->created_at->diffForHumans() ?? $page->created_at }}</td>
                                <td class="d-flex flex-row">
                                    <a href="{{ route('ch-admin.pages.edit', $page->id) }}" class="btn btn-sm btn-primary me-1"><i class="ti-pencil"></i></a>
                                    <form action="{{ route('ch-admin.pages.destroy', $page->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this page?')">
                                            <i class="ti-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center">No records found.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>

                @if($pages->hasPages())
                    <div>
                        {{ $pages->links() }}
                    </div>
                @endif

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const selectAllCheckbox = document.getElementById('select-all');
        const pageCheckboxes = document.querySelectorAll('.select-page');
        const deleteBulkBtn = document.getElementById('delete-bulk-btn');

        selectAllCheckbox.addEventListener('click', function() {
            const isChecked = this.checked;
            pageCheckboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
            });
            toggleDeleteButton();
        });

        pageCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('click', function() {
                const allChecked = [...pageCheckboxes].every(checkbox => checkbox.checked);
                selectAllCheckbox.checked = allChecked;

                if (!this.checked) {
                    selectAllCheckbox.checked = false;
                }

                toggleDeleteButton();
            });
        });

        function toggleDeleteButton() {
            const isChecked = [...pageCheckboxes].some(checkbox => checkbox.checked);
            deleteBulkBtn.style.display = isChecked ? 'inline-block' : 'none';
        }

        function updateSelectAllCheckbox() {
            const allChecked = [...pageCheckboxes].every(checkbox => checkbox.checked);
            selectAllCheckbox.checked = allChecked;
        }

        function getSelectedPages() {
            const selectedPages = [];
            document.querySelectorAll('.select-page:checked').forEach(function (checkbox) {
                selectedPages.push(checkbox.value);
            });
            return selectedPages;
        }

        deleteBulkBtn.addEventListener('click', function () {
            const selectedPages = getSelectedPages();

            if (selectedPages.length === 0) {
                alert('Please select at least one page.');
                return;
            }

            if (!confirm('Are you sure you want to delete the selected pages?')) {
                return;
            }

            $.ajax({
                url: '{{ route("ch-admin.pages.bulk.destroy") }}',
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}',
                    page_ids: selectedPages,
                },
                success: function (response) {
                    if (response.success) {
                        window.location.href = '{{ route("ch-admin.pages.index") }}';
                    } else {
                        alert('Failed to delete pages.');
                    }
                },
                error: function (xhr) {
                    console.error(xhr.responseJSON);
                    alert('An error occurred. Please try again.');
                }
            });
        });

        toggleDeleteButton();
    </script>
@endpush