@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto px-4 py-8">
    <a href="{{ route('client.tickets.index') }}" class="text-gray-500 hover:text-gray-700 mb-6 inline-block font-bold">
        <i class="fas fa-arrow-left mr-1"></i> Retour à la liste
    </a>

    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <div class="bg-primary px-6 py-4">
            <h1 class="text-2xl font-bold text-white">Nouveau ticket</h1>
            <p class="text-white/80 text-sm">Décrivez votre problème, nous vous répondrons rapidement.</p>
        </div>

        <div class="p-6">
            <form action="{{ route('client.tickets.store') }}" method="POST">
                @csrf

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Sujet de la demande</label>
                    <input type="text" name="subject" class="w-full border-gray-300 rounded-lg focus:ring-primary focus:border-primary" placeholder="Ex: Problème de livraison..." required>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Priorité</label>
                    <select name="priority" class="w-full border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
                        <option value="basse">🟢 Basse (Question générale)</option>
                        <option value="moyenne" selected>🟠 Moyenne (Problème standard)</option>
                        <option value="haute">🔴 Haute (Urgent / Bloquant)</option>
                    </select>
                </div>

                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Votre message</label>
                    <textarea name="content" rows="6" class="w-full border-gray-300 rounded-lg focus:ring-primary focus:border-primary" placeholder="Dites-nous tout..." required></textarea>
                </div>

                <button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white font-bold py-3 rounded-lg shadow transition">
                    Envoyer ma demande 🚀
                </button>
            </form>
        </div>
    </div>
</div>
@endsection