@extends('backend.layouts.app')

{{-- Estilos críticos en el head para evitar FOUC --}}
@push('after-styles')
<style>
.page-title-icon {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
    opacity: 0;
    animation: fadeInScale 0.6s ease forwards;
}

.page-title-icon i {
    font-size: 24px;
}

.page-title-content {
    flex: 1;
    opacity: 0;
    animation: fadeInRight 0.6s ease 0.2s forwards;
}

.page-main-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-top: 2px;
}

.c-subheader {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 20px 15px !important;
    min-height: auto !important;
}

.page-title-icon:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .page-main-title {
        font-size: 24px;
    }
    
    .page-title-icon {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }
    
    .page-title-icon i {
        font-size: 20px;
    }
    
    .page-subtitle {
        font-size: 12px;
    }
}

/* Estilos para botones de acción */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    flex-wrap: wrap;
    justify-content: center;
}

.action-buttons .btn {
    min-width: 180px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .action-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}


</style>
@endpush

{{-- Título personalizado mejorado --}}
@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-icon">
            <i class="fas fa-file-alt"></i>
        </div>
        <div class="page-title-content">
            <h1 class="page-main-title">Detalles del Trámite #{{ $tramite->id }}</h1>
            <p class="page-subtitle">Información completa del trámite seleccionado</p>
            </div>
</div>

@push('after-scripts')
<script>
$(document).ready(function() {
    // Manejar el toggle de las tablas de cambios collapsables
    $('.changes-header').on('click', function() {
        var $this = $(this);
        var target = $this.attr('data-target');
        var $collapse = $(target);
        
        // Toggle del aria-expanded para la animación del icono
        setTimeout(function() {
            var isExpanded = $collapse.hasClass('show');
            $this.attr('aria-expanded', isExpanded);
        }, 50);
    });
});
</script>
@endpush

@endsection

@section('content')
    @stack('before-styles')
    @vite(['resources/sass/tramite-details.scss'])
    @stack('after-styles')

