@extends('user.layouts')

@section('title', 'Notification')

@section('header')

<link rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

<link rel="stylesheet"
    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

<style>
    .notification-page {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .notification-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
    }

    .notification-title {
        margin: 0;
        color: #252a30;
        font-size: 25px;
        font-weight: 700;
    }

    .notification-subtitle {
        margin: 5px 0 0;
        color: #8c939c;
        font-size: 12px;
    }

    /* Create Button */
    .create-notification-btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 16px;
        border: 0;
        border-radius: 8px;
        background: #0d6efd;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        box-shadow: 0 3px 10px rgba(13, 110, 253, .18);
        transition: all .2s ease;
    }

    .create-notification-btn:hover {
        background: #0b5ed7;
        color: #fff;
        transform: translateY(-1px);
    }

    /* Cards */
    .filter-card,
    .notification-table-card {
        border: 0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .05);
    }

    .filter-card .card-body,
    .notification-table-card .card-body {
        padding: 22px;
    }

    /* Filter */
    .filter-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .filter-icon {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #eef5ff;
        color: #0d6efd;
    }

    .filter-title {
        margin: 0;
        color: #292e34;
        font-size: 15px;
        font-weight: 700;
    }

    .filter-subtitle {
        margin: 3px 0 0;
        color: #9298a1;
        font-size: 11px;
    }

    .filter-label {
        display: block;
        margin-bottom: 6px;
        color: #606770;
        font-size: 11px;
        font-weight: 600;
    }

    .filter-control {
        height: 41px;
        border: 1px solid #e0e4e9;
        border-radius: 8px;
        font-size: 12px;
        box-shadow: none !important;
    }

    .filter-control:focus {
        border-color: #86b7fe;
    }

    .filter-control::placeholder {
        color: #a6adb5;
    }

    .filter-search-btn,
    .filter-reset-btn {
        height: 41px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 16px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
    }

    .filter-search-btn {
        border: 0;
        background: #0d6efd;
        color: #fff;
    }

    .filter-search-btn:hover {
        background: #0b5ed7;
        color: #fff;
    }

    .filter-reset-btn {
        border: 1px solid #e0e4e9;
        background: #f8f9fa;
        color: #59616a;
    }

    .filter-reset-btn:hover {
        background: #eceff2;
    }

    /* Table */
    #data-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #data-table thead th {
        padding: 13px 12px;
        border-bottom: 1px solid #e8ebef;
        background: #f7f8fa;
        color: #555d66;
        font-size: 11px;
        font-weight: 700;
        vertical-align: middle;
        white-space: nowrap;
    }

    #data-table tbody td {
        padding: 14px 12px;
        border-bottom: 1px solid #f0f1f3;
        color: #41474e;
        font-size: 12px;
        vertical-align: middle;
    }

    #data-table tbody tr:hover td {
        background: #fafbfc;
    }

    #data-table tbody tr:last-child td {
        border-bottom: 0;
    }

    /* Notification title */
    .notification-name-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .notification-icon-box {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: #eef5ff;
        color: #0d6efd;
        font-size: 12px;
    }

    .notification-name {
        color: #343a40;
        font-size: 12px;
        font-weight: 600;
    }

    .notification-description {
        display: block;
        max-width: 500px;
        color: #6c737b;
        line-height: 1.6;
        white-space: normal;
        word-break: break-word;
    }

    /* Date */
    .date-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 9px;
        border-radius: 7px;
        background: #f6f7f9;
        color: #626971;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* Delete */
    .delete-notification-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: #fdeff0;
        color: #dc3545;
        transition: all .2s ease;
    }

    .delete-notification-btn:hover {
        background: #dc3545;
        color: #fff;
    }

    /* DataTable */
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        color: #747b84;
        font-size: 12px;
    }

    .dataTables_wrapper .dataTables_filter input {
        height: 37px;
        min-width: 220px;
        margin-left: 7px;
        padding: 5px 10px;
        border: 1px solid #e0e4e9;
        border-radius: 7px;
        outline: none;
    }

    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #86b7fe;
    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #e0e4e9;
        border-radius: 6px;
    }

    /* Modal */
    .notification-modal .modal-content {
        border: 0;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 15px 45px rgba(0, 0, 0, .16);
    }

    .notification-modal .modal-header {
        padding: 18px 20px;
        border-bottom: 1px solid #f0f1f3;
    }

    .notification-modal .modal-title {
        margin: 0;
        color: #292e34;
        font-size: 17px;
        font-weight: 700;
    }

    .notification-modal .modal-body {
        padding: 22px;
    }

    .modal-label {
        margin-bottom: 7px;
        color: #555d66;
        font-size: 12px;
        font-weight: 600;
    }

    .modal-control {
        border: 1px solid #dfe3e7;
        border-radius: 8px;
        font-size: 13px;
        box-shadow: none !important;
    }

    input.modal-control {
        height: 43px;
    }

    textarea.modal-control {
        min-height: 110px;
        padding-top: 10px;
        resize: vertical;
    }

    .modal-control:focus {
        border-color: #86b7fe;
    }

    .modal-heading-icon {
        width: 37px;
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: #eef5ff;
        color: #0d6efd;
    }

    /* Submit */
    .create-submit-btn {
        width: 100%;
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: 8px;
        background: #0d6efd;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .create-submit-btn:hover {
        background: #0b5ed7;
        color: #fff;
    }

    .create-submit-btn:disabled {
        opacity: .75;
        cursor: not-allowed;
    }

    /* Delete Modal */
    .delete-modal-body {
        padding: 30px;
        text-align: center;
    }
