@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>
    #dept th,
    #dept td {
        vertical-align: middle;
        white-space: nowrap;
    }

    #dept td:nth-child(4) {
        white-space: normal;
        min-width: 350px;
    }
</style>

@section('content')

<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>News</h5>
    </div>

    <div class="col-auto">
        <a href="{{ route('create_news') }}" class="btn btn-primary">
            <span class="d-flex align-items-center gap-2">
                <i class="icon-base ti tabler-plus icon-xs"></i>
                <span>Create News</span>
            </span>
        </a>
    </div>
</div>

<div class="card p-4">
    <div class="card-datatable table-responsive pt-0">
        <table id="dept" class="table table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>SNO</th>
                    <th>FROM DATE</th>
                    <th>TO DATE</th>
                    <th>NEWS DESCRIPTION</th>
                    <th>STATUS</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure?</h5>
            <p class="text-muted">Are you sure you want to delete this news?</p>

            <form id="deleteForm" method="POST" action="{{ route('delete_news') }}">
                @csrf

                <input type="hidden" name="id" id="deleteId">

                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-danger" id="deleteSubmit">
                        Yes, Delete
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">

            <div class="mb-3">
                <i id="statusIcon" class="ti tabler-alert-circle fs-1 text-warning"></i>
            </div>

            <h5 class="fw-bold mb-2" id="statusTitle">
                Are you sure?
            </h5>

            <p class="text-muted mb-0" id="statusText"></p>

            <input type="hidden" id="statusNewsId">

            <div class="d-flex justify-content-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>

                <button type="button" class="btn" id="confirmStatusBtn">
                    Yes, Continue
                </button>
            </div>

        </div>
    </div>
</div>

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

<script>
$(document).ready(function() {

    let table = $('#dept').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('news_data') }}",

        language: {
            search: "",
            searchPlaceholder: "Search News",
            lengthMenu: "_MENU_"
        },

        lengthMenu: [
            [10, 25, 50, 100, -1],
            ["10", "25", "50", "100", "All"]
        ],

        columns: [
            {
                data: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'from_date',
                name: 'from_date'
            },
            {
                data: 'to_date',
                name: 'to_date'
            },
            {
                data: 'news_description',
                name: 'news_description'
            },
            {
                data: 'status',
                name: 'status',
                orderable: false,
                searchable: false
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]
    });

    $(document).on('click', '.deleteBtn', function() {
        $('#deleteId').val($(this).data('id'));
    });

    $(document).on('click', '.statusBtn', function() {
        let id = $(this).data('id');
        let currentStatus = $(this).data('status');

        $('#statusNewsId').val(id);

        if (currentStatus == 1) {
            $('#statusTitle').text('Deactivate News?');
            $('#statusText').text('Are you sure you want to deactivate this news?');

            $('#statusIcon')
                .removeClass('tabler-circle-check text-success')
                .addClass('tabler-alert-circle text-warning');

            $('#confirmStatusBtn')
                .removeClass('btn-success')
                .addClass('btn-warning')
                .text('Yes, Deactivate');
        } else {
            $('#statusTitle').text('Activate News?');
            $('#statusText').text('Are you sure you want to activate this news?');

            $('#statusIcon')
                .removeClass('tabler-alert-circle text-warning')
                .addClass('tabler-circle-check text-success');

            $('#confirmStatusBtn')
                .removeClass('btn-warning')
                .addClass('btn-success')
                .text('Yes, Activate');
        }

        $('#statusModal').modal('show');
    });

    $('#confirmStatusBtn').on('click', function() {
        let button = $(this);
        let id = $('#statusNewsId').val();

        button.prop('disabled', true);
        button.text('Processing...');

        $.ajax({
            url: "{{ route('news_status') }}",
            type: "POST",

            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },

            success: function(response) {
                if (response.success) {
                    $('#statusModal').modal('hide');
                    table.ajax.reload(null, false);
                }
            },

            error: function() {
                alert('Something went wrong.');
            },

            complete: function() {
                button.prop('disabled', false);
            }
        });
    });

    $('#deleteForm').on('submit', function() {
        $('#deleteSubmit')
            .prop('disabled', true)
            .text('Deleting...');
    });

});
</script>

@endsection