@extends('operations.layout.mainlayout')

@section('content')

    <style>
        .btn-info{
            color: white !important;
        }
    </style>
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: #e35a80!important;">Blog Articles</h1>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="mx-auto col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <table id="blog-article-datatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title (EN)</th>
                                    <th>Title (AR)</th>
                                    <th>Category</th>
                                    <th>Author (EN)</th>
                                    <th>Created Date</th>
                                    <th>Active</th>
                                    <th>Highlighted</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                            </table>
                            @menu('whitelabel_blog_article')
                            <div class="row mt-3">
                                <div class="col" style="text-align: center">
                                    <a class="btn btn-info" href="/operations/whitelabel/blog-article/create">Add New Blog Article</a>
                                </div>
                            </div>
                            @endmenu
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('warehouse_scripts')
<script>
    $(document).ready(function() {
        var table = $('#blog-article-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/operations/whitelabel/blog-article/datatable',
            columns: [
                { data: 'ID' },
                { data: 'TITLE_EN' },
                { data: 'TITLE_AR' },
                { data: 'category_name' },
                { data: 'AUTHOR_EN' },
                { data: 'CREATED_DATE' },
                {
                    data: 'IS_ACTIVE',
                    render: function(data) {
                        return data ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>';
                    }
                },
                {
                    data: 'IS_HIGHLIGHTED',
                    render: function(data) {
                        return data ? '<span class="badge badge-warning">Yes</span>' : '<span class="badge badge-secondary">No</span>';
                    }
                },
                { data: 'actions', orderable: false, searchable: false }
            ],
            order: [[0, 'desc']]
        });

        $(document).on('click', '.delete-btn', function() {
            var id = $(this).data('id');
            if (confirm('Are you sure you want to delete this blog article?')) {
                $.ajax({
                    url: '/operations/whitelabel/blog-article/' + id,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.success) {
                            table.ajax.reload();
                        } else {
                            alert('Failed to delete blog article');
                        }
                    },
                    error: function() {
                        alert('Error deleting blog article');
                    }
                });
            }
        });
    });
</script>
@endsection