{% load money %}

{# Clone from other years #}
<form data-liveview-function="clone_planned_expenses"
      data-action="submit->page#run"
      class="flex items-center gap-2 mb-4">
    <input type="hidden" name="year" value="{{ year }}">
    <select name="clone_pe_source" class="select select-bordered select-sm" {% if not clone_years %}disabled{% endif %}>
        {% for cy in clone_years %}
            <option value="{{ cy }}">{{ cy }}</option>
        {% endfor %}
    </select>
    <button type="submit" class="btn btn-outline btn-sm" {% if not clone_years %}disabled{% endif %}>Clone</button>
</form>

{% for md in months_data %}
    {% if md.items %}
    <div class="card bg-base-100 shadow-sm mb-4">
        <div class="card-body p-4">
            <h3 class="card-title text-lg mb-2">{{ md.label }}</h3>
            <div class="overflow-x-auto">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Concept</th>
                            <th class="text-right">Amount</th>
                            <th class="text-right w-16">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in md.items %}
                            {% if editing_id == item.id %}
                            <tr>
                                <td colspan="3" class="p-0">
                                    <form data-liveview-function="save_planned_expense"
                                          data-action="submit->page#run"
                                          class="flex flex-wrap gap-2 items-center p-2">
                                        <input type="hidden" name="pe_id" value="{{ item.id }}">
                                        <input type="hidden" name="year" value="{{ year }}">
                                        <select name="pe_month" class="select select-bordered select-sm w-28">
                                            {% for mdata in months_data %}
                                                <option value="{{ mdata.month }}" {% if mdata.month == md.month %}selected{% endif %}>{{ mdata.label }}</option>
                                            {% endfor %}
                                        </select>
                                        <input type="text" name="pe_concept" value="{{ item.concept }}" class="input input-bordered input-sm flex-[2] min-w-[8rem]" required>
                                        <input type="text" name="pe_amount" inputmode="decimal" value="{{ item.amount|money }}" class="input input-bordered input-sm w-24 text-right" required>
                                        <button type="submit" class="btn btn-primary btn-sm">Save</button>
                                        <a data-liveview-function="cancel_edit_planned_expense"
                                           data-action="click->page#run"
                                           data-data-year="{{ year }}"
                                           class="btn btn-ghost btn-sm">Cancel</a>
                                    </form>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td>{{ item.concept }}</td>
                                <td class="text-right whitespace-nowrap">{{ item.amount|money }} €</td>
                                <td class="text-right">
                                    <div class="dropdown dropdown-end">
                                        <label tabindex="0" class="btn btn-ghost btn-sm">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"/>
                                            </svg>
                                        </label>
                                        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow z-50">
                                            <li>
                                                <a data-liveview-function="edit_planned_expense"
                                                   data-action="click->page#run"
                                                   data-data-id="{{ item.id }}"
                                                   data-data-year="{{ year }}">Edit</a>
                                            </li>
                                            <li>
                                                <a data-liveview-function="delete_planned_expense"
                                                   data-action="click->page#run"
                                                   data-data-id="{{ item.id }}"
                                                   data-data-year="{{ year }}"
                                                   class="text-error">Delete</a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                    <tfoot>
                        <tr class="font-bold">
                            <td>Total</td>
                            <td class="text-right">{{ md.total|money }} €</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
{% endfor %}

{% if grand_total == 0 %}
<div class="card bg-base-100 shadow-sm mb-4">
    <div class="card-body">
        <p class="text-base-content/50 text-center">No planned expenses</p>
    </div>
</div>
{% else %}
<div class="card card-total text-white shadow-sm mb-4">
    <div class="card-body p-4 flex-row justify-between items-center">
        <span class="text-lg font-bold">Annual total</span>
        <span class="text-lg font-bold">{{ grand_total|money }} €</span>
    </div>
</div>
{% endif %}

<form data-liveview-function="add_planned_expense"
      data-action="submit->page#run"
      class="flex flex-wrap gap-2 items-end mt-4">
    <input type="hidden" name="year" value="{{ year }}">
    <div class="form-control w-28">
        <label class="label py-1"><span class="label-text text-xs">Month</span></label>
        <select name="pe_month" class="select select-bordered select-sm w-full" required>
            {% for md in months_data %}
                <option value="{{ md.month }}">{{ md.label }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-control flex-[2] min-w-[8rem]">
        <label class="label py-1"><span class="label-text text-xs">Concept</span></label>
        <input type="text" name="pe_concept" class="input input-bordered input-sm w-full" placeholder="Car insurance, holiday..." required>
    </div>
    <div class="form-control flex-1 min-w-[6rem]">
        <label class="label py-1"><span class="label-text text-xs">Amount</span></label>
        <input type="text" name="pe_amount" inputmode="decimal" class="input input-bordered input-sm w-full" placeholder="0,00" required>
    </div>
    <button type="submit" class="btn btn-primary btn-sm">Add</button>
</form>