.notification-date-time {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.notification-date-row,
.notification-time-row {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.notification-date-row i,
.notification-time-row i {
    width: 14px;
    min-width: 14px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.notification-date-row span,
.notification-time-row span {
    margin: 0;
}
    .delete-modal-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: #fdeff0;
        color: #dc3545;
        font-size: 21px;
    }

    .delete-modal-title {
        margin: 0;
        color: #292e34;
        font-size: 18px;
        font-weight: 700;
    }

    .delete-modal-text {
        max-width: 320px;
        margin: 8px auto 22px;
        color: #8b929b;
        font-size: 13px;
        line-height: 1.6;
    }

    @media(max-width: 767.98px) {
        .notification-page {
            padding-top: 17px;
        }

        .notification-title {
            font-size: 21px;
        }

        .notification-header {
            align-items: flex-start;
        }

        .create-notification-btn {
            width: 100%;
        }

        .filter-card .card-body,
        .notification-table-card .card-body {
            padding: 16px;
        }

        .filter-search-btn,
        .filter-reset-btn {
            flex: 1;
        }

        .dataTables_wrapper .dataTables_filter {
            margin-top: 12px;
            text-align: left !important;
        }
    }
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper notification-page">

    {{-- HEADER --}}
    <div class="notification-header">

        <div>
            <h3 class="notification-title">
                Notification
            </h3>

            <p class="notification-subtitle">
                Create and manage notifications
            </p>
        </div>

        <button type="button"
            data-bs-toggle="modal"
            data-bs-target="#CreateNotificationModal"
            class="btn create-notification-btn">

            <i class="fa-solid fa-plus"></i>

            Create Notification
        </button>

    </div>


    {{-- FILTER --}}
    <div class="row mt-4">

        <div class="col-12">

            <div class="card filter-card">

                <div class="card-body">

                    <div class="filter-heading">

                        <div class="filter-icon">
                            <i class="fa-solid fa-filter"></i>
                        </div>

                        <div>
                            <h5 class="filter-title">
                                Search Notifications
                            </h5>

                            <p class="filter-subtitle">
                                Search notifications using date or title
                            </p>
                        </div>

                    </div>


                    <div class="row g-3">

                        {{-- FROM DATE --}}
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                            <label class="filter-label">
                                From Date
                            </label>

                            <input type="date"
                                id="from_date"
                                class="form-control filter-control">

                        </div>


                        {{-- TO DATE --}}
                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                            <label class="filter-label">
                                To Date
                            </label>

                            <input type="date"
                                id="to_date"
                                class="form-control filter-control">

                        </div>


                        {{-- TITLE --}}
                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">

                            <label class="filter-label">
                                Title
                            </label>

                            <input type="text"
                                id="title_filter"
                                class="form-control filter-control"
                                placeholder="Search notification title">

                        </div>


                        {{-- BUTTONS --}}
                        <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12 d-flex align-items-end">

                            <div class="d-flex gap-2">

                                <button type="button"
                                    id="filterBtn"
                                    class="btn filter-search-btn">

                                    <i class="fa-solid fa-magnifying-glass"></i>

                                    Search

                                </button>


                                <button type="button"
                                    id="resetBtn"
                                    class="btn filter-reset-btn">

                                    <i class="fa-solid fa-rotate-left"></i>

                                    Reset

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- TABLE --}}
    <div class="row mt-4">

        <div class="col-12">

            <div class="card notification-table-card">

                <div class="card-body">

                    <div class="table-responsive">

                        <table id="data-table"
                            class="table nowrap align-middle"
                            style="width:100%">

                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>TITLE</th>
                                    <th>DESCRIPTION</th>
                                    <th>CREATED ON</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>

                            <tbody>

                                @foreach ($notification as $notifi)

                                    <tr>

                                        {{-- SN --}}
                                        <td>
                                            {{ $loop->iteration }}
                                        </td>


                                        {{-- TITLE --}}
                                        <td>

                                            <div class="notification-name-wrapper">

                                                <div class="notification-icon-box">
                                                    <i class="fa-regular fa-bell"></i>
                                                </div>

                                                <span class="notification-name">
                                                    {{ $notifi->title }}
                                                </span>

                                            </div>

                                        </td>


                                        {{-- DESCRIPTION --}}
                                        <td>

                                            <span class="notification-description">
                                                {{ $notifi->description }}
                                            </span>

                                        </td>


                                        {{-- CREATED DATE --}}
                                     @php
    $notificationTime = $notifi->created_at
        ? $notifi->created_at->copy()->timezone('Asia/Kolkata')
        : null;
