@extends('layouts/contentLayoutAnalyst')

@section('title', __('locale.Pages.Company.Title'))

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

@section('content')
    <!-- Horizontal Wizard -->
    <section class="horizontal-wizard">
        <div class="bs-stepper horizontal-wizard-example">
            <div class="bs-stepper-header" role="tablist">
                <div class="step" data-target="#company-information" role="tab" id="company-information-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Pages.Company.Column.Company') }}
                            </span>
                            <span
                                class="bs-stepper-subtitle">{{ __('locale.Pages.Company.Column.Basicinformation') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#address-info" role="tab" id="address-info-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Pages.Company.Column.Address') }}</span>
                            <span
                                class="bs-stepper-subtitle">{{ __('locale.Pages.Company.Column.CompanyLocalization') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#complement-info" role="tab" id="complement-info-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">3</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Pages.Company.Column.CompanyDetails') }}</span>
                            <span
                                class="bs-stepper-subtitle">{{ __('locale.Pages.Company.Column.AddMoreInformation') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#health-info" role="tab" id="health-info-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">4</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Pages.Company.Column.RegisterHealth') }}</span>
                            <span class="bs-stepper-subtitle">{{ __('locale.Pages.Company.Column.HealthServices') }}</span>
                        </span>
                    </button>
                </div>
                <div class="line">
                    <i data-feather="chevron-right" class="font-medium-2"></i>
                </div>
                <div class="step" data-target="#group-hi" role="tab" id="group-hi-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">5</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{ __('locale.Pages.Company.Column.AdditionalDetails') }}</span>
                            <span
                                class="bs-stepper-subtitle">{{ __('locale.Pages.Company.Column.Basicinformation') }}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="company-information" class="content" role="tabpanel" aria-labelledby="company-information-trigger">
                    <form novalidate="novalidate">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Pages.Company.Column.Company') }}</h5>
                            <small class="text-muted">{{ __('locale.Pages.Company.Column.RegisterTheCompany') }}</small>
                            <div class="btn-group" style="float: right;"> <!-- Adicionado ml-auto aqui -->
                                
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label for="group_id"
                                    class="form-label">{{ __('locale.Pages.Company.Table.Group') }}</label>
                                <select class="form-select" name="group_id" id="group_id" required disabled>
                                    @if ($groups)
                                        @foreach ($groups as $group)
                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="name">{{ __('locale.Pages.Company.Table.CorporateReason') }}</label>
                                <input type="text" name="name" id="name" class="form-control"
                                    placeholder={{ __('locale.Pages.Company.Table.CorporateReason') }}
                                    value="{{ $company->name }}" aria-label="Name" disabled />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="name">{{ __('locale.Pages.Company.Table.Name') }}</label>
                                <input type="text" name="name" id="name" autocomplete="off"
                                    class="form-control" placeholder={{ __('locale.Pages.Company.Table.Name') }}
                                    aria-label="Name" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="cnpj">CNPJ</label>
                                <input type="text" name="cnpj" id="cnpj" class="form-control"
                                    placeholder="CNPJ" data-mask="00.000.000/0000-00" aria-label="CNPJ"
                                    value="{{ $company->cnpj }}" disabled />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="company_characteristic_id">{{ __('locale.Pages.Company.Table.CompanyCharacteristic') }}</label>
                                <div class="row">
                                    <div class="col-md-11" style="padding-right: 0;">
                                        <select class="select2 w-100" id="company_characteristic_id" required multiple
                                            style="border-bottom-right-radius: 0; border-top-right-radius: 0;" disabled>
                                            @if ($company_characteristics)
                                                @foreach ($company_characteristics as $characteristic)
                                                    <option value="{{ $characteristic->id }}" selected>
                                                        {{ $characteristic->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-md-1" style="padding-left: 0;">
                                        <button type="button"
                                            class="btn btn-outline-primary waves-effect w-100 text-center"
                                            data-bs-toggle="modal" data-bs-target="#modalAddCompanyCharacteristic"
                                            style="border-bottom-left-radius: 0; border-top-left-radius: 0;">
                                            <i data-feather='plus' style="margin-left: -5px;"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="company_type_id">{{ __('locale.Pages.Company.Table.CompanyType') }}</label>
                                <div class="input-group">
                                    <select name="company_type_id" id="company_type_id" class="form-select"
                                        aria-label="Company Type" disabled>
                                        @if ($company_types)
                                            @foreach ($company_types as $type)
                                                <option value="{{ $type->id }}"
                                                    {{ $company->company_type_id == $type->id ? 'selected' : '' }}>
                                                    {{ $type->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <div class="col-md-1" style="padding-left: 0;">
                                        <button type="button"
                                            class="btn btn-outline-primary waves-effect w-100 text-center"
                                            data-bs-toggle="modal" data-bs-target="#modalAddCompanyType"
                                            style="border-bottom-left-radius: 0; border-top-left-radius: 0;">
                                            <i data-feather='plus' style="margin-left: -5px;"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="opening_date">{{ __('locale.Pages.Company.Table.OpeningDate') }}</label>
                                <input type="date" name="opening_date" value="{{ $company->opening_date }}"
                                    id="opening_date" class="form-control" placeholder="Opening Date"
                                    aria-label="Opening Date" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="type">{{ __('locale.Pages.Company.Table.Type') }}</label>
                                <select class="select2 w-100" id="type" name="type"
                                    style="border-bottom-right-radius: 0; border-top-right-radius: 0;" disabled>
                                    <option value="1">{{ __('locale.Pages.Company.Value.Branch') }}</option>
                                    <option value="2">{{ __('locale.Pages.Company.Value.Headquarters') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-12">
                                <label class="form-label"
                                    for="text">{{ __('locale.Pages.Company.Table.CompanyWebsite') }}</label>
                                <input type="text" name="text" id="text" class="form-control"
                                    placeholder="URL" aria-label="URL" disabled>
                            </div>
                        </div>
                    </form>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-outline-secondary btn-prev" disabled>
                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Previous') }}</span>
                        </button>
                        <button class="btn btn-primary btn-next">
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Next') }}</span>
                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                        </button>
                    </div>

                </div>
                <div id="address-info" class="content" role="tabpanel" aria-labelledby="address-info-trigger">
                    <form novalidate="novalidate">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Pages.Company.Table.Address') }}</h5>
                            <small>{{ __('locale.Pages.Company.Table.CompanyLocalization') }}</small>
                        </div>

                        <!-- Begin: Address form -->
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="zip_code">{{ __('locale.Pages.Company.Table.ZipCode') }}</label>
                                <input type="text" data-mask="00000-000" value="{{ @$company->address->zip_code }}"
                                    name="{{ __('locale.Pages.Company.Table.PlaceholderZipCode') }}" id="zip_code"
                                    class="form-control" placeholder="Enter the zip code" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="address">{{ __('locale.Pages.Company.Table.Address') }}</label>
                                <input type="text" name="address" value="{{ @$company->address->address }}"
                                    id="address" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderAddress') }}" disabled />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="number">{{ __('locale.Pages.Company.Table.Number') }}</label>
                                <input type="text" name="number" value="{{ @$company->address->number }}"
                                    id="number" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderNumber') }}" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="district">{{ __('locale.Pages.Company.Table.District') }}</label>
                                <input type="text" name="district" value="{{ @$company->address->district }}"
                                    id="district" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderDistrict') }}" disabled />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="state">{{ __('locale.Pages.Company.Table.State') }}</label>
                                <input type="text" name="state" value="{{ @$company->address->state }}"
                                    id="state" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderFilledAutomatic') }}"
                                    readonly disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="city">{{ __('locale.Pages.Company.Table.City') }}</label>
                                <input type="text" name="city" value="{{ @$company->address->city }}"
                                    id="city" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderFilledAutomatic') }}"
                                    readonly disabled />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-12">
                                <label class="form-label"
                                    for="complement">{{ __('locale.Pages.Company.Table.Complement') }}</label>
                                <input type="text" name="complement" value="{{ @$company->address->complement }}"
                                    id="complement" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderComplement') }}" disabled />
                            </div>
                        </div>
                        <!-- End: Address form -->
                    </form>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-primary btn-prev">
                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Previous') }}</span>
                        </button>
                        <button class="btn btn-primary btn-next">
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Next') }}</span>
                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                        </button>
                    </div>
                </div>
                <div id="complement-info" class="content" role="tabpanel" aria-labelledby="complement-info-trigger">
                    <form novalidate="novalidate">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Pages.Company.Table.CompanyDetails') }}</h5>
                            <small>{{ __('locale.Pages.Company.Column.AddMoreInformation') }}</small>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="activity_branch">{{ __('locale.Pages.Company.Table.ActivityBranch') }}</label>
                                <input type="text" name="activity_branch" value="{{ $company->activity_branch }}"
                                    id="activity_branch" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderActivityBranch') }}"
                                    aria-label="Activity Branch" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="country">{{ __('locale.Pages.Company.Table.Country') }}</label>
                                <input type="text" name="country" value="{{ $company->country }}" id="country"
                                    class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderCountry') }}"
                                    aria-label="Country"disabled />
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="continent">{{ __('locale.Pages.Company.Table.Continent') }}</label>
                                <input type="text" name="continent" value="{{ $company->continent }}" id="continent"
                                    class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderContinent') }}"
                                    aria-label="Continent" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="size">{{ __('locale.Pages.Company.Table.Size') }}</label>
                                <select class="form-select" name="size" id="size" required disabled>
                                    <option value="1" {{ $company->size == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.SME') }}</option>
                                    <option value="2" {{ $company->size == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.Business') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="cancel_origin">{{ __('locale.Pages.Company.Table.CancelOrigin') }}</label>
                                <select class="form-select" name="cancel_origin" id="cancel_origin" required disabled>
                                    <option value="0" {{ $company->size == 0 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.Notcanceled') }}</option>
                                    <option value="1" {{ $company->size == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.DiretoHumanittare') }}</option>
                                    <option value="2" {{ $company->size == 3 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.ProducerSeller') }}</option>
                                    <option value="3" {{ $company->size == 4 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.Co-brokerage') }}</option>
                                    <option value="4" {{ $company->size == 5 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Value.Ignite') }}</option>
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="partner_name">{{ __('locale.Pages.Company.Table.PartnerName') }}</label>
                                <input type="text" name="partner_name" value="{{ $company->partner_name }}"
                                    id="partner_name" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderPartnerName') }}"
                                    aria-label="Partner Name" disabled />
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="form-label">{{ __('locale.Pages.Company.Table.PJService') }}</label>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-check">
                                                    <input type="radio" name="pj_service_provision" value="0"
                                                        {{ $company->pj_service_provision == 0 ? 'checked' : '' }}
                                                        class="form-check-input" id="customCheck1" disabled>
                                                    <label class="form-check-label"
                                                        for="customCheck1">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check">
                                                    <input type="radio" name="pj_service_provision" value="1"
                                                        {{ $company->pj_service_provision == 1 ? 'checked' : '' }}
                                                        class="form-check-input" id="customCheck2" disabled>
                                                    <label class="form-check-label"
                                                        for="customCheck2">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="pj_invoice">{{ __('locale.Pages.Company.Table.PJInvoice') }}</label>
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="pj_invoice" value="0"
                                                {{ $company->pj_invoice == 0 ? 'checked' : '' }} class="form-check-input"
                                                id="customCheck3" disabled>
                                            <label class="form-check-label"
                                                for="customCheck3">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="pj_invoice" value="1"
                                                {{ $company->pj_invoice == 1 ? 'checked' : '' }} class="form-check-input"
                                                id="customCheck4" disabled>
                                            <label class="form-check-label"
                                                for="customCheck4">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="curve">{{ __('locale.Pages.Company.Table.Curve') }}</label>
                                <select name="curve" id="curve" class="form-select" placeholder="Enter Curve"
                                    aria-label="Curve" disabled>
                                    <option value="1" {{ $company->curve == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Bronze') }}</option>
                                    <option value="2" {{ $company->curve == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Silver') }}</option>
                                    <option value="3" {{ $company->curve == 3 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Gold') }}</option>
                                    <option value="4" {{ $company->curve == 4 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Diamond') }}</option>
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="flex_benefits">{{ __('locale.Pages.Company.Table.FlexBenefits') }}</label>
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="flex_benefits"
                                                {{ $company->flex_benefits == 0 ? 'checked' : '' }} value="0"
                                                class="form-check-input" id="customCheck5" disabled>
                                            <label class="form-check-label"
                                                for="customCheck5">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="flex_benefits"
                                                {{ $company->flex_benefits == 1 ? 'checked' : '' }} value="1"
                                                class="form-check-input" id="customCheck6" disabled>
                                            <label class="form-check-label"
                                                for="customCheck6">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="label_platform_name_flex_benefits"
                                    id="label_platform_name_flex_benefits">{{ __('locale.Pages.Company.Table.PlatformNameFlexBenefits') }}</label>
                                <input type="text" name="platform_name_flex_benefits" id="platform_name_flex_benefits"
                                    class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderNameFlexBenefits') }}"
                                    aria-label="Platform Name Flex Benefits" disabled />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="platform_name_payroll"
                                    id="platform_name_payroll">{{ __('locale.Pages.Company.Table.PlatformNamePayroll') }}</label>
                                <input type="text" name="platform_name_payroll" id="platform_name_payroll"
                                    class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderNamePayroll') }}"
                                    aria-label="Platform Name Payroll" disabled />
                            </div>
                        </div>

                    </form>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-primary btn-prev">
                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Previous') }}</span>
                        </button>
                        <button class="btn btn-primary btn-next">
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Next') }}</span>
                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                        </button>
                    </div>

                </div>
                <div id="health-info" class="content" role="tabpanel" aria-labelledby="health-info-trigger">
                    <form novalidate="novalidate">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Pages.Company.Table.Register health') }}</h5>
                            <small>{{ __('locale.Pages.Company.Table.HealthServices') }}</small>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="advanced_post">{{ __('locale.Pages.Company.Table.AdvancedPost') }}</label>
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="advanced_post" value="0"
                                                {{ $company->advanced_post == 0 ? 'checked' : '' }}
                                                class="form-check-input" id="customCheck7" disabled>
                                            <label class="form-check-label"
                                                for="customCheck7">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="advanced_post" value="1"
                                                {{ $company->advanced_post == 1 ? 'checked' : '' }}
                                                class="form-check-input" id="customCheck8" disabled>
                                            <label class="form-check-label"
                                                for="customCheck8">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="medicals">{{ __('locale.Pages.Company.Table.Medicals') }}</label>
                                <div class="row ">
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="medicals" value="0"
                                                {{ $company->medicals == 0 ? 'checked' : '' }} class="form-check-input"
                                                id="customCheck9" disabled>
                                            <label class="form-check-label"
                                                for="customCheck9">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="medicals" value="1"
                                                {{ $company->medicals == 1 ? 'checked' : '' }} class="form-check-input"
                                                id="customCheck10" disabled>
                                            <label class="form-check-label"
                                                for="customCheck10">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="number" value="{{ $company->quantity_medicals }}"
                                            name="quantity_medicals" id="quantity_medicals" class="form-control"
                                            {{ $company->medicals == 0 ? 'readonly' : '' }}
                                            placeholder="{{ __('locale.Pages.Company.Table.PlaceholderQuantityMedicals') }}"
                                            aria-label="Quantity Medicals" disabled />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="nurses_area">{{ __('locale.Pages.Company.Table.NursesArea') }}</label>
                                <div class="row ">
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="nurses_area" value="0"
                                                {{ $company->nurses_area == 0 ? 'checked' : '' }}
                                                class="form-check-input" id="customCheck11" disabled>
                                            <label class="form-check-label"
                                                for="customCheck11">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="nurses_area" value="1"
                                                {{ $company->nurses_area == 1 ? 'checked' : '' }}
                                                class="form-check-input" id="customCheck12" disabled>
                                            <label class="form-check-label"
                                                for="customCheck12">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="number" value="{{ $company->quantity_nurses_area }}"
                                            name="quantity_nurses_area" id="quantity_nurses_area" class="form-control"
                                            {{ $company->nurses_area == 0 ? 'readonly' : '' }}
                                            placeholder="{{ __('locale.Pages.Company.Table.NursesArea') }}"
                                            aria-label="Quantity Nurses Area" disabled />
                                    </div>
                                </div>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="outpatients">{{ __('locale.Pages.Company.Table.Outpatients') }}</label>
                                <div class="row ">
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="outpatients" value="0"
                                                {{ $company->outpatients == 0 ? 'checked' : '' }}
                                                class="form-check-input" id="customCheck13" disabled>
                                            <label class="form-check-label"
                                                for="customCheck13">{{ __('locale.Pages.Company.RadioButton.No') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-check">
                                            <input type="radio" name="outpatients" value="1"
                                                {{ $company->outpatients == 1 ? 'checked' : '' }}
                                                class="form-check-input" id="customCheck14" disabled>
                                            <label class="form-check-label"
                                                for="customCheck14">{{ __('locale.Pages.Company.RadioButton.Yes') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="number" value="{{ $company->quantity_outpatients }}"
                                            name="quantity_outpatients" id="quantity_outpatients" class="form-control"
                                            {{ $company->outpatients == 0 ? 'readonly' : '' }}
                                            placeholder="{{ __('locale.Pages.Company.Table.PlaceholderQuantityOutpatients') }}"
                                            aria-label="Quantity Outpatients" disabled />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-primary btn-prev">
                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Previous') }}</span>
                        </button>
                        <button class="btn btn-primary btn-next">
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Next') }}</span>
                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                        </button>
                    </div>

                </div>
                <div id="group-hi" class="content" role="tabpanel" aria-labelledby="group-hi-trigger">
                    <form novalidate="novalidate">
                        <div class="content-header">
                            <h5 class="mb-0">{{ __('locale.Pages.Company.Table.GroupHumanittare') }}</h5>
                            <small>{{ __('locale.Pages.Company.Table.RulesInformations') }}</small>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="visit_type">{{ __('locale.Pages.Company.Table.VisitType') }}</label>
                                <select name="visit_type" id="visit_type" class="form-select" disabled>
                                    <option value="1" {{ $company->visit_type == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Personally') }}</option>
                                    <option value="2" {{ $company->visit_type == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Online') }}</option>
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="visit_frequency">{{ __('locale.Pages.Company.Table.VisitFrequency') }}</label>
                                <select name="visit_frequency" id="visit_frequency" class="form-select" disabled>
                                    <option value="1" {{ $company->visit_frequency == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Weekly') }}</option>
                                    <option value="2" {{ $company->visit_frequency == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Fortnightly') }}</option>
                                    <option value="3" {{ $company->visit_frequency == 3 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Monthly') }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="intermediation_model">{{ __('locale.Pages.Company.Table.IntermediationModel') }}</label>
                                <select name="intermediation_model" id="intermediation_model" class="form-select"
                                    disabled>
                                    <option value="1" {{ $company->intermediation_model == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Brokerage') }}</option>
                                    <option value="2" {{ $company->intermediation_model == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.TraditionalBrokerage') }}</option>
                                    <option value="3" {{ $company->intermediation_model == 3 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.FEE') }}</option>
                                    <option value="4" {{ $company->intermediation_model == 4 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Assessment') }}</option>
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="charge_type">{{ __('locale.Pages.Company.Table.ChargeType') }}</label>
                                <select name="charge_type" id="charge_type" class="form-select" disabled>
                                    <option value="1" {{ $company->charge_type == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.BillWithinvoice') }}</option>
                                    <option value="2" {{ $company->charge_type == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.TraditionalBrokerage') }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="due_date">{{ __('locale.Pages.Company.Table.DueDate') }}</label>
                                <select name="due_date" id="due_date" class="form-select" disabled>
                                    <option value="1" {{ $company->due_date == 1 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.FEE') }}</option>
                                    <option value="2" {{ $company->due_date == 2 ? 'selected' : '' }}>
                                        {{ __('locale.Pages.Company.Option.Assessment') }}</option>
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label"
                                    for="price">{{ __('locale.Pages.Company.Table.Prince') }}</label>
                                <input type="text" value="{{ $company->price }}" name="price" id="price"
                                    class="form-control" {{ $company->intermediation_model != 1 ? 'readonly' : '' }}
                                    placeholder="{{ __('locale.Pages.Company.Table.PrincePlaceholder') }}"
                                    aria-label="Price" disabled />
                            </div>
                        </div>
                    </form>
                    <div class="d-flex justify-content-between">
                        <button class="btn btn-primary btn-prev">
                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                            <span
                                class="align-middle d-sm-inline-block d-none">{{ __('locale.Pages.Company.Button.Previous') }}</span>
                        </button>
                        <a href="{{ route("dashboard.companies.index") }}" class="btn btn-success">{{ __('locale.Pages.Company.Button.Submit2') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--Modal characteristic-->
    <div class="modal fade text-start" id="modalAddCompanyCharacteristic" tabindex="-1"
        aria-labelledby="modal_characteristic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_characteristic">
                        {{ __('locale.Pages.Company.Table.CompanyCharacteristic') }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5>{{ __('locale.Pages.Company.Table.AddCompanyCharacteristic') }}</h5>
                    <form id="form-modal-add-company-characteristic">
                        <div class="row">
                            <input type="hidden" name="status" value="1">
                            <div class="mb-1 col-md-12">
                                <label class="form-label"
                                    for="name">{{ __('locale.Pages.Company.Table.Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderName') }}"
                                    aria-label="Name" required disabled />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                        id="btnModalAddCharacteristic">{{ __('locale.Pages.Company.Button.Add') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!--Modal type-->
    <div class="modal fade text-start" id="modalAddCompanyType" tabindex="-1" aria-labelledby="modal_type"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_type">{{ __('locale.Pages.Company.Table.CompanyType') }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5>{{ __('locale.Pages.Company.Table.AddCompanyType') }}</h5>
                    <form id="form-modal-add-company-type">
                        <input type="hidden" name="status" value="1">
                        <div class="row">
                            <div class="mb-1 col-md-12">
                                <label class="form-label"
                                    for="name">{{ __('locale.Pages.Company.Table.Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control"
                                    placeholder="{{ __('locale.Pages.Company.Table.PlaceholderName') }}"
                                    aria-label="Name" required disabled />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnModalAddCompanyType"
                        class="btn btn-primary">{{ __('locale.Pages.Company.Button.Add') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!--Modal type-->
@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>
        document.addEventListener('DOMContentLoaded', function() {

            var flexBenefitsRadio = document.getElementsByName("flex_benefits");
            var labelPlatformNameFlexBenefits = document.getElementById("label_platform_name_flex_benefits");
            var inputPlatformNameFlexBenefits = document.getElementById("platform_name_flex_benefits");

            flexBenefitsRadio.forEach(function(radio) {
                radio.addEventListener('change', function() {

                    if (this.value === "1") {
                        labelPlatformNameFlexBenefits.style.display = "block";
                        inputPlatformNameFlexBenefits.style.display = "block";
                    } else {
                        labelPlatformNameFlexBenefits.style.display = "none";
                        inputPlatformNameFlexBenefits.style.display = "none";
                    }
                });
            });
        });

        window.onload = function() {
            var flexBenefitsRadio = document.getElementsByName("flex_benefits");
            var labelPlatformNameFlexBenefits = document.getElementById("label_platform_name_flex_benefits");
            var inputPlatformNameFlexBenefits = document.getElementById("platform_name_flex_benefits");


            ajustarVisibilidade();

            flexBenefitsRadio.forEach(function(radio) {
                radio.addEventListener('change', function() {

                    ajustarVisibilidade();
                });
            });

            function ajustarVisibilidade() {
                if (flexBenefitsRadio[1].checked) {
                    labelPlatformNameFlexBenefits.style.display = "block";
                    inputPlatformNameFlexBenefits.style.display = "block";
                } else {
                    labelPlatformNameFlexBenefits.style.display = "none";
                    inputPlatformNameFlexBenefits.style.display = "none";
                }
            }
        };


        class Address {

            /**
             * @type {HTMLFormElement}
             */
            _form = undefined;
            _payload = {};

            /**
             * @param {HTMLFormElement} address_form
             * @return {Address}
             */
            constructor(address_form) {
                this._form = address_form;
                return this;
            }

            setData() {
                if (this._form === undefined) return window.alert(
                    'Você precisa informar o formulário de endereço na inicialização da classe Address');
                this._payload = Object.fromEntries((new FormData(this._form)).entries());
                return this;
            }

            /**
             * @param {number} company_id
             * @return {Address}
             */
            linkToCompanyId(company_id) {
                this._payload.company_id = company_id;
                return this;
            }

            async save() {

                if (this._payload.id !== undefined) return true;

                let {
                    data: json,
                    ...response
                } = await axios({
                        method: 'post',
                        url: `{{ route('api.companies.addresses.store') }}`,
                        data: this._payload,
                        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.Company.Contact.Column.Error') }}",
                                cancelButtonText: "{{ __('locale.Pages.Company.Botton.ToClose') }}"
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Pages.Company.Table.Column.Status404Error') }}",
                                icon: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                                cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                            })
                        } else {

                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Pages.Company.Table.Column.ErrorForm') }}",
                                icon: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                                cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                            })

                        }

                        return false;

                    });

                if (response.status === 201) {
                    this._payload.id = json.id;
                    if (window.toastr !== undefined) {
                        window.toastr.success(`Endereço cadastrado`, '✅', {
                            positionClass: "toast-top-right",
                        })
                    }
                    return true;
                }

                return false;

            }

        }

        class Characteristics {

            /**
             * @type {Characteristic[]}
             */
            _data = [];
            _counter = 0;
            _select;
            _linked = false;

            /**
             * @param select {HTMLSelectElement}
             * @return {Chacarcteristics}
             */
            constructor(select) {
                this._select = select;
                this.bindUnselectEvent();
            }

            bindUnselectEvent() {
                $(this._select).on("select2:unselect", (e) => {
                    let local_id = parseInt($(`option[value="${e.params.data.id}"]`).attr(
                        'data-characterisct-class-id'));
                    this.remove(local_id, e.params.data.id);
                });
            }

            /**
             * @return {void}
             */
            increment() {
                this._counter++;
            }

            /**
             * @typedef {Object} Characteristic
             * @property {number|undefined} id
             * @property {string} name
             * @property {number} status
             * @property {number|undefined} company_id
             *
             * @param characteristic {Characteristic}
             * @return {void}
             */
            add(characteristic) {
                characteristic.local_id = this._counter;
                this._data.push(characteristic);
                this.addNewOptionToSelect(characteristic);
                this.increment();
            }


            /**
             * @param {number} local_id
             * @param {string} option_id
             * @return {void}
             */
            remove(local_id, option_id) {
                this._data = this._data.filter((characteristic) => characteristic.local_id !== local_id)
                this.removeOptionFromSelect(option_id);
            }

            /**
             * @param characteristic {Characteristic}
             * @param selected {boolean}
             * @return {void}
             */
            addNewOptionToSelect(characteristic, selected = true) {
                if (this._select !== undefined) {
                    $(this._select).append(
                        `<option data-characterisct-class-id="${this._counter}" value="new-characteristic-${this._counter}" ${selected ? 'selected' : ''}>${characteristic.name}</option>`
                    )
                }
            }

            /**
             * @param {string} option_id
             * @return {void}
             */
            removeOptionFromSelect(option_id) {
                $(`option[value="${option_id}"]`).remove();
            }

            /**
             * @param {number} company_id
             * @return {void}
             */
            linkToCompanyId(company_id) {
                if (this._data.length > 0) {
                    this._data.map((characteristic) => characteristic.company_id = company_id)
                }
                this._linked = true;
            }

            /**
             * @return {void}
             */
            removeLinkToCompanyId() {
                if (this._data.length > 0) {
                    this._data.map((characteristic) => delete characteristic.company_id);
                }
                this._linked = false;
            }

            async save() {
                if (this._data.length > 0 && this._linked) {
                    for (let index = 0; index < this._data.length; index++) {
                        let characteristic = this._data[index];
                        if (characteristic.id) continue;
                        if (!await this._registerCharacteristic(characteristic, index)) {
                            if (window.toastr !== undefined) {
                                window.toastr.success(`Característica ${characteristic.name} vinculada`, '✅', {
                                    positionClass: "toast-top-right",
                                })
                            }
                            break;
                        }
                    }
                } else {
                    console.error('Parâmetros insuficientes para o cadastro das características')
                }
            }

            /**
             * @param {Characteristic} characteristic
             * @param {number} index
             * @return {Promise<boolean>}
             */
            async _registerCharacteristic(characteristic, index) {

                let {
                    data: json,
                    ...response
                } = await axios({
                    url: '{{ route('api.companies.characteristics.store') }}',
                    method: 'post',
                    data: characteristic,
                    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.Company.Contact.Column.Error') }}",
                            cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                        })
                    } else if (response.status === 404) {
                        Swal.fire({
                            title: 'Ops!',
                            text: '{{ __('locale.Pages.Company.Table.Column.Status404Error') }}',
                            icon: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                            cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                        })
                    } else {

                        Swal.fire({
                            title: 'Ops!',
                            text: '{{ __('locale.Pages.Company.Table.Column.ErrorForm') }}',
                            icon: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                            cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                        })

                    }

                    return false;

                });

                if (response.status === 201) {
                    this._data[index].id = json.id;
                    return true;
                }

                return false;


            }

            /**
             * @return {boolean}
             */
            mustAdd() {
                return Boolean(this._data.length);
            }

        }

        let characteritics = new Characteristics($("#company_characteristic_id").get(0));

        let address = new Address($("#address-info form").get(0))

        let formRules = {
            group_id: {
                required: true
            },
            name: {
                required: true
            },
            cnpj: {
                required: true,
                cpfcnpj: brdocs.cpfcnpj.CNPJ
            },
            type: {
                required: true
            },
            company_type_id: {
                required: true
            },
            company_characteristic_id: {
                required: true
            },
            opening_date: {
                required: true
            },
            url: {
                required: true
            },
            zip_code: {
                required: true,
            },
            address: {
                required: true,
            },
            number: {
                required: true,
            },
            district: {
                required: true,
            },
            city: {
                required: true,
            },
            state: {
                required: true,
            },
            activity_branch: {
                required: true
            },
            country: {
                required: true
            },
            continent: {
                required: true
            },
            size: {
                required: true
            },
            status: {
                required: true
            },
            pj_service_provision: {
                required: true
            },
            pj_invoice: {
                required: true
            },
            curve: {
                required: true
            },
            flex_benefits: {
                required: true
            },
            advanced_post: {
                required: true
            },
            medicals: {
                required: true
            },
            nurses_area: {
                required: true
            },
            outpatients: {
                required: true
            },
            platform_company_sheet: {
                required: true
            },
            visit_type: {
                required: true
            },
            visit_frequency: {
                required: true
            },
            intermediation_model: {
                required: true
            },
            charge_type: {
                required: true
            },
            due_date: {
                required: true
            },
        }

        $(function() {

            $.validator.addMethod("cpfcnpj", brdocs.cpfcnpjValidator,
                "{{ __('locale.Pages.Company.Table.Column.ValidDocument') }}");

            //modal type
            'use strict';

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

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

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

                if (!validations.cnpj.isValid(cnpj)) {
                    $("#company-information .btn-next").attr('disabled', 'disabled');
                } else {
                    $("#company-information .btn-next").removeAttr('disabled');
                }

            });

            $("#intermediation_model").on("change", function(e) {
                $("#price").attr('readonly', 'readonly');
                $("#price").removeAttr('required');
                $("#price").val('');
                if ($(this).val() !== '1') { // Corretagem
                    $("#price").removeAttr('readonly');
                    $("#price").attr('required', 'required');
                }
            })

            $("#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('The zip code is invalid', 'Attention');
                    } else {
                        window.alert('The zip code is invalid');
                    }
                    $(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-modal-add-company-type").validate({
                rules: {
                    name: 'required'
                },
                messages: {
                    name: "The name field is required"
                }
            });

            $("#form-modal-add-company-characteristic").validate({
                rules: {
                    name: 'required'
                },
                messages: {
                    name: "The name field is required"
                }
            });

            $("#btnModalAddCompanyType").on("click", function() {
                $("#form-modal-add-company-type").submit();
            });

            $("#form-modal-add-company-type").on("submit", async function(eve) {

                eve.preventDefault();

                if ($("#form-modal-add-company-type").get(0).checkValidity()) {
                    let json = Object.fromEntries((new FormData($("#form-modal-add-company-type").get(
                        0))).entries());

                    try {

                        let {
                            data: response
                        } = await axios({
                            url: `{{ route('api.companies.types.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: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                                    cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                                })
                            } else if (response.status === 404) {
                                Swal.fire({
                                    title: 'Ops!',
                                    text: '{{ __('locale.Pages.Company.Table.Column.Status404Error') }}',
                                    icon: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                                    cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                                })
                            } else {

                                Swal.fire({
                                    title: 'Ops!',
                                    text: '{{ __('locale.Pages.Company.Table.Column.ErrorForm') }}',
                                    icon: "{{ __('locale.Table.Company.Contact.Column.Error') }}",
                                    cancelButtonText: '{{ __('locale.Pages.Company.Botton.ToClose') }}'
                                })

                            }


                        });

                        let html = `<option value="${response.id}" selected>${response.name}</option>`;

                        $("#company-information #company_type_id").append(html);

                        $("#form-modal-add-company-type").get(0).reset();

                        $("#modalAddCompanyType").modal('hide');

                        if (window.toastr !== undefined) {
                            window.toastr.success('O tipo foi adicionado!', '✅', {
                                positionClass: "toast-top-right",
                                progressBar: true,
                                preventDuplicates: true,
                            })
                        }

                    } catch (e) {}

                } else {

                }

            });

            $("#btnModalAddCharacteristic").on("click", function() {
                $("#form-modal-add-company-characteristic").submit();
            });

            $("#form-modal-add-company-characteristic").on("submit", async function(eve) {

                eve.preventDefault();

                if ($("#form-modal-add-company-characteristic").get(0).checkValidity()) {

                    /**
                     * @type {Characteristic}
                     */
                    let json = Object.fromEntries((new FormData($(
                        "#form-modal-add-company-characteristic").get(0))).entries());

                    characteritics.add(json);

                    $("#form-modal-add-company-characteristic").get(0).reset();

                    $("#modalAddCompanyCharacteristic").modal('hide');


                } else {

                }

            });

            var bsStepper = document.querySelectorAll('.bs-stepper'),
                select = $('.select2'),
                horizontalWizard = document.querySelector('.horizontal-wizard-example'),
                verticalWizard = document.querySelector('.vertical-wizard-example'),
                modernWizard = document.querySelector('.modern-wizard-example'),
                modernVerticalWizard = document.querySelector('.modern-vertical-wizard-example');

                var stepButtons = document.querySelectorAll('.bs-stepper .step-trigger');

                // Adiciona um manipulador de eventos de clique a cada botão de etapa
                stepButtons.forEach(function(button, index) {
                    button.addEventListener('click', function() {
                        // Navega para a etapa correspondente ao índice do botão de etapa
                        numberedStepper.to(index + 1);
                    });
                });

                

            if (typeof bsStepper !== undefined && bsStepper !== null) {
                for (var el = 0; el < bsStepper.length; ++el) {
                    bsStepper[el].addEventListener('show.bs-stepper', function(event) {
                        var index = event.detail.indexStep;
                        var numberOfSteps = $(event.target).find('.step').length - 1;
                        var line = $(event.target).find('.step');

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

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

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

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

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

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

                    window.numberedStepper = numberedStepper;

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

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

                }
            }

            
            // Função para remover o atributo "disabled" dos botões de etapa,porque após clicar ele volta para o estado disabled
            function enableStepButtons() {
                document.querySelectorAll('.bs-stepper .step-trigger').forEach(function(button) {
                    if (button.hasAttribute('disabled')) {
                        button.removeAttribute('disabled');
                    }
                });
            }

            // Verificar continuamente se os botões de etapa estão desabilitados e removê-los se estiverem
            setInterval(enableStepButtons, 100); // Verifica a cada 100 milissegundos (ajuste conforme necessário)

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