@extends('layouts.app')
@section('title', 'Capacitación — Detalle')
@section('page-title', 'Capacitación — Detalle')

@section('content')

{{-- Flash messages --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

{{-- Breadcrumb --}}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('bpm.dashboard') }}"><i class="fas fa-shield-alt mr-1"></i>BPM</a></li>
        <li class="breadcrumb-item"><a href="{{ route('bpm.capacitaciones.index') }}">Capacitaciones</a></li>
        <li class="breadcrumb-item active">{{ $capacitacion->codigo ?? 'Detalle' }}</li>
    </ol>
</nav>

@php
    $tipos = \App\Models\BpmCapacitacion::$TIPOS ?? [];
    $tipoBadge = match($capacitacion->tipo ?? '') {
        'induccion' => 'primary',
        'bpm'       => 'success',
        'haccp'     => 'warning',
        'inocuidad' => 'info',
        'seguridad' => 'danger',
        default     => 'secondary',
    };
    $firmaron = $capacitacion->asistentes->where('firmo', true)->count();
    $total    = $capacitacion->asistentes->count();
@endphp

{{-- Header card --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title">
            <i class="fas fa-chalkboard-teacher mr-1"></i>
            {{ $capacitacion->tema }}
        </h3>
        <div class="d-flex align-items-center" style="gap:8px;">
            <a href="{{ route('bpm.pdf.capacitacion', $capacitacion->id) }}" target="_blank"
               class="btn btn-xs btn-danger" title="Ver PDF">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
            <span class="badge badge-{{ $tipoBadge }}" style="font-size:.85rem; padding:6px 12px;">
                {{ $tipos[$capacitacion->tipo] ?? ucfirst($capacitacion->tipo) }}
            </span>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-2 mb-3">
                <small class="text-muted d-block">Código</small>
                <strong><code>{{ $capacitacion->codigo ?? '—' }}</code></strong>
            </div>
            <div class="col-md-2 mb-3">
                <small class="text-muted d-block">Fecha</small>
                <strong>{{ $capacitacion->fecha->format('d/m/Y') }}</strong>
            </div>
            <div class="col-md-2 mb-3">
                <small class="text-muted d-block">Hora Inicio</small>
                <strong>{{ $capacitacion->hora_inicio ? \Carbon\Carbon::parse($capacitacion->hora_inicio)->format('H:i') : '—' }}</strong>
            </div>
            <div class="col-md-2 mb-3">
                <small class="text-muted d-block">Hora Fin</small>
                <strong>{{ $capacitacion->hora_fin ? \Carbon\Carbon::parse($capacitacion->hora_fin)->format('H:i') : '—' }}</strong>
            </div>
            <div class="col-md-2 mb-3">
                <small class="text-muted d-block">Capacitador</small>
                <strong>{{ $capacitacion->capacitador }}</strong>
            </div>
            <div class="col-md-2 mb-3">
                <small class="text-muted d-block">Lugar</small>
                <strong>{{ $capacitacion->lugar }}</strong>
            </div>
        </div>

        @if($capacitacion->observaciones)
        <div class="row">
            <div class="col-12 mb-3">
                <small class="text-muted d-block">Observaciones</small>
                <p class="mb-0">{{ $capacitacion->observaciones }}</p>
            </div>
        </div>
        @endif

        <div class="row">
            <div class="col-md-4 mb-3">
                <small class="text-muted d-block">Registrado por</small>
                <strong>{{ $capacitacion->responsable->name ?? '—' }}</strong>
            </div>
        </div>
    </div>
</div>

{{-- Asistentes --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-users mr-1"></i> Lista de Asistentes</h3>
        <span class="badge badge-secondary" style="font-size:.85rem; padding:6px 12px;">
            {{ $firmaron }} firmaron de {{ $total }}
        </span>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-light">
                <tr>
                    <th>#</th>
                    <th>Nombre</th>
                    <th>Cargo</th>
                    <th class="text-center">Firmó</th>
                </tr>
            </thead>
            <tbody>
                @forelse($capacitacion->asistentes as $i => $as)
                <tr>
                    <td>{{ $i + 1 }}</td>
                    <td>{{ $as->nombre }}</td>
                    <td>{{ $as->cargo ?: '—' }}</td>
                    <td class="text-center">
                        @if($as->firmo)
                            <span class="text-success font-weight-bold">&#10003;</span>
                        @else
                            <span class="text-muted">—</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="text-center text-muted py-3">Sin asistentes registrados.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($total > 0)
    <div class="card-footer text-muted small">
        Total: <strong>{{ $firmaron }}</strong> firmaron de <strong>{{ $total }}</strong> registrados.
    </div>
    @endif
</div>

<div class="mb-3">
    <a href="{{ route('bpm.capacitaciones.index') }}" class="btn btn-secondary btn-sm">
        <i class="fas fa-arrow-left mr-1"></i>Volver al listado
    </a>
</div>

@endsection