@extends('layouts.app')

@section('title', 'Ticket ' . $ticket->ticket_number)

@section('content')
@php
    $statusLabels = ['open' => 'Abierto', 'in_progress' => 'En Progreso', 'resolved' => 'Resuelto', 'closed' => 'Cerrado'];
    $priorityLabels = ['low' => 'Baja', 'medium' => 'Media', 'high' => 'Alta', 'urgent' => 'Urgente'];
    
    $statusColors = ['open' => 'warning', 'in_progress' => 'info', 'resolved' => 'success', 'closed' => 'muted'];
    $priorityColors = ['low' => 'muted', 'medium' => 'primary', 'high' => 'warning', 'urgent' => 'danger'];
@endphp

<div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
    <a href="{{ route('tickets.index') }}" style="display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s;" onmouseover="this.style.color='var(--primary)'" onmouseout="this.style.color='var(--text-muted)'">
        <i class="ph ph-arrow-left"></i> Volver a los tickets
    </a>
    @if(auth()->user()->isAdmin())
        <form action="{{ route('tickets.destroy', $ticket) }}" method="POST" style="margin: 0;" onsubmit="return confirmDelete(event, '¿Estás seguro de que deseas eliminar este ticket? Esta acción no se puede deshacer.');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-danger btn-sm" title="Eliminar Ticket">
                <i class="ph ph-trash"></i> Eliminar
            </button>
        </form>
    @endif
</div>

<div class="content-header" style="margin-bottom: 25px;">
    <div class="header-title" style="width: 100%;">
        <h1 style="margin-bottom: 10px;">{{ $ticket->ticket_number }} - {{ $ticket->title }}</h1>
        <div style="display: flex; gap: 15px; align-items: center;">
            <span style="font-size: 0.9rem; color: var(--text-muted);">
                Estado: <strong id="ticket-status-badge" class="badge badge-{{ $statusColors[$ticket->status] ?? 'primary' }}" style="font-size: 0.75rem; transition: all 0.3s ease;">{{ strtoupper($statusLabels[$ticket->status] ?? $ticket->status) }}</strong>
            </span>
            <span style="font-size: 0.9rem; color: var(--text-muted);">
                Prioridad: <strong class="badge badge-{{ $priorityColors[$ticket->priority] ?? 'primary' }}" style="font-size: 0.75rem;">{{ strtoupper($priorityLabels[$ticket->priority] ?? $ticket->priority) }}</strong>
            </span>
        </div>
        @if($ticket->company && $ticket->company->address)
        <div style="margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--text-secondary); font-size: 0.95rem; width: 100%;">
            <div style="display: flex; align-items: center; gap: 5px;">
                <i class="ph ph-map-pin" style="color: var(--primary); font-size: 1.1rem;"></i> 
                <strong>Dirección del servicio:</strong> 
                <span style="color: var(--text-primary); font-weight: 500;">
                    {{ $ticket->company->address }}@if($ticket->company->city) ({{ $ticket->company->city }})@endif
                </span>
            </div>
            <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($ticket->company->address . ($ticket->company->city ? ', ' . $ticket->company->city : '')) }}" 
               target="_blank" 
               class="btn btn-outline btn-icon btn-sm" 
               title="Abrir en GPS" 
               style="width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--primary); border-color: var(--primary); flex: 0 0 32px !important; margin-left: auto;">
                <i class="ph ph-navigation-arrow" style="font-size: 1rem;"></i>
            </a>
        </div>
        @endif
    </div>
</div>

