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

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

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

<form method="POST" action="{{ route('bpm.capacitaciones.store') }}">
    @csrf

    {{-- Datos generales --}}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-chalkboard-teacher mr-1"></i> Datos de la Capacitación</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6 form-group">
                    <label for="tema">Tema <span class="text-danger">*</span></label>
                    <input type="text" name="tema" id="tema"
                           class="form-control @error('tema') is-invalid @enderror"
                           value="{{ old('tema') }}"
                           placeholder="Tema de la capacitación" required>
                    @error('tema')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3 form-group">
                    <label for="fecha">Fecha <span class="text-danger">*</span></label>
                    <input type="date" name="fecha" id="fecha"
                           class="form-control @error('fecha') is-invalid @enderror"
                           value="{{ old('fecha', date('Y-m-d')) }}" required>
                    @error('fecha')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3 form-group">
                    <label for="tipo">Tipo <span class="text-danger">*</span></label>
                    <select name="tipo" id="tipo"
                            class="form-control @error('tipo') is-invalid @enderror" required>
                        <option value="">— Seleccione —</option>
                        @foreach($tipos as $key => $label)
                            <option value="{{ $key }}" {{ old('tipo') === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('tipo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="row">
                <div class="col-md-3 form-group">
                    <label for="hora_inicio">Hora Inicio <span class="text-danger">*</span></label>
                    <input type="time" name="hora_inicio" id="hora_inicio"
                           class="form-control @error('hora_inicio') is-invalid @enderror"
                           value="{{ old('hora_inicio') }}" required>
                    @error('hora_inicio')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3 form-group">
                    <label for="hora_fin">Hora Fin <small class="text-muted">(opcional)</small></label>
                    <input type="time" name="hora_fin" id="hora_fin"
                           class="form-control @error('hora_fin') is-invalid @enderror"
                           value="{{ old('hora_fin') }}">
                    @error('hora_fin')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3 form-group">
                    <label for="capacitador">Capacitador <span class="text-danger">*</span></label>
                    <input type="text" name="capacitador" id="capacitador"
                           class="form-control @error('capacitador') is-invalid @enderror"
                           value="{{ old('capacitador') }}"
                           placeholder="Nombre del capacitador" required>
                    @error('capacitador')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3 form-group">
                    <label for="lugar">Lugar <span class="text-danger">*</span></label>
                    <input type="text" name="lugar" id="lugar"
                           class="form-control @error('lugar') is-invalid @enderror"
                           value="{{ old('lugar') }}"
                           placeholder="ej: Sala de reuniones" required>
                    @error('lugar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>

            <div class="form-group">
                <label for="observaciones">Observaciones</label>
                <textarea name="observaciones" id="observaciones" rows="3"
                          class="form-control @error('observaciones') is-invalid @enderror"
                          placeholder="Observaciones adicionales...">{{ old('observaciones') }}</textarea>
                @error('observaciones')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    {{-- Tabla dinámica de 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>
            <button type="button" class="btn btn-sm btn-success" id="btn-agregar-asistente">
                <i class="fas fa-plus mr-1"></i>Agregar Fila
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0" id="tabla-asistentes">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th style="min-width:200px;">Nombre</th>
                            <th style="min-width:150px;">Cargo</th>
                            <th class="text-center" style="width:80px;">Firmó</th>
                            <th class="text-center" style="width:60px;">Quitar</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-asistentes">
                        @php $asistentes = old('asistentes', array_fill(0, 5, [])); @endphp
                        @foreach($asistentes as $i => $as)
                        <tr>
                            <td class="text-center align-middle text-muted">{{ $i + 1 }}</td>
                            <td>
                                <input type="text" name="asistentes[{{ $i }}][nombre]"
                                       class="form-control form-control-sm"
                                       value="{{ $as['nombre'] ?? '' }}"
                                       placeholder="Nombre completo">
                            </td>
                            <td>
                                <input type="text" name="asistentes[{{ $i }}][cargo]"
                                       class="form-control form-control-sm"
                                       value="{{ $as['cargo'] ?? '' }}"
                                       placeholder="Cargo / Área">
                            </td>
                            <td class="text-center align-middle">
                                <input type="checkbox" name="asistentes[{{ $i }}][firmo]" value="1"
                                       {{ !empty($as['firmo']) ? 'checked' : '' }}>
                            </td>
                            <td class="text-center align-middle">
                                <button type="button" class="btn btn-xs btn-danger btn-quitar-asistente" title="Quitar">
                                    <i class="fas fa-times"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i>Guardar Capacitación
            </button>
            <a href="{{ route('bpm.capacitaciones.index') }}" class="btn btn-secondary ml-2">Cancelar</a>
        </div>
    </div>

</form>

@endsection

@push('scripts')
<script>
(function () {
    var rowIndex = {{ count(old('asistentes', array_fill(0, 5, []))) }};

    function buildRow(idx) {
        return `<tr>
            <td class="text-center align-middle text-muted num-fila"></td>
            <td><input type="text" name="asistentes[${idx}][nombre]" class="form-control form-control-sm" placeholder="Nombre completo"></td>
            <td><input type="text" name="asistentes[${idx}][cargo]" class="form-control form-control-sm" placeholder="Cargo / Área"></td>
            <td class="text-center align-middle"><input type="checkbox" name="asistentes[${idx}][firmo]" value="1"></td>
            <td class="text-center align-middle">
                <button type="button" class="btn btn-xs btn-danger btn-quitar-asistente" title="Quitar"><i class="fas fa-times"></i></button>
            </td>
        </tr>`;
    }

    function renumerarFilas() {
        document.querySelectorAll('#tbody-asistentes tr').forEach(function (tr, i) {
            var cell = tr.querySelector('.num-fila');
            if (cell) cell.textContent = i + 1;
        });
    }

    document.getElementById('btn-agregar-asistente').addEventListener('click', function () {
        document.getElementById('tbody-asistentes').insertAdjacentHTML('beforeend', buildRow(rowIndex++));
        renumerarFilas();
    });

    document.getElementById('tbody-asistentes').addEventListener('click', function (e) {
        var btn = e.target.closest('.btn-quitar-asistente');
        if (btn) {
            var rows = document.querySelectorAll('#tbody-asistentes tr');
            if (rows.length > 1) {
                btn.closest('tr').remove();
                renumerarFilas();
            } else {
                alert('Debe haber al menos un asistente.');
            }
        }
    });
})();
</script>
@endpush