@endphp

<td
    data-date="{{ $notificationTime ? $notificationTime->format('Y-m-d') : '' }}"
    data-order="{{ $notificationTime ? $notificationTime->timestamp : 0 }}">

    @if($notificationTime)

        <div class="notification-date-time">

            <div class="notification-date-row">
                <i class="fa-regular fa-calendar"></i>

                <span>
                    {{ $notificationTime->format('d-m-Y') }}
                </span>
            </div>

            <div class="notification-time-row">
                <i class="fa-regular fa-clock"></i>

                <span>
                    {{ $notificationTime->format('h:i A') }}
                </span>
            </div>

        </div>

    @else

        <span class="text-muted">N/A</span>

    @endif

</td>


                                        {{-- DELETE --}}
                                        <td>

                                            <button type="button"
                                                class="delete-notification-btn"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteModal"
                                                data-user-id="{{ $notifi->id }}"
                                                data-title="{{ $notifi->title }}"
                                                onclick="setDeleteId(this)"
                                                title="Delete">

                                                <i class="fa-regular fa-trash-can"></i>

                                            </button>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- CREATE NOTIFICATION MODAL --}}
<div class="modal fade notification-modal"
    id="CreateNotificationModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <div class="d-flex align-items-center gap-2">

                    <div class="modal-heading-icon">
                        <i class="fa-regular fa-bell"></i>
                    </div>

                    <div>

                        <h5 class="modal-title">
                            Create Notification
                        </h5>

                        <small class="text-muted">
                            Send a new notification
                        </small>

                    </div>

                </div>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>

            </div>


            <form id="createNotificationForm"
                action="{{ route('add_notification') }}"
                method="POST">

                @csrf

                <div class="modal-body">

                    <div class="mb-3">

                        <label for="ad-title"
                            class="modal-label">

                            Title
                            <span class="text-danger">*</span>

                        </label>

                        <input type="text"
                            class="form-control modal-control"
                            id="ad-title"
                            name="title"
                            maxlength="150"
                            autocomplete="off"
                            required
                            placeholder="Enter notification title">

                    </div>


                    <div class="mb-3">

                        <label for="ad-description"
                            class="modal-label">

                            Description
                            <span class="text-danger">*</span>

                        </label>

                        <textarea
                            class="form-control modal-control"
                            name="description"
                            id="ad-description"
                            maxlength="1000"
                            required
                            rows="4"
                            placeholder="Enter notification description"></textarea>

                    </div>


                    <button type="submit"
                        id="createNotificationBtn"
                        class="btn create-submit-btn">

                        <i class="fa-regular fa-circle-check"></i>

                        <span>
                            Create Notification
                        </span>

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


{{-- DELETE MODAL --}}
<div class="modal fade notification-modal"
    id="deleteModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="delete-modal-body">

                <div class="delete-modal-icon">
                    <i class="fa-regular fa-trash-can"></i>
                </div>

                <h4 class="delete-modal-title">
                    Delete Notification?
                </h4>

                <p class="delete-modal-text">

                    Are you sure you want to delete

                    <strong id="deleteNotificationTitle">
                        this notification
                    </strong>?

                    This action cannot be undone.

                </p>


                <form id="deleteNotificationForm"
                    action="{{ route('delete_notification') }}"
                    method="POST">

                    @csrf

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


                    <div class="d-flex justify-content-center gap-2">

                        <button type="button"
                            class="btn btn-light px-4"
                            data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button type="submit"
                            id="deleteNotificationBtn"
                            class="btn btn-danger px-4">

                            <i class="fa-regular fa-trash-can me-1"></i>

                            Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous">
