@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Beneficiary'))

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection

@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <form class="form-add-holder">
                    @csrf
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">{{ __('locale.Table.Holders.Column.Title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name">{{ __('locale.Table.Holders.Column.Name') }}</label>
                                        <input type="text" id="name" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Name') }}"
                                            name="name" required />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="birth_date">{{ __('locale.Table.Holders.Column.BirthDate') }}</label>
                                        <input type="date" id="birth_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.BirthDate') }}" name="birth_date" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="mother_name">{{ __('locale.Table.Holders.Column.MotherName') }}</label>
                                        <input type="text" id="mother_name" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.MotherName') }}" name="mother_name" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="sex">{{ __('locale.Table.Holders.Column.Sex') }}</label>
                                        <select class="form-select" name="sex" id="sex" required>
                                            @if ($sexs)
                                                @foreach ($sexs as $sex)
                                                    <option value="{{ $sex->id }}">{{ $sex->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="civil_status">{{ __('locale.Table.Holders.Column.CivilStatus') }}</label>
                                        <select class="form-select" name="civil_status" id="civil_status" required>
                                            <option value="1">{{ __('locale.Table.Holders.Column.CivilStatusSingle') }}</option>
                                            <option value="2">{{ __('locale.Table.Holders.Column.CivilStatusMarried') }}</option>
                                            <option value="3">{{ __('locale.Table.Holders.Column.CivilStatusDivorced') }}</option>
                                            <option value="4">{{ __('locale.Table.Holders.Column.CivilStatusWidower') }}</option>
                                            <option value="5">União estável</option>

                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="wedding_date">{{ __('locale.Table.Holders.Column.WeddingDate') }}</label>
                                        <input type="date" id="wedding_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.WeddingDate') }}" name="wedding_date" disabled/>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="zip_code">{{ __('locale.Table.Holders.Column.AddressZipCode') }}</label>
                                        <input type="text" id="zip_code" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.AddressZipCode') }}" name="zip_code" data-mask="00000-000"required />
                                    </div>
                                </div>
                            </div>
        
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="address">{{ __('locale.Table.Holders.Column.Address') }}</label>
                                        <input type="text" id="address" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Address') }}"
                                            name="address" required />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="number">{{ __('locale.Table.Holders.Column.AddressNumber') }}</label>
                                        <input type="text" id="number" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.AddressNumber') }}"
                                            name="number" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="complement">{{ __('locale.Table.Holders.Column.AddressComplement') }}</label>
                                        <input type="text" id="complement" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.AddressComplement') }}"
                                            name="complement"/>
                                    </div>
                                </div>
        
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="district">{{ __('locale.Table.Holders.Column.AddressDistrict') }}</label>
                                        <input type="text" id="district" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.AddressDistrict') }}"
                                            name="district" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="city">{{ __('locale.Table.Holders.Column.AddressCity') }}</label>
                                        <input type="text" id="city" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.AddressCity') }}"
                                            name="city" required />
                                    </div>
                                </div>
        
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="state">{{ __('locale.Table.Holders.Column.AddressState') }}</label>
                                        <input type="text" id="state" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.AddressState') }}"
                                            name="state" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="personal_phone">{{ __('locale.Table.Holders.Column.PersonalPhone') }}</label>
                                        <input type="text" id="personal_phone" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.PersonalPhone') }}" name="personal_phone"
                                            data-mask="(00) 0 0000-0000" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="email">{{ __('locale.Table.Holders.Column.E-mail') }}</label>
                                        <input type="text" id="email" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.E-mail') }}" name="email" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="bank_number">{{ __('locale.Table.Holders.Column.BankNumber') }}</label>
                                        <input type="text" id="bank_number" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.BankNumber') }}"
                                            name="bank_number" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="bank">{{ __('locale.Table.Holders.Column.Bank') }}</label>
                                        <input type="text" id="bank" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Bank') }}"
                                            name="bank" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="bank_agency">{{ __('locale.Table.Holders.Column.BankAgency') }}</label>
                                        <input type="text" id="bank_agency" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.BankAgency') }}"
                                            name="bank_agency" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="bank_account">{{ __('locale.Table.Holders.Column.BankAccount') }}</label>
                                        <input type="text" id="bank_account" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.BankAccount') }}"
                                            name="bank_account" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title">{{ __('locale.Table.Holders.Column.TypeEmployee') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="employee_type">{{ __('locale.Table.Holders.Column.TypeEmployee') }}</label>
                                        <select class="form-select" name="employee_type" id="employee_type" required>
                                            <option selected disabled>selecione um tipo</option>
                                            <option value="1">{{ __('locale.Table.Holders.Column.CLT') }}</option>
                                            <option value="2">{{ __('locale.Table.Holders.Column.PJ') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="company_name">{{ __('locale.Table.Holders.Column.CompanyName') }}</label>
                                        <input type="text" id="company_name" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.CompanyName') }}" name="company_name" disabled/>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="cnpj">{{ __('locale.Table.Holders.Column.CNPJ') }}</label>
                                        <input type="text" id="cnpj" class="form-control" data-mask="00.000.000/0000-00"
                                            placeholder="{{ __('locale.Table.Holders.Column.CNPJ') }}" name="cnpj" disabled/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title">{{ __('locale.Table.Holders.Column.Documents') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="cpf">{{ __('locale.Table.Holders.Column.CPF') }}</label>
                                        <input type="text" id="cpf" class="form-control" placeholder="CPF"
                                            name="cpf" data-mask="000.000.000-00" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="sus_card">{{ __('locale.Table.Holders.Column.SusCard') }}</label>
                                        <input type="text" id="sus_card" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.SusCard') }}"
                                            name="sus_card"/>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="rg">{{ __('locale.Table.Holders.Column.RG') }}</label>
                                        <input type="text" id="rg" class="form-control" placeholder="RG"
                                            name="rg" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="issuing_body">{{ __('locale.Table.Holders.Column.IssuingBody') }}</label>
                                        <input type="text" id="issuing_body" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.IssuingBody') }}" name="issuing_body" required />
                                    </div>
                                </div>    
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="issuing_date">{{ __('locale.Table.Holders.Column.IssuingDate') }}</label>
                                        <input type="date" id="issuing_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.IssuingDate') }}" name="issuing_date" required />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title">{{ __('locale.Table.Holders.Column.DataCompany') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="row">
                                    <div class="mb-1 col-md-12">
                                        <label class="form-label" for="group_id">{{ __('locale.Table.Holders.Column.Group') }}</label>
                                        <select name="group_id" id="group_id" class="form-control">
                                            <option value="" selected disabled>Seleciona uma grupo</option>
                                            @if ($groups)
                                                @foreach ($groups as $group)
                                                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>    
                                </div>
                            </div>
                            <div class="row">
                                <div class="mb-1 col-md-6">
                                    <label class="form-label" for="company_id">{{ __('locale.Table.Holders.Column.Company') }}</label>
                                    <select name="company_id" id="company_id" class="select2">
                                        <option value="">Seleciona uma empresa</option>
                                        
                                    </select>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="registration">{{ __('locale.Table.Holders.Column.Registration') }}</label>
                                        <input type="text" id="registration" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Registration') }}" name="registration" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="role">{{ __('locale.Table.Holders.Column.Role') }}</label>
                                        <input type="text" id="role" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Role') }}"
                                            name="role" required />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="cost_center">{{ __('locale.Table.Holders.Column.CostCenter') }}</label>
                                        <input type="text" id="cost_center" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.CostCenter') }}" name="cost_center" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="admission_date">{{ __('locale.Table.Holders.Column.AdmissionDate') }}</label>
                                        <input type="date" id="admission_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.AdmissionDate') }}" name="admission_date" required />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="corporative_phone">{{ __('locale.Table.Holders.Column.CorporativePhone') }}</label>
                                        <input type="text" id="corporative_phone" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.CorporativePhone') }}" name="corporative_phone"data-mask="(00) 0 0000-0000" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="corporate_email">{{ __('locale.Table.Holders.Column.E-mailCorporate') }}</label>
                                        <input type="text" id="corporate_email" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.E-mailCorporate') }}" name="corporate_email" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="wage">{{ __('locale.Table.Holders.Column.Wage') }}</label>
                                        <input type="text" id="wage" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Wage') }}" name="wage" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-header">
                            <h5 class="card-title">{{ __('locale.Table.Holders.Column.ProductsAndBenefit') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12 d-flex flex-column justify-content-center">
                                    <div class="">
                                        <label class="form-label" for="included_with_carency">{{ __('locale.Table.Holders.Column.IncludedWithCarency') }}</label>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label" for="included_with_carency_sim">{{ __('locale.Table.Holders.Column.Yes') }}</label>
                                            <input class="form-check-input" type="radio" name="included_with_carency" id="included_with_carency_sim" value="0" >
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label" for="included_with_carency_nao">{{ __('locale.Table.Holders.Column.No') }}</label>
                                            <input class="form-check-input" type="radio" name="included_with_carency" id="included_with_carency_nao" value="1" checked>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="deletion_date">{{ __('locale.Table.Holders.Column.DeletionDate') }}</label>
                                        <input type="date" id="deletion_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.DeletionDate') }}" name="deletion_date"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="pre_existing_cid">{{ __('locale.Table.Holders.Column.Cid') }}</label>
                                        <input type="text" id="pre_existing_cid" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.Cid') }}" name="pre_existing_cid" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12 d-flex flex-column justify-content-center">
                                    <div class="">
                                        <label class="form-label" for="injuction">{{ __('locale.Table.Holders.Column.Injuction') }}</label>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label" for="injuction_sim">{{ __('locale.Table.Holders.Column.Yes') }}</label>
                                            <input class="form-check-input" type="radio" name="injuction" id="injuction_sim" value="0" >
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <label class="form-check-label" for="injuction_nao">{{ __('locale.Table.Holders.Column.No') }}</label>
                                            <input class="form-check-input" type="radio" name="injuction" id="injuction_nao" value="1" checked>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="coparticipation_rate">{{ __('locale.Table.Holders.Column.CoparticipationRate') }}</label>
                                        <input type="text" id="coparticipation_rate" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.CoparticipationRate') }}" name="coparticipation_rate" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="holder_status_id">{{ __('locale.Table.Holders.Column.Status') }}</label>
                                        <select name="holder_status_id" id="holder_status_id" class="form-select">
                                            <option selected disabled>Selecione um status</option>
                                            @if ($status)
                                                @foreach ($status as $status)
                                                    <option value="{{ $status->id }}">{{ $status->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="extension_start_date">{{ __('locale.Table.Holders.Column.ExtensionStartDate') }}</label>
                                        <input type="date" id="extension_start_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.ExtensionStartDate') }}" name="extension_start_date" disabled/>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="extension_end_date">{{ __('locale.Table.Holders.Column.ExtensionEndDate') }}</label>
                                        <input type="date" id="extension_end_date" class="form-control"
                                            placeholder="{{ __('locale.Table.Holders.Column.ExtensionEndDate') }}" name="extension_end_date" disabled/>
                                    </div>
                                </div>
                            </div>
                        </div> 
                        <div class="card-footer">
                            <div class="row">    
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary me-1" id="btnAddBrokers">{{ __('locale.Table.partner.Column.AddButton') }}</button>
                                    <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.partner.Column.BackButton') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('vendor-script')
    <!-- vendor files -->
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/jquery-mask/jquery.mask.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/extensions/ext-component-toastr.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/extensions/brdocs.cpfcnpjValidator.js')) }}"></script>

@endsection
@section('page-script')
    <script>
        let formRules = {
            company_id: {
                required: true
            },
            name: {
                required: true
            },
            cpf: {
                required: true,
                cpfcnpj: brdocs.cpfcnpj.CPF
            },
            role: {
                required: true
            },
            registration: {
                required: true
            },
            cost_center: {
                required: true
            },
            rg: {
                required: true
            },
            issuing_body: {
                required: true
            },
            issuing_date: {
                required: true,
            },
            birth_date: {
                required: true,
            },
            sex: {
                required: true,
            },
            civil_status: {
                required: true,
            },
            address: {
                required: true,
            },
            number: {
                required: true
            },
            district: {
                required: true
            },
            city: {
                required: true
            },
            state: {
                required: true
            },
            zip_code: {
                required: true
            },
            admission_date: {
                required: true
            },
            consigned_credit: {
                required: true
            },
            status: {
                required: true
            },
            injuction: {
                required: true
            },
        }

        $(function() {

            $("#civil_status").on("change", function() {
                
                var selectedValue = $(this).val();

                if (selectedValue == '2') {

                    $("#wedding_date").prop("disabled", false);
                } else {

                    $("#wedding_date").prop("disabled", true);
                    $("#wedding_date").val('');
                }
            });

            $("#employee_type").on("change", function() {
                
                var selectedValue = $(this).val();

                if (selectedValue == '2') {

                    $("#company_name").prop("disabled", false);
                    $("#cnpj").prop("disabled", false);
                } else {

                    $("#company_name").prop("disabled", true);
                    $("#company_name").val('');

                    $("#cnpj").prop("disabled", true);
                    $("#cnpj").val('');
                }
            });

            $("#holder_status_id").on("change", function() {
                
                var selectedValue = $(this).val();

                if (selectedValue == '5') {

                    $("#extension_start_date").prop("disabled", false);
                    $("#extension_end_date").prop("disabled", false);
                } else {

                    $("#extension_start_date").prop("disabled", true);
                    $("#extension_start_date").val('');

                    $("#extension_end_date").prop("disabled", true);
                    $("#extension_end_date").val('');
                }
            });

            $.validator.addMethod("cpfcnpj", brdocs.cpfcnpjValidator, "{{ __('locale.Table.Holders.Column.Validatorcpfcnpj') }}");

            //modal type
            'use strict';
            $('.select2').select2({
                allowClear: true,
                width: 'resolve'
            });

            $("#group_id").on("change", function() {
                let group_id = $(this).val();
                axios.get(`{{ route('api.holders.getCompany', '') }}/${group_id}`, {
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}"
                        }
                    })
                    .then(function(response) {
                        $('#company_id').empty();

                        $('#company_id').append(new Option('Selecione uma Empresa', '', true, true));
                        $('#company_id option:first').attr('disabled', 'disabled');

                        var companies = response.data;
                        console.log(companies);

                        
                        $('#company_id').select2({
                            multiple: false,
                            data: companies.map(function(company) {
                                return {
                                    id: company.id,
                                    text: company.name
                                };
                            })
                        });
                    })
                    .catch(function(error) {
                        console.error('Erro na requisição:', error);
                    });
            });

            $('#wage').mask("#.##0,00", {
                reverse: true
            });

            $("#cpf").on("keyup", function() {

                let cpf = $(this).val().replace(/\D/g, '');

                if (!validations.cpf.isValid(cpf)) {
                    $("#Holder-information .btn-next").attr('{{ __("locale.Table.Holders.Column.Disabled") }}', '{{ __("locale.Table.Holders.Column.Disabled") }}');
                } else {
                    $("#Holder-information .btn-next").removeAttr('{{ __("locale.Table.Holders.Column.Disabled") }}');
                }

            });

            $("#zip_code").on("keyup", async function() {

                let zip_code = $(this).val().replace(/\D/g, '');

                if (zip_code.length < 8) return 0;

                let {
                    data: json,
                    ...response
                } = await axios({
                    method: 'get',
                    url: `https://viacep.com.br/ws/${zip_code}/json/`,
                })

                if (json.erro) {
                    if (window.toastr !== undefined) {
                        window.toastr.warning('{{ __("locale.Table.Holders.Column.ZipCodeInvalid") }}', '{{ __("locale.Table.Holders.Column.Attention") }}');
                    } else {
                        window.alert('{{ __("locale.Table.Holders.Column.ZipCodeInvalid") }}');
                    }
                    $(this).val($(this).val().slice(0, -1)).focus();
                    return 0;
                }

                $("#address").val(json.logradouro);
                $("#district").val(json.bairro);
                $("#state").val(json.uf);
                $("#city").val(json.localidade);
                $("#complement").val(json.complemento)


            });

            $(".form-add-holder").on("submit", async function(eve) {

                eve.preventDefault();

                if ($(".form-add-holder").get(0).checkValidity()) {

                    let json = Object.fromEntries((new FormData($(".form-add-holder").get(0)))
                        .entries());

                    try {

                        let {
                            data: response
                        } = await axios({
                            url: `{{ route('api.holders.store') }}`,
                            method: 'post',
                            data: json,
                            headers: {
                                "Authorization": "Bearer {{ session('Authorization') }}"
                            }
                        }).catch((e) => {

                            let response = e.response;

                            @if (env('APP_DEBUG'))
                                console.warn(e)
                            @endif

                            if (response.status === 400 || response.status === 422) {
                                Swal.fire({
                                    title: 'Ops!',
                                    text: response.data.message,
                                    icon: 'error',
                                    cancelButtonText: '{{ __("locale.Table.Holders.Column.Close") }}'
                                })
                            } else if (response.status === 404) {
                                Swal.fire({
                                    title: 'Ops!',
                                    text: '{{ __("locale.Table.Holders.Column.RequestedNotFound") }}',
                                    icon: 'error',
                                    cancelButtonText: '{{ __("locale.Table.Holders.Column.Close") }}'
                                })
                            } else {

                                Swal.fire({
                                    title: 'Ops!',
                                    text: '{{ __("locale.Table.Holders.Column.RegisterError") }}',
                                    icon: 'error',
                                    cancelButtonText: '{{ __("locale.Table.Holders.Column.Close") }}'
                                })

                            }
                        });

                        Swal.fire({
                            title: 'Uhuul!',
                            text: '{{ __("locale.Table.Holders.Column.RegisterSuccess") }}',
                            icon: 'success',
                        }).then((_) => {
                            if (_.isConfirmed) {
                                window.location.href = '{{ route('dashboard.holders.index') }}'
                            }
                        })


                    } catch (e) {

                    }
                }

                });

                $('#btnReset').on('click', function() {
                window.location.href = '{{ route('dashboard.holders.index') }}';
                });

            });
    </script>
@endsection