@extends('source.layouts.app')

@section('content')
<div class="main-wrapper">

    @include('source.common.header')
    @include('source.common.sidebar')

    <div class="page-wrapper">
        <div class="content">

            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <h6>News</h6>
                <a href="{{ route('admin.news.create') }}"
                   class="btn btn-primary d-flex align-items-center">
                    <i class="ti ti-news me-1"></i>Add News
                </a>
            </div>

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div id="alert-area"></div>

            <table class="table" id="news-table">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Title</th>
                        <th>Slug</th>
                        <th width="20%">Summary</th>
                        <th width="8%">Status</th>
                        <th width="12%">Published At</th>
                        <th width="8%">Image</th>
                        <th width="12%">Action</th>
                    </tr>
                </thead>
            </table>
        </div>

        <div class="footer d-sm-flex align-items-center justify-content-between bg-white py-2 px-4 border-top">
            <p class="text-dark mb-0">
                &copy; {{ date('Y') }}
                <a href="javascript:void(0);" class="link-primary">C3S Publishers</a>,
                All Rights Reserved
            </p>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {
    let table = $('#news-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.news.data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'title' },
            { data: 'slug' },
            { data: 'summary' },
            { data: 'status', orderable: false, searchable: false },
            { data: 'published_date', orderable: false },
            { data: 'image_display', orderable: false, searchable: false },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

    $('#news-table').on('click', '.delete-btn', function() {
        let id = $(this).data('id');

        if (confirm('Are you sure you want to delete this news item?')) {
            $.ajax({
                url: '/news/' + id,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    table.ajax.reload();
                    showAlert(response.message);
                }
            });
        }
    });

    function showAlert(message) {
        let alertHtml = '<div class="alert alert-success alert-dismissible fade show" role="alert">'
            + message
            + '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>'
            + '</div>';

        $('#alert-area').html(alertHtml);

        setTimeout(function(){
            $('#alert-area').html('');
        }, 4000);
    }
});
</script>
@endsection