{% extends "base.html" %}

{% block title %}Herstellingen{% endblock %}
{% block page_title %}Herstellingen & Signpost{% endblock %}
{% block loader_text %}Signpost data ophalen... even geduld.{% endblock %}

{% block content %}
<div class="page-head">
    <div class="tabs">
        <button class="tab-link {{ 'active' if active_tab != 'signpost-tab' else '' }}" onclick="openTab(event, 'herstellingen-tab')">🛠️ Herstellingen</button>
        <button class="tab-link {{ 'active' if active_tab == 'signpost-tab' else '' }}" onclick="openTab(event, 'signpost-tab')">🚩 Signpost</button>
    </div>
    <div class="actions">
        {% if active_tab == 'signpost-tab' %}
            <button type="button" class="add-btn" id="mainAddBtn" onclick="openSignpostModal()">🚩 Signpost-herstelling toevoegen</button>
        {% else %}
            <button type="button" class="add-btn" id="mainAddBtn" onclick="openAddModal()">➕ Herstelling toevoegen</button>
        {% endif %}
    </div>
</div>

<section id="herstellingen-tab" class="tab-content card {{ 'active' if active_tab != 'signpost-tab' else '' }}" style="display: {{ 'none' if active_tab == 'signpost-tab' else 'block' }};">
    <h2>🛠️ Overzicht herstellingen</h2>
    <form class="search-bar" method="POST" action="{{ url_for('repairs.herstellingen') }}">
        <input type="text" name="query" placeholder="Zoek op serienummer, incidentnr. of omschrijving..." value="{{ query or '' }}">
        <button type="submit">🔍 Zoeken</button>
    </form>

    {% if results %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Incident nr</th>
                    <th>Serienummer</th>
                    <th>Soort herstelling</th>
                    <th>Status</th>
                    <th>Datum</th>
                    <th class="actions">Acties</th>
                </tr>
            </thead>
            <tbody>
                {% for row in results %}
                <tr>
                    <td><strong>{{ row['Incident_nr'] or '' }}</strong></td>
                    <td>{{ row['KAMXM_nummer'] }}</td>
                    <td>{{ row['Soort_herstelling'] or '' }}</td>
                    <td>
                        {% if row['Status'] == 'In afwachting' %}<span class="badge badge-warning">⏳ In afwachting</span>
                        {% elif row['Status'] == 'In herstelling' %}<span class="badge badge-info">🔧 In herstelling</span>
                        {% elif row['Status'] == 'Voltooid' %}<span class="badge badge-success">✅ Voltooid</span>
                        {% else %}<span class="badge">{{ row['Status'] }}</span>
                        {% endif %}
                    </td>
                    <td class="nowrap">{{ row['Datum'] or '' }}</td>
                    <td class="actions">
                        <button type="button" class="btn-sm" onclick="openStatusModal('{{ row['KAMXM_nummer'] }}', '{{ row['Incident_nr'] or '' }}')">Status</button>
                        <button type="button" class="btn-bewerk btn-sm"
                            data-kamxm="{{ row['KAMXM_nummer'] }}"
                            data-incident="{{ row['Incident_nr'] or '' }}"
                            data-soort="{{ row['Soort_herstelling'] or '' }}"
                            data-datum="{{ row['Datum'] or '' }}"
                            onclick="openEditModal(this)">✏️ Bewerk</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% elif query %}
        <p class="muted">Geen herstellingen gevonden voor "{{ query }}".</p>
    {% endif %}
</section>

