@extends('layouts.admin')

@section('title', __('news.news_articles'))

@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.news_articles') }}</h1>
            <p class="text-muted">{{ __('news.manage_news_articles') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.news.dashboard', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary mr-2">
                <i class="fas fa-tachometer-alt"></i> {{ __('news.dashboard') }}
            </a>
            <a href="{{ route('admin.news.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> {{ __('news.add_new') }}
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('news.filters_search') }}</h6>
        </div>
        <div class="card-body">
            <form id="filterForm" class="row">
                <div class="col-md-3 mb-3">
                    <label for="status">{{ __('news.status') }}</label>
                    <select name="status" id="status" class="form-control">
                        <option value="">{{ __('news.all_status') }}</option>
                        <option value="published">{{ __('news.published') }}</option>
                        <option value="draft">{{ __('news.draft') }}</option>
                        <option value="archived">{{ __('news.archived') }}</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="category_id">{{ __('news.category') }}</label>
                    <select name="category_id" id="category_id" class="form-control">
                        <option value="">{{ __('news.all_categories') }}</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="author_id">{{ __('news.author') }}</label>
                    <select name="author_id" id="author_id" class="form-control">
                        <option value="">{{ __('news.all_authors') }}</option>
                        @foreach($authors as $author)
                            <option value="{{ $author->id }}">{{ $author->full_name ?? $author->username ?? __('news.unknown') }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="is_featured">{{ __('news.featured') }}</label>
                    <select name="is_featured" id="is_featured" class="form-control">
                        <option value="">{{ __('news.all') }}</option>
                        <option value="1">{{ __('news.featured_only') }}</option>
                        <option value="0">{{ __('news.not_featured') }}</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label for="date_from">{{ __('news.date_from') }}</label>
                    <input type="date" name="date_from" id="date_from" class="form-control">
                </div>
                <div class="col-md-3 mb-3">
                    <label for="date_to">{{ __('news.date_to') }}</label>
                    <input type="date" name="date_to" id="date_to" class="form-control">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="search">{{ __('news.search') }}</label>
                    <div class="input-group">
                        <input type="text" name="search" id="search" class="form-control" placeholder="{{ __('news.search_placeholder') }}">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" onclick="clearFilters()">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </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> {{ __('news.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> {{ __('news.delete') }}
                        </button>
                        <button class="btn btn-outline-success btn-sm" onclick="bulkAction('publish')">
                            <i class="fas fa-check"></i> {{ __('news.publish') }}
                        </button>
                        <button class="btn btn-outline-warning btn-sm" onclick="bulkAction('draft')">
                            <i class="fas fa-edit"></i> {{ __('news.move_to_draft') }}
                        </button>
                        <button class="btn btn-outline-info btn-sm" onclick="bulkAction('feature')">
                            <i class="fas fa-star"></i> {{ __('news.feature') }}
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" onclick="bulkAction('unfeature')">
                            <i class="fas fa-star-half-alt"></i> {{ __('news.unfeature') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card shadow">
        <div class="card-body">
            <div class="table-responsive">
                <table id="newsTable" class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>{{ __('news.featured') }}</th>
                            <th>{{ __('news.title') }}</th>
                            <th>{{ __('news.category') }}</th>
                            <th>{{ __('news.author') }}</th>
                            <th>{{ __('news.status') }}</th>
                            <th>{{ __('news.views') }}</th>
                            <th>{{ __('news.published_date') }}</th>
                            <th>{{ __('news.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">
                {{ __('news.confirm_delete') }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('news.cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">{{ __('news.delete') }}</button>
            </div>
        </div>
    </div>
</div>

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

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

function initializeDataTable() {
    newsTable = $('#newsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.news.list", ["locale" => app()->getLocale()]) }}',
            data: function(d) {
                d.status = $('#status').val();
                d.category_id = $('#category_id').val();
                d.author_id = $('#author_id').val();
                d.is_featured = $('#is_featured').val();
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
                d.search = $('#search').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    return `<input type="checkbox" class="item-checkbox" value="${row.id}">`;
                }
            },
            {
                data: 'featured_icon',
                orderable: false,
                className: 'text-center'
            },
            {
                data: 'title_en', // FIXED: Use actual database field name
                name: 'title_en', // FIXED: Add name for server-side processing
                render: function(data, type, row) {
                    // Display both English and Arabic titles
                    const titleEn = data || 'No Title';
                    const titleAr = row.title_ar ? `<br><small class="text-muted">${row.title_ar}</small>` : '';
                    return titleEn + titleAr;
                }
            },
            {
                data: 'category',
                name: 'category.name', // FIXED: Add name for server-side processing
                render: function(data, type, row) {
                    return row.category ? row.category.name : '{{ __("news.uncategorized") }}';
                }
            },
            {
                data: 'author',
                name: 'author.name', // FIXED: Add name for server-side processing
                render: function(data, type, row) {
                    return row.author ? (row.author.full_name || row.author.username || '{{ __("news.unknown") }}') : '{{ __("news.unknown") }}';
                }
            },
            {
                data: 'status',
                name: 'status', // FIXED: Add name for server-side processing
                render: function(data, type, row) {
                    const badges = {
                        'published': 'badge-success',
                        'draft': 'badge-warning',
                        'archived': 'badge-secondary'
                    };
                    const statusText = data ? data.charAt(0).toUpperCase() + data.slice(1) : '{{ __("news.draft") }}';
                    return `<span class="badge ${badges[data] || 'badge-secondary'}">${statusText}</span>`;
                }
            },
            {
                data: 'views_count',
                name: 'views_count' // FIXED: Add name for server-side processing
            },
            {
                data: 'published_at',
                name: 'published_at', // FIXED: Add name for server-side processing
                render: function(data, type, row) {
                    return data ? data : '{{ __("news.not_published") }}';
                }
            },
            {
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        order: [[7, 'desc']], // Default sort by published date
        pageLength: 25,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/{{ app()->getLocale() === "ar" ? "Arabic" : "English" }}.json'
        }
    });
}

function setupEventListeners() {
    // Filter change events
    $('#filterForm select, #filterForm input[type="date"]').on('change', function() {
        newsTable.ajax.reload();
    });

    // Search input
    let searchTimeout;
    $('#search').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            newsTable.ajax.reload();
        }, 500);
    });

    // 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');
        deleteNews(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 clearFilters() {
    $('#filterForm')[0].reset();
    newsTable.ajax.reload();
}

function bulkAction(action) {
    if (selectedItems.length === 0) {
        alert('{{ __("news.select_items_first") }}');
        return;
    }

    if (action === 'delete' && !confirm('{{ __("news.confirm_bulk_delete") }}')) {
        return;
    }

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

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

// Toggle featured/pinned
function toggleFeatured(id) {
    $.ajax({
        url: '{{ url(app()->getLocale() . "/admin/news") }}/' + id + '/toggle-featured',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                newsTable.ajax.reload();
            }
        }
    });
}

function togglePinned(id) {
    $.ajax({
        url: '{{ url(app()->getLocale() . "/admin/news") }}/' + id + '/toggle-pinned',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            if (response.success) {
                newsTable.ajax.reload();
            }
        }
    });
}
</script>
@endsection