@extends('layouts.vertical', ['title' => 'Crear Cliente'])

@section('css')
    @vite([
        'node_modules/select2/dist/css/select2.min.css',
        'node_modules/mohithg-switchery/dist/switchery.min.css'
        ])
@endsection

@section('content')
    <!-- Start Content-->
    <div class="container-fluid">

        @include('layouts.shared.page-title', [
            'breadcrumbs' => [
                ['title' => 'CRM', 'url' => '/dashboard'],
                ['title' => 'Clientes', 'url' => '/clients/list'],
                ['title' => 'Crear Cliente'],
            ]
        ])

        <!-- Formulario -->
        <form action="{{url('/clients/create')}}" data-validate="true" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- Información General -->
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-body">

                            <h4 class="header-title">Información General</h4>
                            <p class="text-muted font-13 mb-4">
                                Complete la siguiente información general para crear un cliente.<br/>
                                <span class="text-danger fw-bold">*</span> 
                                <code>Indica que el campo es obligatorio.</code>
                            </p>

                                <div class="row">

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Primer Nombre <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el primer nombre.
                                        </p>
                                        <input value="{{ old('name') }}" required type="text" class="form-control" name="name" id="name" data-parsley-error-message="Primer nombre de cliente es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Segundo Nombre <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el segundo nombre.
                                        </p>
                                        <input value="{{ old('name2') }}" required type="text" class="form-control" name="name2" id="name2" data-parsley-error-message="Segundo nombre es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Primer Apellido <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el primer apellido.
                                        </p>
                                        <input value="{{ old('lastname') }}" required type="text" class="form-control" name="lastname" id="lastname" data-parsley-error-message="Primer apellido es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Segundo Apellido <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el segundo apellido.
                                        </p>
                                        <input value="{{ old('lastname2') }}" required type="text" class="form-control" name="lastname2" id="lastname2" data-parsley-error-message="Segundo apellido es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Telefono <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el número telefónico personal.
                                        </p>
                                        <input value="{{ old('personal_number') }}" required type="number" class="form-control" name="personal_number" id="personal_number" data-parsley-error-message="Número telefónico es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Correo Electrónico <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el correo electrónico personal.
                                        </p>
                                        <input value="{{ old('personal_email') }}" required type="email" class="form-control" name="personal_email" id="personal_email" data-parsley-error-message="Correo electrónico personal es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Género <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Seleccione su género.
                                        </p>

                                        <!-- Contenedor para mensajes de error -->
                                        <div id="gender-error-container" class="text-danger mb-2"></div> <!-- Mensaje arriba -->

                                        <div class="customRadio-container">
                                            @foreach ([
                                                1 => 'Femenino',
                                                2 => 'Masculino',
                                                3 => 'Otro'
                                            ] as $gender_key => $gender_value)
                                                <div class="form-check mb-2">
                                                    <input 
                                                        class="form-check-input d-none" 
                                                        type="radio" 
                                                        name="gender" 
                                                        id="gender-{{ $gender_key }}" 
                                                        value="{{ $gender_key }}"
                                                        @if(old('gender') == $gender_key) checked @endif 
                                                        data-parsley-error-message="Seleccionar el género es obligatorio."
                                                        data-parsley-errors-container="#gender-error-container"
                                                        data-parsley-class-handler=".customRadio-container" 
                                                        required
                                                    >

                                                    <label class="form-check-label d-flex align-items-center gap-2 p-2 border rounded selection-label" 
                                                        for="gender-{{ $gender_key }}" style="cursor: pointer;">
                                                        
                                                        <!-- Icono para cada género -->
                                                        @if($gender_key == 1)
                                                            <i class="fas fa-venus text-danger"></i> 
                                                        @elseif($gender_key == 2)
                                                            <i class="fas fa-mars text-primary"></i>
                                                        @elseif($gender_key == 3)
                                                            <i class="fas fa-genderless text-dark"></i>
                                                        @endif
                                                        <span>{{ $gender_value }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Tipo de Documento <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Seleccione el tipo de documento.
                                        </p>

                                        <!-- Contenedor para mensajes de error -->
                                        <div id="document-type-error-container" class="text-danger mb-2"></div> <!-- Mensaje arriba -->

                                        <div class="customRadio-container">
                                            @foreach ([
                                                1 => 'Identidad',
                                                2 => 'Carnet residencia',
                                                3 => 'Pasaporte'
                                            ] as $doc_key => $doc_value)
                                                <div class="form-check mb-2">
                                                <input 
                                                        class="form-check-input d-none" 
                                                        type="radio" 
                                                        name="document_type" 
                                                        id="document-type-{{ $doc_key }}" 
                                                        value="{{ $doc_key }}"
                                                        @if(old('document-type') == $doc_key) checked @endif 
                                                        data-parsley-error-message="Seleccionar el tipo de documento es obligatorio."
                                                        data-parsley-errors-container="#document-type-error-container"
                                                        data-parsley-class-handler=".customRadio-container" 
                                                        required
                                                    >

                                                    <label class="form-check-label d-flex align-items-center gap-2 p-2 border rounded selection-label" 
                                                        for="document-type-{{ $doc_key }}" style="cursor: pointer;">
                                                        
                                                        <!-- Icono para cada tipo de documento -->
                                                        @if($doc_key == 1)
                                                            <i class="fas fa-id-card text-blue"></i> 
                                                        @elseif($doc_key == 2)
                                                            <i class="fas fa-address-card text-success"></i>
                                                        @elseif($doc_key == 3)
                                                            <i class="fas fa-passport text-dark"></i>
                                                        @endif
                                                        <span>{{ $doc_value }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Estado Civil <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Seleccione su estado civil.
                                        </p>

                                        <!-- Contenedor para mensajes de error -->
                                        <div id="civil-state-error-container" class="text-danger mb-2"></div> <!-- Mensaje arriba -->

                                        <div class="customRadio-container">
                                            @foreach ([
                                                1 => 'Soltero',
                                                2 => 'Casado',
                                                3 => 'Divorciado',
                                                4 => 'Unión libre'
                                            ] as $civil_key => $civil_value)
                                                <div class="form-check mb-2">
                                                    <input 
                                                        class="form-check-input d-none" 
                                                        type="radio" 
                                                        name="civil_estate" 
                                                        id="civil-state-{{ $civil_key }}" 
                                                        value="{{ $civil_key }}"
                                                        @if(old('civil_estate') == $civil_key) checked @endif 
                                                        data-parsley-error-message="Seleccionar el estado civil es obligatorio."
                                                        data-parsley-errors-container="#civil-state-error-container"
                                                        data-parsley-class-handler=".customRadio-container" 
                                                        required
                                                    >

                                                    <label class="form-check-label d-flex align-items-center gap-2 p-2 border rounded selection-label" 
                                                        for="civil-state-{{ $civil_key }}" style="cursor: pointer;">
                                                        
                                                        <!-- Icono para cada estado civil -->
                                                        @if($civil_key == 1)
                                                            <i class="fas fa-user text-primary"></i> 
                                                        @elseif($civil_key == 2)
                                                            <i class="fas fa-ring text-info"></i>
                                                        @elseif($civil_key == 3)
                                                            <i class="fas fa-user-slash text-danger"></i>
                                                        @elseif($civil_key == 4)
                                                            <i class="fas fa-heart text-warning"></i>
                                                        @endif
                                                        <span>{{ $civil_value }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Profesión</p>
                                        <p class="text-muted font-13">
                                            Escriba la profesión.
                                        </p>
                                        <input value="{{ old('profession') }}" type="text" class="form-control" name="profession" id="profession">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Numero de Documento <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el numero de documento.
                                        </p>
                                        <input value="{{ old('document_number') }}" required type="text" class="form-control" name="document_number" id="document_number" data-parsley-error-message="Numero de documento es obligatorio.">
                                    </div>
                                    
                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Apellido de Casado</p>
                                        <p class="text-muted font-13">
                                            Escriba apellido de casado.
                                        </p>
                                        <input value="{{ old('lastname_marriage') }}" type="text" class="form-control" name="lastname_marriage" id="lastname_marriage">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Lugar de nacimiento</p>
                                        <p class="text-muted font-13">
                                            Escriba el lugar de nacimiento.
                                        </p>
                                        <input value="{{ old('born_place') }}" type="text" class="form-control" name="born_place" id="born_place">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Fecha de Nacimiento <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba la fecha de nacimiento.
                                        </p>
                                        <input value="{{ old('birth') }}" required type="date" class="form-control" name="birth" id="birth" data-parsley-error-message="Fecha de nacimiento es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Dirección</p>
                                        <p class="text-muted font-13">
                                            Escriba la dirección de vivienda.
                                        </p>
                                        <input value="{{ old('personal_address') }}" type="text" class="form-control" name="personal_address" id="personal_address">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Ciudad</p>
                                        <p class="text-muted font-13">
                                            Escriba la ciudad.
                                        </p>
                                        <input value="{{ old('personal_city') }}" type="text" class="form-control" name="personal_city" id="personal_city">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Departamento</p>
                                        <p class="text-muted font-13">
                                            Seleccione el departamento.
                                        </p>
                                        <select class="form-select" data-toggle="select2" id="personal_department"  name="personal_department">
                                            <option value="">Seleccione departamento...</option>        
                                            @foreach (depts() as $keyp4 => $valuep4)
                                                <option value="{{$keyp4}}" @if(old('personal_department') == $keyp4) selected @endif>{{$valuep4}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Nacionalidad <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Seleccione la nacionalidad.
                                        </p>
                                        <select required class="form-select" data-toggle="select2" data-parsley-error-message="Seleccionar la nacionalidad es obligatorio." id="nationality"  name="nationality" required="">
                                            <option value="">Seleccione nacionalidad...</option>        
                                            @foreach (countries() as $keyp3 => $valuep3)
                                                <option value="{{$keyp3}}" @if(old('nationality') == $keyp3) selected @endif>{{$valuep3}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">RTN Personal</p>
                                        <p class="text-muted font-13">
                                            Escriba el RTN personal.
                                        </p>
                                        <input value="{{ old('rtn') }}" type="text" class="form-control" name="rtn" id="rtn">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Directorio Nextcloud</p>
                                        <p class="text-muted font-13">
                                            Especifique la ruta del servicio Nextcloud.
                                        </p>
                                        <input value="{{ old('nextcloud') }}" type="text" class="form-control" name="nextcloud" id="nextcloud">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Fotografía</p>
                                        <p class="text-muted font-13">Seleccione una fotografía para subir al cliente.</p>
                                        <input type="file" accept="image/*" class="form-control" name="avatar" id="avatar">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Nombre Cónyuge</p>
                                        <p class="text-muted font-13">
                                            Escriba el nombre completo del cónyuge.
                                        </p>
                                        <input value="{{ old('name_conyugue') }}" type="text" class="form-control" name="name_conyugue" id="name_conyugue">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Dirección Cónyuge</p>
                                        <p class="text-muted font-13">
                                            Escriba la dirección del cónyuge.
                                        </p>
                                        <input value="{{ old('address_conyugue') }}" type="text" class="form-control" name="address_conyugue" id="address_conyugue">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Prospecto</p>
                                        <p class="text-muted font-13">
                                            ¿Es cliente prospecto?
                                        </p>
                                        <input type="checkbox" role="switch" 
                                            name="prospect" id="prospect" 
                                            data-plugin="switchery" data-color="var(--first-color)"
                                            {{ old('prospect') ? 'checked' : '' }} />
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Tipo de Cliente <span class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Seleccione el tipo de cliente.
                                        </p>

                                        <!-- Contenedor para mensajes de error -->
                                        <div id="type-error-container" class="text-danger mb-2"></div> <!-- Mensaje arriba -->

                                        <div class="customRadio-container">
                                            @foreach ([
                                                1 => 'Persona Natural',
                                                2 => 'Jurídico'
                                            ] as $type_key => $type_value)
                                                <div class="form-check mb-2">
                                                    <input 
                                                        class="form-check-input d-none" 
                                                        type="radio" 
                                                        name="type" 
                                                        id="type-{{ $type_key }}" 
                                                        value="{{ $type_key }}"
                                                        @if(old('type') == $type_key) checked @endif 
                                                        data-parsley-error-message="Seleccionar el tipo es obligatorio."
                                                        data-parsley-errors-container="#type-error-container"
                                                        data-parsley-class-handler=".customRadio-container" 
                                                        required
                                                    >

                                                    <label class="form-check-label d-flex align-items-center gap-2 p-2 border rounded selection-label" 
                                                        for="type-{{ $type_key }}" style="cursor: pointer;">
                                                        
                                                        <!-- Icono para cada tipo -->
                                                        @if($type_key == 1)
                                                            <i class="fas fa-user text-primary"></i> 
                                                        @elseif($type_key == 2)
                                                            <i class="fas fa-building text-dark"></i>
                                                        @endif
                                                        <span>{{ $type_value }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                </div>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->
            
            <!-- Información Persona Natural -->
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-body">

                        <h4 class="header-title"><i class="fas fa-user text-primary"></i> Tipo de Cliente: Persona Natural</h4>
                            <p class="text-muted font-13 mb-4">
                                Complete la siguiente información Laboral para crear un cliente.<br/>
                                <span class="text-danger fw-bold">*</span> 
                                <code>Indica que el campo es obligatorio.</code>
                            </p>

                                <div class="row">

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Nombre de Empresa / Negocio</p>
                                        <p class="text-muted font-13">
                                            Escriba el nombre de la empresa o negocio.
                                        </p>
                                        <input value="{{ old('enterprise_name') }}" type="text" class="form-control" name="enterprise_name" id="enterprise_name">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Giro Comercial</p>
                                        <p class="text-muted font-13">
                                            Escriba el giro comercial de la empresa o negocio.
                                        </p>
                                        <input value="{{ old('enterprise_camp') }}" type="text" class="form-control" name="enterprise_camp" id="enterprise_camp">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Cargo Desempeñado</p>
                                        <p class="text-muted font-13">
                                            Escriba el cargo que desempeña.
                                        </p>
                                        <input value="{{ old('enterprise_charge') }}" type="text" class="form-control" name="enterprise_charge" id="enterprise_charge">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Antigüedad en el Cargo</p>
                                        <p class="text-muted font-13">
                                            Escriba la antigüedad en el cargo (años).
                                        </p>
                                        <input value="{{ old('enterprise_time_working') }}" type="number" step="0.01" class="form-control" name="enterprise_time_working" id="enterprise_time_working">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Instituciones Financieras que posee Cuentas</p>
                                        <p class="text-muted font-13">
                                            Escriba el nombre de las instituciones financieras.
                                        </p>
                                        <input value="{{ old('bank_accounts') }}" type="text" class="form-control" name="bank_accounts" id="bank_accounts">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Origen de Recursos</p>
                                        <p class="text-muted font-13">
                                            Escriba los orígenes de los recursos.
                                        </p>
                                        <input value="{{ old('bank_money_origin') }}" type="text" class="form-control" name="bank_money_origin" id="bank_money_origin">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Ingresos Mensuales</p>
                                        <p class="text-muted font-13">
                                            Seleccione el nivel aproximado de ingresos mensuales.
                                        </p>
                                        <select class="form-select" data-toggle="select2" id="money_entry"  name="money_entry">
                                            <option value="">Seleccione un nivel de ingreso...</option>        
                                            <option @if(old('money_entry') == 1) selected @endif value="1">L. 0.00 - L. 27,000.00</option>
                                            <option @if(old('money_entry') == 2) selected @endif value="2">L. 27,001.00 - L. 53,000.00</option>
                                            <option @if(old('money_entry') == 3) selected @endif value="3">L. 53,001.00 - L. 89,000.00</option>
                                            <option @if(old('money_entry') == 4) selected @endif value="4">L. 77,001.00 - L. 442,000.00</option>
                                            <option @if(old('money_entry') == 5) selected @endif value="5">Mayor a L. 442,000.00</option>
                                        </select>
                                    </div>

                                </div>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->

            <!-- Información Juridica -->
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-body">

                            <h4 class="header-title"><i class="fas fa-building text-dark"></i> Tipo de Cliente: Jurídico</h4>
                            <p class="text-muted font-13 mb-4">
                                Complete la siguiente información juridica para crear un cliente.<br/>
                                <span class="text-danger fw-bold">*</span> 
                                <code>Indica que el campo es obligatorio.</code>
                            </p>

                                <div class="row">

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Razón Social <span id="business_name_asterisk" class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba la razón social.
                                        </p>
                                        <input value="{{ old('business_name') }}" required type="text" class="form-control" name="business_name" id="business_name" data-parsley-error-message="Razón social es obligatoria.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Nombre Comercial <span id="business_comercial_name_asterisk" class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el nombre comercial de la empresa.
                                        </p>
                                        <input value="{{ old('business_comercial_name') }}" required type="text" class="form-control" name="business_comercial_name" id="business_comercial_name" data-parsley-error-message="Nombre comercial es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">RTN Empresarial <span id="business_rtn_asterisk" class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el RTN de la empresa.
                                        </p>
                                        <input value="{{ old('business_rtn') }}" required type="text" class="form-control" name="business_rtn" id="business_rtn" data-parsley-error-message="RTN empresarial es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Lugar de constitución</p>
                                        <p class="text-muted font-13">
                                            Escriba el lugar de constitución.
                                        </p>
                                        <input value="{{ old('business_constitution_place') }}" type="text" class="form-control" name="business_constitution_place" id="business_constitution_place">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Fecha de Constitución <span id="business_constitution_date_asterisk" class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba la fecha de constitución.
                                        </p>
                                        <input value="{{ old('business_constitution_date') }}" required type="date" class="form-control" name="business_constitution_date" id="business_constitution_date" data-parsley-error-message="Fecha de nacimiento es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Telefono <span id="business_phone_asterisk" class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el telefono de la empresa.
                                        </p>
                                        <input value="{{ old('business_phone') }}" required type="number" class="form-control" name="business_phone" id="business_phone" data-parsley-error-message="Numero de telefono es obligatorio.">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Correo Electrónico <span id="business_email_asterisk" class="text-danger fw-bold">*</span></p>
                                        <p class="text-muted font-13">
                                            Escriba el correo electrónico de la empresa.
                                        </p>
                                        <input value="{{ old('business_email') }}" required type="email" class="form-control" name="business_email" id="business_email" data-parsley-error-message="Correo electrónico  es obligatorio.">
                                    </div>
                                    
                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Dirección</p>
                                        <p class="text-muted font-13">
                                            Escriba la dirección de la empresa.
                                        </p>
                                        <input value="{{ old('business_address') }}" type="text" class="form-control" name="business_address" id="business_address">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Ciudad</p>
                                        <p class="text-muted font-13">
                                            Escriba la ciudad.
                                        </p>
                                        <input value="{{ old('business_city') }}" type="text" class="form-control" name="business_city" id="business_city">
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                        <p class="mb-1 fw-bold text-muted">Departamento</p>
                                        <p class="text-muted font-13">
                                            Seleccione el departamento.
                                        </p>
                                        <select class="form-select" data-toggle="select2" id="business_department"  name="business_department">
                                            <option value="">Seleccione departamento...</option>        
                                            @foreach (depts() as $keyp4 => $valuep4)
                                                <option value="{{$keyp4}}" @if(old('business_department') == $keyp4) selected @endif>{{$valuep4}}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->

            <!-- Información Juridica -->
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-body">

                            <button class="btn btn-success" type="submit">
                                <i class="bi bi-check-circle"></i> Crear Cliente
                            </button>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->

        </form>
        <!-- end form -->

    </div> <!-- container -->
@endsection
@section('script')
    @vite([
        'resources/js/pages/form-advanced.init.js',
        'resources/js/pages/form-validation.init.js'
        ])
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const typeRadios = document.querySelectorAll('input[name="type"]');

            // Lista de campos a controlar
            const requiredFields = [
                { id: 'business_name', asterisk: 'business_name_asterisk' },
                { id: 'business_comercial_name', asterisk: 'business_comercial_name_asterisk' },
                { id: 'business_rtn', asterisk: 'business_rtn_asterisk' },
                { id: 'business_constitution_date', asterisk: 'business_constitution_date_asterisk' },
                { id: 'business_phone', asterisk: 'business_phone_asterisk' },
                { id: 'business_email', asterisk: 'business_email_asterisk' }
            ];

            function toggleRequiredFields() {
                const selectedType = document.querySelector('input[name="type"]:checked')?.value;
                const isJuridico = selectedType === "2";

                requiredFields.forEach(field => {
                    const inputElement = document.getElementById(field.id);
                    const asteriskElement = document.getElementById(field.asterisk);

                    if (isJuridico) {
                        inputElement.removeAttribute("disabled");
                        inputElement.setAttribute("required", "required");
                        asteriskElement.style.display = "inline"; // Mostrar asterisco
                    } else {
                        inputElement.setAttribute("disabled", "disabled");
                        inputElement.removeAttribute("required");
                        inputElement.value = ""; // Limpiar campo
                        asteriskElement.style.display = "none"; // Ocultar asterisco
                    }
                });
            }

            // Ejecutar al cambiar el tipo de cliente
            typeRadios.forEach(radio => {
                radio.addEventListener("change", toggleRequiredFields);
            });

            // Ejecutar al cargar la página si el valor ya está seleccionado
            toggleRequiredFields();
        });
    </script>
@endsection