<section id="signpost-tab" class="tab-content card {{ 'active' if active_tab == 'signpost-tab' else '' }}" style="display: {{ 'block' if active_tab == 'signpost-tab' else 'none' }};">
    <h2>🚩 Signpost schademeldingen</h2>
    <form id="signpostSearchForm" class="search-bar" method="POST" action="{{ url_for('repairs.signpost_search') }}">
        <input type="text" name="serial_number" placeholder="Zoek op serienummer..." value="{{ searched_serial or '' }}">
        <button type="submit">🔍 Zoek in Signpost</button>
    </form>

    {% if signpost_results %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Referentie</th>
                    <th>Status</th>
                    <th>Omschrijving</th>
                    <th>Datum</th>
                    <th class="text-right">Prijs</th>
                </tr>
            </thead>
            <tbody>
                {% for case in signpost_results %}
                <tr>
                    <td><strong>{{ case.get('ourReference', 'N/A') }}</strong></td>
                    <td><span class="badge">{{ case.get('status', 'Onbekend') }}</span></td>
                    <td>{{ case.get('description', 'Geen omschrijving') }}</td>
                    <td class="nowrap">{{ case.get('createdAt', '')[:10] }}</td>
                    <td class="text-right nowrap">€ {{ case.get('totalPrice', '0.00') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</section>
{% endblock %}

{% block modals %}
<div id="addModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('addModal')">&times;</span>
        <h3>Nieuwe herstelling toevoegen</h3>
        <form method="POST" action="{{ url_for('repairs.add_herstelling') }}">
            <div class="field"><label>Incident nr</label><input type="text" name="incident_nr" placeholder="Optioneel"></div>
            <div class="field"><label>Serienummer</label><input type="text" name="kamxm_nummer" required placeholder="Bijv. 12345"></div>
            <div class="field"><label>Soort herstelling</label><input type="text" name="soort_herstelling" required placeholder="Omschrijving..."></div>
            <button type="submit" class="btn-block btn-success">➕ Toevoegen</button>
        </form>
    </div>
</div>

<div id="editModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('editModal')">&times;</span>
        <h3>Herstelling bewerken</h3>
        <form method="POST" action="{{ url_for('repairs.bewerk_herstelling') }}">
            <input type="hidden" name="kamxm_nummer_original" id="edit_kamxm_orig">
            <div class="field"><label>Incident nr</label><input type="text" name="incident_nr" id="edit_incident"></div>
            <div class="field"><label>Serienummer</label><input type="text" name="kamxm_nummer" id="edit_kamxm"></div>
            <div class="field"><label>Soort herstelling</label><input type="text" name="soort_herstelling" id="edit_soort"></div>
            <div class="field"><label>Datum</label><input type="date" name="datum" id="edit_datum"></div>
            <button type="submit" class="btn-block">💾 Opslaan</button>
        </form>
    </div>
</div>

<div id="statusModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('statusModal')">&times;</span>
        <h3>Wijzig status: <span id="display_kamxm"></span></h3>
        <form id="statusForm" method="POST" action="{{ url_for('repairs.wijzig_status_herstelling') }}">
            <input type="hidden" name="kamxm_nummer" id="input_status_kamxm">
            <input type="hidden" name="incident_nr" id="input_status_incident">
            <input type="hidden" name="new_status" id="input_status_value">
            <button type="button" class="status-button status-warning" id="btn-wacht" onclick="submitStatus('In afwachting')">⏳ In afwachting</button>
            <button type="button" class="status-button status-info" id="btn-bezig" onclick="submitStatus('In herstelling')">🔧 In herstelling</button>
            <button type="button" class="status-button status-success" id="btn-klaar" onclick="submitStatus('Voltooid')">✅ Voltooid</button>
        </form>
    </div>
</div>

<div id="signpostModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('signpostModal')">&times;</span>
        <h3>🚩 Signpost-schade melden</h3>
        <form id="signpostSubmitForm" action="#" method="POST">
            <div class="field"><label>Serienummer</label><input type="text" name="serial" id="sp_serial_input" required placeholder="Voer serienummer in"></div>
            <div class="field"><label>Omschrijving</label><textarea name="omschrijving" placeholder="Wat is er defect?"></textarea></div>

            <div class="switch-row"><span>💧 Waterschade</span><label class="switch"><input type="checkbox" name="water"><span class="slider"></span></label></div>
            <div class="switch-row"><span>🔨 Valschade</span><label class="switch"><input type="checkbox" name="val"><span class="slider"></span></label></div>
            <div class="switch-row"><span>💻 Cosmetische schade onderkant</span><label class="switch"><input type="checkbox" name="cosm_onder"><span class="slider"></span></label></div>
            <div class="switch-row"><span>⌨️ Cosmetische schade toetsenbord</span><label class="switch"><input type="checkbox" name="cosm_kb"><span class="slider"></span></label></div>
            <div class="switch-row"><span>📱 Cosmetische schade bovenkant</span><label class="switch"><input type="checkbox" name="cosm_boven"><span class="slider"></span></label></div>

            <button type="submit" class="btn-block btn-success" style="margin-top:16px">Verstuur naar Signpost</button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function openTab(evt, tabName) {
        document.querySelectorAll('.tab-content').forEach(t => { t.style.display = 'none'; t.classList.remove('active'); });
        document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
        document.getElementById(tabName).style.display = 'block';
        document.getElementById(tabName).classList.add('active');
        evt.currentTarget.classList.add('active');

        const addBtn = document.getElementById('mainAddBtn');
        if (tabName === 'signpost-tab') {
            addBtn.innerHTML = "🚩 Signpost-herstelling toevoegen";
            addBtn.onclick = openSignpostModal;
        } else {
            addBtn.innerHTML = "➕ Herstelling toevoegen";
            addBtn.onclick = openAddModal;
        }
    }

    // Laadscherm bij zoeken in en melden aan Signpost
    ['signpostSearchForm', 'signpostSubmitForm'].forEach(id => {
        const f = document.getElementById(id);
        if (f) f.addEventListener('submit', () => showLoader());
    });

    function openAddModal() { document.getElementById('addModal').style.display = 'block'; }

    function openSignpostModal() {
        document.getElementById('signpostModal').style.display = 'block';
        const currentSearch = document.getElementsByName('serial_number')[0].value;
        if (currentSearch) document.getElementById('sp_serial_input').value = currentSearch;
    }

    function openEditModal(btn) {
        document.getElementById('edit_kamxm_orig').value = btn.getAttribute('data-kamxm');
        document.getElementById('edit_incident').value = btn.getAttribute('data-incident');
        document.getElementById('edit_kamxm').value = btn.getAttribute('data-kamxm');
        document.getElementById('edit_soort').value = btn.getAttribute('data-soort');
        document.getElementById('edit_datum').value = btn.getAttribute('data-datum');
        document.getElementById('editModal').style.display = 'block';
    }

    function openStatusModal(kamxm, incident) {
        document.getElementById('display_kamxm').textContent = kamxm;
        document.getElementById('input_status_kamxm').value = kamxm;
        document.getElementById('input_status_incident').value = incident;
        document.getElementById('statusModal').style.display = 'block';
    }

    function submitStatus(waarde) {
        document.getElementById('input_status_value').value = waarde;
        document.getElementById('statusForm').submit();
    }

    function closeModal(id) { document.getElementById(id).style.display = 'none'; }

    window.onclick = function (event) {
        if (event.target.classList.contains('modal')) event.target.style.display = 'none';
    };
</script>
{% endblock %}