@extends('layouts.app', ['title' => 'System | AGB-Vorlagen'])
@section('content')

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

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-0">AGB & Zahlungskonditionen</h4>
            <small class="text-muted">Vorlagen für Angebots-PDFs verwalten</small>
        </div>
        <button class="btn btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#createModal">
            <i class="bi bi-plus-lg me-1"></i>Neue Vorlage
        </button>
    </div>

    {{-- Alerts --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm py-2 mb-3">
            <i class="bi bi-exclamation-circle me-2"></i>{{ $errors->first() }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Template-Liste --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-3 pb-2 px-4">
            <span class="small text-muted">{{ $templates->count() }} {{ $templates->count() === 1 ? 'Vorlage' : 'Vorlagen' }}</span>
        </div>
        <div class="card-body p-0">
            @forelse($templates as $template)
                <div class="border-bottom px-4 py-3 template-row">
                    <div class="d-flex align-items-start gap-3">
                        {{-- Icon --}}
                        <div class="flex-shrink-0 mt-1">
                            <span class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center"
                                  style="width:36px; height:36px;">
                                <i class="bi bi-file-earmark-text"></i>
                            </span>
                        </div>

                        {{-- Content --}}
                        <div class="flex-grow-1" style="min-width:0;">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <span class="fw-semibold">{{ $template->title }}</span>
                                @if($template->is_default)
                                    <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2"
                                          style="font-size:10px;">
                                        <i class="bi bi-star-fill me-1"></i>Standard
                                    </span>
                                @endif
                            </div>
                            <div class="text-muted small text-truncate" style="max-width:600px;">
                                {{ Str::limit(strip_tags($template->terms_text), 120) }}
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="flex-shrink-0 d-flex gap-1 align-items-center">
                            <button class="btn btn-light btn-sm rounded-pill px-3 border"
                                    data-bs-toggle="modal"
                                    data-bs-target="#viewModal{{ $template->id }}">
                                <i class="bi bi-eye me-1"></i>Ansehen
                            </button>
                            <button class="btn btn-light btn-sm rounded-pill px-3 border"
                                    data-bs-toggle="modal"
                                    data-bs-target="#editModal{{ $template->id }}">
                                <i class="bi bi-pencil me-1"></i>Bearbeiten
                            </button>
                            <form action="{{ route('terms_templates.destroy', $template->id) }}" method="POST"
                                  class="d-inline" onsubmit="return confirm('Vorlage löschen?')">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="btn btn-light btn-sm rounded-circle border text-danger p-0"
                                        style="width:32px; height:32px;" title="Löschen">
                                    <i class="bi bi-trash" style="font-size:12px;"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted py-5">
                    <i class="bi bi-file-earmark-text d-block fs-2 mb-2 opacity-25"></i>
                    <div class="small">Noch keine Vorlagen angelegt</div>
                </div>
            @endforelse
        </div>
    </div>

</div>

{{-- Create Modal --}}
<div class="modal fade" id="createModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="/angebote/terms-templates/store" method="POST">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Neue AGB-Vorlage</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Titel *</label>
                        <input type="text" name="title" class="form-control" placeholder="z. B. Standard-AGB" required>
                    </div>
                    <div class="mb-1">
                        <label class="form-label small fw-semibold text-muted">Text</label>
                        <textarea id="create-terms_text" name="terms_text" class="form-control ckeditor-field" rows="12"></textarea>
                    </div>
                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" name="is_default" value="1" id="create-is-default">
                        <label class="form-check-label small" for="create-is-default">Als Standard-Vorlage verwenden</label>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-3 btn-cancel" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-check-lg me-1"></i>Speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- View Modals --}}
@foreach($templates as $template)
<div class="modal fade" id="viewModal{{ $template->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <div>
                    <h6 class="modal-title fw-bold">{{ $template->title }}</h6>
                    @if($template->is_default)
                        <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2" style="font-size:10px;">
                            <i class="bi bi-star-fill me-1"></i>Standard
                        </span>
                    @endif
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="font-size:9.5pt; line-height:1.7;">
                {!! $template->terms_text !!}
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-light rounded-pill px-3" data-bs-dismiss="modal">Schließen</button>
                <button class="btn btn-primary rounded-pill px-3"
                        data-bs-dismiss="modal"
                        data-bs-toggle="modal"
                        data-bs-target="#editModal{{ $template->id }}">
                    <i class="bi bi-pencil me-1"></i>Bearbeiten
                </button>
            </div>
        </div>
    </div>
</div>
@endforeach

{{-- Edit Modals --}}
@foreach($templates as $template)
<div class="modal fade" id="editModal{{ $template->id }}" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="{{ route('terms_templates.update', $template->id) }}" method="POST">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h6 class="modal-title fw-bold">Vorlage bearbeiten</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-muted">Titel *</label>
                        <input type="text" name="title" value="{{ $template->title }}" class="form-control" required>
                    </div>
                    <div class="mb-1">
                        <label class="form-label small fw-semibold text-muted">Text</label>
                        <textarea name="terms_text" class="form-control ckeditor-field" rows="12">{{ $template->terms_text }}</textarea>
                    </div>
                    <div class="form-check mt-3">
                        <input class="form-check-input" type="checkbox" name="is_default" value="1"
                               id="edit-default-{{ $template->id }}"
                               {{ $template->is_default ? 'checked' : '' }}>
                        <label class="form-check-label small" for="edit-default-{{ $template->id }}">Als Standard-Vorlage verwenden</label>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-3 btn-cancel" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                        <i class="bi bi-check-lg me-1"></i>Speichern
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

<style>
    .template-row:last-child { border-bottom: none !important; }
    .template-row:hover { background: #f8f9fa; }
</style>

<script src="{{ asset('assets/vendor/ckeditor5/ckeditor.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.ckeditor-field').forEach((el) => {
            ClassicEditor.create(el, {
                toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
            }).then(editor => {
                editor.ui.view.editable.element.style.height = '320px';
            }).catch(console.error);
        });

        // Nach Modal-Schließen neu laden (damit CKEditor-State sauber bleibt)
        document.querySelectorAll('.btn-cancel').forEach(btn => {
            btn.addEventListener('click', function () {
                const modalEl = btn.closest('.modal');
                if (!modalEl) return;
                modalEl.addEventListener('hidden.bs.modal', function handler() {
                    modalEl.removeEventListener('hidden.bs.modal', handler);
                    window.location.reload();
                });
            });
        });
    });
</script>

@endsection