@extends('voyager::master') <!-- Extiende la plantilla de Voyager -->

@section('content')
    <div class="container">
        <h1 class="my-4">Lista de Marcas</h1>

        @include('voyager::alerts')
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @elseif(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <!-- Formulario de búsqueda -->
        <form action="{{ route('marcas.index') }}" method="GET" class="mb-8">
            <div class="input-group" style="width: 100%; display: flex; align-items: center; gap: 4px;">
                <input type="text" name="search" style="width: 100%;" class="form-control" placeholder="Buscar por nombre de marca" value="{{ request()->get('search') }}">
                <button type="submit" class="btn btn-primary">Buscar</button>
            </div>
        </form>

        <!-- Botón para crear una nueva marca -->
        <a href="{{ route('marcas.create') }}" class="btn btn-success mb-4" style="margin: 20px 0;">Crear Marca</a>
        
        <!-- Tabla para mostrar las marcas -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="background-color: white;">ID</th>
                    <th style="background-color: white;">Nombre</th>
                    <th style="background-color: white;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($marcas as $marca)
                    <tr>
                        <td style="background-color: #f8fafc;">{{ $marca->id }}</td>
                        <td style="background-color: #f8fafc;">{{ $marca->nombre }}</td>
                        <td style="background-color: #f8fafc;">
                            <!-- Botones para editar y eliminar -->
                            <a href="{{ route('marcas.edit', $marca->id) }}" class="btn btn-primary btn-sm">Editar</a>
                            
                            <form action="{{ route('marcas.destroy', $marca->id) }}" method="POST" style="display: inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection