<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Company_register_users_index', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Usuarios</li>
    @endcomponent

    <div class="container-fluid">
        @if($breadcrumb_show)
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header">
                            <h4>{{ $company_name }} | Plan: <b>{{ $company_plan_name }}</b></h4>
                            <h4>Empleado <b> | {{ $first_name }} {{ $last_name }}</b></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="row">
            <div class="col-sm-12 col-md-2">
                <div class="form-group">
                    <label>Proyectar costo mensual</label><br>
                    <button wire:click="openCalculateSalary" class="btn btn-primary">Calcular Salario <i class="fas fa-calculator"></i></button>
                </div>
            </div>
            <div class="col-sm-12 col-md-2">
                <div class="form-group">
                    <label>Tipo de salario</label>
                    <select wire:model="salary_type" class="form-select" wire:change="resetUI()">
                        <option value="">Seleccione una opción</option>
                        @foreach (DataTypeSalary() as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                    @error('salary_type')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Cargo u Oficio que desempeñará</label>
                    <select class="form-select" wire:model.lazy="job_position_id" wire:change="getBaseSalaryJobPosition">
                        <option value="">Seleccione una opción</option>
                        @foreach ($job_positions as $job_position)
                            <option value="{{ $job_position->id }}">{{ $job_position->name }}</option>
                        @endforeach
                    </select>
                    @error('job_position_id')
                        <span class="text-danger er">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="form-group">
                    <label>Forma de Pago </label>
                    <select class="form-select" wire:model.lazy="payment_method">
                        <option value="">Seleccione una opción</option>
                        @foreach (DataTypePaymentMethod() as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                    @error('payment_method')
                        <span class="text-danger er">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Salario Base </label>
                    <input type="text" data-type="currency" wire:model.lazy="base_salary" class="form-control" placeholder="ej: $1.200.000.00">
                    @error('base_salary')
                        <span class="text-danger er">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Factor prestacional 30% (Salario integral)</label>
                    <input type="text" data-type="currency" wire:model.lazy="performance_factor" class="form-control" placeholder="ej: $400.000.00">
                    @error('performance_factor')
                        <span class="text-danger er">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Costo mensual del trabajador</label>
                    <input type="text" data-type="currency" wire:model.lazy="salary" class="form-control" placeholder="ej: $1.600.000.00">
                    @error('salary')
                        <span class="text-danger er">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div><!-- end row -->
        <div class="row">
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Funciones principales</label>
                    <p>
                        {!! $main_functions !!}
                    </p>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Funciones especiales</label>
                    <p>
                        {!! $special_functions !!}
                    </p>
                </div>
            </div>
            <div class="col-sm-12 col-md-4">
                <div class="form-group">
                    <label>Cualidades</label>
                    <p>
                        {!! $qualities !!}
                    </p>
                </div>
            </div>
        </div><!-- end row -->
        <hr class="my-5">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <button type="submit" class="btn btn-primary" wire:click.prevent="storeProfile()">GUARDAR</button>
            </div>
        </div>
    </div>
    @include('livewire.company.contracts.employee-profile.form')
    @include('livewire.company.contracts.employee-profile.form-integral')
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('.modal-salary').on('shown.bs.modal', function() {
            $('.modal-body:first *:input[type!=hidden]:first').trigger('focus');
        });

        window.livewire.on('item-updated', msg => {
            $('#theModalSalary').modal('hide')
            $('#theModalSalaryIntegral').modal('hide')
            noty(msg)
        });
        window.livewire.on('item-error', msg => {
            noty(msg)
        });
        window.livewire.on('item-message', msg => {
            noty(msg)
        });

        window.livewire.on('hide-modal-salary', msg => {
            $('#theModalSalary').modal('hide')
        });
        window.livewire.on('show-modal-salary', msg => {
            $('#theModalSalary').modal('show')
        });

        window.livewire.on('hide-modal-salary-integral', msg => {
            $('#theModalSalaryIntegral').modal('hide')
        });
        window.livewire.on('show-modal-salary-integral', msg => {
            $('#theModalSalaryIntegral').modal('show')
        });

        window.livewire.on('not-permission', msg => {
            noty(msg)
        });
    });
</script>
@push('help-popover')
<script src="{{ asset('assets/js/popover-custom.js')}}"></script>
@endpush
