@extends('layouts.admin')
@section('title', 'Crear Ticket')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">
    <div>
        <a href="{{ route('admin.tickets.index') }}" class="text-xs text-gray-500 hover:text-indigo-400 mb-2 inline-block">
            <i class="fas fa-arrow-left mr-1"></i> Volver
        </a>
        <h1 class="text-xl font-bold">🎫 Crear Ticket</h1>
    </div>

    <form method="POST" action="{{ route('admin.tickets.store') }}" enctype="multipart/form-data"
          class="bg-gray-800 rounded-xl border border-gray-700 p-6 space-y-5">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {{-- Client Name --}}
            <div>
                <label class="text-sm text-gray-400 block mb-1">Nombre del cliente *</label>
                <input type="text" name="visitor_name" value="{{ old('visitor_name') }}" required
                    class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-sm focus:border-indigo-500 outline-none">
                @error('visitor_name') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            {{-- Client Email --}}
            <div>
                <label class="text-sm text-gray-400 block mb-1">Email del cliente *</label>
                <input type="email" name="visitor_email" value="{{ old('visitor_email') }}" required
                    class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-sm focus:border-indigo-500 outline-none">
                @error('visitor_email') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- Phone --}}
        <div>
            <label class="text-sm text-gray-400 block mb-1">Teléfono / WhatsApp</label>
            <input type="text" name="visitor_phone" value="{{ old('visitor_phone') }}" placeholder="809-555-1234"
                class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-sm focus:border-indigo-500 outline-none">
        </div>

        {{-- Subject --}}
        <div>
            <label class="text-sm text-gray-400 block mb-1">Asunto *</label>
            <input type="text" name="subject" value="{{ old('subject') }}" required
                class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-sm focus:border-indigo-500 outline-none">
            @error('subject') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Description --}}
        <div>
            <label class="text-sm text-gray-400 block mb-1">Descripción *</label>
            <textarea name="description" rows="5" required
                class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-sm focus:border-indigo-500 outline-none resize-y">{{ old('description') }}</textarea>
            @error('description') <p class="text-red-400 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            {{-- Priority --}}
            <div>
                <label class="text-sm text-gray-400 block mb-1">Prioridad *</label>
                <select name="priority" required
                    class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-sm focus:border-indigo-500 outline-none">
                    <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>🟢 Baja</option>
                    <option value="normal" {{ old('priority', 'normal') == 'normal' ? 'selected' : '' }}>🟡 Normal</option>
                    <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>🟠 Alta</option>
                    <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>🔴 Urgente</option>
                </select>
            </div>

            {{-- Assign Agent --}}
            <div>
                <label class="text-sm text-gray-400 block mb-1">Asignar a Agente</label>
                <select name="agent_id"
                    class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-sm focus:border-indigo-500 outline-none">
                    <option value="">— Sin asignar —</option>
                    @foreach($agents as $agent)
                    <option value="{{ $agent->id }}">{{ $agent->name }} ({{ $agent->email }})</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Submit --}}
        <div class="mt-4">
            <label class="text-sm text-gray-400 block mb-1"><i class="fas fa-paperclip mr-1"></i> Adjuntar archivos (máx 10MB c/u)</label>
            <input type="file" name="attachments[]" multiple accept="image/*,video/*,.pdf"
                class="text-xs text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:bg-gray-700 file:text-gray-300 hover:file:bg-gray-600">
        </div>

        <div class="flex items-center justify-between pt-4 border-t border-gray-700">
            <a href="{{ route('admin.tickets.index') }}" class="text-sm text-gray-500 hover:text-white transition">Cancelar</a>
            <button type="submit" class="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium transition">
                <i class="fas fa-plus-circle mr-1"></i> Crear Ticket
            </button>
        </div>
    </form>
</div>
@endsection