@extends('layouts.layout')

@section('title', 'Constructor de Páginas')

@section('content')

<x-ui.title text="{{ $title }}" />

<x-ui.card class="mt-4 mb-4">   
    <x-ui.form 
        x-data="{ show: {{ old('respIcaCl') ? 'true' : 'false' }} }"
        action="{{ route('comercial.clientes.update', $cliente->id ) }}"
        method="POST"
        formMethod="PUT"
        class="space-y-4"
    >   
        <x-ui.subtitle text="Datos basicos" />
        
        <x-ui.row gap="6">
            
            <x-ui.col xs="12" md="12" lg="3">
                    <x-ui.label value="Tipo de documento" />
                    <x-ui.select
                        name="idTdoc"
                        :options="$tiposDocumentoID"
                        value="{{ old('idTdoc', $cliente->idTdoc ) }}"
                    />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Identificación"  />
                <x-ui.input
                    name="nit"
                    value="{{ old('nit', $cliente->nit ) }}"
                />
            </x-ui.col>


            <x-ui.col xs="12" md="12" lg="1">
                <x-ui.label value="Dv" />
                <x-ui.input
                    name="digVer"
                    value="{{ $cliente->digVer }}"
                />
            </x-ui.col>


            <x-ui.col xs="12" md="12" lg="3">
                    <x-ui.label value="Tipo de persona" />
                    <x-ui.select
                        name="tipPersona"
                        :options="$tipoPersona"
                        value="{{ old('tipPersona', $cliente->tipPersona ) }}"
                    />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                    <x-ui.label value="Calificación" />
                    <x-ui.select
                        name="idCal"
                        :options="$calificaciones"
                        value="{{ $cliente->idCal }}"
                    />
            </x-ui-col>

        </x-ui.row>
        
        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="3">
               <x-ui.label value="Primer nombre" />
                <x-ui.input
                    name="nombreF"
                    value="{{ old('nombreF',  $cliente->nombreF ) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Segundo nombre" />
                <x-ui.input
                    name="segundoNomF"
                    value="{{ $cliente->segundoNomF }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
               <x-ui.label value="Primer apellido" />
                <x-ui.input
                    name="apellidoF"
                    value="{{ old('apellidoF',  $cliente->apellidoF ) }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Segundo apellido" />
                <x-ui.input
                    name="segundoApeF"
                    value="{{ old('segundoApeF', $cliente->segundoApeF) }}"
                />
            </x-ui-col>


        </x-ui.row>
        
        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                    <x-ui.label value="Pasar a proveedor" />
                    <x-ui.select
                        name="tipo"
                        :options="$tipoOrigen"
                        value="{{ $cliente->tipo }}"
                    />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                    <x-ui.label value="Tipo de cliente" />
                    <x-ui.select
                        name="idTter"
                        :options="$tiposCliente"
                        value="{{ $cliente->idTter }}"
                    />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="6">
                <x-ui.label value="Razón social:" />
                <x-ui.input
                    name="nombre"
                    value="{{ $cliente->nombre }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Estado :" />
                <x-ui.select
                    name="estado"
                    :options="$estado"
                    value="{{ $cliente->estado }}"
          
                />
            </x-ui-col>

        </x-ui.row>
          
        <x-ui.subtitle text="Representante legal" />

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Cedula:" />
                <x-ui.input
                    name="cedRepr"
                    value="{{ $cliente->cedRepr }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Nombre:" />
                <x-ui.input
                    name="nomRepr"
                    value="{{ $cliente->nomRepr }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Apellido:" />
                <x-ui.input
                    name="apeRepr"
                    value="{{ $cliente->apeRepr }}"
                />
            </x-ui-col>
        
        </x-ui.row>

        <x-ui.subtitle text="Ubicación principal" />

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Pais:" />
                <x-ui.select
                    name="idPais"
                    :options="$paises"
                    value="{{ $cliente->idPais }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Ciudad:" />
                <x-ui.select
                    name="idPais"
                    :options="$ciudades"
                    value="{{ $cliente->idCiu }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Codigo:" />
                <x-ui.select
                    name="idCodPostal"
                    :options="$codigosPostales"
                    value="{{ $cliente->idCodPostal }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="5">
                <x-ui.label value="Barrio:" />
                <x-ui.input
                    name="barrio"
                    value="{{ $cliente->barrio }}"
                />
            </x-ui-col>
        
        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Direccion:" />
                <x-ui.input
                    name="direccion"
                    value="{{ $cliente->direccion }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Telefonos:" />
                <x-ui.input
                    name="telefonos"
                    value="{{ $cliente->telefonos }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="E-mail :" />
                <x-ui.input
                    name="email"
                    value="{{ $cliente->email }}"
                />
            </x-ui-col>
        
        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Comentario :" />
                <x-ui.textarea
                    name="comen"
                    value="{{ $cliente->comen }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.subtitle text="Información contable" />
        
        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Cuentas por cobrar :" />
                <x-ui.select
                    name="idCtaCxC"
                    :options="$planCuentas"
                    value="{{ $cliente->idCtaCxC }}"
                />
            </x-ui-col>
            
            <x-ui.col xs="12" md="12" lg="3">

                <div x-data="{ show: {{ old('respReteIvaCl') ? 'true' : 'false' }} }">

                    <x-ui.label value="Retenedor de renta :" />
                    
                    <x-ui.checkbox
                        name="respReteIvaCl"
                        value="1"
                        :checked="(bool) $cliente->respReteIvaCl"
                        @change="show = $event.target.checked"
                    />

                    <div x-show="show" x-transition class="mt-2">
                        <x-ui.select
                            name="idReteIvaCl"
                            :options="$impuestos"
                            value="{{ $cliente->idReteIvaCl }}"
                        />
                    </div>

                </div>
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">

                <div x-data="{ show: {{ old('respReteCl') ? 'true' : 'false' }} }">

                    <x-ui.label value="Retenedor de renta :" />
                    
                    <x-ui.checkbox
                        name="respReteCl"
                        value="1"
                        :checked="(bool) $cliente->respReteCl"
                        @change="show = $event.target.checked"
                    />

                    <div x-show="show" x-transition class="mt-2">
                        <x-ui.select
                            name="idRespReteCl"
                            :options="$impuestos"
                            value="{{ $cliente->idRespReteCl }}"
                        />
                    </div>

                </div>
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">

                <div x-data="{ show: {{ old('respIcaCl') ? 'true' : 'false' }} }">

                    <x-ui.label value="Retenedor de renteica :" />
                    
                    <x-ui.checkbox
                        name="respIcaCl"
                        value="1"
                        :checked="(bool) $cliente->respIcaCl"
                        @change="show = $event.target.checked"
                    />

                    <div x-show="show" x-transition class="mt-2">
                        <x-ui.select
                            name="idReteIcaCl"
                             :options="$impuestos"
                            value="{{ $cliente->idReteIcaCl  }}"
                        />
                    </div>

                </div>
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>
            
            <x-ui.col xs="12" md="12" lg="4">

                <x-ui.label value="Régimen fiscal :" />

                <x-ui.select
                    name="idRegimen"
                    :options="$regimenes"
                    value="{{ $cliente->idRegimen }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.subtitle text="Información facturación electrónica" />
     
        <x-ui.row>
            
            <x-ui.col xs="12" md="12" lg="4">

                <x-ui.label value="Detalle tributario :" />

                <x-ui.multi-select
                    name="detallesTributrios"
                    :options="$detallesTributarios"
                    :values="$cliente->detallesTributarios->pluck('pivot.idDetTrib')->map(fn($v) => (string) $v)
    ->toArray()"
                    placeholder="Selecciona uno o más"
                />  
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Responsabilidad fiscal  :" />

                <x-ui.multi-select
                    name="responsabilidadesFiscales"
                    :options="$responsabilidadesFiscales"
                    :values="$cliente->responsabilidadesFiscales
    ->pluck('pivot.idRespFis')
    ->map(fn($v) => (string) $v)
    ->toArray()"
                    placeholder="Selecciona uno o más"
                />  
            </x-ui-col>
            
            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Actividad económica :" />

                <x-ui.multi-select
                    name="actividadesEconomicas"
                    :options="$actividadesEconomicas"
                    :values="$cliente->actividadesEconomicas->pluck('pivot.idActEco')->map(fn($v) => (string) $v)
    ->toArray()"
                    placeholder="Selecciona uno o más"
                />  
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="E-mail de facturación :" />
                <x-ui.input
                    name="email"
                    value="{{ $cliente->email }}"
                />
            </x-ui-col>
          
            <x-ui.col xs="12" md="12" lg="4">
       
                <x-ui.label value="Dirección fiscal es diferente a la direcion domicilio  :" />
                    
                <x-ui.checkbox
                    name="respIcaCl"
                    value="1"
                    :checked="(bool) $cliente->respIcaCl"
                    @change="show = $event.target.checked"
                />
         
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4" x-show="show" x-transition class="mt-2">
                <x-ui.select
                    name="idPaisF"
                    :options="$paises"
                    value="{{ $cliente->idPaisF }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4" x-show="show" x-transition class="mt-2">
                <x-ui.select
                    name="idCiudF"
                    :options="$ciudades"
                    value="{{ old('idCiuF') }}"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4" x-show="show" x-transition class="mt-2">
                <x-ui.select
                    name="idCodPostalF"
                    :options="$codigosPostales"
                    value="{{ old('idCodPostalF') }}"
                />
            </x-ui-col>

        </x-ui.row>

        <x-ui.subtitle text="Información comercial" />
       
        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Lista de precios" />
                <x-ui.multi-select
                    name="listasPrecios"
                    :options="$listasPrecios"
                    :values="$cliente->listasPrecio->pluck('pivot.idLista')->map(fn($v) => (string) $v)
    ->toArray()"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Cupo de crédito: :" />
                <x-ui.input
                    name="cupoCred"
                    type="number"
                    value="{{ old('cupoCred') }}"
                />
            </x-ui-col>
            
            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Cliente del exterior :" />
                <x-ui.checkbox
                    name="clienExt"
                    value="1"
                    :checked="(bool) $cliente->clienExt"
                />
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Vendedores" />
                <x-ui.multi-select
                    name="vendedores"
                    :options="$vendedores"
                    :values="$cliente->vendedores->pluck('pivot.idVen')->toArray()"
                    placeholder="Selecciona uno o más"
                />  
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>
            <x-ui.col xs="12" md="12" lg="4">
                <x-ui.label value="Centro de costos" />
                <x-ui.select
                    name="idLista"
                    :options="$centrosCosto"
                    value="{{ old('idCcos') }}"
                /> 
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="2">
                <x-ui.label value="Fecha de corte facturación: " />
                <x-ui.input
                    name="fechaCorteFac"
                    type="date"
                    value="{{ old('fechaCorteFac') }}"
                />
            </x-ui.col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Zona:" />
                <x-ui.select
                    name="idZona"
                    :options="$zonas"
                    value="{{ old('idZona') }}"
                /> 
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Canal:" />
                <x-ui.select
                    name="idCanal"
                    :options="$canales"
                    value="{{ old('idCanal') }}"
                /> 
            </x-ui-col>

        </x-ui.row>

        <x-ui.row>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Ruta:" />
                <x-ui.select
                    name="idRuta"
                    :options="$rutas"
                    value="{{ old('idRuta') }}"
                /> 
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Tipo de persona:" />
                <x-ui.select
                    name="tipPersona"
                    :options="$tipoPersona"
                    value="{{ old('tipPersona') }}"
                /> 
            </x-ui-col>

            <x-ui.col xs="12" md="12" lg="3">
                <x-ui.label value="Clasificación 1:" />
                <x-ui.select
                    name="idCla1"
                    :options="$clasificacion1"
                    value="{{ old('idCla1') }}"
                /> 
            </x-ui-col>
        </x-ui.row>

        <x-ui.button-save 
            icon="lucide-save" 
            type="submit"
            value="Guardar"
        />
    </x-ui.form>
</x-ui.card>

<x-ui.button-back
    color="Atrás"  
    href="{{ url('comercial/clientes') }}"
/>

@endsection