@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">
                        {{-- Add a select option for type --}}
                        <select class="form-select" name="type" id="type">
                            <option value="">Select All</option>
                            <option value="Lead View">Lead View</option>
                            <option value="User Role Updated">User Role Updated</option>
                            <option value="User Added">User Added</option>
                        </select>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <input type="text" name="read_at" class="form-control dp" id="read_at" placeholder="Read at">
                        </div>
                    </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>
                @forelse ($notifications as $item)
                @php
                    $type = class_basename($item->type);
                @endphp
                <tr data-id="{{ $item->id }}">
                    <td class="@if(!$item->read_at) highlight @endif">
                        @if ($type == 'LeadAccessNotification')
                        {{-- Lead View --}}
                        <i class="bx bx-file-find fs-3"></i> Lead View
                        @elseif ($type == 'UserUpdateNotification')
                            {{-- User Role Updated --}}
                            <i class="bx bx-user-check fs-3"></i> User Role Updated
                        @elseif ($type == 'NewUserCreatedNotification')
                            {{-- User Added --}}
                            <i class="bx bx-user-plus fs-3"></i> User Added
                        @endif
                    </td>
                    <td class="@if(!$item->read_at) highlight @endif">{!! $item->data['message'] !!}</td>
                    <td class="@if(!$item->read_at) highlight @endif">{{ $item->read_at }}</td>
                </tr>
                @empty

                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('page-specific-script')
<!-- Required datatable js -->
<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({
            responsive: true,
            "aaSorting": []
        });

        // Get the notifiable_id from the URL
        const urlParams = new URLSearchParams(window.location.search);
        const notifiableId = urlParams.get('notifiable_id');

        if (notifiableId) {
            $('tr[data-id="' + notifiableId + '"] td').addClass('highlight');
        }

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

        });

        // Update the input value on date range selection
        $('#read_at').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            filterTable(); // Call filter function
        });

        $('#read_at').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            filterTable(); // Call filter function
        });

        // Filter by type
        $('#type').on('change', function() {
            filterTable(); // Call filter function
        });

        // Filter by search input
        $('#search-notification').on('keyup', function() {
            filterTable(); // Call filter function
        });

        // Custom filtering
        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                const readAtDate = data[2]; // Assuming read_at is in the third column
                // const searchValue = $('#search-notification').val().toLowerCase();
                const type = $('#type').val();
                const dateRange = $('#read_at').val();
                const [startDate, endDate] = dateRange ? dateRange.split(' - ') : [null, null];

                // Filter by type
                if (type && !data[0].includes(type)) {
                    return false; // Type filter
                }

                // Filter by search input
                // if (searchValue && !data[1].toLowerCase().includes(searchValue)) {
                //     return false; // Message filter
                // }

                // Filter by read_at date
                if (startDate && endDate) {
                    const date = moment(readAtDate.split(' ')[0]); // Get only the date part
                    if (!date.isBetween(startDate, endDate, null, '[]')) {
                        return false; // Date filter
                    }
                }

                return true; // No filter applied
            }
        );

        function filterTable() {
            table.draw(); // Redraw table with current filters
        }
    });
</script>
@endsection