@php
    $start_date = date('Y-m-1');
    $end_date = date('Y-m-t');
    $datas = App\Models\LoginHistory::whereDate('login_at', '>=', $start_date)
        ->whereDate('login_at', '<=', $end_date)
        ->orderBy('id', 'desc')
        ->get();
@endphp

<div class="modal fade" tabindex="-1" id="users_login_detail_modal">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content shadow-none">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title">Users Login Detail</h5>
                </div>

                <div class="d-flex">
                    <div>
                        Search by name
                        <input type="text" class="form-control" id="hr_login_search_by_name" />
                    </div>
                    <div class ="mx-4">
                        Start Date
                        <input type="date" class="form-control" id="hr_login_start_date" />
                    </div>
                    <div class ="mx-4">
                        End Date
                        <input type="date" class="form-control" id="hr_login_end_date" />
                    </div>
                    <div>
                        <button type="button" id="hr_user_search_button" class="my-5 btn btn-outline-secondary"><i
                                class="bi bi-arrow-clockwise fs-1"></i></button>
                    </div>
                </div>
            </div>

            <div class="modal-body">

                <table class='table table-row-bordered'>
                    <thead>
                        <tr style="font-weight: bolder">
                            <td  style="padding-left: 100px;">S.NO</td>
                            <td style="padding-left: 250px;">USER NAME</td>
                            <td>LOGIN DATE</td>
                            <td>LOGIN TIME</td>
                            <td>LOGIN PORT</td>
                        </tr>
                    </thead>
                    <tbody id="hr_user_table_body">
                        @php
                            $i = 1;
                        @endphp
                            @foreach ($datas as $data)
                                <tr>
                                    <td style="padding-left: 100px;">{{ $i++ }}</td>
                                    <td style="padding-left: 250px;">{{ $data->username }}</td>
                                    <td>{{ \Carbon\Carbon::parse($data->login_at)->format('d M Y') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($data->login_at)->format('h:i A') }}</td>
                                    <td>@if ($data->port == '80' || $data->port == '81')
                                        gcpserver:{{ $data->port }}
                                    @elseif($data->port == '3385')
                                        http://vpngc.dynu.com:{{ $data->port }}
                                    @elseif($data->port == '3352')
                                        http://vpngc.dynu.com:{{ $data->port }}
                                    @else 
                                    
                                    @endif</td>
                                </tr>
                            @endforeach
                    </tbody>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#hr_user_search_button').click(function() {
        show_loader();
        $.ajax({
            url: 'hr-user-login-detail-search',
            method: 'POST',

            data: {
                'search_by_name': $('#hr_login_search_by_name').val(),
                'start_date': $('#hr_login_start_date').val(),
                'end_date': $('#hr_login_end_date').val(),
            },

            success: function(response) {
                $('#hr_user_table_body').empty();
                $('#hr_user_table_body').append(response);
                hide_loader();

                swal.fire({
                    title: "Success",
                    text: "Date Filtered Successfully",
                    icon: "success",
                });
            },
            error: function(xhr, status, error) {
                console.log(error);

            }
        });
    });

    $(document).ready(function() {
        $('#summernote').summernote({
            toolbar: [],
            height:'230px',
                disableDragAndDrop: true,
                dialogsInBody: true,
                readOnly: true,
        });
    });
</script>

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>