@extends('voyager::master')

@section('page_title', 'Editar cliente')



@section('head')
    <style>
        .tab-pane h2 {
            color: #657686 !important;
            font-size: 1.3rem;
        }

        hr {
            margin: 7px !important;
        }

        tr {
            border-bottom: 1px solid #6576863f;
        }

        p {
            margin: 5px 0px;
        }

        table {
            width: 100%;
        }

        .td-bold {
            font-weight: bold;
        }

        h3 {
            margin-bottom: 0px !important;
        }

        .table p {
            font-size: 0.9rem;
        }

        td {
            width: 50%;
        }

        .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;
        }

        input {
            margin: 7px 0px;
            border: 1px solid #657686 !important;
        }
    </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="">
                Editar cliente {{$cliente->name}}
            </h1>
        </div>
        <div class="btn-group"
            style="display: flex; justify-content: center; gap: 5px; align-items: center; margin-right: 30px;">
            <a href="/admin/clientes" class="btn btn-warning btn-add-new">
                <i class="voyager-double-left"></i>
                <span>Volver atras</span>
            </a>
        </div>
    </div>
@stop


@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-6">
                    <div class="panel panel-bordered">
                        <div class="panel-body">
                            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                                <li class="nav-item active">
                                    <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general"
                                        role="tab" aria-controls="general" aria-selected="true">Cliente</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="domicilios-tab" data-toggle="tab" href="#domicilios"
                                        role="tab" aria-controls="domicilios" aria-selected="false">Domicilios</a>
                                </li>
                                <!-- <li class="nav-item">
                                    <a class="nav-link" id="usuarios-tab" data-toggle="tab" href="#usuarios" role="tab"
                                        aria-controls="usuarios" aria-selected="false">Usuarios</a>
                                </li> -->
                            </ul>
                            <form action="/clientes/{{ $cliente->id }}/update" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="tab-content" id="productTabsContent">
                                    <div class="tab-pane fade active in" id="general" role="tabpanel"
                                        aria-labelledby="general-tab">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <h2>Datos de cuenta</h2>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="td-bold"><label for="cond_frente_iva">Condición frente al IVA:</label></td>
                                                    <td>
                                                        <select id="cond_frente_iva" name="cond_frente_iva" class="form-control" onchange="toggleNameField()">
                                                            <option value="">Seleccione una condición</option>
                                                            @foreach($condicionesFrenteIva as $condicion)
                                                                <option value="{{ $condicion }}" 
                                                                    {{ $condicion == $cliente->cond_frente_iva ? 'selected' : '' }}>
                                                                    {{ $condicion }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                <!-- <tr>
                                                    <td class="td-bold"><label for="tipo_doc">Tipo de documento:</label>
                                                    </td>
                                                    <td><input type="text" id="tipo_doc" name="tipo_doc"
                                                            class="form-control" value="{{ $cliente->tipo_doc ?? 'No proporcionado'}}"></td>
                                                </tr> -->
                                                <tr>
                                                    <td class="td-bold"><label for="numero_doc_cuit">DNI/CUIT/CUIL:</label>
                                                    </td>
                                                    <td><input type="text" id="numero_doc_cuit" name="numero_doc_cuit"
                                                            class="form-control" value="{{ $cliente->numero_doc_cuit ?? 'No proporcionado' }}"></td>
                                                </tr>


                                                <tr>
                                                    <td class="td-bold">
                                                        <label for="tipo_relacion">Tipo de relación:</label>
                                                    </td>
                                                    <td>
                                                        <select id="tipo_relacion" name="tipo_relacion" class="form-control">
                                                            <option value="" {{ empty($cliente->tipo_relacion) ? 'selected' : '' }}>Seleccione un tipo de relación</option>
                                                            <option value="Tercero" {{ $cliente->tipo_relacion == 'Tercero' ? 'selected' : '' }}>Tercero</option>
                                                        </select>
                                                    </td>
                                                </tr>



                                                <tr>
                                                    <td class="td-bold"><label for="tipo_cliente">Tipo de cliente:</label>
                                                    </td>
                                                    <td>
                                                    <select id="tipo_cliente" name="tipo_cliente" class="form-control">
                                                        <option value="" {{ empty($cliente->tipo_cliente) ? 'selected' : '' }}>Seleccionar</option>
                                                        @foreach($tiposClientes as $tipo)
                                                            <option value="{{ $tipo->nombre }}" {{ $cliente->tipo_cliente == $tipo->nombre ? 'selected' : '' }}>
                                                                {{ $tipo->nombre }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    </td>
                                                </tr>
                                                    <tr id="name-row" style="{{ $cliente->cond_frente_iva == 'Consumidor Final' ? '' : 'display: none;' }}">
                                                        <td class="td-bold"><label for="name">Nombre y apellido:</label></td>
                                                        <td><input type="text" id="name" name="name" class="form-control" 
                                                                value="{{ $cliente->cond_frente_iva == 'Consumidor Final' ? $cliente->name : $cliente->razon_social }}">
                                                        </td>
                                                    </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="razon_social">Razón Social:</label>
                                                    </td>
                                                    <td><input type="text" id="razon_social" name="razon_social"
                                                            class="form-control" value="{{ $cliente->razon_social ?? 'No proporcionado'}}"></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="fantasia_name">Nombre de fantasía:</label>
                                                    </td>
                                                    <td><input type="text" id="fantasia_name" name="fantasia_name"
                                                            class="form-control" value="{{ $cliente->fantasia_name ?? 'No proporcionado'}}"></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="codigo_cliente">Código del
                                                            cliente:</label></td>
                                                    <td><input type="text" id="codigo_cliente" name="codigo_cliente"
                                                            class="form-control" value="{{ $cliente->codigo_cliente ?? 'No proporcionado'}}"></td>
                                                </tr>

                                            </tbody>
                                        </table>

                                        <table style="margin-top: 50px;">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <h2>Datos Comerciales</h2>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="td-bold"><label for="lista_precios">Lista de precios:</label></td>
                                                    <td>
                                                        <select id="lista_precios" name="lista_precios" class="form-control">
                                                            <option value="">Seleccione una lista de precios</option>
                                                            <option value="1" {{ $cliente->lista_precios == 1 ? 'selected' : '' }}>Lista de Precios 1</option>
                                                            <option value="2" {{ $cliente->lista_precios == 2 ? 'selected' : '' }}>Lista de Precios 2</option>
                                                            <option value="3" {{ $cliente->lista_precios == 3 ? 'selected' : '' }}>Lista de Precios 3</option>
                                                            <option value="4" {{ $cliente->lista_precios == 4 ? 'selected' : '' }}>Lista de Precios 4</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="telefono">Teléfono:</label></td>
                                                    <td><input type="text" id="telefono" name="telefono"
                                                            class="form-control" value="{{ $cliente->telefono }}"></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="telefono_2">Teléfono 2:</label></td>
                                                    <td><input type="text" id="telefono_2" name="telefono_2"
                                                            class="form-control" value="{{ $cliente->telefono_2 }}"></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="emails">E-mails:</label></td>
                                                    <td>
                                                        <input type="text" id="emails" name="emails" class="form-control" 
                                                            value="{{ $cliente->email }};{{ $cliente->emails_adicionales }}">
                                                        <div style="display: flex; flex-direction: column;">
                                                            <small class="form-text text-muted">Se tomará el primero como el principal.</small>
                                                            <small class="form-text text-muted">Separe los correos con ';'.</small>
                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="td-bold">
                                                        <label for="condicion_venta">Condición de venta:</label>
                                                    </td>
                                                    <td>
                                                        <select id="condicion_venta" name="condicion_venta" class="form-control">
                                                            <option value="">Seleccione</option>
                                                            @foreach($condicionesComerciales as $condicion)
                                                                <option value="{{ $condicion->nombre }}" 
                                                                    {{ old('condicion_venta', $cliente->condicion_venta) == $condicion->nombre ? 'selected' : '' }}>
                                                                    {{ $condicion->nombre }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>



                                                <tr>
                                                    <td class="td-bold"><label for="condicion_entrega">Condición de entrega:</label></td>
                                                    <td>
                                                        <select id="condicion_entrega" name="condicion_entrega" class="form-control" onchange="toggleTransporteField()">
                                                            <option value="A convenir" {{ $cliente->condicion_entrega == 'A convenir' ? 'selected' : '' }}>A convenir</option>
                                                            <option value="Retira el Cliente" {{ $cliente->condicion_entrega == 'Retira el Cliente' ? 'selected' : '' }}>Retira el Cliente</option>
                                                            <option value="Entrega a domicilio" {{ $cliente->condicion_entrega == 'Entrega a domicilio' ? 'selected' : '' }}>Entrega a domicilio</option>
                                                            <option value="Envío por transporte" {{ $cliente->condicion_entrega == 'Envío por transporte' ? 'selected' : '' }}>Envío por transporte</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr id="transporte_row" style="display: none;">
                                                    <td class="td-bold"><label for="transporte">Transporte:</label></td>
                                                    <td>
                                                        <select id="transporte" name="transporte" class="form-control">
                                                            <option value="">Seleccione un transporte</option>
                                                            @foreach($transportes as $transporte)
                                                                <option value="{{ $transporte->nombre ?? 'No proporcionado' }}" 
                                                                    {{ $transporte->nombre == $cliente->transporte ? 'selected' : '' }}>
                                                                    {{ $transporte->nombre }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>Vendedor Asignado</td>
                                                    <td>
                                                        <select id="vendedor_id" class="form-control" name="vendedor_id">
                                                            <option value="">Selecciona un vendedor</option>
                                                            @foreach($vendedores as $vendedorOption)
                                                                <option value="{{ $vendedorOption->id }}" 
                                                                    @if($cliente->vendedor_id == $vendedorOption->id) selected @endif>
                                                                    {{ $vendedorOption->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>

                                            </div>

                                            </tbody>
                                        </table>

                                        <table style="margin-top: 50px;">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <h2>Observaciones</h2>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <textarea 
                                                        name="observaciones" 
                                                        id="observaciones" 
                                                        placeholder="Ej. Factura A" 
                                                        style="width: 100%; height: 100px;">{{ trim($cliente->observaciones ?? '') }}
                                                    </textarea>
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                         
                                    </div>

                                    <div class="tab-pane fade" id="domicilios" role="tabpanel"
                                        aria-labelledby="domicilios-tab">
                                        <!-- Aquí puedes agregar los campos relacionados a los domicilios -->
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <h2>Domicilio Fiscal</h2>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="td-bold"><label for="direccion_fiscal">Dirección: 
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="direccion_fiscal" name="direccion_fiscal" class="form-control" value="{{ $cliente->direccion_fiscal }}" required></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="localidad_fisc">Localidad:
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="localidad_fisc" name="localidad_fisc" class="form-control" value="{{ $cliente->localidad_fisc }}" required></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="cod_postal_fisc">Código postal:
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="cod_postal_fisc" name="cod_postal_fisc" class="form-control" value="{{ $cliente->cod_postal_fisc }}" required></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="provincia_fisc">Provincia:
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="provincia_fisc" name="provincia_fisc" class="form-control" value="{{ $cliente->provincia_fisc }}" required></td>
                                                </tr>
                                            </tbody>
                                        </table>


                                        <button style="color: white !important; background-color: #f39c12;" type="button" class="btn">
                                                Copiar datos al domicilio comercial
                                        </button>

                                        <table style="margin-top: 50px;">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <h2>Domicilio Comercial</h2>
                                                    </th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="td-bold"><label for="direccion">Dirección:
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="direccion" name="direccion" class="form-control" value="{{ $cliente->direccion }}" required></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="localidad">Localidad:
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="localidad" name="localidad" class="form-control" value="{{ $cliente->localidad }}" required></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="cod_postal">Código postal:
                                                        <span style="color: red !important;">*</span>
                                                    </label></td>
                                                    <td><input type="text" id="cod_postal" name="cod_postal" class="form-control" value="{{ $cliente->cod_postal }}" required></td>
                                                </tr>
                                                <tr>
                                                    <td class="td-bold"><label for="provincia">Provincia:
                                                        <span style="color: red !important;">*</span>

                                                    </label></td>
                                                    <td><input type="text" id="provincia" name="provincia" class="form-control" value="{{ $cliente->provincia }}" required></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- <div class="form-group">
                                            <button type="submit" class="btn btn-primary">Guardar Cliente</button>
                                        </div> -->
                                    </div>

                                    <!-- <div class="tab-pane fade" id="usuarios" role="tabpanel" aria-labelledby="usuarios-tab"> -->
                                        <!-- <h2>Usuarios Asignados</h2>
                                        @if ($usuariosAsignados->isNotEmpty())
                                            <ul class="usuario-list">
                                                @foreach ($usuariosAsignados as $usuario)
                                                    <li class="usuario-item">
                                                        <p>
                                                            <strong>Nombre del Usuario:</strong> 
                                                            <a href="{{ url('/admin/users/' . $usuario->id) }}">{{ $usuario->name }}</a>
                                                        </p>
                                                        <p><strong>Email del Usuario:</strong> {{ $usuario->email }}</p>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @else
                                            <p>Este cliente no tiene usuarios asignados.</p>
                                        @endif -->

                                        <!-- <h3>Añadir Nuevo Usuario</h3>
                                        <input type="text" id="user_name" placeholder="Buscar usuario...">
                                        <input type="hidden" id="user_id_hidden">
                                        <div id="user_id_list"></div>
                                        <button id="add_user_button" class="btn btn-success">Añadir Usuario</button> -->
                                    <!-- </div> -->


                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary">Guardar Cliente</button>
                                        </div> 
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

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

@section('javascript')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Buscar Usuarios
    const userInput = document.getElementById('user_name');
    const userList = document.getElementById('user_id_list');
    const userHiddenInput = document.getElementById('user_id_hidden');

    userInput.addEventListener('input', function() {
        let query = userInput.value;
        if (query.length > 2) {
            fetch(`/admin/search-users?query=${query}`)
                .then(response => response.json())
                .then(data => {
                    userList.innerHTML = data.html; // Insertar los resultados de usuarios
                })
                .catch(error => console.error('Error:', error));
        } else {
            userList.innerHTML = ''; // Limpiar la lista si el input es menor a 3 caracteres
        }
    });

    userList.addEventListener('click', function(event) {
        if (event.target.classList.contains('user-list-item')) {
            let userId = event.target.getAttribute('data-id');
            let userName = event.target.textContent;
            userInput.value = userName; // Colocar el nombre en el input
            userHiddenInput.value = userId; // Colocar el ID en el campo oculto
            userList.innerHTML = ''; // Limpiar la lista
        }
    });

    // Lógica para añadir usuario
    document.getElementById('add_user_button').addEventListener('click', function() {
        const userId = userHiddenInput.value;
        if (userId) {
            // Lógica para añadir el usuario, puede ser un fetch a un endpoint que maneje la asignación
            fetch(`/admin/clientes/${clienteId}/add-user`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ user_id: userId })
            })
            .then(response => {
                if (response.ok) {
                    // Manejar la respuesta exitosa, como recargar la vista o actualizar la lista
                    location.reload(); // O actualizar la lista de usuarios
                } else {
                    console.error('Error al añadir el usuario');
                }
            })
            .catch(error => console.error('Error:', error));
        } else {
            alert('Por favor, selecciona un usuario para añadir.');
        }
    });
});
</script>


<script>
    function toggleTransporteField() {
        const condicionEntrega = document.getElementById('condicion_entrega').value;
        const transporteRow = document.getElementById('transporte_row');
        const transporteInput = document.getElementById('transporte');

        // Mostrar el campo transporte solo para "Entrega a domicilio" o "Envío por transporte"
        if (condicionEntrega === 'Entrega a domicilio' || condicionEntrega === 'Envío por transporte') {
            transporteRow.style.display = '';
        } else {
            transporteRow.style.display = 'none';
            transporteInput.value = ''; // Limpiar el campo transporte
        }
    }

    // Ejecutar al cargar la página para establecer el estado inicial
    document.addEventListener('DOMContentLoaded', toggleTransporteField);
</script>




<script>
    document.addEventListener('DOMContentLoaded', function () {
        const copiarBtn = document.querySelector('button[type="button"]'); // Botón de copiar

        // Selecciona los campos de Domicilio Fiscal (con valores del cliente)
        const fiscalFields = {
            direccion: document.getElementById('direccion_fiscal'),
            localidad: document.getElementById('localidad_fisc'),
            codPostal: document.getElementById('cod_postal_fisc'),
            provincia: document.getElementById('provincia_fisc'),
        };

        // Selecciona los campos de Domicilio Comercial
        const comercialFields = {
            direccion: document.getElementById('direccion'),
            localidad: document.getElementById('localidad'),
            codPostal: document.getElementById('cod_postal'),
            provincia: document.getElementById('provincia'),
        };

        // Agrega el evento al botón para copiar los datos
        copiarBtn.addEventListener('click', () => {
            // Copia los valores del domicilio fiscal al comercial
            comercialFields.direccion.value = fiscalFields.direccion.value || '';
            comercialFields.localidad.value = fiscalFields.localidad.value || '';
            comercialFields.codPostal.value = fiscalFields.codPostal.value || '';
            comercialFields.provincia.value = fiscalFields.provincia.value || '';

        });
    });
</script>



<script>
    function toggleNameField() {
        var condFrenteIva = document.getElementById('cond_frente_iva').value;
        var nameFieldRow = document.getElementById('name-row');
        var nameInput = document.getElementById('name');
        var razonSocial = document.getElementById('razon_social').value; // Asegúrate de que el campo 'razon_social' tenga el ID correcto

        if (condFrenteIva === 'Consumidor Final') {
            nameFieldRow.style.display = 'table-row';
            nameInput.value = nameInput.value || '';  // Si 'name' no tiene valor, dejarlo vacío
        } else {
            nameFieldRow.style.display = 'none';
            nameInput.value = razonSocial;  // Asigna el valor de razon_social al campo 'name'
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        toggleNameField();
    });
</script>


@stop