@extends('layouts/contentLayoutMaster')

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

@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="#Dependent-information" role="tab" id="Dependent-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.Dependents') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Pages.Dependents.Basic') }}</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.Pages.Dependents.Address') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Pages.Dependents.Dependent') }}</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.Pages.Dependents.Informations') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Pages.Dependents.Additional') }}</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.Pages.Dependents.Financial') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Pages.Dependents.FinancialInformations') }}</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">{{ __('locale.Pages.Dependents.Other') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Pages.Dependents.Basic') }}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="Dependent-information" class="content" role="tabpanel"
                    aria-labelledby="Dependent-information-trigger">
                    <form novalidate="novalidate">
						<input type="hidden" name="holder_id" value="{{ $holder->id }}">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Dependents') }}</h5>
                            <small class="text-muted">{{ __('locale.Pages.Dependents.Basic') }}</small>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="name">{{ __('locale.Pages.Dependents.Name') }}</label>
                                        <input type="text" id="name" class="form-control" placeholder="{{ __('locale.Pages.Dependents.Name') }}"
                                            name="name" value="{{ $dependent->name }}" required />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="cpf">CPF</label>
                                        <input type="text" id="cpf" class="form-control" placeholder="CPF"
                                            name="cpf" data-mask="000.000.000-00"
                                            value="{{ $dependent->cpf }}" required />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="rg">RG</label>
                                        <input type="number" id="rg" class="form-control" placeholder="RG" name="rg" value="{{ $dependent->rg }}" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="issuing_date">{{ __('locale.Pages.Dependents.Issuing') }}</label>
                                        <input type="date" id="issuing_date" class="form-control"
                                            placeholder="{{ __('locale.Pages.Dependents.Issuing') }}" name="issuing_date"
                                            value="{{ $dependent->issuing_date }}" />
                                    </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.Pages.Dependents.Birth') }}</label>
                                        <input type="date" id="birth_date" class="form-control"
                                            placeholder="{{ __('locale.Pages.Dependents.Birth') }}" name="birth_date"
                                            value="{{ $dependent->birth_date }}" required />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="civil_status">{{ __('locale.Pages.Dependents.Civil') }}</label>
                                        <select class="form-select" name="civil_status" id="civil_status" required>
                                            <option value="1" {{ $holder->civil_status === 1 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusSingle') }}</option>
                                            <option value="2" {{ $holder->civil_status === 2 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusMarried') }}</option>
                                            <option value="3" {{ $holder->civil_status === 3 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusDivorced') }}</option>
                                            <option value="4" {{ $holder->civil_status === 4 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusWidower') }}</option>
                                            <option value="5" {{ $holder->civil_status === 5 ? 'selected' : '' }}>União estável</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.Pages.Dependents.Sus') }}</label>
                                        <input type="number" id="sus_card" class="form-control" placeholder="{{ __('locale.Pages.Dependents.Sus') }}"
                                            name="sus_card"
                                            value="{{ $dependent->sus_card }}"/>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="issuing_body">{{ __('locale.Pages.Dependents.IssuingBory') }}</label>
                                        <input type="text" id="issuing_body" class="form-control"
                                            placeholder="{{ __('locale.Pages.Dependents.IssuingBory') }}" name="issuing_body"
                                            value="{{ $dependent->issuing_body }}" />
                                    </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.Pages.Dependents.Mother') }}</label>
                                        <input type="text" id="mother_name" class="form-control"
                                            placeholder="{{ __('locale.Pages.Dependents.Mother') }}" name="mother_name"
                                            value="{{ $dependent->mother_name }}" />
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="sex">{{ __('locale.Pages.Dependents.Sex') }}</label>
                                        <select class="form-select" name="sex" id="sex" required>
                                            {{-- <option value="0" {{ $dependent->sex === 0 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexCisgenderWoman') }}</option>
                                            <option value="1" {{ $dependent->sex === 1 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexCisgenderMan') }}</option>
                                            <option value="2" {{ $dependent->sex === 2 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexTransgenderWoman') }}</option>
                                            <option value="3" {{ $dependent->sex === 3 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexTransgenderMan') }}</option>
                                            <option value="4" {{ $dependent->sex === 4 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexTranssexualWoman') }}</option>
                                            <option value="5" {{ $dependent->sex === 5 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexTranssexualMan') }}</option>
                                            <option value="6" {{ $dependent->sex === 6 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexAgender') }}</option>
                                            <option value="7" {{ $dependent->sex === 7 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.SexOthers') }}</option> --}}
                                            @if ($sexs)
                                                @foreach ($sexs as $sex)
                                                    <option value="{{ $sex->id }}" {{ $sex->id === $holder->sex ? 'selected' : '' }}>{{ $sex->name }}</option>
                                                @endforeach
                                            @endif
                                        </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.Pages.Dependents.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Dependents.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.Pages.Dependents.Address') }}</h5>
                        <small>{{ __('locale.Pages.Dependents.Dependent') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="zip_code">{{ __('locale.Pages.Dependents.AddressZipCode') }}</label>
                                <input type="text" id="zip_code" class="form-control" placeholder="{{ __('locale.Pages.Dependents.AddressZipCode') }}"
                                    name="zip_code" data-mask="00000-000" value="{{ $dependent->zip_code }}" required />
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="number">{{ __('locale.Pages.Dependents.AddressNumber') }}</label>
                                <input type="number" id="number" class="form-control" placeholder="{{ __('locale.Pages.Dependents.AddressNumber') }}"
                                    name="number" value="{{ $dependent->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.Pages.Dependents.AddressComplement') }}</label>
                                <input type="text" id="complement" class="form-control" placeholder="{{ __('locale.Pages.Dependents.AddressComplement') }}"
                                    name="complement" value="{{ $dependent->complement }}" />
                            </div>
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="district">{{ __('locale.Pages.Dependents.AddressDistrict') }}</label>
                                <input type="text" id="district" class="form-control" placeholder="{{ __('locale.Pages.Dependents.AddressDistrict') }}"
                                    name="district" value="{{ $dependent->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.Pages.Dependents.AddressCity') }}</label>
                                <input type="text" id="city" class="form-control" placeholder="{{ __('locale.Pages.Dependents.AddressCity') }}"
                                    name="city" value="{{ $dependent->city }}" required />
                            </div>
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="state">{{ __('locale.Pages.Dependents.AddressState') }}</label>
                                <input type="text" id="state" class="form-control" placeholder="{{ __('locale.Pages.Dependents.AddressState') }}"
                                    name="state" value="{{ $dependent->state }}"required />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="address">{{ __('locale.Pages.Dependents.Address') }}</label>
                                <input type="text" id="address" class="form-control" placeholder="{{ __('locale.Pages.Dependents.Address') }}"
                                    name="address" value="{{ $dependent->address }}"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.Pages.Dependents.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Dependents.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.Pages.Dependents.Informations') }}</h5>
                        <small>{{ __('locale.Pages.Dependents.Additional') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="email">{{ __('locale.Table.Dependents.Column.E-mail') }}</label>
                                <input type="text" id="email" class="form-control" placeholder="{{ __('locale.Table.Dependents.Column.E-mail') }}"
                                    name="email" value="{{ $dependent->email }}" />
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="wedding_date">{{ __('locale.Pages.Dependents.WeddingDate') }}</label>
                                <input type="date" id="wedding_date" class="form-control"
                                    placeholder="{{ __('locale.Pages.Dependents.WeddingDate') }}" name="wedding_date"
                                    value="{{ $dependent->wedding_date }}" />
                            </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.Pages.Dependents.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Dependents.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.Pages.Dependents.Financial') }}</h5>
                        <small>{{ __('locale.Pages.Dependents.FinancialInformations') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="bank_number">{{ __('locale.Pages.Dependents.BankNumber') }}</label>
                                <input type="number" id="bank_number" class="form-control" placeholder="{{ __('locale.Pages.Dependents.BankNumber') }}"
                                    name="bank_number" value="{{ $dependent->bank_number }}" />
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="bank">{{ __('locale.Pages.Dependents.Bank') }}</label>
                                <input type="number" id="bank" class="form-control" placeholder="{{ __('locale.Pages.Dependents.Bank') }}"
                                    name="bank" value="{{ $dependent->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.Pages.Dependents.BankAgency') }}</label>
                                <input type="number" id="bank_agency" class="form-control" placeholder="{{ __('locale.Pages.Dependents.BankAgency') }}"
                                    name="bank_agency" value="{{ $dependent->bank_agency }}" />
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="bank_account">{{ __('locale.Pages.Dependents.BankAccount') }}</label>
                                <input type="number" id="bank_account" class="form-control" placeholder="{{ __('locale.Pages.Dependents.BankAccount') }}"
                                    name="bank_account" value="{{ $dependent->bank_account }}" />
                            </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.Pages.Dependents.Previous') }}</span>
                    </button>
                    <button class="btn btn-primary btn-next">
                        <span class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Dependents.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.Pages.Dependents.Other') }}</h5>
                        <small>{{ __('locale.Pages.Dependents.Basic') }}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="carency_inclusion">{{ __('locale.Pages.Dependents.CarencyInclusion') }}</label>
                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="carency_inclusion_sim">{{ __('locale.Pages.Dependents.Yes') }}</label>
                                    <input class="form-check-input" type="radio" name="carency_inclusion" id="carency_inclusion_sim" value="0" {{ $dependent->carency_inclusion === 0 ? 'checked' : '' }}>
                                </div>
                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="carency_inclusion_nao">{{ __('locale.Pages.Dependents.No') }}</label>
                                    <input class="form-check-input" type="radio" name="carency_inclusion" id="carency_inclusion_nao" value="1" {{ $dependent->carency_inclusion === 1 ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="injuction">{{ __('locale.Pages.Dependents.Injuction') }}</label>
                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="injuction_sim">{{ __('locale.Pages.Dependents.Yes') }}</label>
                                    <input class="form-check-input" type="radio" name="injuction" id="injuction_sim" value="0" {{ $dependent->injuction === 0 ? 'checked' : '' }}>
                                </div>
                                <div class="form-check form-check-inline">
                                    <label class="form-check-label" for="injuction_nao">{{ __('locale.Pages.Dependents.No') }}</label>
                                    <input class="form-check-input" type="radio" name="injuction" id="injuction_nao" value="1" {{ $dependent->injuction === 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="carency">{{ __('locale.Pages.Dependents.Carency') }}</label>
                                <select name="carency" id="carency" class="select2">
                                    <option value="0" {{ $dependent->carency === 0 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.Carency0') }}</option>
                                    <option value="1" {{ $dependent->carency === 1 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.Carency1') }}</option>
                                    <option value="2" {{ $dependent->carency === 2 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.Carency2') }}</option>
                                    <option value="3" {{ $dependent->carency === 3 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.Carency3') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-1 col-md-6">
                            <label class="form-label" for="kinship_id">{{ __('locale.Pages.Dependents.Kinships') }}</label>
                            <select name="kinship_id" id="kinship_id" class="select2" required>
                                @if ($kinships)
                                    @foreach ($kinships as $kinship)
                                        <option value="{{ $kinship->id }}" {{ $dependent->kinship_id == $kinship->id ? 'selected' : '' }}>{{ $kinship->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="benefit_time">{{ __('locale.Pages.Dependents.BenefitTime') }}</label>
                                <select name="benefit_time" id="benefit_time" class="select2">
                                    <option value="0" {{ $dependent->benefit_time === 0 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.BenefitTime0') }}</option>
                                    <option value="1" {{ $dependent->benefit_time === 1 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.BenefitTime1') }}</option>
                                    <option value="2" {{ $dependent->benefit_time === 2 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.BenefitTime2') }}</option>
                                    <option value="3" {{ $dependent->benefit_time === 3 ? 'selected' : '' }}>{{ __('locale.Pages.Dependents.BenefitTime3') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-12">
                            <div class="mb-1">
                                <label class="form-label" for="status">{{ __('locale.Table.Dependents.Column.Status') }}</label>
                                <select name="status" id="status" class="select2" required>
                                    <option value="1" {{ $dependent->status === 1 ? 'selected' : '' }}>{{ __('locale.Table.Dependents.Column.StatusActive') }}</option>
                                    <option value="0" {{ $dependent->status === 0 ? 'selected' : '' }}>{{ __('locale.Table.Dependents.Column.StatusInactive') }}</option>
                                </select>
                            </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.Pages.Dependents.Previous') }}</span>
                    </button>
                    <button class="btn btn-success btn-submit">{{ __('locale.Pages.Dependents.Update') }}</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 = {
            kinship_id: {
                required: true
            },
            name: {
                required: true
            },
            cpf: {
                required: true,
                cpfcnpj: brdocs.cpfcnpj.CPF
            },
            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
            },
            carency_inclusion: {
                required: true
            },
            status: {
                required: true
            },
            injuction: {
                required: true
            },
        }

        $(function() {

            $.validator.addMethod("cpfcnpj", brdocs.cpfcnpjValidator, "{{ __('locale.Pages.Dependents.Validatorcpfcnpj') }}");

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

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

                if (!validations.cpf.isValid(cpf)) {
                    $("#Dependent-information .btn-next").attr('{{ __("locale.Pages.Dependents.Disabled") }}', '{{ __("locale.Pages.Dependents.Disabled") }}');
                } else {
                    $("#Dependent-information .btn-next").removeAttr('{{ __("locale.Pages.Dependents.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.Pages.Dependents.ZipCodeInvalid") }}', '{{ __("locale.Pages.Dependents.Attention") }}');
                    } else {
                        window.alert('{{ __("locale.Pages.Dependents.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
                                    }
                                })
                                console.log('Objeto JSON:', json);

                                let {
                                    data: dependent,
                                    ...response
                                } = await axios({
                                    url: "{{ route('api.dependents.update', $dependent->id) }}",
                                    method: 'put',
                                    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.Pages.Dependents.Close") }}'
                                        })
                                    } else if (response.status === 404) {
                                        Swal.fire({
                                            title: 'Ops!',
                                            text: '{{ __("locale.Pages.Dependents.RequestedNotFound") }}',
                                            icon: 'error',
                                            cancelButtonText: '{{ __("locale.Pages.Dependents.Close") }}'
                                        })
                                    } else {

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

                                    }
                                });


                                let swal = await Swal.fire({
                                    title: 'Uhuul!',
                                    text: '{{ __("locale.Pages.Dependents.UpdateSuccess") }}',
                                    icon: 'success'
                                })

                                if (swal.isConfirmed) {
                                    window.location.href = `{{ route('dashboard.dependents.index', $holder->id) }}`
                                }

                                // $('.btn-submit').on('click', function() {
                                //     window.location.href =
                                //         '{{ route('dashboard.dependents.index', $holder->id) }}';
                                // });

                            }
                        });
                }
            }


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