@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')
    <!-- Horizontal Wizard -->
    <section class="horizontal-wizard">
        <div class="bs-stepper horizontal-wizard-example">
            <div class="bs-stepper-header" role="tablist">
                <div class="step" data-target="#Holder-information" role="tab" id="Holder-information-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Table.Holders.Column.Title') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Table.Holders.Column.BasicInformation') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#address-info" role="tab" id="address-info-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Table.Holders.Column.Address') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Table.Holders.Column.Holderlocalization') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#complement-info" role="tab" id="complement-info-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">3</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Table.Holders.Column.Contact') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Table.Holders.Column.ContactInformation') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#health-info" role="tab" id="health-info-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">4</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Table.Holders.Column.Financial') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Table.Holders.Column.FinancialInformation') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#group-hi" role="tab" id="group-hi-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">5</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Table.Holders.Column.Employment') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Table.Holders.Column.BasicInformation') }}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="Holder-information" class="content" role="tabpanel" aria-labelledby="Holder-information-trigger">
                    <form novalidate="novalidate">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Table.Holders.Column.Title') }}</h5>
                            <small class="text-muted">{{ __('locale.Table.Holders.Column.RegisterHolder') }}</small>
                            <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="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="rg">{{ __('locale.Table.Holders.Column.RG') }}</label>
                                        <input type="text" id="rg" class="form-control" placeholder="RG"
                                            name="rg" 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 class="row">
                                <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 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="0">{{ __('locale.Table.Holders.Column.CivilStatusSingle') }}</option>
                                            <option value="1">{{ __('locale.Table.Holders.Column.CivilStatusMarried') }}</option>
                                            <option value="2">{{ __('locale.Table.Holders.Column.CivilStatusWidower') }}</option>
                                            <option value="3">{{ __('locale.Table.Holders.Column.CivilStatusDivorced') }}</option>

                                        </select>
                                    </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="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>
                            <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>
                                            <option value="0">{{ __('locale.Table.Holders.Column.SexCisgenderWoman') }}</option>
                                            <option value="1">{{ __('locale.Table.Holders.Column.SexCisgenderMan') }}</option>
                                            <option value="2">{{ __('locale.Table.Holders.Column.SexTransgenderWoman') }}</option>
                                            <option value="3">{{ __('locale.Table.Holders.Column.SexTransgenderMan') }}</option>
                                            <option value="4">{{ __('locale.Table.Holders.Column.SexTranssexualWoman') }}</option>
                                            <option value="5">{{ __('locale.Table.Holders.Column.SexTranssexualMan') }}</option>
                                            <option value="6">{{ __('locale.Table.Holders.Column.SexAgender') }}</option>
                                            <option value="7">{{ __('locale.Table.Holders.Column.SexOthers') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
                <div class="d-flex justify-content-between">
                    <button class="btn btn-outline-secondary btn-prev" disabled>
                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Next') }}</span>
                        <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                    </button>
                </div>
            </div>
            <div id="address-info" class="content" role="tabpanel" aria-labelledby="address-info-trigger">
                <form novalidate="novalidate">
                    <div class="content-header">
                        <h5 class="mb-0">{{ __('locale.Table.Holders.Column.Address') }}</h5>
                        <small>{{ __('locale.Table.Holders.Column.Holderlocalization') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 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>


                </form>
                <div class="d-flex justify-content-between">
                    <button class="btn btn-primary btn-prev">
                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Next') }}</span>
                        <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                    </button>
                </div>
            </div>
            <div id="complement-info" class="content" role="tabpanel" aria-labelledby="complement-info-trigger">
                <form novalidate="novalidate">
                    <div class="content-header">
                        <h5 class="mb-0">{{ __('locale.Table.Holders.Column.Contact') }}</h5>
                        <small>{{ __('locale.Table.Holders.Column.ContactInformation') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-12 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="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="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>
                </form>
                <div class="d-flex justify-content-between">
                    <button class="btn btn-primary btn-prev">
                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Next') }}</span>
                        <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                    </button>
                </div>
            </div>
            <div id="health-info" class="content" role="tabpanel" aria-labelledby="health-info-trigger">
                <form novalidate="novalidate">
                    <div class="content-header">
                        <h5 class="mb-0">{{ __('locale.Table.Holders.Column.Financial') }}</h5>
                        <small>{{ __('locale.Table.Holders.Column.FinancialInformation') }}</small>
                    </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" required />
                            </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" required />
                            </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" required />
                            </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" required />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <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" required />
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="consigned_credit">{{ __('locale.Table.Holders.Column.ConsignedCredit') }}</label>
                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="consigned_credit_sim">{{ __('locale.Table.Holders.Column.Yes') }}</label>
                                    <input class="form-check-input" type="radio" name="consigned_credit" id="consigned_credit_sim" value="0">
                                </div>
                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="consigned_credit_nao">{{ __('locale.Table.Holders.Column.No') }}</label>
                                    <input class="form-check-input" type="radio" name="consigned_credit" id="consigned_credit_nao" value="1" checked>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="d-flex justify-content-between">
                    <button class="btn btn-primary btn-prev">
                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Next') }}</span>
                        <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                    </button>
                </div>
            </div>
            <div id="group-hi" class="content" role="tabpanel" aria-labelledby="group-hi-trigger">
                <form novalidate="novalidate">
                    <div class="content-header">
                        <h5 class="mb-0">{{ __('locale.Table.Holders.Column.Employment') }}</h5>
                        <small>{{ __('locale.Table.Holders.Column.RulesInformations') }}</small>
                    </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">
                                @if ($companies)
                                    @foreach ($companies as $company)
                                        <option value="{{ $company->id }}">{{ $company->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </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="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="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>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="status">{{ __('locale.Table.Holders.Column.Status') }}</label>
                                <select name="status" id="status" class="select2">
                                    <option value="1">{{ __('locale.Table.Holders.Column.StatusActive') }}</option>
                                    <option value="0">{{ __('locale.Table.Holders.Column.StatusInactive') }}</option>
                                </select>
                            </div>
                        </div>
                        <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>

                    <div class="row">
                        <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 class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="beneficy_end_date">{{ __('locale.Table.Holders.Column.BeneficyEndDate') }}</label>
                                <input type="date" id="beneficy_end_date" class="form-control"
                                    placeholder="{{ __('locale.Table.Holders.Column.BeneficyEndDate') }}" name="beneficy_end_date"/>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <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" />
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <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>
                </form>
                <div class="d-flex justify-content-between">
                    <button class="btn btn-primary btn-prev">
                        <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Table.Holders.Column.Previous') }}</span>
                    </button>
                    <button class="btn btn-success btn-submit">{{ __('locale.Table.Holders.Column.Submit') }}</button>
                </div>

            </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
            },
            bank_number: {
                required: true
            },
            bank: {
                required: true
            },
            bank_agency: {
                required: true
            },
            bank_account: {
                required: true
            },
            consigned_credit: {
                required: true
            },
            status: {
                required: true
            },
            injuction: {
                required: true
            },
        }

        $(function() {

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

            //modal type
            'use strict';

            $('#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)


            });

            var bsStepper = document.querySelectorAll('.bs-stepper'),
                select = $('.select2'),
                horizontalWizard = document.querySelector('.horizontal-wizard-example'),
                verticalWizard = document.querySelector('.vertical-wizard-example'),
                modernWizard = document.querySelector('.modern-wizard-example'),
                modernVerticalWizard = document.querySelector('.modern-vertical-wizard-example');
            if (typeof bsStepper !== undefined && bsStepper !== null) {
                for (var el = 0; el < bsStepper.length; ++el) {
                    bsStepper[el].addEventListener('show.bs-stepper', function(event) {
                        var index = event.detail.indexStep;
                        var numberOfSteps = $(event.target).find('.step').length - 1;
                        var line = $(event.target).find('.step');

                        // The first for loop is for increasing the steps,
                        // the second is for turning them off when going back
                        // and the third with the if statement because the last line
                        // can't seem to turn off when I press the first item. ¯\(ツ)/¯

                        for (var i = 0; i < index; i++) {
                            line[i].classList.add('crossed');

                            for (var j = index; j < numberOfSteps; j++) {
                                line[j].classList.remove('crossed');
                            }
                        }
                        if (event.detail.to == 0) {
                            for (var k = index; k < numberOfSteps; k++) {
                                line[k].classList.remove('crossed');
                            }
                            line[0].classList.remove('crossed');
                        }
                    });
                }
            }

            // select2
            select.each(function() {
                var $this = $(this);
                $this.wrap('<div class="position-relative"></div>');
                $this.select2({
                    placeholder: 'Select value',
                    dropdownParent: $this.parent(),
                });
            });

            if (typeof horizontalWizard !== undefined && horizontalWizard !== null) {
                var numberedStepper = new Stepper(horizontalWizard),
                    $form = $(horizontalWizard).find('form');
                $form.each(function() {
                    var $this = $(this);
                    $this.validate({
                        rules: formRules
                    });
                });

                if (typeof horizontalWizard !== undefined && horizontalWizard !== null) {
                    var numberedStepper = new Stepper(horizontalWizard),
                        $form = $(horizontalWizard).find('form');
                    $form.each(function() {
                        var $this = $(this);
                        $this.validate({});
                    });

                    window.numberedStepper = numberedStepper;

                    $(horizontalWizard)
                        .find('.btn-next')
                        .each(function() {
                            $(this).on('click', function(e) {
                                var isValid = $(this).parent().siblings('form').valid();
                                if (isValid) {
                                    numberedStepper.next();
                                    console.log('valid');
                                } else {
                                    e.preventDefault();
                                    console.log('error');
                                }
                            });
                        });

                    $(horizontalWizard)
                        .find('.btn-prev')
                        .on('click', function() {
                            numberedStepper.previous();
                        });

                    $(horizontalWizard)
                        .find('.btn-submit')
                        .on('click', async function() {
                            var isValid = $(this).parent().siblings('form').valid();
                            if (isValid) {

                                let json = {};

                                $(".bs-stepper-content form").each((i, e) => {
                                    let form_data_json = Object.fromEntries((new FormData(e))
                                        .entries())
                                    json = {
                                        ...json,
                                        ...form_data_json
                                    }
                                })

                                let {
                                    data: Holder,
                                    ...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") }}'
                                        })

                                    }
                                });


                                let swal = await Swal.fire({
                                    title: 'Uhuul!',
                                    text: '{{ __("locale.Table.Holders.Column.RegisterSuccess") }}',
                                    icon: 'success'
                                })

                                if (swal.isConfirmed) {
                                    window.location.href = `{{ route('dashboard.holders.index') }}`
                                }

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

                            }
                        });
                }
            }


            // for test
            // let page = 5;
            // for (let i = 1; i < page; i++) {
            // 	numberedStepper.next()
            // }
        });
    </script>
@endsection