@extends('layouts/contentNavbarLayout')
@section('title', 'User Login Logs')

@section('vendor-style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <style>
        .filter-card {
            border: 1px solid #ebeef0;
            border-radius: 12px;
            padding: 1rem;
            background: #fff;
            margin-bottom: 1rem;
        }

        .filter-card .form-label {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 0.35rem;
        }

        .filter-card .form-control {
            border: 1px solid #d9dee3;
            border-radius: 8px;
        }

        #otp-log-table {
            width: 100% !important;
        }

        #otp-log-table thead th {
            white-space: nowrap;
            vertical-align: middle;
            font-size: 12px;
            font-weight: 700;
        }

        #otp-log-table tbody td {
            vertical-align: middle;
            font-size: 12px;
        }

        .created-at-cell,
        .expiry-cell {
            white-space: nowrap;
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #d9dee3;
            border-radius: 8px;
            padding: 0.35rem 0.6rem;
            margin-left: 0.5rem;
        }

        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #d9dee3;
            border-radius: 8px;
            padding: 0.25rem 1.8rem 0.25rem 0.5rem;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 8px !important;
        }
    </style>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <span>User Login Logs</span>
        </div>

        <div class="card-body">
            <form method="GET" action="{{ route('admin.user_otp_logs') }}" class="filter-card">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">Start Date</label>
                        <input type="date" name="start_date" class="form-control"
                            value="{{ request('start_date', now()->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">End Date</label>
                        <input type="date" name="end_date" class="form-control"
                            value="{{ request('end_date', now()->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-4 d-flex gap-2">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                        <a href="{{ route('admin.user_otp_logs') }}" class="btn btn-outline-secondary w-100">Reset</a>
                    </div>
                </div>
            </form>

            <div class="table-responsive mt-4">
                <table id="otp-log-table" class="table table-bordered table-striped table-hover text-center align-middle w-100">
                    <thead class="table-primary">
                        <tr>
                            <th>ID</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>OTP</th>
                            <th>Expiry</th>
                            <th>IP</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($logs as $log)
                            <tr>
                                <td>{{ $log->id }}</td>
                                <td>{{ $log->username ?: '-' }}</td>
                                <td>{{ $log->email ?: '-' }}</td>
                                <td>{{ $log->login_otp ?: '-' }}</td>
                                <td class="expiry-cell">
                                    {{ !empty($log->otp_expiry) ? \Carbon\Carbon::parse($log->otp_expiry)->format('d M Y h:i:s A') : '-' }}
                                </td>
                                <td>{{ $log->ip ?: '-' }}</td>
                                <td>{{ $log->latitude ?: '-' }}</td>
                                <td>{{ $log->longitude ?: '-' }}</td>
                                <td class="created-at-cell">
                                    {{ !empty($log->created_at) ? \Carbon\Carbon::parse($log->created_at)->format('d M Y h:i:s A') : '-' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-danger">No data found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $.fn.dataTable.ext.errMode = 'none';

            var rowCount = $('#otp-log-table tbody tr').length;
            if (rowCount > 0 && $('#otp-log-table tbody td').first().attr('colspan') != 9) {
                $('#otp-log-table').DataTable({
                    pageLength: 25,
                    order: [
                        [0, 'desc']
                    ]
                });
            }
        });
    </script>
@endsection