@extends('layouts.app')

@section('title', 'Notification')

@section('page-specific-style')
<link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<style>
    td.highlight {
        background-color: rgba(var(--dt-row-hover), 0.052) !important;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Notifications</h4>
        </div>
    </div>

    <div class="table-container mt-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                        <select class="form-select" name="type" id="type">
                            <option value="">Select All</option>
                            <option value="LeadAccessNotification">Lead View</option>
                            <option value="UserUpdateNotification">User Role Updated</option>
                            <option value="NewUserCreatedNotification">User Added</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <input type="text" class="form-control" placeholder="Search" name="search" id="search-notification">
                    </div>
                    <div class="col-3">
                        <input type="text" name="read_at" class="form-control dp" id="read_at" placeholder="Read at">
                    </div>
                </div>
            </div>
        </div>
        <table id="notification-datatable" class="table table-bordered dt-responsive nowrap w-100">
            <thead>
                <tr>
                    <th class="th-sm">Type</th>
                    <th class="th-sm">Message</th>
                    <th class="th-sm">Read at</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@endsection

@section('page-specific-script')
<script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
    $(document).ready(function() {
        const table = $('#notification-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("notifications.getNotification") }}',
                data: function(d) {
                    d.type = $('#type').val();
                    d.search = $('#search-notification').val();
                    const dateRange = $('#read_at').val();
                    if (dateRange) {
                        const [startDate, endDate] = dateRange.split(' - ');
                        d.start_date = moment(startDate, 'YYYY-MM-DD').format('YYYY-MM-DD HH:mm:ss');
                        d.end_date = moment(endDate, 'YYYY-MM-DD').endOf('day').format('YYYY-MM-DD HH:mm:ss'); // Include the whole end date
                    }
                }
            },
            dom: "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-6'i><'col-sm-6'p>>" +
                 "<'row'<'col-sm-6'l>>",
            columns: [
                { data: 'type', orderable: true },  // Enable sorting
                { data: 'message', orderable: true }, // Enable sorting
                { data: 'read_at', orderable: true } // Enable sorting
            ],
            order: [[2, 'asc']],
            rowCallback: function(row, data) {
                // Get the notifiable_id from the URL
                const urlParams = new URLSearchParams(window.location.search);
                const notifiableId = urlParams.get('notifiable_id');

                // Check if the notifiableId matches the row data-id
                if (notifiableId && data.id === notifiableId) {
                    // Highlight the appropriate <td> elements
                    $(row).find('td').addClass('highlight');
                }
            }
        });

        $('#read_at').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            },
            startDate: moment().startOf('day'),
            endDate: moment().endOf('day'),
            opens: 'left'
        });

        $('#read_at').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            table.draw();
        });

        $('#read_at').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            table.draw();
        });

        $('#type').on('change', function() {
            table.draw();
        });

        $('#search-notification').on('keyup', function() {
            table.draw();
        });
    });
</script>
@endsection