@extends('layouts.app', ['title' => term('nav_puestos','Puestos')])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-puesto"><i class="fa-solid fa-id-badge"></i>Nuevo puesto</button>
@endsection

@section('content')
<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-id-badge"></i><div class="metric-val">{{ $puestos->count() }}</div><div class="metric-label">Puestos</div></div>
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">{{ $puestos->where('activo', true)->count() }}</div><div class="metric-label">Activos</div></div>
    <div class="metric"><i class="fa-solid fa-circle-pause"></i><div class="metric-val">{{ $puestos->where('activo', false)->count() }}</div><div class="metric-label">Inactivos</div></div>
    <div class="metric"><i class="fa-solid fa-sitemap"></i><div class="metric-val">{{ $puestos->pluck('area')->filter()->unique()->count() }}</div><div class="metric-label">Áreas</div></div>
</div>

<div class="card">
    <div class="card-head"><div><div class="card-title">Catálogo de puestos</div><div class="sub">{{ $puestos->count() }} registros</div></div></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Puesto</th><th>Área</th><th>Descripción</th><th>Estado</th><th style="width:50px"></th></tr></thead>
            <tbody>
            @forelse($puestos as $puesto)
                <tr>
                    <td><strong>{{ $puesto->nombre }}</strong><div class="sub">ID #{{ $puesto->id }}</div></td>
                    <td>{{ $puesto->area ?: '—' }}</td>
                    <td>{{ \Illuminate\Support\Str::limit($puesto->descripcion, 70, '…') ?: '—' }}</td>
                    <td><span class="badge {{ $puesto->activo ? 'green' : 'gray' }}">{{ $puesto->activo ? 'Activo' : 'Inactivo' }}</span></td>
                    <td>
                        <div class="kebab">
                            <button class="kebab-trigger" type="button" data-kebab data-tip="Más acciones"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="kebab-menu">
                                <button type="button" data-modal-open="modal-edit-puesto-{{ $puesto->id }}"><i class="fa-solid fa-pen"></i> Editar puesto</button>
                                <hr>
                                <form method="post" action="{{ route('puestos.destroy', $puesto) }}" onsubmit="return confirm('¿Eliminar puesto?')">@csrf @method('DELETE')<button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button></form>
                            </div>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="5" class="sub" style="text-align:center;padding:28px">Aún no hay puestos registrados. Crea el primero con “Nuevo puesto”.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-puesto">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-id-badge text-gold"></i> Nuevo puesto</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('puestos.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre del puesto *<input name="nombre" required placeholder="Ej. Gerente de ventas"></label>
                    <label>Área<input name="area" placeholder="Ej. Comercial, Administración"></label>
                    <label style="grid-column:1/-1">Descripción<textarea name="descripcion" rows="3" placeholder="Funciones y responsabilidades del puesto"></textarea></label>
                    <label class="row" style="gap:8px;align-items:center"><input type="checkbox" name="activo" value="1" checked style="width:auto"> Puesto activo</label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Registrar puesto</button>
            </div>
        </form>
    </div>
</div>

@foreach($puestos as $puesto)
<div class="modal-backdrop" id="modal-edit-puesto-{{ $puesto->id }}">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar — {{ $puesto->nombre }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('puestos.update', $puesto) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Nombre del puesto *<input name="nombre" value="{{ $puesto->nombre }}" required></label>
                    <label>Área<input name="area" value="{{ $puesto->area ?? '' }}"></label>
                    <label style="grid-column:1/-1">Descripción<textarea name="descripcion" rows="3">{{ $puesto->descripcion }}</textarea></label>
                    <label class="row" style="gap:8px;align-items:center"><input type="checkbox" name="activo" value="1" @checked($puesto->activo) style="width:auto"> Puesto activo</label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i>Guardar</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection