@extends('tickets.guest_layout')

@section('content')
<div class="mb-4">
    <a href="{{ route('tickets.guest.dashboard') }}" class="text-muted font-weight-bold" style="text-decoration:none;">
        <i class="fas fa-arrow-left mr-2"></i> Volver al Dashboard
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow-lg border-0">
            <div class="card-header bg-white py-3 border-bottom-0">
                <h3 class="mb-0 text-dark font-weight-bold"><i class="fas fa-edit text-primary mr-2"></i> Crear Nuevo Ticket</h3>
                <p class="text-muted mb-0 mt-1 small">Completa el formulario a continuación y te responderemos lo antes posible.</p>
            </div>
            <div class="card-body p-4">
                <form action="{{ route('tickets.guest.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="form-group">
                        <label class="font-weight-bold text-dark">Categoría del Problema</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white"><i class="fas fa-list text-muted"></i></span>
                            </div>
                            <select name="ticket_category_id" class="form-control" required style="height: 50px;">
                                <option value="">Selecciona una categoría</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold text-dark">Asunto / Título</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white"><i class="fas fa-heading text-muted"></i></span>
                            </div>
                            <input type="text" name="title" class="form-control" required placeholder="Ej: Error al reproducir contenido..." style="height: 50px;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold text-dark">Descripción Detallada</label>
                        <div class="input-group">
                            <textarea name="description" class="form-control" rows="6" required placeholder="Explica tu problema con el mayor detalle posible..." style="border-radius: 8px;"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold text-dark">Adjuntos (Opcional)</label>
                        <div class="custom-file-area p-4 border rounded bg-light text-center" style="border-style: dashed !important; border-color: #ccc;">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                            <p class="text-muted mb-2">Arrastra tus archivos aquí o haz clic para seleccionar</p>
                            <input type="file" name="attachments[]" class="form-control-file" multiple accept="image/*,.pdf,.txt" style="opacity: 0; position: absolute; width: 100%; height: 100px; top:0; left:0; cursor: pointer;">
                            <small class="d-block text-muted">Permitido: Imágenes, PDF, TXT. Máx 4 archivos (10MB c/u).</small>
                        </div>
                    </div>

                    <hr class="my-4">

                    <button type="submit" class="btn btn-primary btn-lg btn-block py-3 shadow-sm font-weight-bold">
                        <i class="fas fa-paper-plane mr-2"></i> Enviar Ticket de Soporte
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 mt-4 mt-lg-0">
        <div class="card shadow-sm border-0 mb-4 bg-primary text-white">
            <div class="card-body">
                <h5 class="font-weight-bold"><i class="fas fa-info-circle mr-2"></i> Información Importante</h5>
                <p class="small mb-0 opacity-90">Nuestro equipo de soporte atiende las 24 horas. Por favor, sé paciente, recibirás una respuesta en breve.</p>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <h6 class="font-weight-bold text-dark mb-3">Preguntas Frecuentes</h6>
                
                <div class="mb-3">
                    <strong class="d-block text-dark small">¿Cuánto tardan en responder?</strong>
                    <span class="text-muted small">Normalmente respondemos en menos de 2 horas.</span>
                </div>
                
                <div class="mb-3">
                    <strong class="d-block text-dark small">¿Qué información debo incluir?</strong>
                    <span class="text-muted small">Nombre de la película/serie, dispositivo que usas y mensaje de error exacto.</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .input-group-text { border-right: 0; }
    .input-group input { border-left: 0; }
    .input-group input:focus, .input-group textarea:focus { box-shadow: none; border-color: #ced4da; } 
    .input-group-text { background-color: #fff; }
    .custom-file-area { position: relative; overflow: hidden; }
</style>
@endsection