@extends('donamarmita-admin')

@section('title', 'Histórico de Logins')

@section('content')
<div class="right_col" role="main" style="min-height: 100vh;">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            {{-- Page Header --}}
            <div class="page-header">
                <div class="row">
                    <div class="col-md-8 col-sm-8" style="padding-left: 30px;">
                        <div class="page-title">
                            <h1><i class="fa fa-history text-primary"></i> Histórico de Logins</h1>
                            <p class="text-muted">Registo de todos os acessos ao sistema (frontend e backoffice)</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 text-right" style="padding-right: 35px;">
                        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#filtersModal">
                            <i class="fa fa-filter"></i> Filtros
                        </button>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            {{-- Quick Stats --}}
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $totalLogins }}</h4>
                                    <p>Total Logins</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-sign-in fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $todayLogins }}</h4>
                                    <p>Logins Hoje</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-calendar-day fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $backendLogins }}</h4>
                                    <p>Backoffice</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-lock fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <h4>{{ $uniqueUsers }}</h4>
                                    <p>Utilizadores Únicos</p>
                                </div>
                                <div class="col-4 text-right">
                                    <i class="fa fa-users fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Main Panel --}}
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <div class="row align-items-center">
                        <div class="col-md-6 blue">
                            <h3 class="mb-0"><i class="fa fa-clipboard-list"></i> Registos de Acesso</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="input-group" style="max-width: 300px;">
                                <input type="text" class="form-control" placeholder="Pesquisar..." id="searchInput">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    {{-- Active Filters --}}
                    @if(request()->hasAny(['user_id', 'type', 'date_from', 'date_to', 'device', 'browser']))
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="active-filters">
                                    <strong>Filtros ativos:</strong>

                                    @if(request('user_id') && $selectedUser)
                                        <span class="badge badge-primary">
                                            Utilizador:
                                            {{ $selectedUser->cli_first_name }} {{ $selectedUser->cli_last_name }}
                                        </span>
                                    @endif

                                    @if(request('type'))
                                        <span class="badge badge-info">
                                            Tipo: {{ request('type') === 'backend' ? 'Backoffice' : 'Frontend' }}
                                        </span>
                                    @endif

                                    @if(request('date_from'))
                                        <span class="badge badge-success">De: {{ request('date_from') }}</span>
                                    @endif

                                    @if(request('date_to'))
                                        <span class="badge badge-success">Até: {{ request('date_to') }}</span>
                                    @endif

                                    @if(request('device'))
                                        <span class="badge badge-secondary">
                                            Dispositivo: {{ ucfirst(request('device')) }}
                                        </span>
                                    @endif

                                    @if(request('browser'))
                                        <span class="badge badge-dark">
                                            Browser: {{ request('browser') }}
                                        </span>
                                    @endif

                                    <a href="{{ route('admin.users.login.logs') }}" class="btn btn-sm btn-outline-danger ml-2">
                                        <i class="fa fa-times"></i> Limpar
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- Table --}}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" 
                               id="loginLogsTable"
                               data-url="{{ route('admin.users.login.logs.data') }}">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Utilizador</th>
                                    <th>Tipo</th>
                                    <th>IP</th>
                                    <th>Browser & SO</th>
                                    <th>Dispositivo</th>
                                    <th>Data/Hora</th>
                                    <th class="text-center">Ações</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Filtros --}}
