@extends('layouts.app')

@section('content')
    @extends('ventas.menu')

    <div id="contenedor_interno" class="container-fluid">
        <div class="row ">
            <div class="col-md-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('ventas.dashboard_clientes') }}">Cliente</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Editar</li>
                    </ol>
                </nav>
                <form action="{{ route('ventas.actualizar_cliente', $cliente->id) }}" method="POST" id="formEnviar"
                    enctype="multipart/form-data">
                    @csrf

                    <input type="submit" href="{{ route('ventas.cliente') }}" class="botonColor" id="botonEnviar"
                        value="Actualizar cliente" />
                    <a href="{{ route('ventas.eliminar_cliente', $cliente->id) }}" class="btn btn-danger">Eliminar
                        cliente</a>
            </div>
        </div>
    </div>

    <div id="contenedor_contenido" class="container-fluid px-lg-5">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Nombre del cliente</label>
                            <input type="text" class="form-control" name="nombre" value="{{ $cliente->nombre }}"
                                placeholder="Nombre del cliente">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Tipo de cliente*</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="tipo_cliente" id="selectTipoCliente">
                                    <option value="1" {{ $cliente->tipo == 1 ? 'selected' : '' }}>Persona Individual
                                    </option>
                                    <option value="2" {{ $cliente->tipo == 2 ? 'selected' : '' }}>Persona Juridica
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">NIT</label>
                            <div class="col-sm-8">
                                <input type="text" name="nit" class="form-control-plaintext"
                                    value="{{ $cliente->nit }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">DPI</label>
                            <div class="col-sm-8">
                                <input type="text" name="dpi" class="form-control-plaintext"
                                    value="{{ $cliente->dpi }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Dirección</label>
                            <div class="col-sm-8">
                                <input type="text" name="direccion" class="form-control-plaintext"
                                    value="{{ $cliente->direccion }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Condiciones de pago*</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="condiciones_pago">
                                    <option value="">Días de crédito</option>
                                    <option {{ $cliente->condiciones_pago == 1 ? 'selected' : '' }} value="1">Contado
                                    </option>
                                    <option {{ $cliente->condiciones_pago == 2 ? 'selected' : '' }} value="2">15 días
                                    </option>
                                    <option {{ $cliente->condiciones_pago == 3 ? 'selected' : '' }} value="3">30 días
                                    </option>
                                    <option {{ $cliente->condiciones_pago == 4 ? 'selected' : '' }} value="4">45 días
                                    </option>
                                    <option {{ $cliente->condiciones_pago == 5 ? 'selected' : '' }} value="5">60 días
                                    </option>
                                    <option {{ $cliente->condiciones_pago == 6 ? 'selected' : '' }} value="6">8 días
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Medio de pago*</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="medio_pago">
                                    <option {{ $cliente->medio_pago == 1 ? 'selected' : '' }} value="1">Efectivo
                                    </option>
                                    <option {{ $cliente->medio_pago == 2 ? 'selected' : '' }} value="2">Cheque
                                    </option>
                                    <option {{ $cliente->medio_pago == 3 ? 'selected' : '' }} value="3">Transferencia
                                        Bancaria</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Ejecutivo Venta*</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="ejecutivo">
                                    <option value="">Ejecutivo de ventas</option>
                                    @foreach ($ejecutivos as $ejecutivo)
                                        <option {{ $cliente->ejecutivo == $ejecutivo->id ? 'selected' : '' }}
                                            value="{{ $ejecutivo->id }}">{{ $ejecutivo->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Teléfono de la empresa</label>
                            <div class="col-sm-8">
                                <input type="text" name="telefono" class="form-control-plaintext"
                                    value="{{ $cliente->telefono }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Sitio web</label>
                            <div class="col-sm-8">
                                <input type="text" name="sitio_web" class="form-control-plaintext"
                                    value="{{ $cliente->sitio_web }}" placeholder="">
                            </div>
                        </div>

                        <!-- Sección para previsualizar el archivo RTU -->
                        <div class="form-group row">
                            <label for="rtu" class="col-sm-4 col-form-label">RTU*</label>
                            <div class="col-sm-8">
                                <input type="file" name="rtu" id="rtu"
                                    {{ $cliente->condiciones_pago != 1 && !$cliente->rtu ? 'required' : '' }}>
                                @if ($cliente->rtu)
                                    <p><a href="{{ asset('storage/rtu/' . $cliente->rtu) }}" target="_blank">Ver archivo
                                            RTU</a></p>
                                @endif
                            </div>
                        </div>

                        <!-- Sección para previsualizar el archivo de Representación Legal -->
                        <div class="form-group row" id="representacion"
                            style="display: {{ $cliente->tipo == 2 ? 'flex' : 'none' }};">
                            <label for="representacion_legal" class="col-sm-4 col-form-label">Representacion
                                Legal*</label>
                            <div class="col-sm-8">
                                <input type="file" name="representacion_legal" id="representacion-legal">
                                @if ($cliente->representacion_legal)
                                    <p><a href="{{ asset('storage/representacion-legal/' . $cliente->representacion_legal) }}"
                                            target="_blank">Ver archivo de Representación Legal</a></p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Nombre del contacto</label>
                            <div class="col-sm-8">
                                <input type="text" name="nombre_contacto1" class="form-control-plaintext"
                                    value="{{ $cliente->nombre_contacto }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Celular contacto*</label>
                            <div class="col-sm-8">
                                <input type="text" name="celular" class="form-control-plaintext" required
                                    value="{{ $cliente->celular }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Correo electrónico</label>
                            <div class="col-sm-8">
                                <input type="text" name="correo_electronico" class="form-control-plaintext"
                                    value="{{ $cliente->correo_electronico }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Puesto de trabajo</label>
                            <div class="col-sm-8">
                                <input type="text" name="puesto" class="form-control-plaintext"
                                    value="{{ $cliente->puesto }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Referencia interna</label>
                            <div class="col-sm-8">
                                <input type="text" name="referencia" class="form-control-plaintext"
                                    value="{{ $cliente->referencia }}" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="" class="col-sm-4 col-form-label">Régimen fiscal</label>
                            <div class="col-sm-8">
                                <select class="form-control" name="regimen_fiscal" id="regimen_fiscal">
                                    <option {{ $cliente->tipo_regimen == 1 ? 'selected' : '' }} value="1">Régimen
                                        normal</option>
                                    <option {{ $cliente->tipo_regimen == 2 ? 'selected' : '' }} value="2">Decreto
                                        régimen 2989</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="observaciones" class="col-sm-4 col-form-label">Observaciones</label>
                            <div class="col-sm-8">
                                <textarea name="observaciones" id="observaciones" cols="30" rows="3" class="form-control">{{ $cliente->observaciones }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Productos -->
                <div class="row">
                    <div class="col-md-12">
                        <ul class="nav nav-tabs" id="myTab">
                            <li class="nav-item">
                                <a href="#a1" class="nav-link" data-toggle="tab">Contactos y direcciones</a>
                            </li>
                            <li class="nav-item">
                                <a href="#a2" class="nav-link" data-toggle="tab">Notas internas</a>
                            </li>
                            <li class="nav-item">
                                <a href="#a4" class="nav-link" data-toggle="tab">Contabilidad</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade" id="a1">
                                <br>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Nombre del contacto:
                                            </label>
                                            <div class="col-sm-8">
                                                <input type="text" name="nombre_contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[0]->nombre_contacto ?? '' }}"
                                                    placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Celular contacto</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="celular_contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[0]->celular ?? '' }}" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Correo
                                                electrónico</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="correo_electronico_contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[0]->correo_electronico ?? '' }}"
                                                    placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Puesto de
                                                trabajo</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="puesto__contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[0]->puesto ?? '' }}" placeholder="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Nombre del contacto:
                                            </label>
                                            <div class="col-sm-8">
                                                <input type="text" name="nombre_contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[1]->nombre_contacto ?? '' }}"
                                                    placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Celular contacto</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="celular_contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[1]->celular ?? '' }}" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Correo
                                                electrónico</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="correo_electronico_contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[1]->correo_electronico ?? '' }}"
                                                    placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Puesto de
                                                trabajo</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="puesto__contacto[]"
                                                    class="form-control-plaintext"
                                                    value="{{ $cliente->contactos[1]->puesto ?? '' }}" placeholder="">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="a2">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group row">
                                            <label for="" class="col-sm-12 col-form-label">Observaciones</label>
                                            <div class="col-sm-12">
                                                <textarea name="" id="" class="form-control-plaintext" cols="30" rows="5"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="a3">
                                <div class="row">

                                    <div class="col-md-6">
                                        <br>
                                        <h4>Operaciones</h4>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Rutas</label>
                                            <div class="col-sm-8">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="defaultCheck1">
                                                    <label class="form-check-label" for="defaultCheck1">
                                                        Fabricar
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="defaultCheck1">
                                                    <label class="form-check-label" for="defaultCheck1">
                                                        Bajo pedido
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="defaultCheck1">
                                                    <label class="form-check-label" for="defaultCheck1">
                                                        Comprar
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <br>
                                        <h4>Trazabilidad</h4>
                                        <div class="form-group row">
                                            <label for="" class="col-sm-4 col-form-label">Seguimiento</label>
                                            <div class="col-sm-8">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="defaultCheck1">
                                                    <label class="form-check-label" for="defaultCheck1">
                                                        Por número de serie único
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="defaultCheck1">
                                                    <label class="form-check-label" for="defaultCheck1">
                                                        Por lotes
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="defaultCheck1">
                                                    <label class="form-check-label" for="defaultCheck1">
                                                        Sin seguimiento
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>

                    </div>
                </div>
            </div>
            <script>
                function nuevaFila() {
                    var row = document.getElementsByClassName("producto"); // find row to copy
                    console.log(row);
                    var table = document.getElementById("contenedorProductos"); // find table to append to
                    var clone = row[0].cloneNode(true); // copy children too
                    table.appendChild(clone); // add new row to end of table
                }
                $("input.nit").bind('keypress', function(event) {
                    var regex = new RegExp("^[a-zA-Z0-9 ]+$");
                    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                    if (!regex.test(key)) {
                        event.preventDefault();
                        return false;
                    }
                });
                document.getElementById('botonEnviar').addEventListener('click', (btn) => {
                    btn.preventDefault(); // Evita que el formulario se envíe de inmediato

                    let formEnviar = document.getElementById('formEnviar');

                    // Verifica si el formulario es válido
                    if (formEnviar.checkValidity()) {
                        // Si el formulario es válido, deshabilita el botón y envía el formulario
                        document.getElementById('botonEnviar').disabled = true;
                        formEnviar.submit();
                    } else {
                        // Si el formulario no es válido, muestra los mensajes de validación
                        formEnviar.reportValidity();
                    }
                });

                document.addEventListener('DOMContentLoaded', function() {
                    const condicionesPago = document.querySelector('select[name="condiciones_pago"]');
                    const rtuInput = document.querySelector('input[name="rtu"]');
                    const representacionLegalInput = document.querySelector('input[name="representacion_legal"]');

                    // Variables de Blade para verificar datos del servidor
                    const rtuExiste = {!! json_encode(!empty($cliente->rtu)) !!};
                    const representacionLegalExiste = {!! json_encode(!empty($cliente->representacion_legal)) !!};

                    // Función para actualizar la validación
                    function actualizarValidacion() {
                        if (!rtuExiste) {
                            if (condicionesPago.value != '1' && selectTipoCliente.value != 1) {
                                rtuInput.setAttribute('required', 'required');
                            } else {
                                rtuInput.removeAttribute('required');
                            }
                        }

                        if (!representacionLegalExiste) {
                            if (condicionesPago.value != '1' && selectTipoCliente.value != 1) {
                                representacionLegalInput.setAttribute('required', 'required');
                            } else {
                                representacionLegalInput.removeAttribute('required');
                            }
                        }
                    }

                    // Escuchar el cambio de condiciones de pago
                    condicionesPago.addEventListener('change', actualizarValidacion);

                    // Llamar la función al cargar la página para asegurarse de que la validación esté correcta desde el inicio
                    actualizarValidacion();

                    const selectTipoCliente = document.getElementById('selectTipoCliente');
                    const representacion = document.getElementById('representacion');

                    selectTipoCliente.addEventListener('change', (e) => {
                        if (e.target.value == 2) {
                            representacion.style.display = 'flex';
                        } else {
                            representacion.style.display = 'none';
                        }
                        actualizarValidacion();
                    });
                });
            </script>
        @endsection