@extends('layouts.admin')

@section('title', __('blog.blog_posts'))

@section('content')
<div class="container-fluid" dir="{{ $text_direction }}">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('blog.blog_posts') }}</h1>
            <p class="mb-0 text-muted">{{ __('blog.manage_blog_posts') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.blog.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> {{ __('blog.new_post') }}
            </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">{{ __('blog.filters') }}</h6>
        </div>
        <div class="card-body">
            <form id="filterForm" class="row">
                <div class="col-md-3">
                    <label for="status">{{ __('blog.status') }}</label>
                    <select name="status" id="status" class="form-control">
                        <option value="">{{ __('blog.all_status') }}</option>
                        <option value="published">{{ __('blog.published') }}</option>
                        <option value="draft">{{ __('blog.draft') }}</option>
                        <option value="archived">{{ __('blog.archived') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="category_id">{{ __('blog.category') }}</label>
                    <select name="category_id" id="category_id" class="form-control">
                        <option value="">{{ __('blog.all_categories') }}</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="author_id">{{ __('blog.author') }}</label>
                    <select name="author_id" id="author_id" class="form-control">
                        <option value="">{{ __('blog.all_authors') }}</option>
                        @foreach($authors as $author)
                        <option value="{{ $author->id }}">{{ $author->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="is_featured">{{ __('blog.featured') }}</label>
                    <select name="is_featured" id="is_featured" class="form-control">
                        <option value="">{{ __('blog.all') }}</option>
                        <option value="1">{{ __('blog.featured_only') }}</option>
                        <option value="0">{{ __('blog.not_featured') }}</option>
                    </select>
                </div>
                <div class="col-md-6 mt-3">
                    <label for="date_from">{{ __('blog.date_from') }}</label>
                    <input type="date" name="date_from" id="date_from" class="form-control">
                </div>
                <div class="col-md-6 mt-3">
                    <label for="date_to">{{ __('blog.date_to') }}</label>
                    <input type="date" name="date_to" id="date_to" class="form-control">
                </div>
                <div class="col-md-12 mt-3">
                    <button type="button" id="applyFilters" class="btn btn-primary">
                        <i class="fas fa-filter"></i> {{ __('blog.apply_filters') }}
                    </button>
                    <button type="button" id="clearFilters" class="btn btn-secondary">
                        <i class="fas fa-times"></i> {{ __('blog.clear_filters') }}
                    </button>
                </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-md-6">
                    <span id="selectedCount">0</span> {{ __('blog.posts_selected') }}
                </div>
                <div class="col-md-6 text-right">
                    <button type="button" id="bulkPublish" class="btn btn-success btn-sm">
                        <i class="fas fa-check"></i> {{ __('blog.publish') }}
                    </button>
                    <button type="button" id="bulkDraft" class="btn btn-warning btn-sm">
                        <i class="fas fa-edit"></i> {{ __('blog.move_to_draft') }}
                    </button>
                    <button type="button" id="bulkArchive" class="btn btn-secondary btn-sm">
                        <i class="fas fa-archive"></i> {{ __('blog.archive') }}
                    </button>
                    <button type="button" id="bulkFeature" class="btn btn-info btn-sm">
                        <i class="fas fa-star"></i> {{ __('blog.feature') }}
                    </button>
                    <button type="button" id="bulkUnfeature" class="btn btn-outline-info btn-sm">
                        <i class="fas fa-star-half-alt"></i> {{ __('blog.unfeature') }}
                    </button>
                    <button type="button" id="bulkDelete" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash"></i> {{ __('blog.delete') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Posts Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.blog_posts') }}</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="postsTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th width="30">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>{{ __('general.title') }}</th>
                            <th>{{ __('blog.category') }}</th>
                            <th>{{ __('blog.author') }}</th>
                            <th>{{ __('general.active') }}</th>
                            <th>{{ __('blog.published') }}</th>
                            <th>{{ __('blog.views') }}</th>
                            <th>{{ __('general.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
    let table = $('#postsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.blog.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();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    return '<input type="checkbox" class="post-checkbox" value="' + row.id + '">';
                }
            },
            {
                data: 'title',
                render: function(data, type, row) {
                    let featuredIcon = row.is_featured ? ' <span class="text-warning">⭐</span>' : '';
                    return '<a href="{{ url("/' + app.locale + '/blog/") }}' + row.slug_en + '" target="_blank" class="font-weight-bold">' + data + '</a>' + featuredIcon;
                }
            },
            {
                data: 'category',
                render: function(data, type, row) {
                    return data ? data.name : '{{ __("blog.uncategorized") }}';
                }
            },
            {
                data: 'author',
                render: function(data, type, row) {
                    return data ? data.name : '{{ __("blog.unknown") }}';
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    let badgeClass = data === 'published' ? 'success' : (data === 'draft' ? 'warning' : 'secondary');
                    return '<span class="badge badge-' + badgeClass + '">' + '{{ __("blog.") }}' + data + '</span>';
                }
            },
            {
                data: 'published_at',
                render: function(data, type, row) {
                    return data ? new Date(data).toLocaleDateString() : '{{ __("blog.not_set") }}';
                }
            },
            {
                data: 'views_count',
                render: function(data, type, row) {
                    return data || 0;
                }
            },
            {
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        order: [[5, 'desc']],
        pageLength: 25,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/{{ app()->getLocale() }}.json'
        }
    });

    // Apply filters
    $('#applyFilters').on('click', function() {
        table.ajax.reload();
    });

    // Clear filters
    $('#clearFilters').on('click', function() {
        $('#filterForm')[0].reset();
        table.ajax.reload();
    });

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

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

    function updateBulkActions() {
        let checkedBoxes = $('.post-checkbox:checked');
        if (checkedBoxes.length > 0) {
            $('#bulkActions').show();
            $('#selectedCount').text(checkedBoxes.length);
        } else {
            $('#bulkActions').hide();
        }
    }

    // Bulk actions
    $('#bulkPublish').on('click', performBulkAction.bind(null, 'publish'));
    $('#bulkDraft').on('click', performBulkAction.bind(null, 'draft'));
    $('#bulkArchive').on('click', performBulkAction.bind(null, 'archive'));
    $('#bulkFeature').on('click', performBulkAction.bind(null, 'feature'));
    $('#bulkUnfeature').on('click', performBulkAction.bind(null, 'unfeature'));
    $('#bulkDelete').on('click', performBulkAction.bind(null, 'delete'));

    function performBulkAction(action) {
        let ids = $('.post-checkbox:checked').map(function() {
            return $(this).val();
        }).get();

        if (ids.length === 0) return;

        if (action === 'delete' && !confirm('{{ __('general.delete_confirm') }}')) {
            return;
        }

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

    // Delete single post with SweetAlert
    $(document).on('click', '.delete-post', function(e) {
        e.preventDefault();
        let deleteUrl = $(this).data('url');

        Swal.fire({
            title: '{{ __("blog.are_you_sure") }}',
            text: "{{ __('blog.this_action_cannot_be_undone') }}",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: '{{ __("blog.yes_delete_it") }}',
            cancelButtonText: '{{ __("blog.cancel") }}'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deleteUrl,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                '{{ __("blog.deleted") }}',
                                response.message,
                                'success'
                            );
                            table.ajax.reload();
                        } else {
                            Swal.fire(
                                '{{ __("blog.error") }}',
                                response.message,
                                'error'
                            );
                        }
                    },
                    error: function() {
                        Swal.fire(
                            '{{ __("blog.error") }}',
                            '{{ __("blog.an_error_occurred_while_deleting_the_post") }}',
                            'error'
                        );
                    }
                });
            }
        });
    });
});
</script>
@endpush