@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card-body">
                <div class="border-bottom py-2 d-flex justify-content-between align-items-center">
                    <div class="h4 pb-0 mb-0">Notifications</div>
                    <div class="addbutton d-flex justify-content-end align-items-center">
                        <button class="btn btn-primary"  onclick="window.location='{{ route('notification.create') }}'">
                            <span class="mdi mdi-plus"></span>
                            Add Notification
                        </button>
                    </div>
                </div>
                {{-- <div class="border-bottom  py-2 justify-content-between align-items-center">
                    <div class="row p-3">
                        <div class="col-md-5 form-group mb-3">
                            <label for="thumbnail" class="text-dark">Employees<span class="text-danger">*</span></label>
                            <select id="notification_list_employee_id" class="form-select mt-1 filter" multiple="multiple" name="employee_ids[]">
                                @foreach($employees as $employee)
                                    <option value="{{$employee->emp_id}}">
                                        {{$employee->first_name}}
                                        {{$employee->middle_name}}
                                        {{$employee->last_name}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                      
                        <div class="col-md-5 form-group mb-3">
                            <label for="thumbnail" class="text-dark">Sites<span class="text-danger">*</span></label>
                            <select id="notification_list_site_id" class="form-select mt-1 filter" multiple="multiple" name="site_ids[]">
                                @foreach($sites as $site)
                                    <option value="{{$site->id}}">
                                        {{$site->title}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2 col-sm-4 mt-4">
                            <div style="display:block;">
                            <button class="btn btn-success btn-sm p-2 waves-effect waves-light filter-btn" onclick="_filter(1); _get(0);">submit</button>
                            <button class="btn btn-danger btn-sm p-2 waves-effect waves-light filter-btn-close" onclick="_filter(0);  _get(0);">x</button>
                            </div>
                        </div>
                    </div>
                </div> --}}
                <div class="mt-3">
                    <div class="table-responsive text-nowrap mt-3 border-bottom">
                        <table class="table">
                            <thead class="table-head-color bg-primary">
                                <tr>
                                    <th style="width: 20%;">
                                        <input type="date" class="filter form-control" name="issue_date"
                                            placeholder="Date" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-issue_date"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="sender"
                                            placeholder="Sender" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-sender"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="receiver"
                                            placeholder="Receiver" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-receiver"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="title" placeholder="Title"
                                            autocomplete="off">
                                        <input type="text" style="display:none" name="fake-title"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="message"
                                            placeholder="Message" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-message"
                                            autocomplete="off">
                                    </th> 
                                    
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="type"
            +                                placeholder="Type" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-type"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="site"
                                            placeholder="Site" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-site"
                                            autocomplete="off">
                                    </th>
                                    <th style="width: 20%;">
                                        <input type="text" class="filter form-control" name="team"
                                            placeholder="Team" autocomplete="off">
                                        <input type="text" style="display:none" name="fake-team"
                                            autocomplete="off">
                                    </th>
                              
                                  
                                    
                                 
                                    <th style="width: 20%;" class="text-center">
                                        <div style="margin-top:6px;display:block;">
                                            <button class="btn btn-success btn-sm p-2 waves-effect waves-light filter-btn"
                                                onclick="_filter(1); _get(0);">submit</button>
                                            <button
                                                class="btn btn-danger btn-sm p-2 waves-effect waves-light filter-btn-close"
                                                onclick="_filter(0);  _get(0);">x</button>
                                        </div>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0 table-body">

                            </tbody>
                        </table>
                    </div>
                <div>
                 
                    <nav aria-label="Page navigation" class="mt-3">
                        <ul class="pagination justify-content-md-end justify-content-center pages_btn">

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="DeleteEmp" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>
                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="attendance-id" data-id=""
                        onclick="_delete(this)">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('css-js')

<script>

    $('#notification_list_employee_id').select2();
    $('#notification_list_site_id').select2();
    $(document).ready(function() {
        _filter(0);
        _get(0);
    });

    function _filter(filter_on) {
        var collection = document.getElementsByClassName("filter");
        var arr = {};

        for (let i = 0; i < collection.length; i++) {
            arr[collection[i].name] = $(collection[i]).val();;
        }

        if (filter_on == 0) {
            $('.filter').val('');
        }

        localStorage.setItem('filter', JSON.stringify(arr));
    }

    function formatDate(dateString) {
        let date = new Date(dateString);

        let day = String(date.getDate()).padStart(2, '0');      // Add leading zero for day
        let month = String(date.getMonth() + 1).padStart(2, '0'); // Add leading zero for month
        let year = date.getFullYear();

        let hours = String(date.getHours()).padStart(2, '0');   // Add leading zero for hours
        let minutes = String(date.getMinutes()).padStart(2, '0'); // Add leading zero for minutes
        let seconds = String(date.getSeconds()).padStart(2, '0'); // Add leading zero for seconds

        return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
    }

    function _get(from) {
        $.ajax({
            type: "GET",
            url: `{{ url('get-custom-notifications') }}?from=${from}&filter=${localStorage.getItem('filter')}`,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(response) {
                var notifications = response.data.notifications;
                var allSites = response.data.sites; // Fetch all sites data
                var html = ``;
                var count = parseInt(response.count) < 10 ? 1 : Math.ceil(parseInt(response.count) / 10);
                var pages_btn = ``;

                pages_btn += `
                    <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}" onclick="_get(0);">
                        <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                    </li>
                    <li class="page-item prev ${response.count == 0 ? 'd-none' : ''}" onclick="$('.active').prev('.p-btn').trigger('onclick');">
                        <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                    </li>`;

                $('.p-btn').removeClass('active');

                for (var c = 0; c < count; c++) {
                    if (
                        (from == (c - 3) * 10) ||
                        (from == (c - 2) * 10) ||
                        (from == (c - 1) * 10) ||
                        (from == (c - 0) * 10) ||
                        (from == (c + 1) * 10) ||
                        (from == (c + 2) * 10) ||
                        (from == (c + 3) * 10)
                    ) {
                        pages_btn += `
                            <li class="page-item p-btn ${from == c*10 ? 'active' : '' } ${response.count == 0 ? 'd-none' : '' }" onclick="_get(${c*10});">
                                <a class="page-link waves-effect" href="javascript:void(0);">${c+1}</a>
                            </li>`;
                    }
                }

                pages_btn += `
                    <li class="page-item next ${response.count == 0 ? 'd-none' : ''}" onclick="$('.active').next('.p-btn').trigger('onclick');">
                        <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                    </li>
                    <li class="page-item next ${response.count == 0 ? 'd-none' : ''}" onclick="_get(${(c-1)*10});">
                        <a class="page-link waves-effect" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                    </li>`;

                $('.pages_btn').html(pages_btn);

                for (var i = 0; i < notifications.length; i++) {
                    let sender = notifications[i].sender_details;
                    let receiver = notifications[i].receiver_details;
                    let formattedDate = formatDate(notifications[i].created_at);

                    html += `
                    <tr>
                        <td>${formattedDate}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="ms-1 text-wrap">
                                    ${sender && sender.first_name ? sender.first_name : ''}
                                    ${sender && sender.middle_name ? sender.middle_name : ''}
                                    ${sender && sender.last_name ? sender.last_name : ''}
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="ms-1">
                                    ${receiver && receiver.first_name ? receiver.first_name : ''}
                                    ${receiver && receiver.middle_name ? receiver.middle_name : ''}
                                    ${receiver && receiver.last_name ? receiver.last_name : ''}
                                </div>
                            </div>
                        </td>
                        <td>${notifications[i].title}</td>
                        <td class="text-wrap">${notifications[i].short_description}</td>
                        <td>${notifications[i].type}</td>
                                                <td>
                            ${notifications[i].sites ? notifications[i].sites.title : '<span class="mdi mdi-help"></span> No yet'}
                            </td>
                            <td>
                            ${notifications[i].teams ? notifications[i].teams.title : '<span class="mdi mdi-help"></span> No yet'}
                            </td>
                        <td></td>

                    </tr>`;
                }

                $('.table-body').html(html);


                if (html == ``) {
                    $('.table-body').html(
                        `<tr><td colspan="11" class="text-center">No record found</td></tr>`);
                }

                loader(false);
            },
            error: function(response) {
                loader(false);
                if (response.status == 422) {
                    var errors = response.responseJSON.data;
                    $.each(errors, function(field, messages) {
                        error_msg = messages[0];
                        toastr.error(error_msg);
                    });
                } else if (response.status == 500) {
                    toastr.error("Something went wrong")
                } else {
                    toastr.error(response.responseJSON.message)
                }
            }
        });
    }

</script>
    <style>
        .filter {
            width: 100%;
            height: 33px;
            outline: none;
            background: white;
        }

        .filter-form {
            width: 100%;
            height: 33px;
            outline: none;
            background: white;
        }

        .select-color {
            color: #787878;
            font-size: 0.9375rem;
            font-weight: 400;
            line-height: 1.47;
            background-size: 9px 5px;
            border: 1px solid #d4d3d5;
            border-radius: 0.375rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            padding-left: 5px;
        }

        .list_color:hover {
            color: #15A7F5;
        }

        .bg-primary th {
            color: white;
        }

        .dashboard {
            display: flex;
        }

        .dashboard-btn {
            display: flex;
        }

        @media only screen and (min-width: 320px) and (max-width: 520px) {
            .dashboard {
                display: block;
            }

            .dashboard-btn {
                display: block;
            }

            .dashboard-btn .btn {
                margin-top: 10px;
            }
        }
    </style>
@endsection