@extends('layouts.app')
@section('title', 'Courriers types')
@section('page-title', 'Fichiers de base — Courriers types')

@push('styles')
<style>
    .c-card{background:#fff;border-radius:12px;border:1px solid var(--border);padding:18px 22px;margin-bottom:14px;}
    .f-label{font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap;}
    .f-input{border:1.5px solid var(--border);border-radius:7px;padding:5px 9px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff;outline:none;transition:border-color 0.2s;}
    .f-input:focus{border-color:var(--yellow);}
    .f-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px;}
    .s-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--navy);border-bottom:2px solid var(--yellow);padding-bottom:5px;margin-bottom:14px;}

    /* Toolbar éditeur */
    .editor-toolbar{display:flex;align-items:center;gap:2px;padding:6px 8px;background:#F4F6FB;border:1.5px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;flex-wrap:wrap;}
    .tb-select{border:1.5px solid var(--border);border-radius:5px;padding:3px 22px 3px 6px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;background:#fff;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-size:12px;}
    .tb-sep{width:1px;height:20px;background:var(--border);margin:0 4px;}
    .tb-btn{background:none;border:1px solid transparent;border-radius:4px;padding:3px 6px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;min-width:26px;justify-content:center;transition:background 0.15s;}
    .tb-btn:hover{background:#E2E8F0;border-color:var(--border);}
    .tb-btn.active{background:#DBEAFE;border-color:#3182CE;}
    .tb-color{width:18px;height:18px;border-radius:3px;cursor:pointer;border:2px solid var(--border);}

    /* Zone éditeur */
    .editor-area{min-height:280px;border:1.5px solid var(--border);border-radius:0 0 8px 8px;padding:14px 16px;font-family:'Nunito',sans-serif;font-size:14px;color:var(--text);line-height:1.7;outline:none;background:#fff;}
    .editor-area:focus{border-color:var(--yellow);}
    .editor-area:empty::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none;}

    .action-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:2px solid var(--border);padding-top:14px;}
    .act-left{display:flex;gap:10px;align-items:center;}
    .act-right{display:flex;gap:8px;align-items:center;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:8px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-y:hover{background:var(--yellow-dark);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
    .btn-ghost:hover{background:#F4F6FB;}
    .icon-btn{background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:5px;display:inline-flex;align-items:center;}
    .icon-btn:hover{background:#F4F6FB;}
</style>
@endpush

@section('content')

<div class="c-card">
    <div class="s-title">Saisie des courriers types</div>

    {{-- Sélecteur courrier + Ajouter --}}
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;">
        <select class="f-input f-select" style="flex:1;max-width:500px;" id="courrierId" onchange="loadCourrier()">
            <option value="">— Sélectionner un courrier type —</option>
            <option value="1">Lettre de convocation patient</option>
            <option value="2">Confirmation de prise en charge</option>
            <option value="3">Attestation de transport</option>
            <option value="4">Courrier annulation rendez-vous</option>
        </select>
        <button type="button" class="btn-y" style="padding:6px 18px;" onclick="nouveauCourrier()">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Ajouter
        </button>
    </div>

    {{-- Description --}}
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
        <label class="f-label" style="min-width:80px;">Description</label>
        <input type="text" class="f-input" style="flex:1;" id="courrierDesc" placeholder="Description du courrier type…">
    </div>

    {{-- Barre d'outils éditeur --}}
    <div class="editor-toolbar" id="editorToolbar">
        {{-- Style de paragraphe --}}
        <select class="tb-select" id="selStyle" onchange="execFmt('formatBlock',this.value)">
            <option value="p">Zone de saisie</option>
            <option value="h1">Titre 1</option>
            <option value="h2">Titre 2</option>
            <option value="h3">Titre 3</option>
        </select>
        {{-- Taille police --}}
        <select class="tb-select" style="width:55px;" onchange="execFmt('fontSize',this.value)">
            @foreach([1,2,3,4,5,6,7] as $s)
            <option value="{{$s}}" {{$s==3?'selected':''}}>{{$s}}</option>
            @endforeach
        </select>
        <div class="tb-sep"></div>
        {{-- Gras Italique Souligné --}}
        <button class="tb-btn" onclick="execFmt('bold')" title="Gras"><strong>G</strong></button>
        <button class="tb-btn" onclick="execFmt('italic')" title="Italique"><em>I</em></button>
        <button class="tb-btn" onclick="execFmt('strikeThrough')" title="Barré"><s>S</s></button>
        <div class="tb-sep"></div>
        {{-- Couleur texte --}}
        <span style="font-size:12px;font-weight:700;color:var(--text-muted);">A</span>
        <input type="color" class="tb-color" value="#000000" onchange="execFmt('foreColor',this.value)" title="Couleur du texte">
        {{-- Couleur fond --}}
        <span style="font-size:12px;font-weight:700;color:var(--text-muted);">ab</span>
        <input type="color" class="tb-color" value="#ffffff" onchange="execFmt('hiliteColor',this.value)" title="Couleur de fond">
        <div class="tb-sep"></div>
        {{-- Alignements --}}
        <button class="tb-btn" onclick="execFmt('justifyLeft')" title="Aligné gauche">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="10" width="12" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="3" y="20" width="12" height="2"/></svg>
        </button>
        <button class="tb-btn" onclick="execFmt('justifyCenter')" title="Centré">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="6" y="10" width="12" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="6" y="20" width="12" height="2"/></svg>
        </button>
        <button class="tb-btn" onclick="execFmt('justifyRight')" title="Aligné droite">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="9" y="10" width="12" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="9" y="20" width="12" height="2"/></svg>
        </button>
        <button class="tb-btn" onclick="execFmt('justifyFull')" title="Justifié">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="10" width="18" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="3" y="20" width="18" height="2"/></svg>
        </button>
        <div class="tb-sep"></div>
        {{-- Listes --}}
        <button class="tb-btn" onclick="execFmt('insertOrderedList')" title="Liste numérotée">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
        </button>
        <button class="tb-btn" onclick="execFmt('insertUnorderedList')" title="Liste à puces">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1" fill="var(--text)"/><circle cx="4" cy="12" r="1" fill="var(--text)"/><circle cx="4" cy="18" r="1" fill="var(--text)"/></svg>
        </button>
        <div class="tb-sep"></div>
        {{-- Indentation --}}
        <button class="tb-btn" onclick="execFmt('outdent')" title="Désindenter">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/><polyline points="9 8 5 12 9 16"/></svg>
        </button>
        <button class="tb-btn" onclick="execFmt('indent')" title="Indenter">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/><polyline points="9 8 13 12 9 16"/></svg>
        </button>
        {{-- Image --}}
        <button class="tb-btn" onclick="insertImage()" title="Insérer image">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
        </button>
    </div>

    {{-- Zone de saisie --}}
    <div class="editor-area" id="editorArea" contenteditable="true" data-placeholder="Saisissez le contenu du courrier type…"></div>

    {{-- Actions --}}
    <div class="action-bar" style="margin-top:14px;">
        <div class="act-left">
            <button type="button" class="btn-y" onclick="saveCourrier()">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>Valider
            </button>
            <button type="button" class="btn-ghost" onclick="nouveauCourrier()">Nouveau</button>
            <a href="{{ route('dashboard') }}" class="btn-ghost">Quitter</a>
        </div>
        <div class="act-right">
            <button type="button" class="icon-btn" title="Imprimer" onclick="window.print()">
                <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;">
                    <polyline points="6 9 6 2 18 2 18 9"/>
                    <path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>
                    <rect x="6" y="14" width="12" height="8"/>
                </svg>
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function execFmt(cmd, val) {
    document.getElementById('editorArea').focus();
    document.execCommand(cmd, false, val || null);
}
function nouveauCourrier() {
    document.getElementById('courrierId').selectedIndex = 0;
    document.getElementById('courrierDesc').value = '';
    document.getElementById('editorArea').innerHTML = '';
}
function loadCourrier() {
    const id = document.getElementById('courrierId').value;
    const samples = {
        '1': { desc: 'Convocation patient', html: '<p>Madame, Monsieur,</p><p>Nous vous informons de votre prise en charge par notre service de transport sanitaire.</p><p>Cordialement,<br>Le service Transport</p>' },
        '2': { desc: 'Confirmation prise en charge', html: '<p>Nous confirmons la prise en charge de votre transport médical.</p>' },
        '3': { desc: 'Attestation transport', html: '<p>Nous attestons avoir effectué le transport de :</p><p><strong>Patient :</strong> ___________<br><strong>Date :</strong> ___________<br><strong>Trajet :</strong> ___________</p>' },
        '4': { desc: 'Annulation RDV', html: '<p>Nous vous informons de l\'annulation du transport prévu le ___________.</p>' },
    };
    if (id && samples[id]) {
        document.getElementById('courrierDesc').value = samples[id].desc;
        document.getElementById('editorArea').innerHTML = samples[id].html;
    }
}
function saveCourrier() {
    alert('Courrier sauvegardé (UI uniquement).');
}
function insertImage() {
    const url = prompt('URL de l\'image :');
    if (url) execFmt('insertImage', url);
}
</script>
@endpush