@extends('voyager::master')
@include('voyager::alerts')

@section('page_title', 'Listado de Tipos de Clientes')

@section('head')
    <style>
        .table p {
            font-size: 0.9rem;
        }

        .search-container {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            margin-bottom: 20px;
        }

        .search-label {
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        .search-fields {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .search-fields label {
            font-size: 14px;
            margin-right: 5px;
            white-space: nowrap;
        }

        .search-input {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 300px;
            flex: 1;
        }

        .search-select {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            min-width: 150px;
        }

        .advanced-search-link {
            margin-left: auto;
            color: #007bff;
            text-decoration: none;
            font-size: 14px;
        }

        .advanced-search-link:hover {
            text-decoration: underline;
        }
    </style>
@endsection




@section('page_header')
    <div class="d-flex justify-between items-center">

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
        <div class="d-flex header-title">
            <h1 class="page-title">
                <img src="{{ voyager_asset('images/iconos/clientes.webp') }}" alt="">
                Listado de Tipos de Clientes
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <a href="/admin" class="btn btn-warning btn-add-new">
                <i class="voyager-double-left"></i>
                <span>Volver atras</span>
            </a>
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" style="margin: 0px !important;" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Acciones disponibles
                </button>
                <ul class="dropdown-menu" style="margin: 0px !important; background: #fff !important">
                    <li>
                        <a class="dropdown-item" href="/admin/tipos-clientes/create"
                            style="display: flex; justify-content: start; align-items: center; gap: 5px;">
                            <img src="{{ voyager_asset('images/iconos/mas.webp') }}" alt="">
                            Crear Tipo de Cliente
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
@stop


@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="search-container">
                    <form action="{{ route('clientes.tipos-clientes') }}" method="GET">
                        <label for="search-input" class="search-label">Parámetros de búsqueda</label>
                        <div class="search-fields">
                            <label for="search-query">Nombre:</label>
                            <input type="text" name="search_query" id="search-query" class="search-input"
                                placeholder="Ingrese su búsqueda..." value="{{ request('search_query') }}">
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </div>
                    </form>
                </div>

                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tiposClientes as $tipoCliente)
                                    <tr>
                                        <td>
                                            <a href="{{ route('clientes.tipos-clientes.edit', $tipoCliente->id) }}">{{ $tipoCliente->id }}</a>
                                        </td>
                                        <td>
                                            <p>{{ $tipoCliente->nombre }}</p>
                                        </td>
                                        <td>
                                            <a href="{{ route('clientes.tipos-clientes.edit', $tipoCliente->id) }}" class="btn btn-primary btn-sm">Editar</a>
                                            <form action="{{ route('clientes.tipos-clientes.destroy', $tipoCliente->id) }}" method="POST" style="display:inline-block">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $(document).ready(function() {
            // Manejar cualquier script adicional necesario
        });
    </script>
@stop