@extends('root')
@section('title', 'Blog Posts')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Blog Posts',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Blog Posts'
    ])

    {{-- Summary Cards --}}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-primary text-primary" style="width:50px;height:50px;">
                            <i class="ti ti-article fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Total Posts</h6>
                            <h4 class="mb-0 fw-semibold" id="total-posts">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-success text-success" style="width:50px;height:50px;">
                            <i class="ti ti-check fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Published</h6>
                            <h4 class="mb-0 fw-semibold" id="published-posts">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-warning text-warning" style="width:50px;height:50px;">
                            <i class="ti ti-clock fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Scheduled</h6>
                            <h4 class="mb-0 fw-semibold" id="scheduled-posts">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-secondary">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-secondary text-secondary" style="width:50px;height:50px;">
                            <i class="ti ti-file fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted">Draft</h6>
                            <h4 class="mb-0 fw-semibold" id="draft-posts">0</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body">
        {{-- Toolbar --}}
        <div class="row mb-3">
            <div class="col-md-8">
                <div class="row g-2">
                    <div class="col-md-3">
                        <select class="form-select" id="filter-status">
                            <option value="">Semua Status</option>
                            @foreach($statuses as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filter-category">
                            <option value="">Semua Kategori</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="filter-search" placeholder="Cari judul...">
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-end">
                <div class="btn-group">
                    <a href="{{ route('admin.blog.categories.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-category me-1"></i> Categories
                    </a>
                    <a href="{{ route('admin.blog.tags.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-tags me-1"></i> Tags
                    </a>
                    <a href="{{ route('admin.blog.posts.create') }}" class="btn btn-primary">
                        <i class="ti ti-plus me-1"></i> New Post
                    </a>
                </div>
            </div>
        </div>

        {{-- Bulk Actions --}}
        <div class="row mb-3 d-none" id="bulk-actions">
            <div class="col-md-12">
                <div class="alert alert-info d-flex align-items-center justify-content-between mb-0 py-2">
                    <span><strong id="selected-count">0</strong> posts dipilih</span>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-success btn-bulk" data-action="publish">
                            <i class="ti ti-check me-1"></i> Publish
                        </button>
                        <button class="btn btn-warning btn-bulk" data-action="unpublish">
                            <i class="ti ti-x me-1"></i> Unpublish
                        </button>
                        <button class="btn btn-danger btn-bulk" data-action="delete">
                            <i class="ti ti-trash me-1"></i> Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- DataTable --}}
        <div class="table-responsive">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all">
                        </th>
                        <th>Title</th>
                        <th>Category</th>
                        <th>Status</th>
                        <th>Views</th>
                        <th>Published</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/blog-ajax.js') }}"></script>
<script>
$(document).ready(function() {
    var selectedIds = [];

    // Initialize DataTable
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.blog.posts.data') }}',
            data: function(d) {
                d.status = $('#filter-status').val();
                d.category_id = $('#filter-category').val();
                d.search = $('#filter-search').val();
            },
            dataSrc: function(res) {
                // Update summary
                if (res.data) {
                    var total = res.data.length;
                    var published = res.data.filter(p => p.status === 'published').length;
                    var scheduled = res.data.filter(p => p.status === 'scheduled').length;
                    var draft = res.data.filter(p => p.status === 'draft').length;
                    
                    $('#total-posts').text(total);
                    $('#published-posts').text(published);
                    $('#scheduled-posts').text(scheduled);
                    $('#draft-posts').text(draft);
                }
                return res.data;
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data) {
                    return '<input type="checkbox" class="form-check-input row-select" value="' + data.id + '">';
                }
            },
            { 
                data: 'title',
                render: function(data, type, row) {
                    var html = '<strong>' + data + '</strong>';
                    if (row.is_landing_page) {
                        html += ' <span class="badge bg-info">Landing</span>';
                    }
                    html += '<br><small class="text-muted">' + row.slug + '</small>';
                    return html;
                }
            },
            { 
                data: 'category',
                render: function(data) {
                    if (!data) return '<span class="text-muted">-</span>';
                    return '<span class="badge bg-primary">' + data.name + '</span>';
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    return '<span class="badge ' + row.status_badge_class + '">' + row.status_label + '</span>';
                }
            },
            { data: 'views_count' },
            { 
                data: 'published_at',
                render: function(data) {
                    return data || '<span class="text-muted">-</span>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function(data, type, row) {
                    var editUrl = '{{ route('admin.blog.posts.edit', ':id') }}'.replace(':id', row.id);
                    var deleteUrl = '{{ route('admin.blog.posts.destroy', ':id') }}'.replace(':id', row.id);
                    var previewUrl = row.url || '#';

                    var html = '<div class="btn-group btn-group-sm">';
                    if (row.url) {
                        html += '<a href="' + previewUrl + '" target="_blank" class="btn btn-info" title="View"><i class="ti ti-eye"></i></a>';
                    }
                    html += '<a href="' + editUrl + '" class="btn btn-warning" title="Edit"><i class="ti ti-pencil"></i></a>';
                    html += '<button class="btn btn-danger btn-delete" data-url="' + deleteUrl + '" title="Delete"><i class="ti ti-trash"></i></button>';
                    html += '</div>';
                    return html;
                }
            }
        ],
        order: [[5, 'desc']],
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
            paginate: { first: "Pertama", last: "Terakhir", next: "→", previous: "←" }
        }
    });

    // Filter handlers
    $('#filter-status, #filter-category').on('change', function() {
        table.ajax.reload();
    });

    var searchTimeout;
    $('#filter-search').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            table.ajax.reload();
        }, 500);
    });

    // Select all
    $('#select-all').on('change', function() {
        $('.row-select').prop('checked', $(this).prop('checked'));
        updateSelectedIds();
    });

    // Individual select
    $(document).on('change', '.row-select', function() {
        updateSelectedIds();
    });

    function updateSelectedIds() {
        selectedIds = [];
        $('.row-select:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length > 0) {
            $('#bulk-actions').removeClass('d-none');
            $('#selected-count').text(selectedIds.length);
        } else {
            $('#bulk-actions').addClass('d-none');
        }
    }

    function clearSelection() {
        selectedIds = [];
        $('#select-all').prop('checked', false);
        $('.row-select').prop('checked', false);
        $('#bulk-actions').addClass('d-none');
    }

    // Bulk actions using BlogAjax
    $('.btn-bulk').on('click', function() {
        var action = $(this).data('action');
        var btn = $(this);
        
        BlogAjax.bulkAction('{{ route('admin.blog.posts.bulk') }}', action, selectedIds, {
            btn: btn,
            reloadTable: table,
            clearSelection: clearSelection
        });
    });

    // Delete single post using BlogAjax
    $(document).on('click', '.btn-delete', function() {
        var url = $(this).data('url');
        var btn = $(this);
        
        BlogAjax.delete(url, {
            btn: btn,
            reloadTable: table,
            confirmMessage: 'Yakin ingin menghapus post ini?'
        });
    });
});
</script>
@endpush