@extends('layouts.app')

@section('title', 'Listado ' . class_basename($modelClass))

@push('styles')
    <style>
        .crud-card {
            border: 1px solid #e4ebf2;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 8px 18px -18px rgba(0, 0, 0, 0.35);
        }

        .crud-table-wrap {
            border: 1px solid #e8eef4;
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
        }

        .crud-table-wrap thead th {
            background: #f7fafc;
            border-bottom-color: #e8eef4;
            font-size: 0.82rem;
            color: #446078;
        }

        .crud-table-wrap td,
        .crud-table-wrap th {
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            vertical-align: top;
        }

        .actions-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            white-space: nowrap;
        }

        .action-icon-btn {
            width: 2rem;
            height: 2rem;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(7, 123, 161, 0.45);
            border-radius: 10px;
            background: #fff;
            color: #077BA1;
        }

        .action-icon-btn:hover,
        .action-icon-btn:focus {
            background: #077BA1;
            border-color: #077BA1;
            color: #fff;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-3">
        <h1 class="h3 mb-0">{{ class_basename($modelClass) }}: listado</h1>
        <div class="d-flex gap-2">
            <a class="btn btn-brand" href="{{ route('testing-crud.create', $entity) }}">Nuevo registro</a>
        </div>
    </div>

    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    <form class="crud-card mb-3" method="GET" action="{{ route('testing-crud.index', $entity) }}">
        <div class="card-body p-3 d-flex flex-column flex-md-row gap-2 align-items-md-center">
            <input
                type="text"
                class="form-control"
                name="q"
                value="{{ $search ?? '' }}"
                placeholder="Buscar en {{ class_basename($modelClass) }}"
            >
            <div class="d-flex gap-2">
                <button class="btn btn-brand" type="submit">Buscar</button>
                <a class="btn btn-outline-secondary" href="{{ route('testing-crud.index', $entity) }}">Limpiar</a>
            </div>
        </div>
    </form>

    <div class="crud-card p-3">
        <div class="crud-table-wrap">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0">
                <thead>
                <tr>
                    @if (!empty($showRowNumber))
                        <th>#</th>
                    @endif
                    @foreach ($columns as $column)
                        <th>{{ $columnLabels[$column] ?? $column }}</th>
                    @endforeach
                    <th>Acciones</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($rows as $row)
                    <tr>
                        @if (!empty($showRowNumber))
                            <td>{{ ($rows->firstItem() ?? 1) + $loop->index }}</td>
                        @endif
                        @foreach ($columns as $column)
                            <td>{{ data_get($row, $column) }}</td>
                        @endforeach
                        <td class="text-nowrap">
                            <div class="actions-cell">
                            <a class="btn btn-sm action-icon-btn" title="Editar" href="{{ route('testing-crud.edit', ['entity' => $entity, 'id' => data_get($row, $primaryKey)]) }}">✏️</a>
                            <form method="POST" class="d-inline" action="{{ route('testing-crud.destroy', ['entity' => $entity, 'id' => data_get($row, $primaryKey)]) }}" onsubmit="return confirm('Eliminar registro?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm action-icon-btn" title="Eliminar" type="submit">🚫</button>
                            </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td class="text-secondary" colspan="{{ count($columns) + 1 + (!empty($showRowNumber) ? 1 : 0) }}">Sin registros.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
            </div>
        </div>
    </div>

    <div class="mt-3">{{ $rows->links() }}</div>
@endsection
