{block content}

<div class="platno detail">
    <header class="lista">
        <div class="detail-identita">
            <div class="detail-prechod">
                <a n:if="$predchozi" n:href="view id: $predchozi" class="detail-sipka" aria-label="Předchozí obvod">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5 8 12l6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </a>
                <span n:if="!$predchozi" class="detail-sipka is-disabled" aria-disabled="true" aria-label="Předchozí obvod není">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5 8 12l6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </span>
                <span class="detail-cislo">{$obvod->CISLO}</span>
                <a n:if="$dalsi" n:href="view id: $dalsi" class="detail-sipka" aria-label="Další obvod">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.5 16 12l-6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </a>
                <span n:if="!$dalsi" class="detail-sipka is-disabled" aria-disabled="true" aria-label="Další obvod není">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.5 16 12l-6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </span>
            </div>
            <div>
                <h1 class="lista-nadpis">{$obvod->NAZEV}</h1>
                <p class="lista-popis">Skupina {$obvod->SKUPINA}</p>
            </div>
        </div>
        <div class="akce">
            <a n:href=":Mapa: obvod:$obvod->CISLO" class="tlacitko">Mapa</a>
            <button n:if="count($otevrene) === 0" type="button" class="tlacitko is-aktivni" data-bs-toggle="modal" data-bs-target="#modalPridelit">Přidělit</button>
            <button n:if="count($otevrene) > 0" type="button" class="tlacitko" data-bs-toggle="modal" data-bs-target="#modalVratit">Vrátit</button>
            <a n:if="$jeAdmin ?? false" n:href="hranice id: $obvod->ID" class="tlacitko">Upravit hranice</a>
        </div>
    </header>

    <div class="detail-telo">
        <section class="panel detail-mapa">
            <h2>Náhled</h2>
            <div id="obvod-nahled"
                data-obvod="{$obvod->CISLO}"
                data-geojson="{link :Mapa:geojson}"></div>
        </section>

        <section class="panel detail-zaznamy">
            <h2>Záznamy</h2>
            <p class="prazdno" n:if="count($zaznamy) === 0">Tento obvod zatím nemá žádný záznam.</p>
            <div class="tabulka-obal" n:if="count($zaznamy) > 0">
                <table class="tabulka">
                    <thead>
                        <tr>
                            <th scope="col">Zvěstovatel</th>
                            <th scope="col">Přiděleno</th>
                            <th scope="col">Vráceno</th>
                            <th scope="col">Akce</th>
                        </tr>
                    </thead>
                    <tbody>
                    {foreach $zaznamy as $zaznam}
                        <tr>
                            <td data-popisek="Zvěstovatel">{$zaznam->JMENO}</td>
                            <td data-popisek="Přiděleno">{date_format($zaznam->VYDANO, 'd.m.Y')}</td>
                            <td data-popisek="Vráceno">{if $zaznam->VRACENO}{date_format($zaznam->VRACENO, 'd.m.Y')}{else}—{/if}</td>
                            <td class="bunka-akce" data-popisek="Akce">
                                <div class="akce-radek">
                                    <button type="button" class="tlacitko" data-bs-toggle="modal" data-bs-target="#modalUpravit" data-id="{$zaznam->ID}" data-jmeno="{$zaznam->JMENO}" data-vydano="{date_format($zaznam->VYDANO, 'Y-m-d')}" data-vraceno="{if $zaznam->VRACENO}{date_format($zaznam->VRACENO, 'Y-m-d')}{/if}">Upravit</button>
                                    {form "smazat-$zaznam->ID"}
                                        <button n:name="send" class="tlacitko tlacitko-nebezpeci" onclick="return confirm('Smazat záznam?')">Smazat</button>
                                    {/form}
                                </div>
                            </td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<div n:if="count($otevrene) === 0" class="modal fade" id="modalPridelit" tabindex="-1" aria-labelledby="modalPridelitLabel" aria-hidden="true" data-show-errors="{if $presenter['pridelitForm']->hasErrors()}1{else}0{/if}">
    <div class="modal-dialog">
        <div class="modal-content">
            <form n:name="pridelitForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalPridelitLabel">Přidělit obvod</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div>
                    <div class="mb-2">
                        <label n:name="zvestovatel" class="form-label">Zvěstovatel</label>
                        <div class="naseptavac" data-naseptavac>
                            <input n:name="zvestovatel" class="form-control" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="naseptavac-nabidka">
                            <div id="naseptavac-nabidka" class="naseptavac-nabidka" role="listbox" hidden></div>
                        </div>
                        <div class="form-text">Začněte psát jméno. Když v seznamu není, uloží se jako nový zvěstovatel.</div>
                    </div>
                    <div>
                        <label n:name="datum" class="form-label">Datum přidělení</label>
                        <input n:name="datum" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button n:name="send" class="tlacitko is-aktivni">Přidělit</button>
                    <button type="button" class="tlacitko tlacitko-zrusit" data-bs-dismiss="modal">Zrušit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div n:if="count($otevrene) > 0" class="modal fade" id="modalVratit" tabindex="-1" aria-labelledby="modalVratitLabel" aria-hidden="true" data-show-errors="{if $presenter['vratitForm']->hasErrors()}1{else}0{/if}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalVratitLabel">Vrátit obvod</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
            </div>
            <form n:name="vratitForm">
                <div class="modal-body">
                    <div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div>
                    <div class="mb-2">
                        <label n:name="zaznam" class="form-label">Záznam</label>
                        <select n:name="zaznam" class="form-select">
                            <option n:foreach="$otevrene as $otevreny" n:name="zaznam:$otevreny->ID">
                                {$otevreny->JMENO} (přiděleno {date_format($otevreny->VYDANO, 'd.m.Y')})
                            </option>
                        </select>
                    </div>
                    <div>
                        <label n:name="datum" class="form-label">Datum vrácení</label>
                        <input n:name="datum" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button n:name="send" class="tlacitko is-aktivni">Vrátit</button>
                    <button type="button" class="tlacitko tlacitko-zrusit" data-bs-dismiss="modal">Zrušit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalUpravit" tabindex="-1" aria-labelledby="modalUpravitLabel" aria-hidden="true" data-show-errors="{if $presenter['upravitForm']->hasErrors()}1{else}0{/if}">
    <div class="modal-dialog">
        <div class="modal-content">
            <form n:name="upravitForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalUpravitLabel">Upravit záznam</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div>
                    <input n:name="id">
                    <div class="mb-2">
                        <label n:name="zvestovatel" class="form-label">Zvěstovatel</label>
                        <div class="naseptavac" data-naseptavac>
                            <input n:name="zvestovatel" class="form-control" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="naseptavac-nabidka-upravit">
                            <div id="naseptavac-nabidka-upravit" class="naseptavac-nabidka" role="listbox" hidden></div>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label n:name="vydano" class="form-label">Datum přidělení</label>
                        <input n:name="vydano" class="form-control">
                    </div>
                    <div>
                        <label n:name="vraceno" class="form-label">Datum vrácení</label>
                        <input n:name="vraceno" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button n:name="send" class="tlacitko is-aktivni">Uložit</button>
                    <button type="button" class="tlacitko tlacitko-zrusit" data-bs-dismiss="modal">Zrušit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="application/json" id="zvestovatele-data">{$zvestovateleJson|noescape}</script>
