{block content}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.6/css/dataTables.bootstrap5.min.css">

<div class="container-fluid py-3">
    <div class="mb-3">
        <h2 class="h3 mb-1">Uživatelé</h2>
        <p class="text-muted small mb-0">
            Tabulka <code>LOGIN</code> v <code>kufrik_master</code>. Každý uživatel míří na databázi a firmu. Noví uživatelé mají vždy roli User.
        </p>
    </div>

    <div class="card border-0 shadow-sm p-3 bg-white mb-4">
        <h3 class="h6 text-muted mb-2">Přidat uživatele</h3>
        <form n:name="addUzivatelForm" class="row g-3 align-items-end">
            <div class="col-12" n:if="$form->hasErrors()">
                <div class="alert alert-danger mb-0">
                    <ul class="mb-0 ps-3">
                        <li n:foreach="$form->errors as $error">{$error}</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-2">
                <label n:name="database" class="form-label">Databáze</label>
                <select n:name="database" class="form-select" id="addUserDatabase"></select>
            </div>
            <div class="col-md-3">
                <label n:name="firmaId" class="form-label">Firma</label>
                <select n:name="firmaId" class="form-select" id="addUserFirma"></select>
            </div>
            <div class="col-md-3">
                <label n:name="email" class="form-label">E-mail</label>
                <input n:name="email" class="form-control" placeholder="jan@firma.cz">
            </div>
            <div class="col-md-2">
                <label n:name="password" class="form-label">Heslo</label>
                <input n:name="password" class="form-control">
            </div>
            <div class="col-md-2">
                <label n:name="passwordVerify" class="form-label">Heslo znovu</label>
                <input n:name="passwordVerify" class="form-control">
            </div>
            <div class="col-12 col-md-auto">
                <button n:name="send" class="btn btn-primary">
                    <i class="bi bi-person-plus me-1"></i>Přidat
                </button>
            </div>
        </form>
        <p class="small text-muted mt-2 mb-0">
            Po změně databáze obnovte stránku s parametrem <code>?db=...</code>, aby se načetly firmy, nebo přidejte firmu nejdřív v agendě Firmy.
        </p>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4 col-lg-3">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-primary border-4">
                <div class="text-muted small">Uživatelů</div>
                <div class="fs-4 fw-bold text-primary">{$celkemCount} ks</div>
            </div>
        </div>
        <div class="col-md-4 col-lg-3">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-success border-4">
                <div class="text-muted small">Aktivní</div>
                <div class="fs-4 fw-bold text-success">{$aktivniCount} ks</div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 p-3 bg-white">
        <div class="table-responsive">
            <table class="table table-hover table-cards align-middle w-100" id="uzivatele-table">
                <thead class="table-light">
                    <tr>
                        <th>E-mail</th>
                        <th>Databáze</th>
                        <th>Firma</th>
                        <th class="text-center">Role</th>
                        <th>Poslední přihlášení</th>
                        <th class="text-center">Stav</th>
                        <th class="text-end" data-orderable="false">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $uzivatele as $u}
                        <tr n:class="!$u->AKTIVNI ? 'table-light text-muted'">
                            <td data-label="E-mail" class="fw-bold">
                                <a href="mailto:{$u->EMAIL}" class="text-decoration-none">{$u->EMAIL}</a>
                            </td>
                            <td data-label="Databáze">{$u->DATABASE}</td>
                            <td data-label="Firma">
                                {$u->FIRMA_NAZEV ?: ('#' . $u->FIRMA_ID)}
                                <span class="small text-muted">(#{$u->FIRMA_ID})</span>
                            </td>
                            <td data-label="Role" class="text-center">
                                {if $u->IS_ADMIN}
                                    <span class="badge bg-dark">Admin</span>
                                {else}
                                    <span class="badge bg-light text-dark border">User</span>
                                {/if}
                            </td>
                            <td data-label="Poslední přihlášení">
                                {if $u->POSLEDNI_PRIHLASENI}
                                    {$u->POSLEDNI_PRIHLASENI|date:'d.m.Y H:i'}
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td data-label="Stav" class="text-center">
                                {if $u->AKTIVNI}
                                    <span class="badge bg-success">Aktivní</span>
                                {else}
                                    <span class="badge bg-secondary">Neaktivní</span>
                                {/if}
                            </td>
                            <td class="text-end text-nowrap cell-actions">
                                <button type="button"
                                        class="btn btn-sm btn-outline-primary js-user-edit"
                                        data-login-id="{$u->ID}"
                                        data-email="{$u->EMAIL}"
                                        data-label="{$u->EMAIL}"
                                        title="Upravit e-mail / heslo">
                                    <i class="bi bi-person-gear"></i>
                                </button>
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="userEditModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form n:name="userForm">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-person-gear me-1"></i>Uživatel — <span id="userEditLabel"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
                </div>
                <div class="modal-body">
                    <input n:name="loginId">
                    <div class="mb-3">
                        <label n:name="email" class="form-label">E-mail / přihlašovací jméno</label>
                        <input n:name="email" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label n:name="password" class="form-label">Nové heslo</label>
                        <input n:name="password" class="form-control" placeholder="ponechte prázdné = beze změny">
                    </div>
                    <div class="mb-0">
                        <label n:name="passwordVerify" class="form-label">Heslo znovu</label>
                        <input n:name="passwordVerify" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zrušit</button>
                    <button n:name="send" class="btn btn-primary">Uložit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/datatables.net@1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.6/js/dataTables.bootstrap5.min.js"></script>

{syntax off}
<script>
$(document).ready(function() {
    $('#uzivatele-table').DataTable({
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/cs.json' },
        order: [[0, 'asc']],
        pageLength: 25,
        autoWidth: false
    });

    const userModalEl = document.getElementById('userEditModal');
    const userModal = userModalEl ? new bootstrap.Modal(userModalEl) : null;
    const $userForm = $('form[id$="-userForm"], #frm-userForm').first();

    $(document).on('click', '.js-user-edit', function() {
        $userForm.find('[name="loginId"]').val($(this).data('login-id'));
        $userForm.find('[name="email"]').val($(this).data('email'));
        $userForm.find('[name="password"]').val('');
        $userForm.find('[name="passwordVerify"]').val('');
        $('#userEditLabel').text($(this).data('label'));
        if (userModal) {
            userModal.show();
        }
    });

    // Při změně databáze v add form načti firmy přes redirect s ?db=
    $('#addUserDatabase').on('change', function() {
        const db = $(this).val();
        if (db) {
            const url = new URL(window.location.href);
            url.searchParams.set('db', db);
            window.location.href = url.toString();
        }
    });
});
</script>
{/syntax}