{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Logi aplikacji</h4>
            <p class="text-muted mb-0">Historia akcji użytkowników</p>
        </div>
        <button type="button" class="btn btn-outline-danger" id="clearLogsBtn">
            <i class="bi bi-trash me-1"></i>Wyczyść stare logi
        </button>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link active" href="{$baseUrl}/admin/logs">
                <i class="bi bi-journal-text me-1"></i>Logi aplikacji
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{$baseUrl}/admin/logs/api">
                <i class="bi bi-cloud-arrow-down me-1"></i>Logi API
            </a>
        </li>
    </ul>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-8">
                    <select name="user_id" class="form-select">
                        <option value="">Wszyscy użytkownicy</option>
                        {foreach $users as $user}
                        <option value="{$user.id}" {if $filterUserId == $user.id}selected{/if}>{$user.username}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-secondary w-100">
                        <i class="bi bi-filter me-1"></i>Filtruj
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Logs Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Użytkownik</th>
                            <th>Akcja</th>
                            <th>Szczegóły</th>
                            <th>IP</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $logs as $log}
                        <tr>
                            <td>
                                <span class="text-nowrap">{$log.created_at|date_format:"%d.%m.%Y"}</span>
                                <br><small class="text-muted">{$log.created_at|date_format:"%H:%M:%S"}</small>
                            </td>
                            <td>{$log.username|default:'<span class="text-muted">System</span>'}</td>
                            <td>
                                <span class="badge bg-{$log.badge_class|default:'info'}">{$log.action}</span>
                            </td>
                            <td>
                                {if $log.details}
                                <small>{$log.details|truncate:80}</small>
                                {else}
                                <span class="text-muted">-</span>
                                {/if}
                            </td>
                            <td><code>{$log.ip}</code></td>
                        </tr>
                        {foreachelse}
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="text-muted mb-3">
                                    <i class="bi bi-journal" style="font-size: 3rem;"></i>
                                </div>
                                <p class="mb-0">Brak logów</p>
                            </td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>

        {if $pagination.total_pages > 1}
        <div class="card-footer">
            <nav>
                <ul class="pagination pagination-sm mb-0 justify-content-center">
                    <li class="page-item{if !$pagination.has_prev} disabled{/if}">
                        <a class="page-link" href="?page={$pagination.current_page - 1}{if $filterUserId}&user_id={$filterUserId}{/if}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                    {foreach $pagination.pages as $page}
                        {if $page === '...'}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        {else}
                        <li class="page-item{if $page == $pagination.current_page} active{/if}">
                            <a class="page-link" href="?page={$page}{if $filterUserId}&user_id={$filterUserId}{/if}">{$page}</a>
                        </li>
                        {/if}
                    {/foreach}
                    <li class="page-item{if !$pagination.has_next} disabled{/if}">
                        <a class="page-link" href="?page={$pagination.current_page + 1}{if $filterUserId}&user_id={$filterUserId}{/if}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        {/if}
    </div>
</div>

<!-- Hidden form -->
<form id="clearLogsForm" method="post" action="{$baseUrl}/admin/logs/clear" style="display:none;">
    <input type="hidden" name="csrf_token" value="{$csrfToken}">
    <input type="hidden" name="days" id="clearLogsDays">
</form>
{/block}

{block name="scripts"}
{literal}
<script>
(function() {
    var swalConfig = {
        background: '#1a1d21',
        color: '#e1e1e1',
        confirmButtonColor: '#0d6efd',
        cancelButtonColor: '#6c757d'
    };

    document.getElementById('clearLogsBtn').addEventListener('click', function() {
        Swal.fire({
            title: 'Wyczyść stare logi',
            html: '<p>Usuń logi starsze niż:</p>' +
                '<div class="input-group">' +
                '<input type="number" id="swal-days" class="form-control" value="30" min="1" max="365">' +
                '<span class="input-group-text">dni</span>' +
                '</div>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Wyczyść',
            cancelButtonText: 'Anuluj',
            confirmButtonColor: '#dc3545',
            background: swalConfig.background,
            color: swalConfig.color,
            preConfirm: function() {
                var days = document.getElementById('swal-days').value;
                if (!days || days < 1 || days > 365) {
                    Swal.showValidationMessage('Podaj liczbę dni (1-365)');
                    return false;
                }
                return days;
            }
        }).then(function(result) {
            if (result.isConfirmed) {
                document.getElementById('clearLogsDays').value = result.value;
                document.getElementById('clearLogsForm').submit();
            }
        });
    });
})();
</script>
{/literal}
{/block}