<script src="{$basePath}/js/obvod-nahled.js?v={$appVersion ?? '1.0'}"></script>
<script src="{$basePath}/js/naseptavac.js?v={$appVersion ?? '1.0'}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.modal[data-show-errors="1"]').forEach(function (el) {
        bootstrap.Modal.getOrCreateInstance(el).show();
    });

    var vratitMin = {
        {foreach $otevrene as $otevreny}{$otevreny->ID}: {date_format($otevreny->VYDANO, 'Y-m-d')},{/foreach}
    };
    var zaznam = document.getElementById('frm-vratitForm-zaznam');
    var datum = document.getElementById('frm-vratitForm-datum');
    if (!zaznam || !datum) {
        return;
    }
    var nastavMin = function () {
        datum.min = vratitMin[zaznam.value] || '';
    };
    zaznam.addEventListener('change', nastavMin);
    nastavMin();
});

var modalUpravit = document.getElementById('modalUpravit');
if (modalUpravit) {
    modalUpravit.addEventListener('show.bs.modal', function (event) {
        var btn = event.relatedTarget;
        var form = modalUpravit.querySelector('form');
        if (!btn || !btn.dataset.id || !form) {
            return;
        }
        form.querySelector('[name="id"]').value = btn.dataset.id;
        form.querySelector('[name="zvestovatel"]').value = btn.dataset.jmeno || '';
        form.querySelector('[name="vydano"]').value = btn.dataset.vydano || '';
        form.querySelector('[name="vraceno"]').value = btn.dataset.vraceno || '';
    });
}
</script>