@extends('layouts.app')

@section('title', 'Mantenimiento #' . $mantenimiento->prog_id)
@section('page-title', 'Detalle del Mantenimiento')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('web.mantenimientos-realizados.index') }}">Mant. Realizados</a></li>
<li class="breadcrumb-item active">M-{{ str_pad($mantenimiento->prog_id, 4, '0', STR_PAD_LEFT) }}</li>
@endsection

@push('styles')
<link href="{{ asset('assets/css/mantenimientos.css') }}" rel="stylesheet">
<style>
    .detail-container {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 1.5rem;
    }

    @media (max-width: 1200px) {
        .detail-container {
            grid-template-columns: 1fr;
        }
    }

    .detail-card {
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .detail-card-header {
        padding: 1rem 1.25rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .detail-card-header h5 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #1a3a5c;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .detail-card-body {
        padding: 1.25rem;
    }

    .mant-header {
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .mant-icon-lg {
        width: 70px;
        height: 70px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
    }

    .mant-icon-lg.aprobado {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        color: #fff;
    }

    .mant-icon-lg.pendiente {
        background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
        color: #fff;
    }

    .mant-titulo h3 {
        margin: 0 0 0.25rem;
        color: #1a3a5c;
        font-size: 1.25rem;
    }

    .mant-titulo .subtitulo {
        color: #64748b;
        font-size: 0.9rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-item label {
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.5px;
    }

    .info-item span {
        font-size: 0.9rem;
        color: #1a3a5c;
        font-weight: 500;
    }

    .aprobacion-box {
        background: rgba(16, 185, 129, 0.05);
        border: 1px solid rgba(16, 185, 129, 0.2);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .aprobacion-box.pendiente {
        background: rgba(245, 158, 11, 0.05);
        border-color: rgba(245, 158, 11, 0.2);
    }

    .aprobacion-box h6 {
        margin: 0 0 0.75rem;
        font-size: 0.85rem;
        color: #059669;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .aprobacion-box.pendiente h6 {
        color: #d97706;
    }

    .checklist-table {
        width: 100%;
        font-size: 0.85rem;
    }

    .checklist-table th {
        padding: 0.75rem;
        background: #f8fafc;
        text-align: left;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
    }

    .checklist-table td {
        padding: 0.75rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .checklist-table tbody tr:hover {
        background: #f8fafc;
    }

    .estado-check {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .estado-check.ok {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .estado-check.rma {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

    .estado-check.pendiente {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .evidencia-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .evidencia-item {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    .evidencia-item img {
        width: 100%;
        height: 100px;
        object-fit: cover;
    }

    .evidencia-item-info {
        padding: 0.5rem;
        font-size: 0.7rem;
        color: #64748b;
    }

    .sidebar-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .qr-container {
        text-align: center;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
        margin-top: 1rem;
    }

    .qr-container img {
        width: 150px;
        height: 150px;
        margin-bottom: 0.5rem;
    }

    .firma-container {
        text-align: center;
        margin-top: 1rem;
    }

    .firma-container img {
        max-width: 200px;
        max-height: 100px;
        border: 1px dashed #cbd5e1;
        padding: 0.5rem;
        border-radius: 4px;
    }
</style>
@endpush

@section('content')
<div class="detail-container">
    {{-- Columna principal --}}
    <div class="main-content">
        {{-- Info del mantenimiento --}}
        <div class="detail-card">
            <div class="detail-card-body">
                <div class="mant-header">
                    <div class="mant-icon-lg {{ $mantenimiento->aprobado ? 'aprobado' : 'pendiente' }}">
                        <i class="fas {{ $mantenimiento->aprobado ? 'fa-clipboard-check' : 'fa-clipboard-list' }}"></i>
                    </div>
                    <div class="mant-titulo">
                        <h3>Mantenimiento M-{{ str_pad($mantenimiento->prog_id, 4, '0', STR_PAD_LEFT) }}</h3>
                        <span class="subtitulo">
                            {{ $mantenimiento->centro->concesion->nombre ?? '' }} -
                            {{ $mantenimiento->centro->nombre_centro ?? '' }}
                        </span>
                    </div>
                </div>

                <div class="info-grid">
                    <div class="info-item">
                        <label>Fecha Programada</label>
                        <span>{{ $mantenimiento->fecha_programada?->format('d/m/Y') ?? 'N/A' }}</span>
                    </div>
                    <div class="info-item">
                        <label>Vía</label>
                        <span>{{ $mantenimiento->via->nombre ?? 'N/A' }}</span>
                    </div>
                    <div class="info-item">
                        <label>Técnico Asignado</label>
                        <span>
                            @if($mantenimiento->tecnico)
                                {{ $mantenimiento->tecnico->usu_nombre }} {{ $mantenimiento->tecnico->usu_apellido }}
                            @else
                                N/A
                            @endif
                        </span>
                    </div>
                    <div class="info-item">
                        <label>Estado</label>
                        <span class="badge" style="background-color: {{ $mantenimiento->estadoMantenimiento->color_hex ?? '#666' }}20; color: {{ $mantenimiento->estadoMantenimiento->color_hex ?? '#666' }}">
                            {{ $mantenimiento->estadoMantenimiento->estado_nombre ?? 'N/A' }}
                        </span>
                    </div>
                </div>

                {{-- Info de aprobación --}}
                <div class="aprobacion-box {{ $mantenimiento->aprobado ? '' : 'pendiente' }}">
                    <h6>
                        <i class="fas {{ $mantenimiento->aprobado ? 'fa-check-circle' : 'fa-clock' }}"></i>
                        {{ $mantenimiento->aprobado ? 'Aprobado' : 'Pendiente de Aprobación' }}
                    </h6>
                    @if($mantenimiento->aprobado && $mantenimiento->aprobacion)
                        <div class="row">
                            <div class="col-md-6">
                                <small class="text-muted d-block">Aprobado por:</small>
                                <span>{{ $mantenimiento->aprobacion->usuarioAprueba->name ?? 'N/A' }}</span>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block">Fecha de Aprobación:</small>
                                <span>{{ $mantenimiento->fecha_aprobacion?->format('d/m/Y H:i') ?? $mantenimiento->aprobacion->fecha_aprobacion?->format('d/m/Y H:i') ?? 'N/A' }}</span>
                            </div>
                        </div>
                        @if($mantenimiento->aprobacion->observacion_aprobacion)
                        <div class="mt-2">
                            <small class="text-muted d-block">Observación:</small>
                            <span>{{ $mantenimiento->aprobacion->observacion_aprobacion }}</span>
                        </div>
                        @endif

                        {{-- Firma digital --}}
                        @if($mantenimiento->aprobacion->firma_imagen)
                        <div class="firma-container">
                            <small class="text-muted d-block mb-2">Firma Digital:</small>
                            <img src="{{ $mantenimiento->aprobacion->firma_imagen }}" alt="Firma">
                        </div>
                        @endif
                    @else
                        <p class="text-muted mb-0">Este mantenimiento aún no ha sido aprobado por el jefe operativo.</p>
                    @endif
                </div>
            </div>
        </div>

        {{-- Checklist de revisión --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-tasks"></i> Checklist de Revisión</h5>
                <span class="badge bg-secondary">{{ $mantenimiento->checklistRespuestas->count() }} items</span>
            </div>
            <div class="detail-card-body p-0">
                @if($mantenimiento->checklistRespuestas->count() > 0)
                <table class="checklist-table">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Estado</th>
                            <th>Observación</th>
                            <th>RMA</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($mantenimiento->checklistRespuestas as $resp)
                        <tr>
                            <td>{{ $resp->itemRevision->detalle ?? 'Item #' . $resp->id_respuesta }}</td>
                            <td>
                                @if($resp->estadoEquipo)
                                    <span class="estado-check {{ strtolower($resp->estadoEquipo->estado_codigo ?? '') == 'ok' ? 'ok' : 'pendiente' }}">
                                        <i class="fas fa-circle" style="font-size: 6px;"></i>
                                        {{ $resp->estadoEquipo->estado_nombre }}
                                    </span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                <small>{{ $resp->observacion ?? '-' }}</small>
                            </td>
                            <td>
                                @if($resp->requiere_rma)
                                    <span class="estado-check rma">
                                        <i class="fas fa-exclamation-triangle"></i> RMA
                                    </span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <div class="empty-state p-4 text-center">
                    <i class="fas fa-tasks d-block mb-2" style="font-size: 2rem; color: #cbd5e1;"></i>
                    <p class="text-muted mb-0">No hay items de checklist registrados.</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Evidencias fotográficas --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-camera"></i> Evidencias Fotográficas</h5>
                <span class="badge bg-secondary">{{ $mantenimiento->evidencias->count() }} fotos</span>
            </div>
            <div class="detail-card-body">
                @if($mantenimiento->evidencias->count() > 0)
                <div class="evidencia-grid">
                    @foreach($mantenimiento->evidencias as $evidencia)
                    <div class="evidencia-item">
                        <img src="{{ $evidencia->url_imagen ?? asset('assets/img/no-image.png') }}" alt="Evidencia" onclick="window.open(this.src, '_blank')">
                        <div class="evidencia-item-info">
                            {{ $evidencia->tipo ?? 'Foto' }}
                            <br>
                            {{ $evidencia->created_at?->format('H:i') ?? '' }}
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="empty-state text-center">
                    <i class="fas fa-camera d-block mb-2" style="font-size: 2rem; color: #cbd5e1;"></i>
                    <p class="text-muted mb-0">No hay evidencias fotográficas.</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="sidebar">
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-cogs"></i> Acciones</h5>
            </div>
            <div class="detail-card-body">
                <div class="sidebar-actions">
                    @if($mantenimiento->aprobado)
                    <a href="{{ route('web.mantenimientos-realizados.reporte', $mantenimiento->prog_id) }}" class="btn btn-success w-100">
                        <i class="fas fa-file-pdf me-1"></i> Descargar PDF
                    </a>
                    @endif
                    <a href="{{ route('web.mantenimientos-realizados.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="fas fa-arrow-left me-1"></i> Volver al Listado
                    </a>
                </div>
            </div>
        </div>

        {{-- QR Code si está aprobado --}}
        @if($mantenimiento->aprobado && $mantenimiento->aprobacion && $mantenimiento->aprobacion->codigo_qr)
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-qrcode"></i> Código QR</h5>
            </div>
            <div class="detail-card-body">
                <div class="qr-container">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode(route('web.reporte.publico', $mantenimiento->aprobacion->codigo_qr)) }}" alt="QR Code">
                    <p class="text-muted small mb-0">Escanea para ver el reporte</p>
                    <code class="d-block mt-2 small">{{ $mantenimiento->aprobacion->codigo_qr }}</code>
                </div>
            </div>
        </div>
        @endif

        {{-- Resumen rápido --}}
        <div class="detail-card">
            <div class="detail-card-header">
                <h5><i class="fas fa-chart-bar"></i> Resumen</h5>
            </div>
            <div class="detail-card-body">
                <div class="info-grid">
                    <div class="info-item">
                        <label>Items Revisados</label>
                        <span>{{ $mantenimiento->checklistRespuestas->count() }}</span>
                    </div>
                    <div class="info-item">
                        <label>Evidencias</label>
                        <span>{{ $mantenimiento->evidencias->count() }}</span>
                    </div>
                    <div class="info-item">
                        <label>Con RMA</label>
                        <span>{{ $mantenimiento->checklistRespuestas->where('requiere_rma', true)->count() }}</span>
                    </div>
                    <div class="info-item">
                        <label>OK</label>
                        <span>{{ $mantenimiento->checklistRespuestas->whereHas('estadoEquipo', fn($q) => $q->where('estado_codigo', 'OK'))->count() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection