create_edit_invoices.html

{% extends "layout/base.html" %}
{% block content %}
<h1 class="text-2xl font-bold mb-2">
    {% if estimate %}Factuur bewerken{% else %}Nieuwe factuur{% endif %}
</h1>
<div class="flex items-center justify-between mb-6">
    <nav class="text-sm text-gray-600 flex items-center space-x-2 font-semibold">
        <a href="/admin/dashboard" class="hover:underline font-medium">Startscherm</a>
        <span>/</span>
        <a href="/admin/invoices" class="hover:underline font-medium">Facturen</a>
        <span>/</span>
        <span class="text-blue-700 font-medium">
            {% if estimate %}Factuur bewerken{% else %}Nieuwe factuur{% endif %}
        </span>
    </nav>
    <button type="submit" form="estimate-form" class="bg-[#1F89D9] hover:bg-blue-800 text-white font-bold px-6 py-2 rounded-lg shadow flex items-center gap-2">
        <i class="lucide lucide-save"></i> Bewaar factuur
    </button>
</div>

<form method="POST" enctype="multipart/form-data" action="{% if invoice %}/admin/invoices/{{ invoice.nummer }}/edit{% else %}/admin/invoices/create{% endif %}" id="estimate-form">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Nieuwe klant button -->
        <div id="customer-card-container">
            <div class="bg-white rounded-xl shadow p-6 flex items-center min-h-[100px] relative">
                <button type="button" id="select-customer-btn" class="w-full flex items-center gap-4 text-left focus:outline-none">
                    <div class="rounded-full bg-gray-100 w-12 h-12 flex items-center justify-center text-2xl text-gray-400">
                        <i class="lucide lucide-user"></i>
                    </div>
                    <div>
                        <span class="font-semibold text-lg text-gray-700" id="selected-customer-label">
                            Nieuwe klant
                        </span>
                        <span class="text-red-500 ml-1">*</span>
                    </div>
                </button>
                <div id="klant-selector" class="absolute left-0 top-full mt-2 w-full z-20 bg-white border rounded-xl shadow-lg p-4 hidden">
                    <input type="text" id="klant-search" placeholder="Zoeken" class="w-full border rounded px-4 py-2 mb-2" autocomplete="off">
                    <div id="klant-dropdown" class="max-h-60 overflow-y-auto"></div>
                </div>
            </div>
        </div>
        <input type="hidden" name="klant" id="selected-customer-id" value="">
        <!-- Offerte datum, nummer, vervaldatum -->
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-semibold mb-1">Factuur Datum <span class="text-red-500">*</span></label>
                <div class="relative">
                    <input type="text" name="datum_display" id="datum_display" class="w-full border border-gray-300 rounded px-4 py-2 bg-gray-50 font-semibold text-gray-700"
                        value="{{ today_display }}" autocomplete="off" placeholder="DD-MM-YYYY">
                    <input type="hidden" name="datum" id="datum" value="{{ today }}">
                    <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <i class="lucide lucide-calendar"></i>
                    </span>
                </div>
            </div>
            <div>
                <label class="block font-semibold mb-1">Vervaldatum</label>
                <div class="relative">
                    <input type="text" name="vervaldatum_display" id="vervaldatum_display" class="w-full border border-gray-300 rounded px-4 py-2 bg-gray-50 font-semibold text-gray-700"
                        value="{{ vervaldatum_display }}" autocomplete="off" placeholder="DD-MM-YYYY">
                    <input type="hidden" name="vervaldatum" id="vervaldatum" value="{{ vervaldatum }}">
                    <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                        <i class="lucide lucide-calendar"></i>
                    </span>
                </div>
            </div>
            <div class="col-span-2">
                <label class="block font-semibold mb-1">Factuur nummer <span class="text-red-500">*</span></label>
                <input type="text" name="nummer" class="w-full border border-gray-300 rounded px-4 py-2 focus:outline-none bg-gray-50 font-semibold text-gray-700" value="{{ invoice.nummer if invoice else nummer }}" read-only>
            </div>
        </div>
    </div>

    <!-- Artikelen -->
    <script>
    window.selected_customer = "{{ selected_customer }}";
    window.selected_customer_name = "{{ selected_customer_name }}";
    window.valuta_symbol = "{{ valuta_symbol }}";
    </script>

    <link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

    <div id="section-title-hidden-inputs"></div>
    <div class="bg-white rounded-xl shadow mb-6">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50">
                    <th class="px-2 py-3 w-8"></th>
                    <th class="px-6 py-3 text-left font-semibold text-gray-700">Artikelen</th>
                    <th class="px-6 py-3 text-center font-semibold text-gray-700">Aantal stuks</th>
                    <th class="px-6 py-3 text-center font-semibold text-gray-700">Prijs</th>
                    <th class="px-6 py-3 text-right font-semibold text-gray-700">Bedrag</th>
                    <th class="px-2 py-3 w-8"></th>
                </tr>
            </thead>
            <tbody id="items-table">
                <!-- Table rows will be rendered by JS -->
            </tbody>
        </table>
        <div class="flex justify-end mt-2 mb-2 gap-2">
            <button type="button" id="add-section-btn" class="text-[#1F89D9] flex items-center gap-2 px-2 py-1 hover:underline text-sm">
                <i class="lucide lucide-heading"></i> Voeg sectietitel toe
            </button>
            <button type="button" id="add-item-btn" class="text-[#1F89D9] flex items-center gap-2 px-2 py-1 hover:underline text-sm">
                <i class="lucide lucide-plus"></i> Voeg een nieuw item toe
            </button>
        </div>
    </div>
    <style>
    .ts-dropdown, .ts-control {
        background: #fff !important;
    }
    </style>

    <div class="flex flex-col md:flex-row gap-6 mb-6">
        <!-- Opmerkingen -->
        <div class="bg-white rounded-xl shadow p-6 flex-1">
            <label class="block font-semibold mb-2">Opmerkingen</label>
            <div class="flex justify-between items-center mb-2">
                <button type="button" class="text-[#1F89D9] text-sm hover:underline">+ Notitie invoegen</button>
            </div>
            <textarea name="opmerkingen" class="w-full border border-gray-300 rounded px-4 py-2" rows="5">{{ invoice.opmerkingen if invoice else "" }}</textarea>
            <div class="flex justify-end mt-2">
                <button type="button" class="text-[#1F89D9] flex items-center gap-2 px-2 py-1 hover:underline text-sm">
                    <i class="lucide lucide-plus"></i> Velden invoegen
                </button>
            </div>
        </div>
        <!-- Subtotaal & totaal -->
        <div class="bg-white rounded-xl shadow p-6 flex-1 flex flex-col items-end justify-between max-w-md ml-auto">
            <div class="w-full md:w-80 text-right">
                <div class="text-gray-500 font-semibold">SUBTOTAAL</div>
                <div class="font-bold text-lg" id="subtotal">0,00 {{ valuta_symbol }}</div>
                <div class="text-gray-500 font-semibold mt-2">KORTING</div>
                <div class="flex items-center gap-2 justify-end">
                    <input type="text" name="korting" class="w-24 border rounded px-2 py-2 text-right" value="{{ estimate.korting if estimate else '0' }}">
                    <select name="korting_type" class="border rounded px-2 py-2">
                        <option value="€">€</option>
                        <option value="%">%</option>
                    </select>
                </div>
                <button type="button" class="text-[#1F89D9] text-xs mt-2 hover:underline">+ Belasting toevoegen</button>
            </div>
            <div class="mt-6 w-full md:w-80 text-right">
                <div class="text-gray-500 font-semibold">TOTAAL BEDRAG:</div>
                <div class="font-bold text-2xl text-[#1F89D9]" id="total">0,00 {{ valuta_symbol }}</div>
            </div>
        </div>
    </div>
</form>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="/static/js/customer_selector.js"></script>
<script src="/static/js/document_time.js"></script>
<script src="/static/js/document_items.js"></script>
<script>
  lucide.createIcons();
</script>
{% endblock %}