</script>

<script src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>


<script>
    /*
    |--------------------------------------------------------------------------
    | DELETE ID
    |--------------------------------------------------------------------------
    */
    function setDeleteId(button) {

        const id = button.getAttribute('data-user-id');
        const title = button.getAttribute('data-title');

        document.getElementById('delete_id').value = id;

        document.getElementById('deleteNotificationTitle').textContent =
            title || 'this notification';
    }
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | CREATE SUBMIT
    |--------------------------------------------------------------------------
    */
    const createForm =
        document.getElementById('createNotificationForm');

    const createBtn =
        document.getElementById('createNotificationBtn');


    if (createForm && createBtn) {

        createForm.addEventListener('submit', function () {

            if (createBtn.disabled) {
                return false;
            }

            createBtn.disabled = true;

            createBtn.innerHTML =
                '<span class="spinner-border spinner-border-sm me-2"></span>' +
                'Creating...';

            /*
             * No preventDefault()
             * No setTimeout()
             * Normal POST immediately happens.
             */
        });
    }


    /*
    |--------------------------------------------------------------------------
    | DELETE SUBMIT
    |--------------------------------------------------------------------------
    */
    const deleteForm =
        document.getElementById('deleteNotificationForm');

    const deleteBtn =
        document.getElementById('deleteNotificationBtn');


    if (deleteForm && deleteBtn) {

        deleteForm.addEventListener('submit', function () {

            if (deleteBtn.disabled) {
                return false;
            }

            deleteBtn.disabled = true;

            deleteBtn.innerHTML =
                '<span class="spinner-border spinner-border-sm me-2"></span>' +
                'Deleting...';
        });
    }

});
</script>


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

    /*
    |--------------------------------------------------------------------------
    | DESTROY EXISTING DATATABLE
    |--------------------------------------------------------------------------
    */
    if ($.fn.DataTable.isDataTable('#data-table')) {

        $('#data-table')
            .DataTable()
            .destroy();
    }


    /*
    |--------------------------------------------------------------------------
    | DATE RANGE FILTER
    |--------------------------------------------------------------------------
    |
    | Important:
    |
    | CREATED ON = column index 3.
    |
    | We don't directly compare HTML.
    | We get the real date from TD data-date attribute.
    |
    */
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {

            if (settings.nTable.id !== 'data-table') {
                return true;
            }

            const fromDateValue = $('#from_date').val();
            const toDateValue   = $('#to_date').val();


            /*
            |--------------------------------------------------------------------------
            | NO DATE FILTER
            |--------------------------------------------------------------------------
            */
            if (!fromDateValue && !toDateValue) {
                return true;
            }


            /*
            |--------------------------------------------------------------------------
            | GET ACTUAL TABLE ROW
            |--------------------------------------------------------------------------
            */
            const rowNode =
                settings.aoData[dataIndex].nTr;

            if (!rowNode) {
                return false;
            }


            /*
            |--------------------------------------------------------------------------
            | CREATED ON COLUMN = 4TH TD = INDEX 3
            |--------------------------------------------------------------------------
            */
            const dateCell =
                $('td:eq(3)', rowNode);

            let rowDateValue =
                dateCell.attr('data-date');


            /*
            |--------------------------------------------------------------------------
            | FALLBACK
            |--------------------------------------------------------------------------
            */
            if (!rowDateValue) {

                rowDateValue =
                    dateCell
                        .text()
                        .trim();

                const match =
                    rowDateValue.match(
                        /\d{4}-\d{2}-\d{2}/
                    );

                rowDateValue =
                    match ? match[0] : '';
            }


            if (!rowDateValue) {
                return false;
            }


            /*
            |--------------------------------------------------------------------------
            | DATE OBJECTS
            |--------------------------------------------------------------------------
            */
            const rowDate =
                new Date(
                    rowDateValue + 'T12:00:00'
                );


            let fromDate = null;
            let toDate = null;


            if (fromDateValue) {

                fromDate =
                    new Date(
                        fromDateValue + 'T00:00:00'
                    );
            }


            if (toDateValue) {

                toDate =
                    new Date(
                        toDateValue + 'T23:59:59'
                    );
            }


            /*
            |--------------------------------------------------------------------------
            | INVALID DATE
            |--------------------------------------------------------------------------
            */
            if (isNaN(rowDate.getTime())) {
                return false;
            }


            /*
            |--------------------------------------------------------------------------
            | FROM DATE
            |--------------------------------------------------------------------------
            */
            if (
                fromDate &&
                rowDate < fromDate
            ) {
                return false;
            }


            /*
            |--------------------------------------------------------------------------
            | TO DATE
            |--------------------------------------------------------------------------
            |
            | Inclusive:
            | If To Date = 2026-10-05,
            | 2026-10-05 record is included.
            |
            */
            if (
                toDate &&
                rowDate > toDate
            ) {
                return false;
            }


            return true;
        }
    );


    /*
    |--------------------------------------------------------------------------
    | DATATABLE
    |--------------------------------------------------------------------------
    */
    const table =
        $('#data-table').DataTable({

            responsive: false,

            scrollX: true,

            autoWidth: false,

            pageLength: 10,

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

            /*
             * Created On DESC
             */
            order: [
                [3, 'desc']
            ],

            columnDefs: [

                /*
                 * SN
                 */
                {
                    targets: 0,
                    orderable: false,
                    searchable: false
                },

                /*
                 * Action
                 */
                {
                    targets: 4,
                    orderable: false,
                    searchable: false
                }
            ]
        });


    /*
    |--------------------------------------------------------------------------
    | APPLY FILTER
    |--------------------------------------------------------------------------
    */
    function applyFilter() {

        const fromDate =
            $('#from_date').val();

        const toDate =
            $('#to_date').val();

        const title =
            $('#title_filter')
                .val()
                .trim();


        /*
        |--------------------------------------------------------------------------
        | VALIDATE DATE RANGE
        |--------------------------------------------------------------------------
        */
        if (
            fromDate &&
            toDate &&
            fromDate > toDate
        ) {

            alert(
                'From Date cannot be greater than To Date.'
            );

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | TITLE SEARCH
        |--------------------------------------------------------------------------
        */
        table
            .column(1)
            .search(title);


        /*
        |--------------------------------------------------------------------------
        | APPLY DATE + TITLE
        |--------------------------------------------------------------------------
        */
        table.draw();
    }


    /*
    |--------------------------------------------------------------------------
    | SEARCH BUTTON
    |--------------------------------------------------------------------------
    */
    $('#filterBtn').on('click', function () {

        applyFilter();
    });


    /*
    |--------------------------------------------------------------------------
    | DATE CHANGE
    |--------------------------------------------------------------------------
    |
    | From/To select pannumbothe result update aagum.
    |
    */
    $('#from_date, #to_date').on(
        'change',
        function () {

            const fromDate =
                $('#from_date').val();

            const toDate =
                $('#to_date').val();


            if (
                fromDate &&
                toDate &&
                fromDate > toDate
            ) {

                return;
            }


            table.draw();
        }
    );


    /*
    |--------------------------------------------------------------------------
    | ENTER KEY TITLE SEARCH
    |--------------------------------------------------------------------------
    */
    $('#title_filter').on(
        'keypress',
        function (e) {

            if (e.which === 13) {

                e.preventDefault();

                applyFilter();
            }
        }
    );


    /*
    |--------------------------------------------------------------------------
    | RESET
    |--------------------------------------------------------------------------
    */
    $('#resetBtn').on('click', function () {

        $('#from_date').val('');

        $('#to_date').val('');

        $('#title_filter').val('');


        /*
         * Clear global search
         */
        table.search('');


        /*
         * Clear column searches
         */
        table
            .columns()
            .search('');


        /*
         * Refresh
         */
        table.draw();
    });


    /*
    |--------------------------------------------------------------------------
    | DYNAMIC SERIAL NUMBER
    |--------------------------------------------------------------------------
    */
    table.on(
        'order.dt search.dt draw.dt',
        function () {

            const info =
                table.page.info();


            table
                .column(
                    0,
                    {
                        search: 'applied',
                        order: 'applied',
                        page: 'current'
                    }
                )
                .nodes()
                .each(
                    function (cell, i) {

                        cell.innerHTML =
                            info.start +
                            i +
                            1;
                    }
                );
        }
    );


    /*
    |--------------------------------------------------------------------------
    | INITIAL DRAW
    |--------------------------------------------------------------------------
    */
    table.draw();

});
</script>

@endsection