@extends('user::layouts.master')
@section('breadcrumb_title', 'Content')

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

@section('content')

    <div class="card">

        <div class="filter-area flex flex-col lg:flex-row gap-3 mb-3 lg:justify-between">
            <h2 class="text-2xl font-semibold">Content Management</h2>
            <div class="flex gap-3 flex-wrap mb-3">
                <div>
                    <select class="form-select" id="content-type-filter">
                        <option value="">All Content Types</option>
                        @foreach ($contentTypes as $type)
                            <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <select class="form-select" id="status-filter">
                        <option value="">All Statuses</option>
                        <option value="published">Published</option>
                        <option value="draft">Draft</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="archived">Archived</option>
                        <option value="trash">Trash</option>
                    </select>
                </div>
                <div>
                    <select class="form-select" id="language-filter">
                        <option value="">All Languages</option>
                        @foreach ($languages as $language)
                            <option value="{{ $language->code }}">{{ $language->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button class="btn btn-secondary" id="reset-filters">Reset Filters</button>
                </div>
                <div>
                    <a href="{{ route('author.content.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus mr-2"></i> Add New Content
                    </a>
                </div>
            </div>
        </div>

        <div class="overflow-x-auto">
            <div class="inline-block min-w-full align-middle">
                <div class="overflow-hidden">
                    <table class="min-w-full" id="content-table">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" id="select-all">
                                </th>
                                <th>Title</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Language</th>
                                <th>Author</th>
                                <th>Taxonomies</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <button id="bulk-action-btn" class="px-3 py-2 bg-gray-600 text-white font-medium rounded-lg hover:bg-gray-700 transition duration-200 hidden">Bulk Actions</button>
        </div>
    </div>

    <!-- Bulk Actions Modal -->
    <div class="fixed inset-0 z-50 hidden overflow-y-auto bg-black bg-opacity-50" id="bulkActionsModal">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-auto">
                <!-- Modal Header -->
                <div class="flex items-center justify-between p-6 pb-4">
                    <div></div>
                    <button type="button" class="text-gray-400 hover:text-gray-600 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100" data-bs-dismiss="modal">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <!-- Modal Content -->
                <div class="px-6 pb-6">
                    <!-- Icon -->
                    <div class="flex justify-center mb-6">
                        <div class="w-20 h-20 bg-blue-50 rounded-2xl flex items-center justify-center">
                            <svg class="w-10 h-10 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>

                    <!-- Title -->
                    <h2 class="text-2xl font-semibold text-gray-900 text-center mb-2">Bulk Actions</h2>

                    <!-- Description -->
                    <p class="text-gray-600 text-center mb-8">Select an action to apply to the selected items.</p>

                    <!-- Form -->
                    <form id="bulk-actions-form">
                        @csrf
                        <div class="mb-8">
                            <label class="block text-sm font-medium text-gray-700 mb-3">Select Action</label>
                            <div class="relative">
                                <select class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none bg-white" name="action" required>
                                    <option value="">Choose action...</option>
                                    <option value="publish">Publish</option>
                                    <option value="unpublish">Unpublish</option>
                                    <option value="trash">Move to Trash</option>
                                    <option value="delete">Delete Permanently</option>
                                </select>
                                <div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
                                    <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="ids" id="selected-ids">
                    </form>

                    <!-- Action Buttons -->
                    <div class="flex gap-3">
                        <button type="button" class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition-colors" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="flex-1 px-6 py-3 bg-red-500 text-white rounded-xl font-medium hover:bg-red-600 transition-colors" id="execute-bulk-action">Execute</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Load jQuery -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

    <!-- Load DataTables JS -->
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        (function($) {
            "use strict"

            $(document).ready(function() {
                let selectedIds = [];

                // Initialize DataTable
                const table = $('#content-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: '{{ route('author.content.index') }}',
                        data: function(d) {
                            d.content_type = $('#content-type-filter').val();
                            d.status = $('#status-filter').val();
                            d.language = $('#language-filter').val();
                        }
                    },
                    columns: [{
                            data: 'id',
                            name: 'id',
                            orderable: false,
                            searchable: false,
                            render: function(data) {
                                return '<input type="checkbox" class="item-checkbox" value="' +
                                    data + '">';
                            }
                        },
                        {
                            data: 'title',
                            name: 'title'
                        },
                        {
                            data: 'content_type',
                            name: 'content_type'
                        },
                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'language.name',
                            name: 'language.name'
                        },
                        {
                            data: 'author.name',
                            name: 'author.name'
                        },
                        {
                            data: 'taxonomies',
                            name: 'taxonomies',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'created_at',
                            name: 'created_at'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ],
                    order: [
                        [7, 'desc']
                    ],
                    drawCallback: function() {
                        // Re-check any previously selected checkboxes
                        $('.item-checkbox').each(function() {
                            if (selectedIds.includes($(this).val())) {
                                $(this).prop('checked', true);
                            }
                        });

                        // Update the "Select All" checkbox
                        updateSelectAllCheckbox();
                    }
                });

                // Filter functionality
                $('#content-type-filter, #status-filter, #language-filter').change(function() {
                    table.draw();
                });

                $('#reset-filters').click(function() {
                    $('#content-type-filter, #status-filter, #language-filter').val('');
                    table.search('').columns().search('').draw();
                    table.draw();
                });

                // "Select All" checkbox functionality
                $('#select-all').change(function() {
                    const isChecked = $(this).prop('checked');
                    $('.item-checkbox').prop('checked', isChecked);

                    if (isChecked) {
                        $('.item-checkbox').each(function() {
                            const id = $(this).val();
                            if (!selectedIds.includes(id)) {
                                selectedIds.push(id);
                            }
                        });
                    } else {
                        $('.item-checkbox').each(function() {
                            const id = $(this).val();
                            selectedIds = selectedIds.filter(item => item !== id);
                        });
                    }

                    updateBulkActionButton();
                });

                // Individual checkboxes functionality
                $(document).on('change', '.item-checkbox', function() {
                    const id = $(this).val();

                    if ($(this).prop('checked')) {
                        if (!selectedIds.includes(id)) {
                            selectedIds.push(id);
                        }
                    } else {
                        selectedIds = selectedIds.filter(item => item !== id);
                    }

                    updateSelectAllCheckbox();
                    updateBulkActionButton();
                });

                // Update "Select All" checkbox state
                function updateSelectAllCheckbox() {
                    const checkboxes = $('.item-checkbox');
                    const checkedCheckboxes = $('.item-checkbox:checked');

                    $('#select-all').prop('checked',
                        checkboxes.length > 0 && checkboxes.length === checkedCheckboxes.length
                    );
                }

                // Update Bulk Action button state
                function updateBulkActionButton() {
                    if(selectedIds.length > 0){
                        $('#bulk-action-btn').removeClass('hidden');
                    } else {
                        $('#bulk-action-btn').addClass('hidden');
                    }
                }

                // Bulk Actions button click
                $('#bulk-action-btn').click(function() {
                    $('#selected-ids').val(selectedIds.join(','));
                    $('#bulkActionsModal').removeClass('hidden');
                });

                // Execute bulk action
                $('#execute-bulk-action').click(function() {
                    if (!$('#bulk-actions-form select[name="action"]').val()) {
                        alert('Please select an action');
                        return;
                    }

                    $.ajax({
                        url: '{{ route('author.content.bulk-action') }}',
                        type: 'POST',
                        data: $('#bulk-actions-form').serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#bulkActionsModal').addClass('hidden');
                                selectedIds = [];
                                updateBulkActionButton();
                                table.draw();
                                toastr.success(response.message);
                            }
                        }
                    });
                });

                // Close modal functionality
                $(document).on('click', '[data-bs-dismiss="modal"]', function() {
                    $('#bulkActionsModal').addClass('hidden');
                });

                // Close modal when clicking outside
                $(document).on('click', function(e) {
                    if ($(e.target).is('#bulkActionsModal')) {
                        $('#bulkActionsModal').addClass('hidden');
                    }
                });
            });
        })(jQuery);
    </script>
@endpush