@extends('voyager::master')

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

        .search-container {
            padding: 10px;
            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;
        }


        .search-container {
            position: relative;
        }

        #search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: #fff;
            z-index: 1000;
            max-height: 200px;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .client-list-item {
            padding: 10px;
            cursor: pointer;
            background-color: #CEDDEB;
            transition: background-color 0.3s, transform 0.3s;
            overflow: hidden;
        }

        .client-list-item:hover {
            background-color: #e0f7fa;
            transform: scale(1.01);
        }

        .client-list-item:nth-child(odd) {
            background-color: #CEDDEB;
        }

        .client-list-item:nth-child(even) {
            background-color: #fff; 
        }


    </style>
@endsection

@section('page_header')
    <div class="d-flex justify-between items-center">
        <div class="d-flex header-title">
            <h1 class="page-title">
                <img src="{{ voyager_asset('images/iconos/clientes.webp') }}" alt="">
                Listado de Clientes
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <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/crear-cliente"
                            style="display: flex; justify-content: start; align-items: center; gap: 5px;">
                            <img src="{{ voyager_asset('images/iconos/mas.webp') }}" alt="">
                            Crear 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('voyager.clientes.index') }}" method="GET">

                        <label for="search-input" class="search-label">Parámetros de búsqueda</label>
                        <div class="search-fields">

                        <div class="search-container">
                            <label for="search-query" class="search-label">Razón Social / Nombre de Fantasía / DNI / CUIT / CUIL / Código:</label>
                            <input type="text" name="search_query" id="search-query" class="search-input" placeholder="Ingrese su búsqueda..." value="{{ request('search_query') }}">
                            <div id="search-suggestions"></div>
                        </div>

                            <label for="tipo_cliente">Tipo de cliente:</label>
                            <select name="tipo_cliente" id="tipo_cliente" class="search-select">
                                <option value="" selected>[Seleccione]</option>
                                @foreach ($tiposClientes as $tipo)
                                    <option value="{{ $tipo->nombre }}" {{ request('tipo_cliente') == $tipo->nombre ? 'selected' : '' }}>
                                        {{ $tipo->nombre }}
                                    </option>
                                @endforeach
                            </select>

                            <label for="cliente_status">Estado</label>
                            <select name="cliente_status" id="cliente_status" class="search-select">
                                <option value="" {{ is_null(request('cliente_status')) ? 'selected' : '' }}>[Seleccione]</option>
                                <option value="1"  {{ request('cliente_status') === '1' ? 'selected' : '' }}>Habilitado</option>
                                <option value="0"  {{ request('cliente_status') === '0' ? 'selected' : '' }}>Deshabilitado</option>
                            </select>

                            <label for="transporte">Transporte:</label>
                            <select name="transporte" id="transporte" class="search-select">
                                <option value="" selected>[Seleccione]</option>
                                @foreach ($transportes as $transporte)
                                    <option value="{{ $transporte->nombre }}" {{ request('transporte') == $transporte->nombre ? 'selected' : '' }}>
                                        {{ $transporte->nombre }}
                                    </option>
                                @endforeach
                            </select>




                            <label for="relation-type">Vendedor:</label>
                                <select name="vendedor_id" id="vendedor-id" class="search-select">
                                    <option value="" selected>[Seleccione un Vendedor]</option>
                                    @foreach ($vendedores as $vendedor)
                                        <option value="{{ $vendedor->id }}" {{ request('vendedor_id') == $vendedor->id ? 'selected' : '' }}>
                                            {{ $vendedor->name }} 
                                        </option>
                                    @endforeach
                                </select>

                            <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>Tipo de cliente</th>
                                    <th>Localidad</th>
                                    <th>Transporte</th>
                                    <th>Cliente</th>
                                    <th>Fecha de ultima venta</th>
                                    <th>Pendiente de cobro</th>
                                    <th>Saldo</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($clientes as $cliente)
                                    <tr>
                                        <td>
                                            <a
                                                href="/admin/cliente/{{ $cliente->id }}/show">{{ $cliente->id }}
                                            </a>
                                        </td>

                                        <td>
                                            <p>{{ $cliente->tipo_cliente }}</p>
                                        </td>

                                        <td>
                                            <p>{{ $cliente->localidad }}</p>
                                        </td>

                                        <td>
                                            <p>{{ $cliente->transporte }}</p>
                                        </td>

                                        <td>
                                            <p>
                                                <a
                                                    href="/admin/cliente/{{ $cliente->id }}/show">{{ $cliente->fantasia_name }}
                                                </a>
                                            </p>
                                            <p>{{ $cliente->razon_social }} - {{ $cliente->numero_doc_cuit }}</p>
                                            <p>{{ $cliente->cond_frente_iva }}</p>
                                            <p>{{ $cliente->direccion }} / tel: {{ $cliente->telefono }} / email:
                                                {{ $cliente->email }}</p>
                                        </td>

                                        <td>
                                            <p>{{$cliente->ultima_compra ?? 'Nunca'}}</p>
                                        </td>

                                        <td>
                                            <p>$ {{ number_format($cliente->total_ultima_compra, 2, ',', '.') ?? 'Nada' }}</p>
                                        </td>
                                        <td>
                                            <p>$ {{ number_format($cliente->saldo, 2, ',', '.') }}</p>
                                        </td>
                                        {{-- <td>
                                        <!-- Aquí puedes añadir botones para editar o eliminar -->
                                        <a href="{{ route('voyager.users.edit', $cliente->id) }}"
                                            class="btn btn-primary btn-sm">Editar</a>
                                        <form action="{{ route('voyager.users.destroy', $cliente->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>
                        {{ $clientes->appends(request()->except('page'))->links('vendor.pagination.bootstrap-4') }}

                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('search-query');
            const suggestionsContainer = document.getElementById('search-suggestions');

            searchInput.addEventListener('input', function () {
                const query = searchInput.value;

                if (query.length > 2) { // Realiza búsqueda solo si hay más de 2 caracteres
                    fetch(`/admin/search-clients?query=${query}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.html) {
                                suggestionsContainer.innerHTML = data.html; // Usar el HTML devuelto por el servidor
                                suggestionsContainer.style.display = 'block';
                            } else {
                                suggestionsContainer.innerHTML = '<p>No se encontraron resultados.</p>';
                                suggestionsContainer.style.display = 'block';
                            }
                        })
                        .catch(error => console.error('Error:', error));
                } else {
                    suggestionsContainer.innerHTML = '';
                    suggestionsContainer.style.display = 'none';
                }
            });

            // Manejar clic en una sugerencia
            suggestionsContainer.addEventListener('click', function (e) {
                if (e.target && e.target.matches('.client-list-item')) {
                    const selectedId = e.target.getAttribute('data-id');

                    if (selectedId) {
                        // Redirige al usuario a la página correspondiente
                        window.location.href = `/admin/cliente/${selectedId}/show`;
                    }
                }
            });
        });
    </script>
@stop