@extends('layouts.app')
@section('title', isset($version) ? 'Modifier v'.$version->num : 'Nouvelle version')
@section('page-title', 'Administration — ' . (isset($version) ? 'Modifier v'.$version->num : 'Nouvelle version'))

@push('styles')
<style>
.vf-card { background:#fff; border:1.5px solid var(--border); border-radius:12px; padding:24px; margin-bottom:18px; }
.vf-card-title { font-size:14px; font-weight:900; color:var(--navy); margin-bottom:18px; padding-bottom:12px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; gap:8px; }

.vf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vf-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.vf-group { display:flex; flex-direction:column; gap:5px; }
.vf-label { font-size:12px; font-weight:800; color:var(--navy); }
.vf-input, .vf-select {
    border:1.5px solid var(--border); border-radius:8px;
    padding:8px 12px; font-family:'Nunito',sans-serif;
    font-size:13px; font-weight:600; color:var(--text);
    outline:none; transition:border-color 0.2s;
    background:#fff; width:100%;
}
.vf-input:focus, .vf-select:focus { border-color:var(--navy); }
.vf-error { font-size:11px; color:#DC2626; font-weight:700; margin-top:2px; }

/* Type radio */
.vf-type-group { display:flex; gap:10px; flex-wrap:wrap; }
.vf-type-radio { display:none; }
.vf-type-label {
    padding:7px 16px; border-radius:8px; font-size:12px; font-weight:800;
    border:1.5px solid var(--border); cursor:pointer; transition:all 0.15s;
    color:var(--text-muted);
}
.vf-type-radio:checked + .vf-type-label { border-color:var(--navy); color:var(--navy); background:#EFF6FF; }
.vf-type-radio[value="current"]:checked + .vf-type-label { background:var(--yellow); color:var(--navy); border-color:var(--yellow); }
.vf-type-radio[value="new"]:checked + .vf-type-label     { background:#E8F5E9; color:#2E7D32; border-color:#A5D6A7; }
.vf-type-radio[value="fix"]:checked + .vf-type-label     { background:#FFF3E0; color:#E65100; border-color:#FFCC80; }

/* Sections */
.vf-section-block {
    background:#F8F9FF; border:1.5px solid var(--border); border-radius:10px;
    padding:16px; margin-bottom:12px; position:relative;
}
.vf-section-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.vf-section-num { font-size:12px; font-weight:900; color:var(--navy); background:#EFF6FF; border-radius:6px; padding:3px 10px; white-space:nowrap; }
.vf-rm-section {
    margin-left:auto; background:#FEE2E2; color:#DC2626; border:none;
    border-radius:6px; padding:5px 10px; font-size:11px; font-weight:800;
    cursor:pointer; font-family:'Nunito',sans-serif;
}
.vf-rm-section:hover { background:#DC2626; color:#fff; }

.vf-items-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.vf-item-row { display:flex; align-items:center; gap:8px; }
.vf-item-input {
    flex:1; border:1.5px solid var(--border); border-radius:7px;
    padding:7px 12px; font-family:'Nunito',sans-serif;
    font-size:13px; font-weight:600; color:var(--text);
    outline:none; transition:border-color 0.2s; background:#fff;
}
.vf-item-input:focus { border-color:var(--navy); }
.vf-rm-item {
    background:none; border:none; cursor:pointer; color:#DC2626; padding:4px;
    border-radius:5px; display:flex; align-items:center;
}
.vf-rm-item:hover { background:#FEE2E2; }

.vf-add-item-btn {
    margin-top:8px; background:none; border:1.5px dashed #A0AEC0; border-radius:7px;
    width:100%; padding:7px; font-family:'Nunito',sans-serif;
    font-size:12px; font-weight:800; color:#718096; cursor:pointer;
    transition:all 0.15s;
}
.vf-add-item-btn:hover { border-color:var(--navy); color:var(--navy); background:#EFF6FF; }
.vf-add-section-btn {
    background:none; border:2px dashed #A0AEC0; border-radius:10px;
    width:100%; padding:12px; font-family:'Nunito',sans-serif;
    font-size:13px; font-weight:800; color:#718096; cursor:pointer;
    transition:all 0.15s; margin-bottom:18px;
}
.vf-add-section-btn:hover { border-color:var(--navy); color:var(--navy); background:#F0F4FF; }

/* Actions */
.vf-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.vf-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 22px; border-radius:8px; font-family:'Nunito',sans-serif;
    font-size:13px; font-weight:800; cursor:pointer; border:none;
    text-decoration:none; transition:all 0.15s;
}
.vf-btn-cancel { background:#F0F2FA; color:var(--navy); border:1.5px solid var(--border); }
.vf-btn-cancel:hover { background:#E0E4F0; color:var(--navy); }
.vf-btn-save { background:var(--navy); color:#fff; }
.vf-btn-save:hover { background:#1a2a5e; }

.color-opt { display:flex; gap:8px; }
.color-radio { display:none; }
.color-label { width:24px;height:24px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all 0.15s; }
.color-radio[value="green"]:checked  + .color-label { border-color:var(--navy); }
.color-radio[value="orange"]:checked + .color-label { border-color:var(--navy); }
.color-radio[value="blue"]:checked   + .color-label { border-color:var(--navy); }
.color-label[data-c="green"]  { background:#4CAF50; }
.color-label[data-c="orange"] { background:#FF9800; }
.color-label[data-c="blue"]   { background:#2196F3; }
</style>
@endpush

@section('content')

<form method="POST" action="{{ isset($version) ? route('admin.versions.update', $version) : route('admin.versions.store') }}">
    @csrf
    @if(isset($version)) @method('PUT') @endif

    {{-- Infos générales --}}
    <div class="vf-card">
        <div class="vf-card-title">
            <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            Informations de la version
        </div>
        <div class="vf-grid" style="margin-bottom:16px;">
            <div class="vf-group">
                <label class="vf-label">Numéro de version *</label>
                <input type="text" name="num" class="vf-input" placeholder="ex: 4.2.1" value="{{ old('num', $version->num ?? '') }}" required>
                @error('num') <span class="vf-error">{{ $message }}</span> @enderror
            </div>
            <div class="vf-group">
                <label class="vf-label">Date de sortie *</label>
                <input type="date" name="date_version" class="vf-input" value="{{ old('date_version', isset($version) ? $version->date_version->format('Y-m-d') : date('Y-m-d')) }}" required>
                @error('date_version') <span class="vf-error">{{ $message }}</span> @enderror
            </div>
        </div>
        <div class="vf-group" style="margin-bottom:16px;">
            <label class="vf-label">Résumé *</label>
            <input type="text" name="summary" class="vf-input" placeholder="ex: Correctifs interface et optimisations" value="{{ old('summary', $version->summary ?? '') }}" required>
            @error('summary') <span class="vf-error">{{ $message }}</span> @enderror
        </div>
        <div class="vf-grid">
            <div class="vf-group">
                <label class="vf-label">Type *</label>
                @php $currentType = old('type', $version->type ?? 'maj'); @endphp
                <div class="vf-type-group">
                    @foreach(['current' => 'Version actuelle', 'new' => 'Nouvelle version majeure', 'maj' => 'Mise à jour', 'fix' => 'Correctif'] as $val => $label)
                    <input type="radio" name="type" id="type_{{ $val }}" value="{{ $val }}" class="vf-type-radio" {{ $currentType === $val ? 'checked' : '' }}>
                    <label for="type_{{ $val }}" class="vf-type-label">{{ $label }}</label>
                    @endforeach
                </div>
                @error('type') <span class="vf-error">{{ $message }}</span> @enderror
            </div>
            <div class="vf-group">
                <label class="vf-label">Ordre d'affichage (1 = le plus récent)</label>
                <input type="number" name="ordre" class="vf-input" min="1" value="{{ old('ordre', $version->ordre ?? $nextOrdre ?? 1) }}" required>
                @error('ordre') <span class="vf-error">{{ $message }}</span> @enderror
            </div>
        </div>
    </div>

    {{-- Sections --}}
    <div class="vf-card">
        <div class="vf-card-title">
            <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
            Sections et éléments
        </div>

        <div id="sectionsContainer">
            @if(isset($version) && $version->sections->isNotEmpty())
                @foreach($version->sections as $si => $section)
                <div class="vf-section-block" data-section="{{ $si }}">
                    <div class="vf-section-head">
                        <span class="vf-section-num">Section {{ $si + 1 }}</span>
                        <div class="vf-group" style="flex:1;">
                            <input type="text" name="sections[{{ $si }}][title]" class="vf-input" placeholder="Titre (ex: Nouveautés, Corrections…)" value="{{ $section->title }}">
                        </div>
                        <div class="color-opt">
                            @foreach(['green','orange','blue'] as $c)
                            <input type="radio" name="sections[{{ $si }}][color]" id="c_{{ $si }}_{{ $c }}" value="{{ $c }}" class="color-radio" {{ $section->color === $c ? 'checked' : '' }}>
                            <label for="c_{{ $si }}_{{ $c }}" class="color-label" data-c="{{ $c }}" title="{{ $c }}"></label>
                            @endforeach
                        </div>
                        <button type="button" class="vf-rm-section" onclick="removeSection(this)">✕ Supprimer</button>
                    </div>
                    <div class="vf-items-list" id="items_{{ $si }}">
                        @foreach($section->items as $ii => $item)
                        <div class="vf-item-row">
                            <input type="text" name="sections[{{ $si }}][items][]" class="vf-item-input" placeholder="Élément…" value="{{ $item->texte }}">
                            <button type="button" class="vf-rm-item" onclick="removeItem(this)" title="Supprimer">
                                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                            </button>
                        </div>
                        @endforeach
                    </div>
                    <button type="button" class="vf-add-item-btn" onclick="addItem(this, {{ $si }})">+ Ajouter un élément</button>
                </div>
                @endforeach
            @else
                {{-- Section par défaut vide --}}
                <div class="vf-section-block" data-section="0">
                    <div class="vf-section-head">
                        <span class="vf-section-num">Section 1</span>
                        <div class="vf-group" style="flex:1;">
                            <input type="text" name="sections[0][title]" class="vf-input" placeholder="Titre (ex: Nouveautés, Corrections…)" value="">
                        </div>
                        <div class="color-opt">
                            @foreach(['green','orange','blue'] as $c)
                            <input type="radio" name="sections[0][color]" id="c_0_{{ $c }}" value="{{ $c }}" class="color-radio" {{ $c === 'green' ? 'checked' : '' }}>
                            <label for="c_0_{{ $c }}" class="color-label" data-c="{{ $c }}" title="{{ $c }}"></label>
                            @endforeach
                        </div>
                        <button type="button" class="vf-rm-section" onclick="removeSection(this)">✕ Supprimer</button>
                    </div>
                    <div class="vf-items-list" id="items_0">
                        <div class="vf-item-row">
                            <input type="text" name="sections[0][items][]" class="vf-item-input" placeholder="Élément…" value="">
                            <button type="button" class="vf-rm-item" onclick="removeItem(this)" title="Supprimer">
                                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                            </button>
                        </div>
                    </div>
                    <button type="button" class="vf-add-item-btn" onclick="addItem(this, 0)">+ Ajouter un élément</button>
                </div>
            @endif
        </div>

        <button type="button" class="vf-add-section-btn" onclick="addSection()">
            + Ajouter une section
        </button>
    </div>

    {{-- Actions --}}
    <div class="vf-actions">
        <a href="{{ route('admin.versions.index') }}" class="vf-btn vf-btn-cancel">Annuler</a>
        <button type="submit" class="vf-btn vf-btn-save">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            {{ isset($version) ? 'Enregistrer les modifications' : 'Créer la version' }}
        </button>
    </div>
</form>

@endsection

@push('scripts')
<script>
let sectionCount = {{ isset($version) ? $version->sections->count() : 1 }};

function addSection() {
    const idx = sectionCount++;
    const container = document.getElementById('sectionsContainer');
    const div = document.createElement('div');
    div.className = 'vf-section-block';
    div.dataset.section = idx;
    div.innerHTML = `
        <div class="vf-section-head">
            <span class="vf-section-num">Section ${idx+1}</span>
            <div class="vf-group" style="flex:1;">
                <input type="text" name="sections[${idx}][title]" class="vf-input" placeholder="Titre (ex: Nouveautés, Corrections…)">
            </div>
            <div class="color-opt">
                <input type="radio" name="sections[${idx}][color]" id="c_${idx}_green" value="green" class="color-radio" checked>
                <label for="c_${idx}_green" class="color-label" data-c="green" title="green"></label>
                <input type="radio" name="sections[${idx}][color]" id="c_${idx}_orange" value="orange" class="color-radio">
                <label for="c_${idx}_orange" class="color-label" data-c="orange" title="orange"></label>
                <input type="radio" name="sections[${idx}][color]" id="c_${idx}_blue" value="blue" class="color-radio">
                <label for="c_${idx}_blue" class="color-label" data-c="blue" title="blue"></label>
            </div>
            <button type="button" class="vf-rm-section" onclick="removeSection(this)">✕ Supprimer</button>
        </div>
        <div class="vf-items-list" id="items_${idx}">
            <div class="vf-item-row">
                <input type="text" name="sections[${idx}][items][]" class="vf-item-input" placeholder="Élément…">
                <button type="button" class="vf-rm-item" onclick="removeItem(this)" title="Supprimer">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
        </div>
        <button type="button" class="vf-add-item-btn" onclick="addItem(this, ${idx})">+ Ajouter un élément</button>
    `;
    container.appendChild(div);
}

function removeSection(btn) {
    const block = btn.closest('.vf-section-block');
    if (document.querySelectorAll('.vf-section-block').length <= 1) {
        alert('Il faut au moins une section.');
        return;
    }
    block.remove();
}

function addItem(btn, idx) {
    const list = document.getElementById('items_' + idx);
    const div = document.createElement('div');
    div.className = 'vf-item-row';
    div.innerHTML = `
        <input type="text" name="sections[${idx}][items][]" class="vf-item-input" placeholder="Élément…">
        <button type="button" class="vf-rm-item" onclick="removeItem(this)" title="Supprimer">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
    `;
    list.appendChild(div);
    div.querySelector('input').focus();
}

function removeItem(btn) {
    const row = btn.closest('.vf-item-row');
    const list = row.parentElement;
    if (list.querySelectorAll('.vf-item-row').length <= 1) {
        row.querySelector('input').value = '';
        return;
    }
    row.remove();
}
</script>
@endpush