@extends('layouts.app')
@section('title', 'Nouveau ticket')
@section('page-title', 'Nouveau ticket support')

@push('styles')
<style>
.tk-form-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; max-width:780px; }
.tk-form-header { background:linear-gradient(135deg,var(--navy),var(--navy-light)); color:#fff; padding:16px 24px; font-size:15px; font-weight:800; display:flex; align-items:center; gap:10px; }
.tk-form-body { padding:28px 24px; }
.f-label { font-size:12px; font-weight:700; color:var(--text-muted); display:block; margin-bottom:5px; }
.f-input { 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); background:#fff; outline:none; width:100%; box-sizing:border-box; transition:border-color .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 10px center; background-size:14px; padding-right:30px; }
.f-group { margin-bottom:18px; }
.f-row { display:grid; grid-template-columns:1fr 200px; gap:14px; margin-bottom:18px; }

/* Éditeur */
.editor-wrap { border:1.5px solid var(--border); border-radius:8px; overflow:hidden; transition:border-color .2s; }
.editor-wrap:focus-within { border-color:var(--yellow); }
.editor-toolbar { background:#F4F6FB; border-bottom:1px solid var(--border); padding:6px 10px; display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.tb-btn { background:none; border:1px solid transparent; border-radius:5px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Nunito',sans-serif; font-size:13px; color:var(--text); transition:background .15s,border-color .15s; flex-shrink:0; }
.tb-btn:hover { background:#E8ECF4; border-color:var(--border); }
.tb-btn.active { background:#E8ECF4; border-color:var(--border); }
.tb-sep { width:1px; height:20px; background:var(--border); margin:0 4px; flex-shrink:0; }
.tb-color { width:20px; height:20px; border-radius:50%; border:2px solid #fff; outline:1px solid var(--border); cursor:pointer; flex-shrink:0; transition:outline-color .15s; }
.tb-color:hover { outline-color:var(--navy); }
.editor-content { min-height:160px; padding:12px 14px; font-family:'Nunito',sans-serif; font-size:13px; color:var(--text); outline:none; line-height:1.6; }
.editor-content:empty:before { content:attr(data-placeholder); color:var(--text-muted); pointer-events:none; }

.tk-form-actions { padding:16px 24px; border-top:1.5px solid var(--border); background:#F4F6FB; display:flex; gap:10px; }
.btn-y { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:9px 26px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.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:8px 20px; 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; }
</style>
@endpush

@section('content')
<div class="tk-form-card">
    <div class="tk-form-header">
        <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#F5C518;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
        Créer un ticket support
    </div>

    <form method="POST" action="{{ route('tickets.store') }}" id="ticketForm">
        @csrf
        <div class="tk-form-body">

            <div class="f-row">
                <div>
                    <label class="f-label">Sujet *</label>
                    <input type="text" name="sujet" class="f-input" required placeholder="Décrivez brièvement votre problème…" value="{{ old('sujet') }}">
                </div>
                <div>
                    <label class="f-label">Priorité</label>
                    <select name="priorite" class="f-input f-select">
                        <option value="normale" {{ old('priorite','normale')==='normale' ? 'selected':'' }}>🟢 Normale</option>
                        <option value="haute"   {{ old('priorite')==='haute'   ? 'selected':'' }}>🟡 Haute</option>
                        <option value="urgente" {{ old('priorite')==='urgente' ? 'selected':'' }}>🔴 Urgente</option>
                    </select>
                </div>
            </div>

            <div class="f-group">
                <label class="f-label">Message *</label>
                <div class="editor-wrap">
                    <div class="editor-toolbar">
                        <button type="button" class="tb-btn" onclick="fmt('bold')"      title="Gras"><b>B</b></button>
                        <button type="button" class="tb-btn" onclick="fmt('italic')"    title="Italique"><i>I</i></button>
                        <button type="button" class="tb-btn" onclick="fmt('underline')" title="Souligné"><u>U</u></button>
                        <div class="tb-sep"></div>
                        <button type="button" class="tb-btn" onclick="fmt('insertUnorderedList')" title="Liste">
                            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" 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"/><circle cx="3" cy="6" r="1" fill="currentColor"/><circle cx="3" cy="12" r="1" fill="currentColor"/><circle cx="3" cy="18" r="1" fill="currentColor"/></svg>
                        </button>
                        <div class="tb-sep"></div>
                        <div style="display:flex;align-items:center;gap:5px;">
                            @foreach(['#1A2340','#E53E3E','#D69E2E','#38A169','#3182CE','#805AD5','#DD6B20'] as $c)
                            <div class="tb-color" style="background:{{ $c }};" onclick="fmtColor('{{ $c }}')" title="{{ $c }}"></div>
                            @endforeach
                        </div>
                        <div class="tb-sep"></div>
                        <button type="button" class="tb-btn" onclick="fmt('removeFormat')" title="Effacer mise en forme" style="font-size:11px;">✕</button>
                    </div>
                    <div class="editor-content"
                         id="editor"
                         contenteditable="true"
                         data-placeholder="Décrivez votre problème en détail…"></div>
                </div>
                <input type="hidden" name="message" id="messageInput">
            </div>

        </div>
        <div class="tk-form-actions">
            <button type="submit" class="btn-y">
                <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="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                Envoyer le ticket
            </button>
            <a href="{{ route('tickets.index') }}" class="btn-ghost">Annuler</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function fmt(cmd) { document.execCommand(cmd, false, null); document.getElementById('editor').focus(); }
function fmtColor(color) { document.execCommand('foreColor', false, color); document.getElementById('editor').focus(); }

document.getElementById('ticketForm').addEventListener('submit', function() {
    document.getElementById('messageInput').value = document.getElementById('editor').innerHTML;
});
</script>
@endpush