{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">Firmy</h2>
        <p class="text-muted small mb-0">
            Tabulka <code>FIRMA</code> ve vybrané datové databázi.
        </p>
    </div>

    <div class="card border-0 shadow-sm p-3 bg-white mb-4">
        <div class="mb-2" n:if="$presenter['addFirmaForm']->hasErrors()">
            <div class="alert alert-danger mb-0">
                <ul class="mb-0 ps-3">
                    <li n:foreach="$presenter['addFirmaForm']->errors as $error">{$error}</li>
                </ul>
            </div>
        </div>

        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <form method="get" action="{link this}">
                    <label class="form-label" for="dbFilter">Databáze</label>
                    <select name="db" id="dbFilter" class="form-select" onchange="this.form.submit()">
                        <option n:foreach="$databases as $name => $label" value="{$name}" {if $selectedDb === $name}selected{/if}>{$label}</option>
                    </select>
                </form>
            </div>
            <div class="col-md-9">
                <form n:name="addFirmaForm" class="row g-2 align-items-end">
                    <div class="col-md-8">
                        <label n:name="firmaNazev" class="form-label">Název firmy / OSVČ</label>
                        <input n:name="firmaNazev" class="form-control" placeholder="např. Jan Novák">
                    </div>
                    <div class="col-md-4">
                        <button n:name="send" class="btn btn-primary w-100">
                            <i class="bi bi-plus-lg me-1"></i>Přidat
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <form n:name="sdfImportForm" class="d-none">
        <input n:name="loginId">
        <input n:name="sdf" accept=".sdf">
        <button n:name="send">Import</button>
    </form>

    <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">Firem v {$selectedDb}</div>
                <div class="fs-4 fw-bold text-primary">{$celkemCount} 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="firmy-table">
                <thead class="table-light">
                    <tr>
                        <th>Název</th>
                        <th class="text-center">ID</th>
                        <th>IČ / DIČ</th>
                        <th>Kontakt</th>
                        <th class="text-center">Uživatelů</th>
                        <th>SDF</th>
                        <th class="text-end" data-orderable="false">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $firmy as $firma}
                        <tr>
                            <td data-label="Název" class="fw-bold">
                                <i class="bi bi-building me-1 text-muted"></i>{$firma->NAZEV}
                            </td>
                            <td data-label="ID" class="text-center">{$firma->ID}</td>
                            <td data-label="IČ / DIČ">
                                {if $firma->IC || $firma->DIC}
                                    <div n:if="$firma->IC">IČ: {$firma->IC}</div>
                                    <div class="small text-muted" n:if="$firma->DIC">DIČ: {$firma->DIC}</div>
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td data-label="Kontakt">
                                {if $firma->EMAIL || $firma->TELEFON || $firma->MESTO}
                                    <div n:if="$firma->EMAIL">{$firma->EMAIL}</div>
                                    <div class="small text-muted" n:if="$firma->TELEFON">{$firma->TELEFON}</div>
                                    <div class="small text-muted" n:if="$firma->MESTO">{$firma->MESTO}</div>
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td data-label="Uživatelů" class="text-center">{$firma->USERS}</td>
                            <td data-label="SDF">
                                {if $firma->SDF_SOUBOR}
                                    <div class="fw-semibold">{$firma->SDF_SOUBOR}</div>
                                    <div class="small text-success" n:if="$firma->SDF_IMPORTOVANO">
                                        importováno {$firma->SDF_IMPORTOVANO|date:'d.m.Y H:i'}
                                    </div>
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td class="text-end text-nowrap cell-actions">
                                {if $firma->LOGIN_ID}
                                    <button type="button"
                                            class="btn btn-sm btn-success js-sdf-import"
                                            data-login-id="{$firma->LOGIN_ID}"
                                            data-firma="{$firma->NAZEV}"
                                            title="Import ze SDF (smaže data firmy)">
                                        <i class="bi bi-box-arrow-in-down me-1"></i>Import
                                    </button>
                                {else}
                                    <span class="small text-muted">Nejdřív založte uživatele</span>
                                {/if}
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        </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() {
    $('#firmy-table').DataTable({
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/cs.json' },
        order: [[0, 'asc']],
        pageLength: 25,
        autoWidth: false
    });

    const $importForm = $('form[id$="-sdfImportForm"], #frm-sdfImportForm').first();
    const $importLoginId = $importForm.find('[name="loginId"]');
    const $importFile = $importForm.find('input[type="file"]');

    $(document).on('click', '.js-sdf-import', function() {
        const firma = $(this).data('firma');
        if (!confirm('VAROVÁNÍ: Import ze SDF pro firmu ' + firma + ' SMAŽE všechna stávající data této firmy.\n\nOpravdu pokračovat?')) {
            return;
        }
        $importLoginId.val($(this).data('login-id'));
        $importFile.val('');
        $importFile.trigger('click');
    });

    $importFile.on('change', function() {
        if (this.files && this.files.length) {
            $importForm.trigger('submit');
        }
    });
});
</script>
{/syntax}