<div wire:ignore.self class="modal-salary modal fade" tabindex="-1" role="dialog" id="theModalSalary">
    <div class="modal-dialog modal-xl" role="document" style="overflow-y:initial">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title">
                <b>{{ $first_name }} {{ $last_name }}</b> | PROYECTAR {{ $salary_type_name }}</h5>
                </h5>
                <h6 class="text-center text-warning" wire:loading>ESPERE UN MOMENTO POR FAVOR</h6>
            </div>
            <div class="modal-body" style="height: 70vh; overflow-y: auto">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-4">
                                <h6><b>Salario mínimo (SMLV)</b> <span>${{ $minimum_salary }}</span></h6>
                                <h6><b>Auxilio de transporte</b> <span>${{ $transportation_allowance }}</span></h6>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <h6><b>Cargo:</b> <span>{{ $job_position_name }}</span></h6>
                                <h6><b>Sueldo base</b> <span>${{ $job_position_salary }}</span></h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-4">
                        <div class="form-group">
                            <label>Salario Mensual Básico </label>
                            <input type="text" data-type="currency" wire:model.lazy="base_salary_calculate" class="form-control" placeholder="ej: $1.200.000.00" maxlength="13">
                            @error('base_salary_calculate')
                                <span class="text-danger er">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-2">
                        <div class="form-group">
                            <label>Días trabajados</label>
                            <input type="number" data-type="number" wire:model.debounce.1s="days_worked" class="form-control" placeholder="ej: 30" maxlength="2">
                            @error('days_worked')
                                <span class="text-danger er">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label class="text-primary">Básico</label>
                            <input type="text" data-type="currency" wire:model.lazy="basic_calculate" class="form-control" readonly>
                        </div>
                    </div>

                </div><!-- end row -->
                <div class="row">
                    <div class="col-sm-12 col-md-4">
                        <div class="form-group">
                            <label>Auxilio de transporte</label>
                            <input type="text" data-type="currency" wire:model.lazy="transportation_allowance_calculate" class="form-control" maxlength="13" readonly>
                            @error('transportation_allowance_calculate')
                                <span class="text-danger er">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <div class="form-group">
                            <label class="text-primary">Total Básico</label>
                            <input type="hidden" data-type="currency" wire:model.lazy="performance_factor_calculate" class="form-control" readonly>
                            <input type="text" data-type="currency" wire:model.lazy="total_basic_salary" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group f-right">
                            <label class="text-primary">Calcular costo mensual</label><br>
                            <button wire:click="calculateSalary" class="btn btn-primary btn-block">Calcular <i class="fas fa-calculator"></i></button>
                        </div>
                    </div>
                </div><!-- end row -->
                <div class="row">
                    <div class="col-sm-12 col-md-12 text-center">
                        <h6>Seguridad social</h6>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>EPS (8.5%)</label>
                            @if ($opt_eps_check == true)
                                <input type="checkbox" class="m-l-10 checkbox_animated" wire:model.lazy="eps_check"><span class="small">Calcular</span>
                            @endif
                            <input type="text" data-type="currency" wire:model.lazy="eps_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Pensión (12%)</label>
                            <input type="text" data-type="currency" wire:model.lazy="pension_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>ARL</label>
                            <select class="form-select" wire:model.lazy="arl_option">
                                <option value="">Seleccione una opción</option>
                                @foreach (DataTypeARL() as $key => $value)
                                    <option value="{{ $key }}">{{ $value }} -> {{ $key }}%</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>ARL {{ $arl_option }}</label>
                            <input type="text" data-type="currency" wire:model.lazy="arl_value" class="form-control" readonly>
                        </div>
                    </div>
                </div><!-- end row -->
                <div class="row">
                    <div class="col-sm-12 col-md-12 text-center">
                        <h6>Prestaciones Sociales</h6>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Prima (8.33%)</label>
                            <input type="text" data-type="currency" wire:model.lazy="prima_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Cesantias (8.33%)</label>
                            <input type="text" data-type="currency" wire:model.lazy="severance_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Int. Cesantias (12%)</label>
                            <input type="text" data-type="currency" wire:model.lazy="int_severance_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Vacaciones (4.17%)</label>
                            <input type="text" data-type="currency" wire:model.lazy="vacations_value" class="form-control" readonly>
                        </div>
                    </div>
                </div><!-- end row -->
                <div class="row">
                    <div class="col-sm-12 col-md-9 text-center">
                        <h6>Aportes parafiscales</h6>
                    </div>
                </div><!-- end row -->
                <div class="row">
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Sena (2%)</label>
                            <input type="checkbox" class="m-l-10 checkbox_animated" wire:model="sena_check"><span class="small">Calcular</span>
                            <input type="text" data-type="currency" wire:model.lazy="sena_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>ICBF (3%)</label>
                            <input type="checkbox" class="m-l-10 checkbox_animated" wire:model="icbf_check"><span class="small">Calcular</span>
                            <input type="text" data-type="currency" wire:model.lazy="icbf_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <div class="form-group">
                            <label>Caja de compensación (4%)</label>
                            <input type="text" data-type="currency" wire:model.lazy="family_compensation_fund_value" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3">
                        <label class="text-primary">Total mensual</label>
                        <input type="text" data-type="currency" wire:model.lazy="total_monthly" class="form-control" readonly>
                    </div>
                </div>
            </div><!-- end modalbody -->
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" wire:click.prevent="resetUI()" data-bs-dismiss="modal">CERRAR</button>
                <button type="submit" class="btn btn-primary" wire:click.prevent="addValueSalary()">AGREGAR COSTO MENSUAL <i class="fas fa-arrow-down"></i></button>

            </div>
        </div>
    </div>
</div>
