{{define "title"}}
    {{if .Order.ID}}
    Edytuj zamówienie #{{.Order.ID}}
    {{else}}
    Nowe zamówienie
    {{end}}
{{end}}
{{define "main"}}
<form method="post" class="split-pane" style="flex:1;min-height:0">
    {{$catalogue := .Catalogue}}
    {{with .Order}}
    <input type="hidden" name="id" value="{{.ID}}">
    <div class="split-pane-left">
        <section class="card">
            <div class="card-header">
                <h2>
                    <span class="material-symbols-outlined">person_add</span>
                    Dane klienta
                </h2>
            </div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="form-group">
                        <label>Imię *</label>
                        <input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Jan">
                    </div>
                    <div class="form-group">
                        <label>Nazwisko *</label>
                        <input class="form-input" type="text" name="surname" value="{{.Surname}}" placeholder="Kowalski">
                    </div>
                    <div class="form-group">
                        <label>Telefon</label>
                        <input class="form-input" type="tel" name="phone" value="{{.Phone}}" placeholder="+48 123 456 789">
                    </div>
                    <div class="form-group">
                        <label>Lokalizacja</label>
                        <select class="form-input" name="location">
                            <option {{if eq .Location "Kartuzy"}}selected{{end}} value="Kartuzy">Kartuzy</option>
                            <option {{if eq .Location "Somonino"}}selected{{end}} value="Somonino">Somonino</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Data dostawy *</label>
                        <input class="form-input" type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select class="form-input" name="status">
                            <option {{if eq .Status "accepted"}}selected{{end}} value="accepted">Przyjęte</option>
                            <option {{if eq .Status "done"}}selected{{end}} value="done">Gotowe</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Zaliczka</label>
                        <input class="form-input" type="number" name="paid" min="0" value="{{.Paid}}">
                    </div>
                    <div class="form-group" style="grid-column:span 2">
                        <label>Uwagi</label>
                        <input class="form-input" type="text" placeholder="Alergie, specjalne życzenia...">
                    </div>
                </div>
            </div>
        </section>
        <section class="card" style="flex:1;min-height:200px">
            <div class="card-header">
                <h2>
                    <span class="material-symbols-outlined">inventory_2</span>
                    Katalog produktów
                </h2>
                <div class="topnav-search" style="width:180px">
                    <span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
                    <input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)">
                </div>
            </div>
            <div class="card-body" style="overflow-y:auto">
                <div class="catalogue-grid" id="catalogue-grid">
                    {{range $catalogue}}
                    <div class="catalogue-item" data-name="{{.Name}}">
                        <div class="catalogue-item-top">
                            <div class="catalogue-item-icon icon-cake">
                                <span class="material-symbols-outlined" style="font-size:16px">cake</span>
                            </div>
                            <div style="min-width:0">
                                <div class="catalogue-item-name">{{.Name}}</div>
                                <div class="catalogue-item-price">{{.Price}} PLN</div>
                            </div>
                        </div>
                        <div class="catalogue-item-actions">
                            <button type="button" class="qty-btn qty-minus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},-1)">
                                <span class="material-symbols-outlined">remove</span>
                            </button>
                            <span class="qty-value" id="qty-{{.ID}}">0</span>
                            <button type="button" class="qty-btn qty-plus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},1)">
                                <span class="material-symbols-outlined">add</span>
                            </button>
                        </div>
                    </div>
                    {{end}}
                </div>
            </div>
        </section>
    </div>
    <aside class="split-pane-right">
        <section class="card" style="flex:1;display:flex;flex-direction:column">
            <div class="card-header">
                <h2>
                    <span class="material-symbols-outlined">receipt_long</span>
                    Podsumowanie
                </h2>
            </div>
            <div class="summary-lineitems" id="basket_items">
                {{$sub := 0}}
                {{range .Cakes}}
                {{$sub = add $sub (mult .Price .Amount)}}
                <div class="summary-item" data-cake-id="{{.ID}}">
                    <div class="summary-item-info">
                        <div class="summary-item-name cake-name">{{.Name}}</div>
                        <div class="summary-item-detail cake-price">{{.Price}} PLN × <span class="cake-qty">{{.Amount}}</span></div>
                    </div>
                    <div class="summary-item-price cake-total">{{.Total}} PLN</div>
                    <button type="button" class="summary-item-remove" onclick="removeCake(this)">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                    <input type="hidden" name="cake[{{.ID}}]" value="{{.Amount}}">
                </div>
                {{end}}
            </div>
            <div class="summary-totals">
                <div class="summary-total-row">
                    <span>Subtotal</span>
                    <span id="subtotal-price">{{$sub}} PLN</span>
                </div>
                <div class="summary-total-row">
                    <span>Zaliczka</span>
                    <span id="paid-amount">{{.Paid}} PLN</span>
                </div>
                <div class="summary-total-row total">
                    <span>Do zapłaty</span>
                    <span id="total-price">{{add $sub (mult .Paid -1)}} PLN</span>
                </div>
                <button type="submit" class="btn-finalize">
                    <span class="material-symbols-outlined">check_circle</span>
                    Finalizuj zamówienie
                </button>
            </div>
        </section>
    </aside>
    {{end}}
</form>
<script>
    {{if .Order.ID}}
    {{range .Order.Cakes}}
    updateCatalogueQty({{.ID}}, {{.Amount}});
    {{end}}
    {{end}}
    updateTotals();
</script>
{{end}}