<div class="details-container">
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Sección Principal -->
    <div class="detail-card priority-section">
        <div class="detail-card-header">
            <h5><i class="fas fa-clipboard-list"></i> Información Principal</h5>
        </div>
        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">ID Trámite</div>
                <div class="detail-value"><strong>#{{ $tramite->id }}</strong></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Tipo Producto</div>
                <div class="detail-value">
                    @if($tramite->productoEspecifico && $tramite->productoEspecifico->tipoProducto)
                        {{ $tramite->productoEspecifico->tipoProducto->nombre }}
                    @else
                        {{ $tramite->tipoTramite->tiposProducto->pluck('nombre')->join(', ') ?? '-' }}
                    @endif
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Tipo Trámite</div>
                <div class="detail-value">{{ $tramite->tipoTramite->nombre ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Subtipo</div>
                <div class="detail-value">{{ $tramite->subtipoTramite->nombre ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Estado Actual</div>
                <div class="detail-value">
                    @php
                        $estadoClass = 'default';
                        $estadoNombre = $tramite->estadoTramite->nombre ?? 'Sin Estado';
                        if (str_contains(strtolower($estadoNombre), 'auto')) $estadoClass = 'estado-auto';
                        elseif (str_contains(strtolower($estadoNombre), 'resolutiva')) $estadoClass = 'estado-resolutiva';
                        elseif (str_contains(strtolower($estadoNombre), 'ticket')) $estadoClass = 'estado-ticket';
                        elseif (str_contains(strtolower($estadoNombre), 'radicado')) $estadoClass = 'estado-radicado';
                    @endphp
                    <span class="status-badge {{ $estadoClass }}">{{ $estadoNombre }}</span>
                </div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Marca</div>
                <div class="detail-value">{{ $tramite->marca ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Unidad de Negocio</div>
                <div class="detail-value">{{ $tramite->unidad_de_negocio ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Responsable</div>
                <div class="detail-value">{{ $tramite->responsable->name ?? '-' }}</div>
            </div>
        </div>
    </div>

    <!-- Información del Producto -->
    <div class="detail-card">
        <div class="detail-card-header">
            <h5><i class="fas fa-pills"></i> Detalles del Producto</h5>
        </div>
        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Nombre Producto</div>
                <div class="detail-value">{{ $tramite->nombre_producto ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Expediente</div>
                <div class="detail-value">{{ $tramite->expediente ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">N° Registro</div>
                <div class="detail-value">{{ $tramite->num_registro ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Ingrediente Principal</div>
                <div class="detail-value">{{ $tramite->ingrediente_principal ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Forma Farmacéutica</div>
                <div class="detail-value">{{ $tramite->formaFarmaceutica->nombre ?? '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Concentración</div>
                <div class="detail-value">{{ $tramite->concentracion ?: '-' }}</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Fechas Importantes -->
        <div class="col-lg-6">
            <div class="detail-card">
                <div class="detail-card-header">
                    <h5><i class="fas fa-calendar-alt"></i> Fechas Importantes</h5>
                </div>
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">Fecha Entrega del Dossier</div>
                        <div class="detail-value">{{ $tramite->fecha_planeada_de_entrega_del_dossier ? date('d/m/Y', strtotime($tramite->fecha_planeada_de_entrega_del_dossier)) : '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Vencimiento Registro</div>
                        <div class="detail-value">{{ $tramite->fecha_vencimiento_registro ? date('d/m/Y', strtotime($tramite->fecha_vencimiento_registro)) : '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Máxima Radicación Dossier</div>
                        <div class="detail-value">{{ $tramite->fecha_maxima_de_radicacion ? date('d/m/Y', strtotime($tramite->fecha_maxima_de_radicacion)) : '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Inicio Trámite</div>
                        <div class="detail-value">{{ $tramite->fecha_de_inicio_del_tramite ? date('d/m/Y', strtotime($tramite->fecha_de_inicio_del_tramite)) : '-' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información de Gestión -->
        <div class="col-lg-6">
            <div class="detail-card">
                <div class="detail-card-header">
                    <h5><i class="fas fa-tasks"></i> Gestión</h5>
                </div>
                <div class="detail-grid">
                    <div class="detail-item">
                        <div class="detail-label">Etapa</div>
                        <div class="detail-value">{{ $tramite->etapa->nombre ?? '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Carga Laboral</div>
                        <div class="detail-value">{{ $tramite->carga_laboral_en_horas ? $tramite->carga_laboral_en_horas . ' horas' : '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Estado Registro</div>
                        <div class="detail-value">{{ $tramite->estadoRegistro->nombre ?? '-' }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Ticket</div>
                        <div class="detail-value">{{ $tramite->ticket ?: '-' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Información de Radicación (solo si existe) -->
    @if($tramite->radicado || $tramite->fecha_del_radicado || $tramite->llave)
    <div class="detail-card">
        <div class="detail-card-header">
            <h5><i class="fas fa-file-signature"></i> Información de Radicación</h5>
        </div>
        <div class="detail-grid">
            <div class="detail-item">
                <div class="detail-label">Radicado</div>
                <div class="detail-value">{{ $tramite->radicado ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Llave</div>
                <div class="detail-value">{{ $tramite->llave ?: '-' }}</div>
            </div>
            <div class="detail-item">
                <div class="detail-label">Fecha Radicado</div>
                <div class="detail-value">{{ $tramite->fecha_del_radicado ? date('d/m/Y', strtotime($tramite->fecha_del_radicado)) : '-' }}</div>
            </div>
        </div>
    </div>
    @endif



    <!-- Sección de Actividad -->
    @if($auditLogs && $auditLogs->count() > 0)
    <div class="detail-card">
        <div class="detail-card-header">
            <h5><i class="fas fa-history"></i> Historial de Actividad</h5>
        </div>
        <div class="activity-container">
            @foreach($auditLogs as $log)
            <div class="activity-item">
                <div class="activity-timeline">
                    <div class="activity-dot {{ $log->event_type === 'state_change' ? 'state-change' : ($log->audit_level === 'critical' ? 'critical' : 'default') }}"></div>
                    @if(!$loop->last)
                        <div class="activity-line"></div>
                    @endif
                </div>
                
                <div class="activity-content">
                    <div class="activity-header">
                        <div class="activity-user">
                            <div class="user-avatar">
                                {{ strtoupper(substr($log->user_name ?? 'S', 0, 2)) }}
                            </div>
                            <div class="user-info">
                                <span class="user-name">{{ $log->user_name ?? 'Sistema' }}</span>
                                @if($log->event_type === 'state_change')
                                    <span class="activity-action">cambió el estado</span>
                                    @if($log->old_state_name && $log->new_state_name)
                                        <span class="state-change-detail">
                                            de <span class="old-state">{{ $log->old_state_name }}</span> 
                                            a <span class="new-state">{{ $log->new_state_name }}</span>
                                        </span>
                                    @endif
                                @elseif($log->event_type === 'assignment_change')
                                    <span class="activity-action">cambió la asignación del trámite</span>
                                @elseif($log->event_type === 'create')
                                    <span class="activity-action">creó el trámite</span>
                                @elseif($log->event_type === 'update')
                                    <span class="activity-action">actualizó el trámite</span>
                                @else
                                    <span class="activity-action">{{ $log->event_description ?: 'realizó una acción' }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="activity-time">
                            <span class="time-ago" title="{{ $log->created_at ? $log->created_at->format('d/m/Y H:i:s') : 'Fecha no disponible' }}">
                                {{ $log->created_at ? $log->created_at->diffForHumans() : 'Fecha no disponible' }}
                            </span>
                        </div>
                    </div>
                    
                    @if($log->event_description && !in_array($log->event_type, ['state_change', 'assignment_change']))
                        <div>
                            {!! $log->event_description !!}
                        </div>
                    @endif
                    
                </div>
            </div>
            @endforeach
            
            @if($auditLogs->count() >= 50)
                <div class="activity-item">
                    <div class="activity-timeline">
                        <div class="activity-dot default"></div>
                    </div>
                    <div class="activity-content">
                        <div class="activity-more">
                            <i class="fas fa-ellipsis-h"></i>
                            Mostrando las últimas 50 actividades
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Botones de Acción -->
    <div class="action-buttons">
        <a href="{{ route('tramites.index') }}" class="btn btn-secondary btn-lg mr-3">
            <i class="fas fa-arrow-left"></i> VOLVER AL LISTADO
        </a>
        <a href="{{ route('tramites.export.tramite.excel', $tramite) }}" class="btn btn-success btn-lg mr-3">
            <i class="fas fa-file-excel"></i> DESCARGAR EXCEL
        </a>
        <a href="{{ route('tramites.edit', $tramite) }}" class="btn btn-warning btn-lg">
            <i class="fas fa-edit"></i> EDITAR TRÁMITE
        </a>
    </div>
</div>
@endsection