@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="h3 mb-1">Ticket #{{ $soporte->id }} - {{ $soporte->titulo }}</h2>
                    <p class="text-muted mb-0">{{ $soporte->categoria }}</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('soporte.edit', $soporte) }}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                    <a href="{{ route('soporte.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Información del Ticket -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Detalles del Ticket</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold">Cliente:</td>
                                    <td>{{ $soporte->cliente->nombre }} {{ $soporte->cliente->apellido }}</td>
                                </tr>
                                @if($soporte->cliente->empresa)
                                <tr>
                                    <td class="fw-bold">Empresa:</td>
                                    <td>{{ $soporte->cliente->empresa }}</td>
                                </tr>
                                @endif
                                <tr>
                                    <td class="fw-bold">Email:</td>
                                    <td>{{ $soporte->cliente->email }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Teléfono:</td>
                                    <td>{{ $soporte->cliente->telefono }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Técnico:</td>
                                    <td>
                                        @if($soporte->tecnico)
                                            {{ $soporte->tecnico->name }}
                                        @else
                                            <span class="text-muted">Sin asignar</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold">Prioridad:</td>
                                    <td>
                                        @php
                                            $prioridadClass = [
                                                'baja' => 'success',
                                                'media' => 'warning', 
                                                'alta' => 'danger',
                                                'critica' => 'dark'
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $prioridadClass[$soporte->prioridad] ?? 'secondary' }}">
                                            {{ ucfirst($soporte->prioridad) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Estado:</td>
                                    <td>
                                        @php
                                            $estadoClass = [
                                                'pendiente' => 'warning',
                                                'asignado' => 'info',
                                                'en_proceso' => 'primary',
                                                'resuelto' => 'success',
                                                'cerrado' => 'secondary'
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $estadoClass[$soporte->estado] ?? 'secondary' }}">
                                            {{ ucwords(str_replace('_', ' ', $soporte->estado)) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Fecha Creación:</td>
                                    <td>{{ $soporte->fecha_creacion ? $soporte->fecha_creacion->format('d/m/Y H:i') : $soporte->created_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                @if($soporte->fecha_asignacion)
                                <tr>
                                    <td class="fw-bold">Fecha Asignación:</td>
                                    <td>{{ $soporte->fecha_asignacion->format('d/m/Y H:i') }}</td>
                                </tr>
                                @endif
                                @if($soporte->fecha_resolucion)
                                <tr>
                                    <td class="fw-bold">Fecha Resolución:</td>
                                    <td>{{ $soporte->fecha_resolucion->format('d/m/Y H:i') }}</td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6 class="fw-bold">Descripción del Problema:</h6>
                            <div class="border rounded p-3 bg-light">
                                {{ $soporte->descripcion }}
                            </div>
                        </div>
                    </div>

                    @if($soporte->observaciones)
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6 class="fw-bold">Observaciones:</h6>
                            <div class="border rounded p-3 bg-light">
                                {{ $soporte->observaciones }}
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Acciones y Estado -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Acciones Rápidas</h6>
                </div>
                <div class="card-body">
                    @if($soporte->estado !== 'resuelto' && $soporte->estado !== 'cerrado')
                        <!-- Cambiar Estado -->
                        <div class="mb-3">
                            <h6>Cambiar Estado:</h6>
                            <div class="d-grid gap-2">
                                @if($soporte->estado === 'pendiente')
                                    <form action="{{ route('soporte.cambiar-estado', $soporte) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="estado" value="en_proceso">
                                        <button type="submit" class="btn btn-info w-100">
                                            <i class="fas fa-play"></i> Iniciar Trabajo
                                        </button>
                                    </form>
                                @endif

                                @if($soporte->estado !== 'resuelto')
                                    <form action="{{ route('soporte.cambiar-estado', $soporte) }}" method="POST" 
                                          onsubmit="return confirm('¿Está seguro de marcar este ticket como resuelto?')">
                                        @csrf
                                        <input type="hidden" name="estado" value="resuelto">
                                        <button type="submit" class="btn btn-success w-100">
                                            <i class="fas fa-check"></i> Marcar Resuelto
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>

                        <!-- Asignar Técnico -->
                        @if(!$soporte->tecnico_id)
                            <div class="mb-3">
                                <h6>Asignar Técnico:</h6>
                                <form action="{{ route('soporte.asignar', $soporte) }}" method="POST">
                                    @csrf
                                    <div class="mb-2">
                                        <select name="tecnico_id" class="form-select" required>
                                            <option value="">Seleccionar técnico</option>
                                            @foreach(\App\Models\User::where('rol', 'tecnico')->where('estado', true)->get() as $tecnico)
                                                <option value="{{ $tecnico->id }}">{{ $tecnico->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fas fa-user-plus"></i> Asignar
                                    </button>
                                </form>
                            </div>
                        @endif
                    @endif

                    <!-- Información de Tiempo -->
                    <div class="mt-3">
                        <h6>Tiempo de Resolución:</h6>
                        @if($soporte->fecha_resolucion && $soporte->fecha_creacion)
                            @php
                                $tiempoResolucion = $soporte->fecha_creacion->diffInHours($soporte->fecha_resolucion);
                            @endphp
                            <p class="text-success">
                                <i class="fas fa-clock"></i> {{ $tiempoResolucion }} horas
                            </p>
                        @else
                            @php
                                $tiempoTranscurrido = $soporte->fecha_creacion ? $soporte->fecha_creacion->diffInHours(now()) : $soporte->created_at->diffInHours(now());
                            @endphp
                            <p class="text-warning">
                                <i class="fas fa-clock"></i> {{ $tiempoTranscurrido }} horas transcurridas
                            </p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection