@extends('layouts.admin')

@section('title', __('News Categories'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('News Categories') }}</h1>
            <p class="text-muted">{{ __('Manage news categories and organize your content') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.news.categories.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> {{ __('Add New Category') }}
            </a>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="card shadow mb-4" id="bulkActions" style="display: none;">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col">
                    <span id="selectedCount">0</span> {{ __('items selected') }}
                </div>
                <div class="col-auto">
                    <div class="btn-group">
                        <button class="btn btn-outline-danger btn-sm" onclick="bulkAction('delete')">
                            <i class="fas fa-trash"></i> {{ __('Delete') }}
                        </button>
                        <button class="btn btn-outline-success btn-sm" onclick="bulkAction('toggle_active')">
                            <i class="fas fa-toggle-on"></i> {{ __('Toggle Active') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
                <table id="categoriesTable" class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>{{ __('Name (EN)') }}</th>
                            <th>{{ __('Name (AR)') }}</th>
                            <th>{{ __('Color') }}</th>
                            <th>{{ __('News Count') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Sort Order') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Confirm Delete') }}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {{ __('Are you sure you want to delete this category? This action cannot be undone.') }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">{{ __('Delete') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
let categoriesTable;
let selectedItems = [];

$(document).ready(function() {
    initializeDataTable();
    setupEventListeners();
});

function initializeDataTable() {
    categoriesTable = $('#categoriesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.news.categories.index", ["locale" => app()->getLocale()]) }}',
            data: function(d) {
                // Add any additional filters here
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    return `<input type="checkbox" class="item-checkbox" value="${row.id}">`;
                }
            },
            { data: 'name_en' },
            { data: 'name_ar' },
            { data: 'color_display' },
            { data: 'news_count' },
            {
                data: 'is_active',
                render: function(data, type, row) {
                    return data ? '<span class="badge badge-success">{{ __("Active") }}</span>' : '<span class="badge badge-secondary">{{ __("Inactive") }}</span>';
                }
            },
            { data: 'sort_order' },
            {
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        order: [[6, 'asc']], // Default sort by sort_order
        pageLength: 25,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/{{ app()->getLocale() }}.json'
        }
    });
}

function setupEventListeners() {
    // Select all checkbox
    $('#selectAll').on('change', function() {
        $('.item-checkbox').prop('checked', $(this).prop('checked'));
        updateSelectedItems();
    });

    // Individual checkboxes
    $(document).on('change', '.item-checkbox', function() {
        updateSelectedItems();
    });

    // Delete confirmation
    $(document).on('click', '.delete-btn', function() {
        const id = $(this).data('id');
        $('#confirmDelete').data('id', id);
        $('#deleteModal').modal('show');
    });

    $('#confirmDelete').on('click', function() {
        const id = $(this).data('id');
        deleteCategory(id);
    });

    // Toggle active status
    $(document).on('click', '.toggle-active-btn', function() {
        const id = $(this).data('id');
        toggleActive(id);
    });
}

function updateSelectedItems() {
    selectedItems = [];
    $('.item-checkbox:checked').each(function() {
        selectedItems.push($(this).val());
    });

    if (selectedItems.length > 0) {
        $('#bulkActions').show();
        $('#selectedCount').text(selectedItems.length);
    } else {
        $('#bulkActions').hide();
    }
}

function bulkAction(action) {
    if (selectedItems.length === 0) {
        alert('{{ __("Please select items first") }}');
        return;
    }

    if (action === 'delete' && !confirm('{{ __("Are you sure you want to delete selected items?") }}')) {
        return;
    }

    $.ajax({
        url: '{{ route("admin.news.categories.bulk-action", ["locale" => app()->getLocale()]) }}',
        method: 'POST',
        data: {
            action: action,
            ids: selectedItems,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                categoriesTable.ajax.reload();
                selectedItems = [];
                $('#bulkActions').hide();
                alert(response.message);
            } else {
                alert(response.message || '{{ __("An error occurred") }}');
            }
        },
        error: function() {
            alert('{{ __("An error occurred") }}');
        }
    });
}

function deleteCategory(id) {
    $.ajax({
        url: '{{ route("admin.news.categories.destroy", ["locale" => app()->getLocale(), "category" => ":id"]) }}'.replace(':id', id),
        method: 'DELETE',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                categoriesTable.ajax.reload();
                $('#deleteModal').modal('hide');
                alert(response.message);
            } else {
                alert(response.message || '{{ __("An error occurred") }}');
            }
        },
        error: function() {
            alert('{{ __("An error occurred") }}');
        }
    });
}

function toggleActive(id) {
    $.ajax({
        url: '{{ route("admin.news.categories.toggle-active", ["locale" => app()->getLocale(), "category" => ":id"]) }}'.replace(':id', id),
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                categoriesTable.ajax.reload();
            }
        },
        error: function() {
            alert('{{ __("An error occurred") }}');
        }
    });
}
</script>
@endsection