<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">
    
    <div class="card">
        <div class="card-header" style="border-bottom: 1px solid var(--border-color, #eee); padding-bottom: 10px; margin-bottom: 10px;">
            <h3 style="margin: 0;">Descripción original</h3>
        </div>
        <div class="card-body">
            <p style="white-space: pre-wrap;">{{ $ticket->description }}</p>
        </div>
    </div>

    @if(Auth::user()->isAdmin() || (Auth::user()->isTechnician() && Auth::id() === $ticket->assigned_to))
    <div class="card">
        <div class="card-header" style="border-bottom: 1px solid var(--border-color, #eee); padding-bottom: 10px; margin-bottom: 10px;">
            <h3 style="margin: 0;">Actualizar Estado</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('tickets.status', $ticket) }}" method="POST">
                @csrf
                <div class="form-group" style="margin-bottom: 10px;">
                    <select name="status" class="form-control" style="width: 100%; padding: 8px;">
                        <option value="open" {{ $ticket->status == 'open' ? 'selected' : '' }}>Abierto</option>
                        <option value="in_progress" {{ $ticket->status == 'in_progress' ? 'selected' : '' }}>En Progreso</option>
                        <option value="resolved" {{ $ticket->status == 'resolved' ? 'selected' : '' }}>Resuelto</option>
                        <option value="closed" {{ $ticket->status == 'closed' ? 'selected' : '' }}>Cerrado</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%;">Actualizar</button>
            </form>
        </div>
    </div>
    @elseif(Auth::user()->isClient() && $ticket->status !== 'closed' && $ticket->status !== 'resolved')
    <div class="card" style="border: 1px solid var(--danger);">
        <div class="card-body">
            <form action="{{ route('tickets.status', $ticket) }}" method="POST" onsubmit="confirmDelete(event, '¿Estás seguro de que deseas cancelar este ticket? Esta acción no se puede deshacer.')">
                @csrf
                <input type="hidden" name="status" value="closed">
                <button type="submit" class="btn btn-danger" style="width: 100%;">
                    <i class="ph ph-x-circle"></i> Cancelar Ticket
                </button>
            </form>
        </div>
    </div>
    @endif

    @if(Auth::user()->isAdmin())
    <div class="card" style="margin-top: 15px;">
        <div class="card-header" style="border-bottom: 1px solid var(--border-color, #eee); padding-bottom: 10px; margin-bottom: 10px;">
            <h3 style="margin: 0;">Asignar Técnico</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('tickets.assign', $ticket) }}" method="POST">
                @csrf
                <div class="form-group" style="margin-bottom: 10px;">
                    <select name="assigned_to" class="form-control" style="width: 100%; padding: 8px;">
                        <option value="">Sin Asignar</option>
                        @foreach($technicians as $tech)
                            <option value="{{ $tech->id }}" {{ $ticket->assigned_to == $tech->id ? 'selected' : '' }}>{{ $tech->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-secondary" style="width: 100%;">Guardar Asignación</button>
            </form>
        </div>
    </div>
    @endif

</div>

<div class="card" style="margin-top: 20px;">
    <div class="card-header" style="border-bottom: 1px solid var(--border-color, #eee); padding-bottom: 10px; margin-bottom: 10px;">
        <h3 style="margin: 0;">Historial de Mensajes</h3>
    </div>
    <div class="card-body">
        @foreach($ticket->messages as $msg)
            <div style="margin-bottom: 15px; padding: 15px; border-radius: 8px; background: {{ $msg->is_system_message ? '#f8f9fa' : ($msg->requires_approval ? '#fffbeb' : '#eef2ff') }}; border: 1px solid {{ $msg->requires_approval ? '#fcd34d' : '#e2e8f0' }};">
                <div style="font-size: 0.85rem; color: #64748b; margin-bottom: 5px;">
                    <strong>{{ $msg->user ? $msg->user->name : 'Sistema' }}</strong> &bull; {{ $msg->created_at->format('d/m/Y H:i') }}
                </div>
                <div style="white-space: pre-wrap; margin-bottom: {{ $msg->requires_approval ? '15px' : '0' }};">{{ $msg->message }}</div>
                
                @if($msg->requires_approval)
                    <div style="padding: 10px; background: #fff; border-radius: 6px; border: 1px dashed #fbbf24;">
                        @if($msg->approval_status === 'pending')
                            <div style="font-weight: 600; color: #b45309; margin-bottom: 10px;">
                                <i class="ph ph-warning-circle"></i> Esta acción requiere la aprobación del cliente.
                            </div>
                            
                            @if(Auth::user()->isClient())
                                <form action="{{ route('tickets.approve', $msg) }}" method="POST" style="display: flex; gap: 10px;">
                                    @csrf
                                    <button type="submit" name="action" value="approve" class="btn btn-success" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;">
                                        <i class="ph ph-check-circle" style="font-size: 1.2rem;"></i> Aprobar
                                    </button>
                                    <button type="submit" name="action" value="reject" class="btn btn-danger" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;" onclick="confirmAction(event, '¿Estás seguro de que deseas rechazar esta solicitud?')">
                                        <i class="ph ph-x-circle" style="font-size: 1.2rem;"></i> Rechazar
                                    </button>
                                </form>
                            @else
                                <div style="font-size: 0.9rem; color: #64748b;">⏳ Esperando que el cliente tome una decisión...</div>
                            @endif
                            
                        @elseif($msg->approval_status === 'approved')
                            <div style="color: #10b981; font-weight: 600; display: flex; align-items: center; gap: 5px;">
                                <i class="ph ph-check-circle" style="font-size: 1.2rem;"></i> Aprobado por {{ $msg->approvedBy ? $msg->approvedBy->name : 'el cliente' }} el {{ $msg->approved_at ? $msg->approved_at->format('d/m/Y H:i') : '' }}
                            </div>
                        @elseif($msg->approval_status === 'rejected')
                            <div style="color: #ef4444; font-weight: 600; display: flex; align-items: center; gap: 5px;">
                                <i class="ph ph-x-circle" style="font-size: 1.2rem;"></i> Rechazado por {{ $msg->approvedBy ? $msg->approvedBy->name : 'el cliente' }} el {{ $msg->approved_at ? $msg->approved_at->format('d/m/Y H:i') : '' }}
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        @endforeach

        @if($ticket->status !== 'closed')
        <form action="{{ route('tickets.reply', $ticket) }}" method="POST" style="margin-top: 20px; border-top: 1px solid var(--border-color, #eee); padding-top: 15px;">
            @csrf
            <div class="form-group" style="margin-bottom: 10px;">
                <textarea name="message" class="form-control" rows="3" style="width: 100%; padding: 8px;" placeholder="Escribe una respuesta..." required></textarea>
            </div>
            
            @if(Auth::user()->isTechnician() || Auth::user()->isAdmin())
            <div style="margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                <input type="checkbox" name="requires_approval" id="requires_approval" value="1" style="width: 18px; height: 18px; cursor: pointer;">
                <label for="requires_approval" style="cursor: pointer; font-weight: 500; color: #b45309;">
                    <i class="ph ph-warning-circle"></i> Solicitar aprobación del cliente para este presupuesto/acción
                </label>
            </div>
            @endif
            
            <button type="submit" class="btn btn-primary">Enviar Mensaje</button>
        </form>
        @endif
    </div>
</div>

@push('scripts')
<script type="module">
    document.addEventListener('DOMContentLoaded', () => {
        if (window.Echo) {
            window.Echo.private('ticket.' + {{ $ticket->id }})
                .listen('TicketUpdated', (e) => {
                    let toastMessage = '';
                    let showToast = false;

                    if (e.type === 'status_changed') {
                        // Update status badge
                        const badge = document.getElementById('ticket-status-badge');
                        if (badge) {
                            badge.className = 'badge badge-' + e.status_color;
                            badge.innerText = e.status_label;
                            
                            // Visual flash effect
                            badge.style.transform = 'scale(1.2)';
                            setTimeout(() => badge.style.transform = 'scale(1)', 300);
                        }
                        toastMessage = `El estado ha cambiado a ${e.status_label}. Recarga la página para ver el historial completo.`;
                        showToast = true;
                    } else if (e.type === 'approval_requested') {
                        toastMessage = 'El técnico ha solicitado una aprobación de presupuesto/acción. Recarga la página para revisar.';
                        showToast = true;
                    } else if (e.type === 'approval_answered') {
                        toastMessage = e.message + ' Recarga la página para ver los detalles.';
                        showToast = true;
                    } else if (e.type === 'new_reply') {
                        toastMessage = 'Hay un nuevo mensaje en el ticket. Recarga la página para leerlo.';
                        showToast = true;
                    } else if (e.type === 'reassigned') {
                        @if(Auth::user()->isTechnician() && !Auth::user()->isAdmin())
                            if (e.assigned_to != {{ Auth::id() }}) {
                                Swal.fire({
                                    title: 'Ticket Reasignado',
                                    text: 'Este ticket ha sido reasignado a otro técnico o perdiste acceso a la empresa y ya no se encuentra bajo tu cargo.',
                                    icon: 'warning',
                                    confirmButtonText: 'Volver a mis tickets',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    customClass: {
                                        confirmButton: 'btn btn-primary'
                                    }
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location.href = "{{ route('tickets.index') }}";
                                    }
                                });
                                return; // Detener la ejecución normal
                            }
                        @endif
                        
                        toastMessage = e.message + ' Recarga la página para ver los detalles.';
                        showToast = true;
                    }

                    if (showToast) {
                        // Create and show a toast
                        const toast = document.createElement('div');
                        toast.innerHTML = `
                            <div style="position: fixed; bottom: 20px; right: 20px; background: #10b981; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9999; display: flex; align-items: center; gap: 10px;">
                                <i class="ph ph-bell-ringing" style="font-size: 1.5rem;"></i>
                                <div>
                                    <strong style="display: block; font-size: 1.1rem;">Actualización en tiempo real</strong>
                                    <span style="font-size: 0.9rem;">${toastMessage}</span>
                                </div>
                                <button onclick="window.location.reload()" style="background: white; border: none; color: #10b981; cursor: pointer; margin-left: 10px; padding: 5px 10px; border-radius: 4px; font-weight: bold;">
                                    Actualizar
                                </button>
                                <button onclick="this.parentElement.remove()" style="background: none; border: none; color: white; cursor: pointer; margin-left: 5px;">
                                    <i class="ph ph-x"></i>
                                </button>
                            </div>
                        `;
                        document.body.appendChild(toast);
                        
                        setTimeout(() => { if(toast.parentNode) toast.remove(); }, 15000);
                    }
                });
        }
    });
</script>
@endpush

@endsection