@extends('layouts.app', ['title' => 'Dokumente & Belege'])
@section('content')

<div class="container-fluid py-4" style="max-width:1300px;">

    <div class="d-flex align-items-center gap-3 mb-4">
        <div>
            <h4 class="fw-bold mb-0"><i class="bi bi-file-earmark-text me-2 text-primary"></i>Dokumente &amp; Belege</h4>
            <div class="text-muted small">Alle Fahrzeugdokumente</div>
        </div>
    </div>

    @if(session('msg'))
        <div class="alert alert-success alert-dismissible fade show mb-4">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            {{ session('msg') }}
        </div>
    @endif

    {{-- Filter --}}
    <form method="GET" class="card border-0 shadow-sm p-3 mb-4">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label small mb-1">Fahrzeug</label>
                <select name="vehicle_id" class="form-select form-select-sm">
                    <option value="">Alle Fahrzeuge</option>
                    @foreach($vehicles as $v)
                        <option value="{{ $v->id }}" {{ request('vehicle_id') == $v->id ? 'selected' : '' }}>
                            {{ $v->license_plate }} – {{ $v->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">Kategorie</label>
                <select name="category" class="form-select form-select-sm">
                    <option value="">Alle Kategorien</option>
                    @foreach($categories as $key => $label)
                        <option value="{{ $key }}" {{ request('category') == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-sm btn-primary rounded-pill px-4 w-100">Filtern</button>
            </div>
            @if(request()->anyFilled(['vehicle_id','category']))
            <div class="col-md-2">
                <a href="{{ route('fms.documents.index') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3 w-100">Zurücksetzen</a>
            </div>
            @endif
        </div>
    </form>

    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="font-size:0.85rem;">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Fahrzeug</th>
                        <th>Kategorie</th>
                        <th>Titel</th>
                        <th>Datei</th>
                        <th>Eingangsrechnung</th>
                        <th>Hochgeladen</th>
                        <th class="pe-3"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($documents as $doc)
                    <tr>
                        <td class="ps-3">
                            @if($doc->vehicle)
                                <a href="{{ route('fms.vehicles.show', $doc->fk_vehicle_id) }}" class="text-decoration-none fw-semibold">
                                    {{ $doc->vehicle->license_plate }} – {{ $doc->vehicle->name }}
                                </a>
                            @else –
                            @endif
                        </td>
                        <td><span class="badge bg-secondary">{{ $doc->category_label }}</span></td>
                        <td>{{ $doc->title ?? '–' }}</td>
                        <td>
                            @if($doc->dmsFile)
                                <a href="#" class="text-decoration-none small pdf-preview-link"
                                   data-url="{{ route('dms.preview', $doc->dmsFile->id) }}"
                                   data-name="{{ $doc->dmsFile->original_name }}">
                                    <i class="bi bi-file-earmark-pdf text-danger me-1"></i>{{ $doc->dmsFile->original_name }}
                                </a>
                            @else –
                            @endif
                        </td>
                        <td>
                            @if($doc->incomingInvoice)
                                <span class="badge bg-info text-dark">{{ $doc->incomingInvoice->invoice_nr }}</span>
                            @else <span class="text-muted small">–</span>
                            @endif
                        </td>
                        <td class="text-muted small">{{ $doc->created_at->format('d.m.Y') }}</td>
                        <td class="pe-3 text-end">
                            <form method="POST" action="{{ route('fms.documents.destroy', $doc->id) }}" onsubmit="return confirm('Dokument löschen?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-2">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-5">Keine Dokumente gefunden</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($documents->hasPages())
        <div class="p-3">{{ $documents->links() }}</div>
        @endif
    </div>

    {{-- Upload-Formular --}}
    <div class="card border-0 shadow-sm mt-4">
        <div class="card-header bg-transparent fw-semibold py-3">
            <i class="bi bi-upload me-2 text-success"></i>Neues Dokument hochladen
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('fms.documents.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label small">Fahrzeug *</label>
                        <select name="fk_vehicle_id" class="form-select" required>
                            <option value="">– Bitte wählen –</option>
                            @foreach($vehicles as $v)
                                <option value="{{ $v->id }}">{{ $v->license_plate }} – {{ $v->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Kategorie *</label>
                        <select name="category" class="form-select" required>
                            <option value="">– Bitte wählen –</option>
                            @foreach($categories as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Titel (optional)</label>
                        <input type="text" name="title" class="form-control" placeholder="z.B. HU 2026">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">Datei (PDF/Bild) *</label>
                        <input type="file" name="file" class="form-control" accept=".pdf,.jpg,.jpeg,.png" required>
                    </div>
                    <div class="col-12">
                        <div class="form-check">
                            <input type="checkbox" name="als_rechnung" value="1" id="idx-chk-als-rechnung" class="form-check-input">
                            <label class="form-check-label fw-semibold" for="idx-chk-als-rechnung">Als Eingangsrechnung erfassen</label>
                        </div>
                    </div>
                    <div id="idx-beleg-felder" class="col-12" style="display:none;">
                        <div class="card bg-light border-0 p-3">
                            <div class="row g-3">
                                <div class="col-md-10">
                                    <label class="form-label small">Lieferant *</label>
                                    <select name="inv_supplier" id="idx-supplier-select" class="form-select">
                                        <option value="">– Bitte wählen –</option>
                                        @foreach($suppliers as $s)
                                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" class="btn btn-outline-success btn-sm w-100 rounded-pill"
                                        data-bs-toggle="modal" data-bs-target="#modal-new-supplier-idx"
                                        data-target-select="idx-supplier-select">
                                        <i class="bi bi-plus-lg"></i> Neu
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small">Rechnungsnummer *</label>
                                    <input type="text" name="inv_invoice_nr" class="form-control" placeholder="RE-2026-001">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small">Titel *</label>
                                    <input type="text" name="inv_title" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Rechnungsdatum *</label>
                                    <input type="date" name="inv_invoice_date" class="form-control" value="{{ date('Y-m-d') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Eingangsdatum *</label>
                                    <input type="date" name="inv_income_date" class="form-control" value="{{ date('Y-m-d') }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Fälligkeitsdatum *</label>
                                    <input type="date" name="inv_expiry_date" class="form-control" value="{{ date('Y-m-d', strtotime('+30 days')) }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Nettobetrag (€) *</label>
                                    <input type="number" step="0.01" name="inv_subtotal" class="form-control" id="idx-inv-subtotal" oninput="idxCalcTax()">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">MwSt. (%) *</label>
                                    <select name="inv_tax_percent" class="form-select" id="idx-inv-tax-pct" onchange="idxCalcTax()">
                                        <option value="19" selected>19 %</option>
                                        <option value="7">7 %</option>
                                        <option value="0">0 %</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Bruttobetrag (€)</label>
                                    <input type="number" step="0.01" name="inv_total" class="form-control" id="idx-inv-total" readonly>
                                    <input type="hidden" name="inv_tax" id="idx-inv-tax">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-success rounded-pill px-5">
                            <i class="bi bi-upload me-1"></i>Hochladen
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
document.getElementById('idx-chk-als-rechnung').addEventListener('change', function () {
    document.getElementById('idx-beleg-felder').style.display = this.checked ? 'block' : 'none';
});
function idxCalcTax() {
    const net = parseFloat(document.getElementById('idx-inv-subtotal').value) || 0;
    const pct = parseFloat(document.getElementById('idx-inv-tax-pct').value) || 0;
    const tax = net * pct / 100;
    document.getElementById('idx-inv-tax').value   = tax.toFixed(2);
    document.getElementById('idx-inv-total').value = (net + tax).toFixed(2);
}
</script>

{{-- Modal: Neuer Lieferant --}}
<div class="modal fade" id="modal-new-supplier-idx" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-semibold"><i class="bi bi-building-add me-2"></i>Neuer Lieferant</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="idx-ns-error" class="alert alert-danger d-none"></div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label small">Firmenname *</label>
                        <input type="text" id="idx-ns-name" class="form-control" placeholder="Musterfirma GmbH">
                    </div>
                    <div class="col-12">
                        <label class="form-label small">Adresse</label>
                        <input type="text" id="idx-ns-address" class="form-control geoapify-address" placeholder="Straße, PLZ, Ort">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">Telefon</label>
                        <input type="text" id="idx-ns-tel" class="form-control" placeholder="+49 ...">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small">E-Mail</label>
                        <input type="email" id="idx-ns-email" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" id="idx-ns-save-btn" class="btn btn-success rounded-pill px-4">
                    <i class="bi bi-check-lg me-1"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>
<script>
(function () {
    document.getElementById('modal-new-supplier-idx').addEventListener('show.bs.modal', function () {
        document.getElementById('idx-ns-name').value    = '';
        document.getElementById('idx-ns-address').value = '';
        document.getElementById('idx-ns-tel').value     = '';
        document.getElementById('idx-ns-email').value   = '';
        document.getElementById('idx-ns-error').classList.add('d-none');
    });

    document.getElementById('idx-ns-save-btn').addEventListener('click', function () {
        const btn   = this;
        const name  = document.getElementById('idx-ns-name').value.trim();
        const errEl = document.getElementById('idx-ns-error');
        if (!name) { errEl.textContent = 'Firmenname ist erforderlich.'; errEl.classList.remove('d-none'); return; }

        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Speichern…';

        fetch('{{ route("fms.documents.supplier-create") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                name:    name,
                address: document.getElementById('idx-ns-address').value,
                tel:     document.getElementById('idx-ns-tel').value,
                email:   document.getElementById('idx-ns-email').value,
            }),
        })
        .then(r => r.text().then(text => {
            const start = text.indexOf('{');
            const clean = start >= 0 ? text.slice(start) : text;
            try { return { ok: r.ok, data: JSON.parse(clean) }; }
            catch (e) { return { ok: false, data: { message: 'Server-Fehler: ' + text.substring(0, 300) } }; }
        }))
        .then(({ ok, data }) => {
            if (!ok) { errEl.textContent = data.message ?? 'Fehler beim Speichern.'; errEl.classList.remove('d-none'); return; }
            const select = document.getElementById('idx-supplier-select');
            const opt = new Option(data.name, data.id, true, true);
            select.appendChild(opt);
            bootstrap.Modal.getInstance(document.getElementById('modal-new-supplier-idx')).hide();
        })
        .catch(err => {
            errEl.textContent = err.message ?? 'Netzwerkfehler.';
            errEl.classList.remove('d-none');
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>Speichern';
        });
    });
})();
</script>
{{-- Modal: PDF-Vorschau --}}
<div class="modal fade" id="modal-pdf-preview" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content" style="height:90vh;">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold" id="pdf-preview-title"><i class="bi bi-file-earmark-pdf text-danger me-2"></i></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0 h-100">
                <iframe id="pdf-preview-frame" src="" style="width:100%;height:100%;border:0;"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
document.querySelectorAll('.pdf-preview-link').forEach(function(el) {
    el.addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('pdf-preview-title').textContent = this.dataset.name;
        document.getElementById('pdf-preview-frame').src = this.dataset.url;
        new bootstrap.Modal(document.getElementById('modal-pdf-preview')).show();
    });
});
document.getElementById('modal-pdf-preview').addEventListener('hidden.bs.modal', function () {
    document.getElementById('pdf-preview-frame').src = '';
});
</script>
@endsection