@extends('layouts/contentLayoutMaster')

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

@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')

    <x-holder.dependent :sexs="$sexs" :kinships="$kinships"/>
    <x-holder.document :documentlists="$documentlists"/>

    <div class="modal" id="modalDocumentDependent" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('locale.Dependents') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="#" id="documentFormDependent">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('locale.Table.Dependents.Document.Column.CardTitle') }}</h4>
                            </div>
                            <div class="card-body">
                                <form class="form-add-dependent-document" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <input type="hidden" id="dependent_id" name="dependent_id">
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="type">{{ __('locale.Table.Dependents.Document.Column.TypeDocument') }}</label>
                                                <select id="type" class="form-select" name="type" required>
                                                    @if ($documentlists)
                                                        @foreach ($documentlists as $document_list)
                                                            <option value="{{ $document_list->id }}">{{ $document_list->name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="document">{{ __('locale.Table.Dependents.Document.Column.Document') }}</label>
                                                <input type="file" id="document" class="form-control" placeholder="document" name="document" accept="image/jpeg, image/png, image/jpg" onchange="validateFile()" required />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary me-1"
                                                id="btnAddDependentDocuments">{{ __('locale.Table.Dependents.Document.Column.Add') }}</button>
                                            <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.Dependents.Document.Column.Back') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="accordion" id="accordionExample">
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button fs-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            {{ __('locale.Table.Holders.Column.Title') }}
                        </button>
                      </h2>
                      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            <form class="form-add-holder">
                                @csrf
                                <div class="card">
                                    <div class="card-body">
                                        <input type="hidden" id="holder_id" value="{{$holder->id}}">
                                        <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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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->id === $holder->sex ? 'selected' : '' }}>{{ $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" {{ $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 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" value="{{ $holder->wedding_date}}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            @if($user)
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="control_access_id">Nivel de acesso</label>
                                                    <select class="form-select" name="control_access_id" id="control_access_id" required>
                                                        @if ($control_access)
                                                            @foreach ($control_access as $control_access)
                                                                <option value="{{ $control_access->id }}" {{ $control_access->id === $user->control_access_id ? 'selected' : '' }}>{{ $control_access->name }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            @endif
                                            <div class="{{ $user && $user->count() > 0 ? 'col-md-6 col-12' : '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" value="{{ $holder->zip_code }}" required />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="address">Endereço</label>
                                                    <input type="text" id="address" class="form-control" placeholder="{{ __('locale.Table.Holders.Column.Address') }}"
                                                        name="address" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->personal_phone }}" />
                                                </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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" {{ $holder->employee_type === 1 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CLT') }}</option>
                                                        <option value="2" {{ $holder->employee_type === 2 ? 'selected' : '' }}>{{ __('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" value="{{ $holder->company_name }}"
                                                        placeholder="{{ __('locale.Table.Holders.Column.CompanyName') }}" name="company_name" required />
                                                </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" value="{{ $holder->cnpj }}" data-mask="00.000.000/0000-00"
                                                        placeholder="{{ __('locale.Table.Holders.Column.CNPJ') }}" name="cnpj" required />
                                                </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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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="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 }}" {{ $groupId == $group->id ? 'selected' : '' }}>{{ $group->name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </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">
                    
                                                </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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->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" value="{{ $holder->corporative_phone }}"
                                                        />
                                                </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" value="{{ $holder->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" value="{{ $holder->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" {{ $holder->included_with_carency === 0 ? 'checked' : '' }}>
                                                    </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" {{ $holder->included_with_carency === 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" value="{{ $holder->deletion_date }}"
                                                        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" value="{{ $holder->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" {{ $holder->injuction === 0 ? 'checked' : '' }} >
                                                    </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" {{ $holder->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="coparticipation_rate">{{ __('locale.Table.Holders.Column.CoparticipationRate') }}</label>
                                                    <input type="text" id="coparticipation_rate" class="form-control" value="{{ $holder->coparticipation_rate }}"
                                                        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 }}" {{ $holder->holder_status_id == $status->id ? 'selected' : '' }}>{{ $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" value="{{ $holder->extension_start_date }}"
                                                        placeholder="{{ __('locale.Table.Holders.Column.ExtensionStartDate') }}" name="extension_start_date" />
                                                </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" value="{{ $holder->extension_end_date }}"
                                                        placeholder="{{ __('locale.Table.Holders.Column.ExtensionEndDate') }}" name="extension_end_date" />
                                                </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.UpdateButton') }}</button>
                                                <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.partner.Column.BackButton') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
    </section>

    <section>
        <div class="row mt-2">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Documentos</h4>
                        <button class="btn btn-primary" id="addDocument">{{ __('locale.Add') }}</button>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                              <tr>
                                <th scope="col">Tipo</th>
                                <th scope="col">Documento</th>
                                <th scope="col">Ações</th>
                              </tr>
                            </thead>
                            <tbody>
                            @php
                                $documentListsArray = $documentlists->pluck('name', 'id')->toArray();
                            @endphp
                            @if($documents)
                            @foreach($documents as $document)
                              <tr>
                                <td>{{ $documentListsArray[$document->type] ?? 'Unknown' }}</td>
                                <td>
                                    <a href="{{ asset('storage/' . $document->filepath) }}" target="_blank">
                                        {{$document->filename}}
                                    </a>                                    
                                </td>
                                <td>
                                    <a href="javascript:deleteHolderDocuments({{ $document->id }});" style="padding:0.4rem 0.6rem;" class="delete-record btn btn-secondary">
                                        <i data-feather="trash-2" class="font-small-4"></i>
                                    </a>
                                </td>
                              </tr>
                            @endforeach
                            @endif
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="row mt-2">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <h4>{{ __('locale.Dependents') }}</h4>
                        <button class="btn btn-primary" id="addDependent">{{ __('locale.Add') }}</button>
                    </div>
                    <div class="accordion" id="accordionExample">
                        @if($dependents)
                        @foreach($dependents as $dependent)
                        <div class="accordion-item border rounded-0">
                          <h2 class="accordion-header" id="heading{{$dependent->id}}">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$dependent->id}}" aria-expanded="true" aria-controls="collapse{{$dependent->id}}">
                                {{$dependent->name}}
                            </button>
                          </h2>
                          <div id="collapse{{$dependent->id}}" class="accordion-collapse collapse" aria-labelledby="heading{{$dependent->id}}" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <form action="#" id="dependentForm">
                                    <div class="card">
                                        <div class="card-body">
                                            <input type="hidden" id="dependent_id" name="dependent_id" value="{{$dependent->id}}">
                                            <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') }}"
                                                            value="{{$dependent->issuing_date}}" name="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') }}"
                                                            value="{{$dependent->birth_date}}" 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.Pages.Dependents.Civil') }}</label>
                                                        <select class="form-select" name="civil_status" id="civil_status" required>
                                                            <option value="1" {{ $dependent->civil_status === 1 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusSingle') }}</option>
                                                            <option value="2" {{ $dependent->civil_status === 2 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusMarried') }}</option>
                                                            <option value="3" {{ $dependent->civil_status === 3 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusDivorced') }}</option>
                                                            <option value="4" {{ $dependent->civil_status === 4 ? 'selected' : '' }}>{{ __('locale.Table.Holders.Column.CivilStatusWidower') }}</option>
                                                            <option value="5" {{ $dependent->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') }}"
                                                            value="{{$dependent->issuing_body}}" name="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') }}"
                                                            value="{{$dependent->mother_name}}" name="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>
                                                            @if ($sexs)
                                                                @foreach ($sexs as $sex)
                                                                    <option value="{{ $sex->id }}" {{ $sex->id === $holder->sex ? 'selected' : '' }}>{{ $sex->name }}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-header">
                                            <h4 class="card-title">{{ __('locale.Pages.Dependents.Address') }}</h4>
                                        </div>
                                        <div class="card-body">
                                            <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" required value="{{$dependent->number}}"/>
                                                    </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" required value="{{$dependent->district}}"/>
                                                    </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" required value="{{$dependent->city}}"/>
                                                    </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" required value="{{$dependent->state}}"/>
                                                    </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" required value="{{$dependent->address}}"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-header">
                                            <h4 class="card-title">{{ __('locale.Pages.Dependents.Informations') }}</h4>
                                        </div>
                                        <div class="card-body">
                                            <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') }}"
                                                            value="{{$dependent->wedding_date}}" name="wedding_date"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-header">
                                            <h4 class="card-title">{{ __('locale.Pages.Dependents.Financial') }}</h4>
                                        </div>
                                        <div class="card-body">
                                            <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>
                                        </div>
                                        <div class="card-header">
                                            <h4 class="card-title">{{ __('locale.Pages.Dependents.Other') }}</h4>
                                        </div>
                                        <div class="card-body">
                                            <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{{ $dependent->id }}" 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{{ $dependent->id }}" class="select2" required>
                                                        @if ($kinships)
                                                            @foreach ($kinships as $kinship)
                                                                <option value="{{ $kinship->id }}" {{ $kinship->id === $dependent->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{{ $dependent->id }}" 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" required>{{ __('locale.Table.Dependents.Column.Status') }}</label>
                                                        <select name="status" id="status" class="form-select">
                                                            <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>
                                            <div class="row mt-2">
                                                <div class="col-md-12 mt-2">
                                                    <button type="button" class="btn btn-primary updateDependent">{{ __('locale.Table.Supplier.Sla.Label.Save') }}</button>
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal"
                                                        onclick="deleteDependent({{ $dependent->id }});">Excluir</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-header">
                                        <h4>Documentos</h4>
                                        <button class="btn btn-primary addDocumentDependent" data-dependent_id="{{ $dependent->id }}">{{ __('locale.Add') }}</button>
                                    </div>
                                    <div class="card-body mb-2">
                                        <table class="table">
                                            <thead>
                                              <tr>
                                                <th scope="col">Tipo</th>
                                                <th scope="col">Documento</th>
                                                <th scope="col">Ações</th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                            @php
                                                $documentListsArray = $documentlists->pluck('name', 'id')->toArray();
                                            @endphp
                                            @if($dependent->documents)
                                            @foreach($dependent->documents as $document)
                                              <tr>
                                                <td>{{ $documentListsArray[$document->type] ?? 'Unknown' }}</td>
                                                <td>
                                                    <a href="{{ asset('storage/' . $document->filepath) }}" target="_blank">
                                                        {{$document->filename}}
                                                    </a>                                    
                                                </td>
                                                <td>
                                                    <a href="javascript:deleteDependentDocuments({{ $document->id }});" style="padding:0.4rem 0.6rem;" class="delete-record btn btn-secondary">
                                                        <i data-feather="trash-2" class="font-small-4"></i>
                                                    </a>
                                                </td>
                                              </tr>
                                            @endforeach
                                            @endif
                                            </tbody>
                                          </table>
                                    </div>
                                </form>
                            </div>
                          </div>
                        </div>
                        @endforeach
                        @endif  
                    </div>
                </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
            },
            consigned_credit: {
                required: true
            },
            status: {
                required: true
            },
            injuction: {
                required: true
            },
        }

        const deleteHolderDocuments = async (holder_documentid) => {
                console.log('teste')
                if (typeof holder_documentid !== 'number') {
                    if (window.Swal !== undefined) {
                        return window.Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Holders.Document.Column.DeleteInt') }}",
                            icon: "error"
                        })
                    }
                    return window.alert("{{ __('locale.Table.Holders.Document.Column.DeleteInt') }}");
                }

                if (window.Swal === undefined) return window.alert('{{ __("locale.Table.Holders.Document.Column.ModelSweetAlert2") }}');
                if (window.toastr === undefined) return window.alert('{{ __("locale.Table.Holders.Document.Column.ModelSweetToastr") }}');

                let swal = await window.Swal.fire({
                    title: "{{ __('locale.Table.Holders.Document.Column.DeleteAttention') }}",
                    text: "{{ __('locale.Table.Holders.Document.Column.DeleteMessageDelete') }}",
                    icon: "question",
                    showCancelButton: true,
                    cancelButtonText: "{{ __('locale.Table.Holders.Document.Column.DeleteMessageCancel') }}",
                    confirmButtonText: "{{ __('locale.Table.Holders.Document.Column.DeleteMessage') }}"
                })

                if (!swal.isConfirmed) return cancelDeleteAction();

                let {
                    data: json,
                    ...response
                } = await axios({
                        url:`{{route('api.holders.documents.delete','')}}/${holder_documentid}`,
                        method: 'delete',
                        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.Document.Column.Close') }}"
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Holders.Document.Column.Status404Error') }}",
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Holders.Document.Column.Close') }}"
                            })
                        } else {

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

                        }
                    });

                if (response.status === 204) {
                    swal = await window.Swal.fire({
                        title: 'Uhuul!',
                        text: "{{ __('locale.Table.Holders.Document.Column.DeleteSuccess') }}",
                        icon: "success"
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = window.location.href
                        }
                    })

                }

        }

        const deleteDependent = async (dependent_id) => {

            if (typeof dependent_id !== 'number') {
                if (window.Swal !== undefined) {
                    return window.Swal.fire({
                        title: 'Ops!',
                        text: '{{ __("locale.Pages.Dependents.TextDependents") }}',
                        icon: 'error'
                    })
                }
                return window.alert('{{ __("locale.Pages.Dependents.TextDependents") }}');
            }

            if (window.Swal === undefined) return window.alert('{{ __("locale.Pages.Dependents.AlertDependents") }}');
            if (window.toastr === undefined) return window.alert('{{ __("locale.Pages.Dependents.Aler2tDependents") }}');

            let swal = await window.Swal.fire({
                title: '{{ __("locale.Pages.Dependents.Attention") }}',
                text: '{{ __("locale.Pages.Dependents.DeleteMessageDelete") }}',
                icon: 'question',
                showCancelButton: true,
                cancelButtonText: '{{ __("locale.Pages.Dependents.DeleteMessageCancel") }}',
                confirmButtonText: '{{ __("locale.Pages.Dependents.DeleteMessage") }}'
            })

            if (!swal.isConfirmed) return cancelDeleteAction();

            let {
                data: json,
                ...response
            } = await axios({
                    url: `{{ route('api.dependents.delete', '') }}/${dependent_id}`,
                    method: 'delete',
                    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.DeleteErrorForm") }}',
                            icon: 'error',
                            cancelButtonText: '{{ __("locale.Pages.Dependents.Close") }}'
                        })

                    }
                });

            if (response.status === 204) {
                swal = await window.Swal.fire({
                    title: 'Uhuul!',
                    text: '{{ __("locale.Pages.Dependents.DeleteSuccess") }}',
                    icon: 'success'
                }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = window.location.href
                        }
                    })

            }

        }

        const deleteDependentDocuments = async (dependent_documentid) => {

            if (typeof dependent_documentid !== 'number') {
                if (window.Swal !== undefined) {
                    return window.Swal.fire({
                        title: 'Ops!',
                        text: "{{ __('locale.Table.Dependents.Document.Column.DeleteInt') }}",
                        icon: "{{ __('locale.Table.Dependents.Document.Column.Error') }}"
                    })
                }
                return window.alert("{{ __('locale.Table.Dependents.Document.Column.DeleteInt') }}");
            }

            if (window.Swal === undefined) return window.alert('{{ __("locale.Table.Dependents.Document.Column.ModelSweetAlert2") }}');
            if (window.toastr === undefined) return window.alert('{{ __("locale.Table.Dependents.Document.Column.ModelSweetToastr") }}');

            let swal = await window.Swal.fire({
                title: "{{ __('locale.Table.Dependents.Document.Column.DeleteAttention') }}",
                text: "{{ __('locale.Table.Dependents.Document.Column.DeleteMessageDelete') }}",
                icon: "{{ __('locale.Table.Dependents.Document.Column.DeleteMessageQuestion') }}",
                showCancelButton: true,
                cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.DeleteMessageCancel') }}",
                confirmButtonText: "{{ __('locale.Table.Dependents.Document.Column.DeleteMessage') }}"
            })

            if (!swal.isConfirmed) return cancelDeleteAction();

            let {
                data: json,
                ...response
            } = await axios({
                    url:`{{route('api.dependents.documents.delete','')}}/${dependent_documentid}`,
                    method: 'delete',
                    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:  "{{ __('locale.Table.Dependents.Document.Column.Error') }}",
                            cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.Close') }}"
                        })
                    } else if (response.status === 404) {
                        Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Dependents.Document.Column.Status404Error') }}",
                            icon: "{{ __('locale.Table.Dependents.Document.Column.Error') }}",
                            cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.Close') }}"
                        })
                    } else {

                        Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Dependents.Document.Column.DeleteErrorForm') }}",
                            icon: "{{ __('locale.Table.Dependents.Document.Column.Error') }}",
                            cancelButtonText: "{{ __('locale.Table.Dependents.Document.Column.Close') }}"
                        })

                    }
                });

            if (response.status === 204) {
                swal = await window.Swal.fire({
                    title: 'Uhuul!',
                    text: "{{ __('locale.Table.Dependents.Document.Column.DeleteSuccess') }}",
                    icon: "{{ __('locale.Table.Dependents.Document.Column.Success') }}"
                }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = window.location.href
                        }
                    })

            }

        }

        const cancelDeleteAction = () => {
            window.toastr.error('{{ __("locale.Pages.Dependents.DeleteOperationCanceled") }}', '{{ __("locale.Pages.Dependents.Attention") }}', {
                positionClass: "toast-top-right",
                progressBar: true
            })
        }

        $(function() {

            function requiredField(value, expected_value, data) {
                console.log('requiredField')
                $(data).each(function(index, selector) {
                    if (value == expected_value) {

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

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

                    }
                });
                
            }

            var selectedValue = @json($holder->civil_status);
            var data = ['.form-add-holder #wedding_date'];
            requiredField(selectedValue, 2, data)

            $(".form-add-holder #civil_status").on("change", function() {

                var selectedValue = $(this).val();
                var data = ['.form-add-holder #wedding_date'];
                requiredField(selectedValue, 2, data)
                
            });

            var selectedValue = @json($holder->employee_type);
            var data = ['.form-add-holder #company_name','.form-add-holder #cnpj'];
            requiredField(selectedValue, 2, data)

            $("#employee_type").on("change", function() {
                
                var selectedValue = $(this).val();
                var data = ['.form-add-holder #company_name','.form-add-holder #cnpj'];
                requiredField(selectedValue, 2, data)

            });

            var selectedValue = @json($holder->holder_status_id);
            var data = ['.form-add-holder #extension_start_date','.form-add-holder #extension_end_date'];
            requiredField(selectedValue, 2, data)

            $("#holder_status_id").on("change", function() {
                
                var selectedValue = $(this).val();
                var data = ['.form-add-holder #extension_start_date','.form-add-holder #extension_end_date'];
                requiredField(selectedValue, 5, data)
                
            });

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

            'use strict';

            $('.select2').select2({
                multiple: false,
                allowClear: false,
                width: 'resolve'
            });

            $('#kinship_id').select2({
                multiple: false,
                allowClear: false,
                width: 'resolve'
            });

            $('#carency').select2({
                multiple: false,
                allowClear: false,
                width: 'resolve'
            });

            $('#benefit_time').select2({
                multiple: false,
                allowClear: false,
                width: 'resolve'
            });

            function getCompany() {
                let group_id = $('#group_id').val();
                let relatedProductIds = @json($holder->company_id);

                axios.get(`{{ route('api.holders.getCompany', '') }}/${group_id}`, {
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}"
                        }
                    })
                    .then(function(response) {
                        $('#company_id').empty();
                        
                        // Adiciona uma opção padrão
                        $('#company_id').append(new Option('Selecione uma Empresa', '', true, true));
                        $('#company_id option:first').attr('disabled', 'disabled');

                        // Adiciona as opções retornadas pela API
                        var companies = response.data;
                        $('#company_id').select2({
                            multiple: false,
                            data: companies.map(function(company) {
                                return {
                                    id: company.id,
                                    text: company.name
                                };
                            })
                        });

                        // Define o valor selecionado para o campo 'company_id'
                        if (relatedProductIds) {
                            $('#company_id').val(relatedProductIds).trigger('change');
                        }
                    })
                    .catch(function(error) {
                        console.error('Erro na requisição:', error);
                    });
            }
            getCompany();

            $("#group_id").on("change", function() {
                getCompany();
            });

            $('#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.update', $holder->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.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.UpdateSuccess") }}',
                            icon: 'success',
                        }).then((_) => {
                            if (_.isConfirmed) {
                                window.location.href = window.location.href
                            }
                        })


                    } catch (e) {

                    }
                }

            });

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

            $('#addDependent').on('click', function(e) {
                e.preventDefault();

                $('#modalDependent').modal('show');
            });

            $('#addDocument').on('click', function(e) {
                e.preventDefault();

                $('#modalDocument').modal('show');
            });

            $('.addDocumentDependent').on('click', function(e) {
                console.log('abriu');
                e.preventDefault();

                $('#modalDocumentDependent').find('input').val('');

                var dependent_id = $(this).data('dependent_id');
                console.log(dependent_id);
                $('#dependent_id').val(dependent_id);

                $('#modalDocumentDependent').modal('show');
            });

            $("#saveDependent").on("click", async function(eve) {

                eve.preventDefault();
                console.log('clicou');
                // if ($("#dependentForm").get(0).checkValidity()) {

                    let json = Object.fromEntries((new FormData($("#dependentForm").get(0)))
                        .entries());

                    json.holder_id = $("#holder_id").val();

                    console.log(json);
                    try {

                        let {
                            data: response
                        } = await axios({
                            url: `{{ route('api.dependents.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.Pages.Dependents.RegisterSuccess") }}',
                            icon: 'success',
                        }).then((_) => {
                            if (_.isConfirmed) {
                                window.location.href = window.location.href;
                            }
                        })


                    } catch (e) {

                    }
                

            });

            $('.updateDependent').on('click', async function(e) {
                e.preventDefault();
                
                console.log('teste')
                let $form = $(this).closest('form');

                let formData = $form.serializeArray();
                
                let json = {};
                $.each(formData, function() {
                    json[this.name] = this.value;
                });
                
                let dependentId = $form.find('input[name="dependent_id"]').val();
                let holderId = $('.form-add-holder #holder_id').val();
                
                json['dependent_id'] = dependentId;
                json['holder_id'] = holderId;
                
                console.log(json);

                try {

                    const Url = `{{ route("api.dependents.update", ":id") }}`;
                    const UrlWithId = Url.replace(':id', json.dependent_id);

                    let {
                        data: response
                    } = await axios({
                        url: UrlWithId,
                        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.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.Pages.Dependents.UpdateSuccess") }}',
                        icon: 'success',
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = window.location.href
                        }
                    })


                } catch (e) {

                }


            });

            $("#documentForm").on("submit", async function(eve) {

                eve.preventDefault();

                if ($("#documentForm").get(0).checkValidity()) {

                    let holder_id = $(".form-add-holder #holder_id").val();

                    let formdata = new FormData($("#documentForm").get(0));

                    formdata.append('holder_id', holder_id);

                    try {
                        let {
                            data: response
                        } = await axios({
                            url: `{{ route('api.holders.documents.store') }}`,
                            method: 'post',
                            data: formdata,
                            headers: {
                                "Authorization": "Bearer {{ session('Authorization') }}",
                                "Content-Type": "multipart/form-data"
                            }
                        }).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.Document.Column.Close') }}"
                                })
                            } else if (response.status === 404) {
                                Swal.fire({
                                    title: 'Ops!',
                                    text: "{{ __('locale.Table.Holders.Document.Column.Status404Error') }}",
                                    icon: "error",
                                    cancelButtonText: "{{ __('locale.Table.Holders.Document.Column.Close') }}"
                                })
                            } else {

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

                            }

                        });

                        Swal.fire({
                            title: 'Uhuul!',
                            text: "{!! __('locale.Table.Holders.Document.Column.AddSuccess') !!}",
                            icon: "success",
                        }).then((_) => {
                            if (_.isConfirmed) {
                                window.location.href = window.location.href;
                            }
                        })


                    } catch (e) {

                    }
                }

            });

            $("#documentFormDependent").on("submit", async function(eve) {

                eve.preventDefault();

                if ($("#documentFormDependent").get(0).checkValidity()) {

                    let formdata = new FormData($("#documentFormDependent").get(0));

                    try {
                        let {
                            data: response
                        } = await axios({
                            url: `{{ route('api.dependents.documents.store') }}`,
                            method: 'post',
                            data: formdata,
                            headers: {
                                "Authorization": "Bearer {{ session('Authorization') }}",
                                "Content-Type": "multipart/form-data"
                            }
                        }).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.Document.Column.Close') }}"
                                })
                            } else if (response.status === 404) {
                                Swal.fire({
                                    title: 'Ops!',
                                    text: "{{ __('locale.Table.Holders.Document.Column.Status404Error') }}",
                                    icon: "error",
                                    cancelButtonText: "{{ __('locale.Table.Holders.Document.Column.Close') }}"
                                })
                            } else {

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

                            }

                        });

                        Swal.fire({
                            title: 'Uhuul!',
                            text: "{!! __('locale.Table.Holders.Document.Column.AddSuccess') !!}",
                            icon: "success",
                        }).then((_) => {
                            if (_.isConfirmed) {
                                window.location.href = window.location.href;
                            }
                        })


                    } catch (e) {

                    }
                }

            });

        });
    </script>
@endsection