@extends('layouts.app')

@section('title', 'Categorias | Veltrix v2')
@section('page_title', 'Categorias')
@section('page_subtitle', 'Gestion operativa en tiempo real')
@section('page_icon', 'bx bxs-category')

@section('content')
    <div class="container-fluid px-4 py-4">
        @if ($errors->any())
            <div class="alert alert-danger mb-3">
                {{ $errors->first() }}
            </div>
        @endif

        <div class="row g-3">
            @if (has_permission('categorias.crear'))
                <div class="col-lg-5">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <h2 class="h5 mb-3">Nueva categoria</h2>
                            <form action="{{ route('categorias.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="activo" value="1">

                                <div class="mb-3">
                                    <label class="form-label fw-semibold" for="categoriaNombre">Nombre</label>
                                    <input
                                        class="form-control"
                                        id="categoriaNombre"
                                        name="nombre"
                                        maxlength="120"
                                        value="{{ old('nombre', '') }}"
                                        required
                                    >
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-semibold" for="categoriaDescripcion">Descripcion</label>
                                    <textarea
                                        class="form-control"
                                        id="categoriaDescripcion"
                                        name="descripcion"
                                        rows="4"
                                        maxlength="255"
                                    >{{ old('descripcion', '') }}</textarea>
                                </div>

                                <button class="btn btn-primary w-100" type="submit">Guardar</button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
            @else
                <div class="col-12">
            @endif
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h2 class="h3 mb-3">Categorias</h2>
                        <div class="table-responsive">
                            <table class="table table-striped align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>NOMBRE</th>
                                        <th>DESCRIPCION</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($categorias as $categoria)
                                        <tr>
                                            <td>{{ $categoria->id }}</td>
                                            <td>{{ $categoria->nombre }}</td>
                                            <td>{{ (string) ($categoria->descripcion ?? '') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center py-4 text-muted">No hay categorias registradas.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection