@extends('client.layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Ticket #{{ $ticket->id }}: {{ $ticket->titulo }}</h4>
                    <div>
                        {!! $ticket->prioridad_badge !!}
                        {!! $ticket->estatus_badge !!}
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="text-muted">Descripcion del problema:</h6>
                        <p class="border p-3 rounded bg-light">{{ $ticket->descripcion }}</p>
                    </div>

                    <hr>

                    <h5 class="mb-3">Conversacion</h5>
                    <div class="chat-container" style="max-height: 400px; overflow-y: auto;">
                        @forelse ($ticket->respuestas as $respuesta)
                            <div class="d-flex mb-3 {{ $respuesta->user_id == $ticket->user_id ? '' : 'flex-row-reverse' }}">
                                <div class="card {{ $respuesta->user_id == $ticket->user_id ? 'bg-light' : 'bg-primary text-white' }}" style="max-width: 80%;">
                                    <div class="card-body py-2 px-3">
                                        <small class="d-block {{ $respuesta->user_id == $ticket->user_id ? 'text-muted' : 'text-white-50' }}">
                                            <strong>{{ $respuesta->usuario->name }} {{ $respuesta->usuario->lastname }}</strong>
                                            - {{ $respuesta->created_at->format('d/m/Y H:i') }}
                                        </small>
                                        <p class="mb-0 mt-1">{{ $respuesta->mensaje }}</p>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p class="text-muted text-center">No hay respuestas aun</p>
                        @endforelse
                    </div>

                    @if($ticket->estatus !== 'cerrado')
                        <hr>
                        <h6>Agregar Respuesta</h6>
                        <form id="form-respuesta">
                            @csrf
                            <div class="mb-3">
                                <textarea class="form-control" id="mensaje" name="mensaje" rows="3" required placeholder="Escribe tu respuesta..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Enviar Respuesta</button>
                        </form>
                    @else
                        <div class="alert alert-secondary mt-3">
                            Este ticket esta cerrado y no acepta mas respuestas.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Informacion</h5>
                </div>
                <div class="card-body">
                    <p><strong>Fecha:</strong> {{ $ticket->created_at->format('d/m/Y H:i') }}</p>
                    <p><strong>Prioridad:</strong> {!! $ticket->prioridad_badge !!}</p>
                    <p><strong>Estado:</strong> {!! $ticket->estatus_badge !!}</p>
                    @if($ticket->asignado)
                        <p><strong>Asignado a:</strong> {{ $ticket->asignado->name }}</p>
                    @endif
                    @if($ticket->fecha_cierre)
                        <p><strong>Cerrado:</strong> {{ $ticket->fecha_cierre->format('d/m/Y H:i') }}</p>
                    @endif
                </div>
            </div>

            @if($ticket->evidencias->count() > 0)
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Evidencias</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        @foreach($ticket->evidencias as $evidencia)
                            <li class="list-group-item px-0">
                                <a href="{{ $evidencia->ruta() }}" target="_blank">{{ $evidencia->filename }}</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif

            <a href="{{ route('client.tickets.index') }}" class="btn btn-secondary w-100 mt-3">Volver al listado</a>
        </div>
    </div>
@endsection

@push('javascript')
<script>
    $('#form-respuesta').on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            url: "{{ route('client.tickets.responder', $ticket->id) }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                Swal.fire({
                    title: 'Exito',
                    text: data.message,
                    icon: 'success',
                    timer: 1500
                }).then(() => {
                    location.reload();
                });
            },
            error: function(xhr) {
                Swal.fire({
                    title: 'Error',
                    text: xhr.responseJSON?.error || 'Error al enviar la respuesta',
                    icon: 'error'
                });
            }
        });
    });
</script>
@endpush