{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Historia zmian</h4>
            <p class="text-muted mb-0">Szczegółowy dziennik zmian w systemie</p>
        </div>
    </div>

    <!-- Filtry -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-2">
                    <select name="entity_type" class="form-select">
                        <option value="">Wszystkie typy</option>
                        <option value="user" {if $filters.entity_type == 'user'}selected{/if}>Użytkownicy</option>
                        <option value="device" {if $filters.entity_type == 'device'}selected{/if}>Urządzenia</option>
                        <option value="playlist" {if $filters.entity_type == 'playlist'}selected{/if}>Playlisty</option>
                        <option value="note" {if $filters.entity_type == 'note'}selected{/if}>Notatki</option>
                        <option value="settings" {if $filters.entity_type == 'settings'}selected{/if}>Ustawienia</option>
                        <option value="auth" {if $filters.entity_type == 'auth'}selected{/if}>Autoryzacja</option>
                        <option value="admin" {if $filters.entity_type == 'admin'}selected{/if}>Administracja</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="action" class="form-select">
                        <option value="">Wszystkie akcje</option>
                        <option value="create" {if $filters.action == 'create'}selected{/if}>Utworzenie</option>
                        <option value="update" {if $filters.action == 'update'}selected{/if}>Aktualizacja</option>
                        <option value="delete" {if $filters.action == 'delete'}selected{/if}>Usunięcie</option>
                        <option value="clone" {if $filters.action == 'clone'}selected{/if}>Klonowanie</option>
                        <option value="block" {if $filters.action == 'block'}selected{/if}>Blokada</option>
                        <option value="unblock" {if $filters.action == 'unblock'}selected{/if}>Odblokowanie</option>
                        <option value="activate" {if $filters.action == 'activate'}selected{/if}>Aktywacja</option>
                        <option value="deactivate" {if $filters.action == 'deactivate'}selected{/if}>Dezaktywacja</option>
                        <option value="login" {if $filters.action == 'login'}selected{/if}>Logowanie</option>
                        <option value="logout" {if $filters.action == 'logout'}selected{/if}>Wylogowanie</option>
                        <option value="password_reset" {if $filters.action == 'password_reset'}selected{/if}>Reset hasła</option>
                        <option value="password_changed" {if $filters.action == 'password_changed'}selected{/if}>Zmiana hasła</option>
                        <option value="copy" {if $filters.action == 'copy'}selected{/if}>Kopiowanie</option>
                        <option value="move" {if $filters.action == 'move'}selected{/if}>Przeniesienie</option>
                        <option value="pin" {if $filters.action == 'pin'}selected{/if}>Przypięcie</option>
                        <option value="unpin" {if $filters.action == 'unpin'}selected{/if}>Odpięcie</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="user_id" class="form-select">
                        <option value="">Wszyscy użytkownicy</option>
                        {foreach $users as $user}
                        <option value="{$user.id}" {if $filters.user_id == $user.id}selected{/if}>{$user.username}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="col-md-2">
                    <input type="date" name="date_from" class="form-control" value="{$filters.date_from|default:''}" placeholder="Od">
                </div>
                <div class="col-md-2">
                    <input type="date" name="date_to" class="form-control" value="{$filters.date_to|default:''}" placeholder="Do">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-secondary w-100"><i class="bi bi-filter me-1"></i>Filtruj</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista zmian -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width: 140px;">Data</th>
                            <th>Użytkownik</th>
                            <th>Typ</th>
                            <th>Obiekt</th>
                            <th>Akcja</th>
                            <th>Zmiany</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach $logs as $log}
                        <tr>
                            <td class="small">{$log.created_at|date_format:"%d.%m.%Y %H:%M"}</td>
                            <td>
                                <strong>{$log.username|default:'System'}</strong>
                                {if $log.ip_address}
                                <br><small class="text-muted">{$log.ip_address}</small>
                                {/if}
                            </td>
                            <td>
                                {if $log.entity_type == 'user'}
                                <span class="badge bg-primary"><i class="bi bi-person me-1"></i>Użytkownik</span>
                                {elseif $log.entity_type == 'device'}
                                <span class="badge bg-success"><i class="bi bi-tv me-1"></i>Urządzenie</span>
                                {elseif $log.entity_type == 'playlist'}
                                <span class="badge bg-warning text-dark"><i class="bi bi-list-ul me-1"></i>Playlista</span>
                                {elseif $log.entity_type == 'note'}
                                <span class="badge bg-secondary"><i class="bi bi-sticky me-1"></i>Notatka</span>
                                {elseif $log.entity_type == 'settings'}
                                <span class="badge bg-info"><i class="bi bi-gear me-1"></i>Ustawienia</span>
                                {elseif $log.entity_type == 'auth'}
                                <span class="badge bg-dark"><i class="bi bi-shield-lock me-1"></i>Autoryzacja</span>
                                {elseif $log.entity_type == 'admin'}
                                <span class="badge bg-danger"><i class="bi bi-sliders me-1"></i>Administracja</span>
                                {else}
                                <span class="badge bg-secondary">{$log.entity_type}</span>
                                {/if}
                            </td>
                            <td>
                                {if $log.entity_name}
                                {$log.entity_name}
                                {else}
                                <span class="text-muted">ID: {$log.entity_id}</span>
                                {/if}
                            </td>
                            <td>
                                {if $log.action == 'create'}
                                <span class="badge bg-success"><i class="bi bi-plus-circle me-1"></i>Utworzono</span>
                                {elseif $log.action == 'update'}
                                <span class="badge bg-info"><i class="bi bi-pencil me-1"></i>Zmieniono</span>
                                {elseif $log.action == 'delete'}
                                <span class="badge bg-danger"><i class="bi bi-trash me-1"></i>Usunięto</span>
                                {elseif $log.action == 'clone'}
                                <span class="badge bg-primary"><i class="bi bi-copy me-1"></i>Sklonowano</span>
                                {elseif $log.action == 'block'}
                                <span class="badge bg-warning text-dark"><i class="bi bi-lock me-1"></i>Zablokowano</span>
                                {elseif $log.action == 'unblock'}
                                <span class="badge bg-success"><i class="bi bi-unlock me-1"></i>Odblokowano</span>
                                {elseif $log.action == 'activate'}
                                <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Aktywowano</span>
                                {elseif $log.action == 'deactivate'}
                                <span class="badge bg-secondary"><i class="bi bi-x-circle me-1"></i>Dezaktywowano</span>
                                {elseif $log.action == 'login'}
                                <span class="badge bg-primary"><i class="bi bi-box-arrow-in-right me-1"></i>Logowanie</span>
                                {elseif $log.action == 'login_failed'}
                                <span class="badge bg-danger"><i class="bi bi-x-octagon me-1"></i>Nieudane logowanie</span>
                                {elseif $log.action == 'logout'}
                                <span class="badge bg-secondary"><i class="bi bi-box-arrow-left me-1"></i>Wylogowanie</span>
                                {elseif $log.action == 'password_reset'}
                                <span class="badge bg-warning text-dark"><i class="bi bi-key me-1"></i>Reset hasła</span>
                                {elseif $log.action == 'password_changed'}
                                <span class="badge bg-info"><i class="bi bi-key-fill me-1"></i>Zmiana hasła</span>
                                {elseif $log.action == 'copy'}
                                <span class="badge bg-info"><i class="bi bi-files me-1"></i>Skopiowano</span>
                                {elseif $log.action == 'move'}
                                <span class="badge bg-warning text-dark"><i class="bi bi-arrow-right-circle me-1"></i>Przeniesiono</span>
                                {elseif $log.action == 'pin'}
                                <span class="badge bg-primary"><i class="bi bi-pin-fill me-1"></i>Przypięto</span>
                                {elseif $log.action == 'unpin'}
                                <span class="badge bg-secondary"><i class="bi bi-pin me-1"></i>Odpięto</span>
                                {else}
                                <span class="badge bg-secondary">{$log.action}</span>
                                {/if}
                            </td>
                            <td>
                                {if $log.old_values_decoded || $log.new_values_decoded}
                                <button type="button" class="btn btn-sm btn-outline-secondary" 
                                        data-bs-toggle="modal" data-bs-target="#changesModal{$log.id}">
                                    <i class="bi bi-eye"></i> Szczegóły
                                </button>
                                
                                <!-- Modal ze zmianami -->
                                <div class="modal fade" id="changesModal{$log.id}" tabindex="-1">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Szczegóły zmiany</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    {if $log.old_values_formatted}
                                                    <div class="col-md-6">
                                                        <h6 class="text-danger"><i class="bi bi-dash-circle me-1"></i>Przed:</h6>
                                                        <pre class="bg-dark text-light p-3 rounded small" style="max-height: 400px; overflow: auto;">{$log.old_values_formatted|escape}</pre>
                                                    </div>
                                                    {/if}
                                                    {if $log.new_values_formatted}
                                                    <div class="col-md-6">
                                                        <h6 class="text-success"><i class="bi bi-plus-circle me-1"></i>Po:</h6>
                                                        <pre class="bg-dark text-light p-3 rounded small" style="max-height: 400px; overflow: auto;">{$log.new_values_formatted|escape}</pre>
                                                    </div>
                                                    {/if}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {else}
                                <span class="text-muted">-</span>
                                {/if}
                            </td>
                        </tr>
                        {foreachelse}
                        <tr>
                            <td colspan="6" class="text-center py-4 text-muted">Brak wpisów w dzienniku</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 $filters.entity_type}&entity_type={$filters.entity_type}{/if}{if $filters.action}&action={$filters.action}{/if}{if $filters.user_id}&user_id={$filters.user_id}{/if}{if $filters.date_from}&date_from={$filters.date_from}{/if}{if $filters.date_to}&date_to={$filters.date_to}{/if}"><i class="bi bi-chevron-left"></i></a>
                    </li>
                    {foreach $pagination.pages as $p}
                        {if $p === '...'}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        {else}
                        <li class="page-item{if $p == $pagination.current_page} active{/if}">
                            <a class="page-link" href="?page={$p}{if $filters.entity_type}&entity_type={$filters.entity_type}{/if}{if $filters.action}&action={$filters.action}{/if}{if $filters.user_id}&user_id={$filters.user_id}{/if}{if $filters.date_from}&date_from={$filters.date_from}{/if}{if $filters.date_to}&date_to={$filters.date_to}{/if}">{$p}</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 $filters.entity_type}&entity_type={$filters.entity_type}{/if}{if $filters.action}&action={$filters.action}{/if}{if $filters.user_id}&user_id={$filters.user_id}{/if}{if $filters.date_from}&date_from={$filters.date_from}{/if}{if $filters.date_to}&date_to={$filters.date_to}{/if}"><i class="bi bi-chevron-right"></i></a>
                    </li>
                </ul>
            </nav>
        </div>
        {/if}
    </div>
</div>
{/block}
