@extends('layouts.app')
@section('title', 'Capacitaciones BPM')
@section('page-title', 'Capacitaciones')

@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 active">Capacitaciones</li>
    </ol>
</nav>

@php
    $tipos = \App\Models\BpmCapacitacion::$TIPOS ?? [];
@endphp

{{-- Filter card --}}
<div class="card card-outline card-primary">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-filter mr-1"></i> Filtros</h3>
        <a href="{{ route('bpm.capacitaciones.create') }}" class="btn btn-sm btn-success">
            <i class="fas fa-plus mr-1"></i>Nueva Capacitación
        </a>
    </div>
    <div class="card-body">
        <form method="GET" class="form-inline flex-wrap" style="gap:8px;">
            <div class="form-group mr-2">
                <label class="small mr-1">Desde</label>
                <input type="date" name="desde" value="{{ request('desde') }}" class="form-control form-control-sm">
            </div>
            <div class="form-group mr-2">
                <label class="small mr-1">Hasta</label>
                <input type="date" name="hasta" value="{{ request('hasta') }}" class="form-control form-control-sm">
            </div>
            <div class="form-group mr-2">
                <select name="tipo" class="form-control form-control-sm">
                    <option value="">— Tipo —</option>
                    @foreach($tipos as $key => $label)
                        <option value="{{ $key }}" {{ request('tipo') === $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-sm mr-1"><i class="fas fa-search mr-1"></i>Filtrar</button>
            <a href="{{ route('bpm.capacitaciones.index') }}" class="btn btn-secondary btn-sm">Limpiar</a>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-chalkboard-teacher mr-1"></i> Capacitaciones ({{ $capacitaciones->total() }})</h3>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-light">
                <tr>
                    <th>Código</th>
                    <th>Fecha</th>
                    <th>Tema</th>
                    <th>Tipo</th>
                    <th>Capacitador</th>
                    <th class="text-center">Asistentes</th>
                    <th>Duración</th>
                    <th class="text-center">Ver</th>
                </tr>
            </thead>
            <tbody>
                @forelse($capacitaciones as $cap)
                <tr>
                    <td><code>{{ $cap->codigo ?? '—' }}</code></td>
                    <td>{{ $cap->fecha->format('d/m/Y') }}</td>
                    <td>{{ \Illuminate\Support\Str::limit($cap->tema, 50) }}</td>
                    <td>
                        @php
                            $tipoBadge = match($cap->tipo ?? '') {
                                'induccion'    => 'primary',
                                'bpm'          => 'success',
                                'haccp'        => 'warning',
                                'inocuidad'    => 'info',
                                'seguridad'    => 'danger',
                                default        => 'secondary',
                            };
                        @endphp
                        <span class="badge badge-{{ $tipoBadge }}">
                            {{ $tipos[$cap->tipo] ?? ucfirst($cap->tipo) }}
                        </span>
                    </td>
                    <td>{{ $cap->capacitador }}</td>
                    <td class="text-center">
                        <span class="badge badge-light border">{{ $cap->asistentes_count ?? $cap->asistentes->count() }}</span>
                    </td>
                    <td>
                        @if($cap->hora_inicio && $cap->hora_fin)
                            @php
                                $inicio = \Carbon\Carbon::parse($cap->hora_inicio);
                                $fin    = \Carbon\Carbon::parse($cap->hora_fin);
                                $mins   = $inicio->diffInMinutes($fin);
                                echo $mins >= 60 ? floor($mins/60).'h '.($mins%60).'min' : $mins.'min';
                            @endphp
                        @else
                            —
                        @endif
                    </td>
                    <td class="text-center">
                        <a href="{{ route('bpm.capacitaciones.show', $cap->id) }}" class="btn btn-xs btn-info" title="Ver detalle">
                            <i class="fas fa-eye"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted py-4">
                        <i class="fas fa-inbox fa-2x mb-2 d-block"></i>Sin capacitaciones registradas.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($capacitaciones->hasPages())
        <div class="card-footer">{{ $capacitaciones->links() }}</div>
    @endif
</div>

@endsection