@extends('layouts.app')
@section('title', 'Modifier la règle')
@section('page-title', 'Modifier la règle — ' . $regle->nom)

@push('styles')
<style>
    .edit-page { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; }

    .edit-card { background: #fff; border-radius: 16px; border: 1px solid #E0E6F0; box-shadow: 0 2px 12px rgba(26,35,64,0.06); overflow: hidden; }
    .edit-head { display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: linear-gradient(90deg, #1A2340 0%, #2E4080 100%); }
    .edit-head-title { font-size: 14px; font-weight: 800; color: #fff; }
    .edit-head-code  { font-size: 11px; color: rgba(255,255,255,0.5); font-family: monospace; background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 6px; }

    .edit-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

    .field-group { display: flex; flex-direction: column; gap: 7px; }
    .field-label { font-size: 12px; font-weight: 700; color: #6B7A9A; text-transform: uppercase; letter-spacing: .04em; }
    .field-hint  { font-size: 11px; color: #9AA5BE; }

    input[type="text"], input[type="number"], textarea {
        font-family: 'Nunito', sans-serif;
        font-size: 13px; font-weight: 600; color: #1A2340;
        background: #fff; border: 1.5px solid #D0D8EC;
        border-radius: 8px; padding: 9px 14px; outline: none;
        transition: border-color .2s, box-shadow .2s; width: 100%; box-sizing: border-box;
    }
    input:focus, textarea:focus { border-color: #4A6FA5; box-shadow: 0 0 0 3px rgba(74,111,165,0.12); }

    /* Éditeur de code */
    .code-editor-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1.5px solid #D0D8EC; transition: border-color .2s; }
    .code-editor-wrap:focus-within { border-color: #4A6FA5; box-shadow: 0 0 0 3px rgba(74,111,165,0.12); }
    .code-editor-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #2A3A5A; }
    .code-editor-lang { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #F5C518; }
    .code-editor-desc { font-size: 11px; color: rgba(255,255,255,0.5); }
    .code-lines { display: flex; }
    .code-nums { background: #1E2E48; padding: 12px 10px; font-family: 'Consolas', monospace; font-size: 12px; line-height: 1.7; color: #4A6A8A; text-align: right; min-width: 36px; user-select: none; }
    .code-textarea { flex: 1; background: #1A2340; color: #A8C4FF; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; line-height: 1.7; padding: 12px 16px; border: none; outline: none; resize: none; min-height: 160px; tab-size: 4; }
    .code-textarea::selection { background: rgba(74,111,165,0.4); }

    .row-2 { display: grid; grid-template-columns: 1fr 120px auto; gap: 16px; align-items: end; }
    .check-group { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #3A4A6A; cursor: pointer; padding-bottom: 10px; }
    input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1A2340; }

    .sep { height: 1px; background: #EEF1FA; }

    .edit-footer { display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: #F8FAFD; border-top: 1px solid #EEF1FA; }
    .spacer { flex: 1; }
    .btn { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; border: none; border-radius: 20px; padding: 10px 24px; cursor: pointer; transition: background .2s, transform .15s; display: flex; align-items: center; gap: 7px; text-decoration: none; }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary   { background: #1A2340; color: #F5C518; box-shadow: 0 4px 12px rgba(26,35,64,0.22); }
    .btn-primary:hover { background: #243060; }
    .btn-secondary { background: #EEF1FA; color: #4A5A80; border: 1.5px solid #D0D8EC; }
    .btn-secondary:hover { background: #E0E6F5; }

    /* Référence des variables disponibles */
    .ref-card { background: #F0F4FF; border: 1.5px solid #C0CCEC; border-radius: 12px; padding: 16px 20px; }
    .ref-title { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #4A6FA5; margin-bottom: 12px; }
    .ref-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
    .ref-col-title { font-size: 11px; font-weight: 800; color: #2E4080; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
    .ref-item { font-family: 'Consolas', monospace; font-size: 11px; color: #1A2340; background: #DDE7FF; border-radius: 4px; padding: 2px 7px; margin-bottom: 4px; display: inline-block; }
    .ref-item-desc { font-size: 11px; color: #6B7A9A; margin-bottom: 4px; }
</style>
@endpush

@section('content')
<form method="POST" action="{{ route('admin.regles-calcul.update', $regle->id) }}" class="edit-page">
    @csrf @method('PUT')

    <div class="edit-card">
        <div class="edit-head">
            <div class="edit-head-title">{{ $regle->nom }}</div>
            <div class="edit-head-code">code: {{ $regle->code }}</div>
        </div>
        <div class="edit-body">

            {{-- Nom + ordre + actif --}}
            <div class="row-2">
                <div class="field-group">
                    <label class="field-label">Nom de la règle</label>
                    <input type="text" name="nom" value="{{ old('nom', $regle->nom) }}" required>
                </div>
                <div class="field-group">
                    <label class="field-label">Ordre</label>
                    <input type="number" name="ordre" value="{{ old('ordre', $regle->ordre) }}" min="1" style="width:100px">
                    <span class="field-hint">Exécution dans cet ordre</span>
                </div>
                <label class="check-group">
                    <input type="checkbox" name="actif" value="1" {{ $regle->actif ? 'checked' : '' }}>
                    Règle active
                </label>
            </div>

            {{-- Description --}}
            <div class="field-group">
                <label class="field-label">Description</label>
                <textarea name="description" rows="2">{{ old('description', $regle->description) }}</textarea>
                <span class="field-hint">Explication en français de ce que fait cette règle</span>
            </div>

            <div class="sep"></div>

            {{-- Condition JS --}}
            <div class="field-group">
                <label class="field-label">Condition — Quand cette règle s'applique-t-elle ?</label>
                <div class="code-editor-wrap">
                    <div class="code-editor-bar">
                        <span class="code-editor-lang">JavaScript</span>
                        <span class="code-editor-desc">Doit renvoyer <strong style="color:#F5C518">true</strong> ou <strong style="color:#F5C518">false</strong>. Les commentaires // sont autorisés.</span>
                    </div>
                    <div class="code-lines">
                        <div class="code-nums" id="nums-cond"></div>
                        <textarea class="code-textarea" name="condition_js" id="condition_js"
                                  oninput="majLignes('condition_js','nums-cond')"
                                  onkeydown="handleTab(event)">{{ old('condition_js', $regle->condition_js) }}</textarea>
                    </div>
                </div>
                <span class="field-hint">Utilisez <code>vars.</code>, <code>tarif.</code>, <code>helpers.</code> — voir la référence ci-dessous</span>
            </div>

            {{-- Action JS --}}
            <div class="field-group">
                <label class="field-label">Action — Que modifie-t-elle ?</label>
                <div class="code-editor-wrap">
                    <div class="code-editor-bar">
                        <span class="code-editor-lang">JavaScript</span>
                        <span class="code-editor-desc">Modifier les propriétés de <strong style="color:#F5C518">vars</strong> directement. Ne pas retourner de valeur.</span>
                    </div>
                    <div class="code-lines">
                        <div class="code-nums" id="nums-action"></div>
                        <textarea class="code-textarea" name="action_js" id="action_js"
                                  oninput="majLignes('action_js','nums-action')"
                                  onkeydown="handleTab(event)" style="min-height:220px">{{ old('action_js', $regle->action_js) }}</textarea>
                    </div>
                </div>
            </div>

        </div>
        <div class="edit-footer">
            <a href="{{ route('admin.regles-calcul.index') }}" class="btn btn-secondary">← Retour</a>
            <div class="spacer"></div>
            <button type="submit" class="btn btn-primary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                Enregistrer
            </button>
        </div>
    </div>

    {{-- Référence des variables --}}
    <div class="ref-card">
        <div class="ref-title">📖 Variables disponibles dans condition_js et action_js</div>
        <div class="ref-grid">
            <div>
                <div class="ref-col-title">vars — état du trajet</div>
                <div><span class="ref-item">vars.kms_reel</span> <span class="ref-item-desc">km saisis</span></div>
                <div><span class="ref-item">vars.kms_nbre</span> <span class="ref-item-desc">km à facturer</span></div>
                <div><span class="ref-item">vars.kms_prix</span> <span class="ref-item-desc">prix/km (modifiable)</span></div>
                <div><span class="ref-item">vars.forfait_nbre</span> <span class="ref-item-desc">nbre PeC</span></div>
                <div><span class="ref-item">vars.forfait_prix</span> <span class="ref-item-desc">prix PeC (modifiable)</span></div>
                <div><span class="ref-item">vars.fgv_coche</span> <span class="ref-item-desc">bool FGV coché</span></div>
                <div><span class="ref-item">vars.fgv_nbre</span> <span class="ref-item-desc">nbre FGV</span></div>
                <div><span class="ref-item">vars.fgv_prix</span> <span class="ref-item-desc">prix FGV (modifiable)</span></div>
                <div><span class="ref-item">vars.drom</span> <span class="ref-item-desc">montant DROM</span></div>
                <div><span class="ref-item">vars.tpmr</span> <span class="ref-item-desc">montant TPMR</span></div>
                <div><span class="ref-item">vars.peage</span> <span class="ref-item-desc">montant péage</span></div>
                <div><span class="ref-item">vars.forfait_choix</span> <span class="ref-item-desc">forfait sélectionné</span></div>
                <div><span class="ref-item">vars.nb_personnes</span> <span class="ref-item-desc">nb personnes</span></div>
                <div><span class="ref-item">vars.hospit_coche</span> <span class="ref-item-desc">bool hospit</span></div>
                <div><span class="ref-item">vars.tpmr_coche</span> <span class="ref-item-desc">bool TPMR coché</span></div>
                <div><span class="ref-item">vars.drom_coche</span> <span class="ref-item-desc">bool DROM coché</span></div>
                <div><span class="ref-item">vars.refus_partage</span> <span class="ref-item-desc">bool refus partage</span></div>
                <div><span class="ref-item">vars.heure_depart</span> <span class="ref-item-desc">"HH:MM"</span></div>
                <div><span class="ref-item">vars.heure_arrivee</span> <span class="ref-item-desc">"HH:MM"</span></div>
                <div><span class="ref-item">vars.date</span> <span class="ref-item-desc">"YYYY-MM-DD"</span></div>
            </div>
            <div>
                <div class="ref-col-title">tarif — valeurs du tarif</div>
                <div><span class="ref-item">tarif.prise_en_charge</span></div>
                <div><span class="ref-item">tarif.prix_km</span></div>
                <div><span class="ref-item">tarif.forfait_grande_ville</span></div>
                <div><span class="ref-item">tarif.km_inclus</span></div>
                <div><span class="ref-item">tarif.drom</span></div>
                <div><span class="ref-item">tarif.tpmr</span></div>
                <div><span class="ref-item">tarif.maj_nuit_dimanche</span></div>
                <div><span class="ref-item">tarif.maj_km_inf50</span></div>
                <div><span class="ref-item">tarif.maj_km_sup50</span></div>
                <div><span class="ref-item">tarif.km_seul</span></div>
                <div><span class="ref-item">tarif.heure_nuit_debut</span></div>
                <div><span class="ref-item">tarif.heure_nuit_fin</span></div>
                <div><span class="ref-item">tarif.maj_2_personnes</span></div>
                <div><span class="ref-item">tarif.maj_sup2_personnes</span></div>
                <div><span class="ref-item">tarif.maj_sup3_personnes</span></div>
                <div><span class="ref-item">tarif.forfaits</span> <span class="ref-item-desc">[]</span></div>
            </div>
            <div>
                <div class="ref-col-title">helpers — fonctions utilitaires</div>
                <div><span class="ref-item">helpers.estNuitDimFerie(hDep, hArr, date, tarif)</span></div>
                <div class="ref-item-desc" style="margin-left:4px">→ bool : détecte nuit/dim/férié</div>
                <div><span class="ref-item">helpers.heureEnMinutes("HH:MM")</span></div>
                <div class="ref-item-desc" style="margin-left:4px">→ int : "20:30" → 1230</div>
                <div><span class="ref-item">helpers.estFerie("YYYY-MM-DD")</span></div>
                <div class="ref-item-desc" style="margin-left:4px">→ bool : jour férié ?</div>
                <div><span class="ref-item">helpers.jourSemaine("YYYY-MM-DD")</span></div>
                <div class="ref-item-desc" style="margin-left:4px">→ int : 0=dim, 1=lun…6=sam</div>
                <div><span class="ref-item">helpers.arrondi(val, dec)</span></div>
                <div class="ref-item-desc" style="margin-left:4px">→ arrondi à dec décimales</div>
            </div>
        </div>
    </div>

</form>
@endsection

@push('scripts')
<script>
function majLignes(taId, numsId) {
    const ta   = document.getElementById(taId);
    const nums = document.getElementById(numsId);
    const n    = ta.value.split('\n').length;
    nums.innerHTML = Array.from({length: n}, (_,i) => i+1).join('\n');
}
function handleTab(e) {
    if (e.key !== 'Tab') return;
    e.preventDefault();
    const ta  = e.target;
    const s   = ta.selectionStart;
    ta.value  = ta.value.slice(0,s) + '    ' + ta.value.slice(ta.selectionEnd);
    ta.selectionStart = ta.selectionEnd = s + 4;
    majLignes(ta.id, ta.id === 'condition_js' ? 'nums-cond' : 'nums-action');
}
document.addEventListener('DOMContentLoaded', () => {
    majLignes('condition_js', 'nums-cond');
    majLignes('action_js',    'nums-action');
});
</script>
@endpush