<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog" aria-labelledby="filtersModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="filtersModalLabel">
                    <i class="fa fa-filter"></i> Filtrar Registos de Login
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form action="{{ route('admin.users.login.logs') }}" method="GET">
                <div class="modal-body">
                    <div class="row">
                        {{-- Utilizador --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="user_id" class="font-weight-bold">Utilizador</label>
                                <select class="form-control" id="user_id" name="user_id">
                                    <option value="">Todos os utilizadores</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->cli_user_id }}"
                                            {{ request('user_id') == $user->cli_user_id ? 'selected' : '' }}>
                                            {{ $user->cli_first_name }} {{ $user->cli_last_name }}
                                            ({{ $user->cli_email }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Tipo --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="type" class="font-weight-bold">Tipo de Acesso</label>
                                <select class="form-control" id="type" name="type">
                                    <option value="">Todos os tipos</option>
                                    <option value="backend" {{ request('type') == 'backend' ? 'selected' : '' }}>Backoffice</option>
                                    <option value="frontend" {{ request('type') == 'frontend' ? 'selected' : '' }}>Frontend</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- Datas --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="date_from" class="font-weight-bold">Data Inicial</label>
                                <input type="date"
                                       class="form-control"
                                       id="date_from"
                                       name="date_from"
                                       value="{{ request('date_from') }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="date_to" class="font-weight-bold">Data Final</label>
                                <input type="date"
                                       class="form-control"
                                       id="date_to"
                                       name="date_to"
                                       value="{{ request('date_to') }}">
                            </div>
                        </div>
                    </div>

                    {{-- Device & Browser --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="device" class="font-weight-bold">Dispositivo</label>
                                <select class="form-control" id="device" name="device">
                                    <option value="">Todos os dispositivos</option>
                                    <option value="desktop" {{ request('device') == 'desktop' ? 'selected' : '' }}>Desktop</option>
                                    <option value="mobile" {{ request('device') == 'mobile' ? 'selected' : '' }}>Mobile</option>
                                    <option value="tablet" {{ request('device') == 'tablet' ? 'selected' : '' }}>Tablet</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="browser" class="font-weight-bold">Browser</label>
                                <select class="form-control" id="browser" name="browser">
                                    <option value="">Todos os browsers</option>
                                    @foreach($browsers as $browser)
                                        <option value="{{ $browser }}" {{ request('browser') == $browser ? 'selected' : '' }}>
                                            {{ $browser }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <a href="{{ route('admin.users.login.logs') }}" class="btn btn-secondary">Limpar Filtros</a>
                    <button type="submit" class="btn btn-primary">Aplicar Filtros</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Detalhes --}}
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">
                    <i class="fa fa-info-circle"></i> Detalhes do Login
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <strong>Utilizador:</strong>
                        <p id="detailUserName"></p>
                    </div>
                    <div class="col-md-6">
                        <strong>Data/Hora:</strong>
                        <p id="detailDateTime"></p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <strong>Endereço IP:</strong>
                        <p id="detailIP"></p>
                    </div>
                    <div class="col-md-6">
                        <strong>Localização:</strong>
                        <p id="detailLocation"></p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <strong>Browser:</strong>
                        <p id="detailBrowser"></p>
                    </div>
                    <div class="col-md-6">
                        <strong>Sistema Operativo:</strong>
                        <p id="detailPlatform"></p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <strong>Dispositivo:</strong>
                        <p id="detailDevice"></p>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@endsection

@push('styles')
<style>
    .user-info {
        display: flex;
        align-items: center;
    }
    .user-details {
        margin-left: 10px;
        line-height: 1.2;
    }
    .browser-info,
    .datetime-info {
        line-height: 1.3;
    }
    .device-badge {
        padding: 4px 8px;
        border-radius: 12px;
        background: #f8f9fa;
        font-size: 0.8em;
        display: inline-block;
    }
    .ip-address {
        background: #f8f9fa;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
    }
    .active-filters .badge {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .badge-pill {
        padding: 6px 12px;
    }
    
    .dataTables_processing {
        display: none !important;
    }

    /* Mantém o teu loader custom bonito */
    #dm-loader {
        position: fixed;              /* Fica sempre no ecrã */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centro absoluto */
        z-index: 99999;               /* Muito acima de tudo */
        background: rgba(255,255,255,0.7); /* Leve fundo difuso (opcional) */
        padding: 20px;
        border-radius: 8px;
        display: none;
    }

    #dm-loader img {
        width: 60px;
        height: 60px;
        animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>
@endpush

@push('scripts')
<script>
    $(function () {
        // Tooltips
        $('[data-toggle="tooltip"]').tooltip();

        // Live search on table
        $('#searchInput').on('keyup', function () {
            var value = $(this).val().toLowerCase();
            $('#loginLogsTable tbody tr').each(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });

        // Details modal
        $(document).on('click', '.view-details', function () {
            $('#detailUserName').text($(this).data('user-name'));
            $('#detailDateTime').text($(this).data('datetime'));
            $('#detailIP').text($(this).data('ip'));
            $('#detailLocation').text($(this).data('location'));
            $('#detailBrowser').text($(this).data('browser'));
            $('#detailPlatform').text($(this).data('platform'));
            $('#detailDevice').text($(this).data('device'));

            $('#detailsModal').modal('show');
        });

        // Date validation
        $('#date_from, #date_to').on('change', function () {
            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();

            if (dateFrom && dateTo && dateFrom > dateTo) {
                alert('A data inicial não pode ser superior à data final.');
                $(this).val('');
            }
        });
    });
    
    $(document).ready(function () {
        let loginLogsTable = $('#loginLogsTable')
            .on('processing.dt', function (e, settings, processing) {
                $('#dm-loader').toggle(processing);
            })
            .DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,

                ajax: {
                    url: $('#loginLogsTable').data('url')
                },

                language: {
                    url: '/vendor/datatables/Portuguese.json',
                    search: '',
                    processing: '',
                    searchPlaceholder: 'Pesquisar atividade...'
                },
                columns: [
                    { data: 'user', name: 'll_user_id', orderable: false, searchable: false },
                    { data: 'type', name: 'll_context' },
                    { data: 'ip', name: 'll_ip' },
                    { data: 'browser', name: 'll_browser' },
                    { data: 'device', name: 'll_device' },
                    { data: 'datetime', name: 'll_logged_at' },
                    { data: 'actions', orderable: false, searchable: false }
                ],

                columnDefs: [
                    { className: "text-center", targets: [1, 4, 5, 6] }
                ]
            });
    });
    
</script>
@endpush