@extends('layouts/contentLayoutMaster')

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

{{-- @section('content') --}}

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


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

@endsection

@section('content')
    <section id="multiple-column-form">

        {{-- <div id="loading-spinner" class=" d-none justify-content-center align-items-center position-fixed w-100 h-100" style="top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 1050; display: flex; justify-content: center; align-items: center;">
            <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Carregando...</span>
            </div>
        </div> --}}
    
        <div class="horizontal-wizard">
            <div class="col-12">
                <form class="form-add-contract" id="form-add-contract">
                    @csrf
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ __('locale.Table.Contract.Column.Title') }}</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="group_id" class="form-label">{{ __('locale.Table.Products.Life.Column.group') }}</label>
                                        <select class="form-select" name="group_id" id="group_id" required>
                                            <option value="" disabled selected>Selecione um grupo</option>
                                            @if ($groups)
                                            @foreach ($groups as $group)
                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="modalCopay" class="form-label">{{ __('locale.Table.Contract.Column.CompanyId') }}</label>
                                        <select class="form-select" name="company_id" id="company_id" required>
                                            <option value="" selected disabled>Selecione um grupo para carregar as
                                                empresas</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="policy_number">Número da Apólice da Empresa</label>
                                        <input type="text" id="policy_number" class="form-control" placeholder="Número da Apólice da Empresa" name="policy_number" required />
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="type_closure">Tipo de Fechamento</label>
                                        <select id="type_closure" class="form-select" name="type_closure" required>
                                            <option value="" disabled selected>Selecione um tipo</option>
                                            <option value="1">Nomeação</option>
                                            <option value="2">Implantação</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="previous_supplier_id" class="form-label">{{ __('locale.Table.Contract.Column.PreviousSupplierId') }}</label>
                                        <select class="form-select" name="previous_supplier_id" id="previous_supplier_id" required>
                                            <option value="" selected disabled>Selecione um fornecedor</option>
                                            @if ($suppliers)
                                            @foreach ($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label class="form-label" for="product_type_id">{{ __('locale.Table.SuppliersProducts.Column.Product') }}</label>
                                        <select class="form-select" name="product_type_id" id="product_type_id" required>
                                            <option value="" selected disabled>Selecione um tipo de produto</option>
                                            @if ($product_types)
                                            @foreach ($product_types as $product_type)
                                            <option value="{{ $product_type->id }}">{{ $product_type->name }}</option>
                                            @endforeach
                                            @endif

                                            {{-- {{ __('locale.Table.SuppliersProducts.Column.Product.Select24') }}</option> --}}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="mb-1">
                                        <label for="supplier_id" class="form-label">{{ __('locale.Table.Contract.Column.SupplierId') }}</label>
                                        <select class="form-select" name="supplier_id" id="supplier_id" required>

                                            {{-- <option value="" disabled selected>
                                                    Selecione um fornecedor
                                                </option> --}}
                                                <option value="" selected disabled>Selecione um fornecedor</option>
                                                @if ($products)
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                                                    @endforeach
                                                @endif

                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                        <div class="mb-1">
                                            <label for="product_id"
                                                class="form-label">{{ __('locale.Table.Contract.Column.ProductId') }}</label>
                                            <select class="form-select" name="product_id" id="product_id" required>
                                                <option value="" selected disabled>Selecione um ou mais produtos</option>
                                                @if ($suppliers)
                                                    @foreach ($suppliers as $supplier)
                                                        <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="brokerage_loss_id" class="form-label">Corretora / Perda</label>
                                            <select class="form-select" name="brokerage_loss_id" id="brokerage_loss_id"
                                                required>
                                                <option value="" selected disabled>Selecione uma corretora</option>
                                                @if ($brokers)
                                                    @foreach ($brokers as $broker)
                                                        <option value="{{ $broker->id }}">{{ $broker->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="brokerage_earn_id" class="form-label">Corretora / Ganho</label>
                                            <select class="form-select" name="brokerage_earn_id" id="brokerage_earn_id"
                                                required>
                                                <option value="" selected disabled>Selecione uma corretora</option>
                                                @if ($brokers)
                                                    @foreach ($brokers as $broker)
                                                        <option value="{{ $broker->id }}">{{ $broker->name }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label" for="contract_number">Número do Contrato</label>
                                        <input type="text" id="contract_number" class="form-control"
                                            placeholder="Número do Contrato" name="contract_number" required />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="stipulator_number">Número do Estipulante</label>
                                        <input type="text" id="stipulator_number" class="form-control"
                                            placeholder="Número do Estipulante" name="stipulator_number" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label" for="effective_start">Vigência Inicio</label>
                                        <input type="date" id="effective_start" class="form-control"
                                            name="effective_start" required />
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="effective_end">Vigência Fim</label>
                                        <input type="date" id="effective_end" class="form-control"
                                            name="effective_end" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label" for="wallet_type_analysis">Tipo de Análise na
                                            Carteira</label>
                                        <select id="wallet_type_analysis" class="form-select"
                                            placeholder="Número do Estipulante" name="wallet_type_analysis" required>
                                            <option selected disabled>Selecione um tipo</option>
                                            <option value="1">Grupo</option>
                                            <option value="2">Individual</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="break_even">Break Even</label>
                                        <input type="text" id="break_even" class="form-control campo_porcentagem" name="break_even"
                                        required/>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label" for="annual_readjustment_index_id">Índice de Reajuste
                                            Anual</label>
                                        <select id="annual_readjustment_index_id" class="form-select"
                                            placeholder="Número do Estipulante" name="annual_readjustment_index_id" required>
                                            <option selected disabled>Selecione um índice</option>
                                            <option value="1">Grupo</option>
                                            <option value="2">Individual</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="assessment_value">Valor assessment</label>
                                            <input type="text" name="assessment_value"
                                                id="assessment_value" class="form-control" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label" for="has_iof">IOF</label>
                                        <select id="has_iof" class="form-select" placeholder="Break Even" name="has_iof" required>
                                            <option value="" selected disabled>Selecione uma opção</option>
                                            <option value="1">Sim</option>
                                            <option value="0">Não</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6" id="hasIofCol" style="display: none">
                                        <label class="form-label" for="iof">Valor do IOF</label>
                                        <input type="text" id="iof" class="form-control campo_preco"
                                            placeholder="Valor do IOF" name="iof" required />
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="status">Status</label>
                                            <select id="status" class="form-select" name="status" required>
                                                <option value="1">Ativo</option>
                                                <option value="0">Inativo</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row my-2">
                                    <div class="col-md-12">
                                        <label for="rule_breach_contract">Regra de Quebra de Contrato</label>
                                        <textarea placeholder="Rediga/Cole aqui as regras para a quebra de contrato" class="form-control"
                                            name="rule_breach_contract" id="rule_breach_contract" cols="30" rows="10"></textarea>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="contractual_minium_lives">Quantidade Contratual Mínima de Vidas</label>
                                            <input type="number" name="contractual_minium_lives"
                                                id="contractual_minium_lives"
                                                placeholder="Quantidade Contratual Mínima de Vidas" class="form-control"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="upgrade_downgrade_plan">Permitir Upgrade/Downgrade do Plano?</label>
                                            <select id="upgrade_downgrade_plan" class="form-select"
                                                name="upgrade_downgrade_plan" required>
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="1">Sim</option>
                                                <option value="0">Não</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="limit_date">Data Limite</label>
                                            <input type="date" name="limit_date" id="limit_date" class="form-control"
                                                >
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="inactive_charge_type">Tipo de Cobrança do Invativo</label>
                                            <select id="inactive_charge_type" class="form-select" name="inactive_charge_type"
                                                >
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="1">Faixa Etária</option>
                                                <option value="2">Taxa Média</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="group_model">Modelo de Grupo</label>
                                            <select id="group_model" class="form-select" name="group_model" >
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="1">Adesão</option>
                                                <option value="2">Compulsório</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="payment_type">Modelo de Pagamento</label>
                                            <select id="payment_type" class="form-select" name="payment_type" >
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="1">Pré-pago</option>
                                                <option value="2">Pós-pago</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="contract_time">Tempo de Contrato</label>
                                            <select id="contract_time" class="form-select" name="contract_time" >
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="12">12 meses</option>
                                                <option value="24">24 meses</option>
                                                <option value="36">36 meses</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Plano Contributário</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="contributary_plan_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="contributary_plan_yes"
                                                    name="contributary_plan" value="1" checked>
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="contributary_plan_no">Não</label>
                                                <input type="radio" class="form-check-input" id="contributary_plan_no"
                                                    name="contributary_plan" value="0">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Inclusão de Regra Programada</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="inclusion_scheduled_rule_yes">Sim</label>
                                                <input type="radio" class="form-check-input"
                                                    id="inclusion_scheduled_rule_yes" name="inclusion_scheduled_rule"
                                                    value="1" checked >
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="inclusion_scheduled_rule_no">Não</label>
                                                <input type="radio" class="form-check-input"
                                                    id="inclusion_scheduled_rule_no" name="inclusion_scheduled_rule"
                                                    value="0" >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="days">Dias</label>
                                            <select id="days" class="form-select" name="days" >
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="30">30 dias</option>
                                                <option value="60">60 dias</option>
                                                <option value="90">90 dias</option>
                                                <option value="120">120 dias</option>
                                                <option value="180">180 dias</option>
                                                <option value="1">Mais dias</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12 my-2">
                                        <label for="observations">Observações/Notas</label>
                                        <textarea placeholder="Rediga/Cole aqui as observações ou notas" class="form-control" name="observations"
                                            id="observations" cols="30" rows="10"></textarea>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Faturamento</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="cut_day">Dia de Corte</label>
                                            <input type="number" name="cut_day" id="cut_day" placeholder="Dia de Corte"
                                                class="form-control" required>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="charge_type">Tipo de Faturamento</label>
                                            <select id="charge_type" class="form-select" name="charge_type" required>
                                                <option value="" selected disabled>Selecione um tipo</option>
                                                <option value="1">Mensal</option>
                                                <option value="2">Trimestral</option>
                                                <option value="3">Anual</option>
                                                <option value="4">Bruto</option>
                                                <option value="5">Líquido</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="sla_charge_limit">Limite de Faturamento</label>
                                            <input type="number" name="sla_charge_limit" id="sla_charge_limit"
                                                placeholder="Limite de Faturamento" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Características do Grupo Segredado</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Inclusões de agregados</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="aggregates_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="aggregates_yes"
                                                    name="aggregates" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="aggregates_no">Não</label>
                                                <input type="radio" class="form-check-input" id="aggregates_no"
                                                    name="aggregates" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Aceitação de Filhos</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="Children_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="Children_yes"
                                                    name="childrens" value="1" checked>
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="Children_no">Não</label>
                                                <input type="radio" class="form-check-input" id="Children_no"
                                                    name="childrens" value="0">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="limit_age"> Até qual idade ?</label>
                                            <input type="number" name="limit_age" id="limit_age" min="0"
                                                class="form-control" >
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Aceitação de Conjuge</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="spousal_acceptance_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="spousal_acceptance_yes"
                                                    name="spousal_acceptance" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="spousal_acceptance_no">Não</label>
                                                <input type="radio" class="form-check-input" id="spousal_acceptance_no"
                                                    name="spousal_acceptance" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Afastados</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="have_away_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="have_away_yes"
                                                    name="have_away" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="have_away_no">Não</label>
                                                <input type="radio" class="form-check-input" id="have_away_no"
                                                    name="have_away" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Inativos</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="has_inactive_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="has_inactive_yes"
                                                    name="has_inactive" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="has_inactive_no">Não</label>
                                                <input type="radio" class="form-check-input" id="has_inactive_no"
                                                    name="has_inactive" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Home Care</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="home_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="home_yes" name="home"
                                                    value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="home_no">Não</label>
                                                <input type="radio" class="form-check-input" id="home_no" name="home"
                                                    value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Remidos</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="has _redeemed_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="has _redeemed_yes"
                                                    name="has_redeemed" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="has _redeemed_no">Não</label>
                                                <input type="radio" class="form-check-input" id="has _redeemed_no"
                                                    name="has_redeemed" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Estagiários</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="has_interns_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="has_interns_yes"
                                                    name="has_interns" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="has_interns_no">Não</label>
                                                <input type="radio" class="form-check-input" id="has_interns_no"
                                                    name="has_interns" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Gestantes</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="women_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="women_yes"
                                                    name="have_pregnant" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="women_no">Não</label>
                                                <input type="radio" class="form-check-input" id="women_no"
                                                    name="have_pregnant" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Tem Casos Crônicos</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="chronic_cases_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="chronic_cases_yes"
                                                    name="chronic_cases" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="chronic_cases_no">Não</label>
                                                <input type="radio" class="form-check-input" id="chronic_cases_no"
                                                    name="chronic_cases" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Elegibilidade</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Contratação do produto por elegibilidade?</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="by_eligibility_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="by_eligibility_yes"
                                                    name="by_eligibility" value="1" checked>
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="by_eligibility_no">Não</label>
                                                <input type="radio" class="form-check-input" id="by_eligibility_no"
                                                    name="by_eligibility" value="0">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="description_plan">Descrição dos planos</label>
                                            <input type="text" name="description_plan" id="description_plan"
                                                class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="description_capital_limits">Descrição dos limites de capital</label>
                                            <input type="text" name="description_capital_limits"
                                                id="description_capital_limits" class="form-control">
                                        </div>
                                    </div>   
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="status_elegibility">Status</label>
                                            <select id="status_elegibility" class="form-select" name="status_elegibility" required>
                                                <option value="" selected disabled>Selecione uma opção</option>
                                                <option value="1">Ativo</option>
                                                <option value="0">Inativo</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="row">    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <span>Documentos obrigatórios?</span>
                                            <div class="form-check">
                                                <label class="form-check-label" for="required_documents_yes">Sim</label>
                                                <input type="radio" class="form-check-input" id="required_documents_yes"
                                                    name="required_documents" value="1">
                                            </div>
                                            <div class="form-check">
                                                <label class="form-check-label" for="required_documents_no">Não</label>
                                                <input type="radio" class="form-check-input" id="required_documents_no"
                                                    name="required_documents" value="0" checked>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 my-2">
                                        <label for="contract_rules">Regras do contrato</label>
                                        <textarea placeholder="Rediga/Cole aqui as informações" class="form-control" name="contract_rules"
                                            id="contract_rules" cols="30" rows="10"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <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" id="documentsTable">
                                    <thead>
                                        <tr>
                                        <th scope="col">Documento</th>
                                        <th scope="col">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    
                                    </tbody>
                                    </table>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('locale.Table.Accesses.Column.Title') }}</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="login">{{ __('locale.Table.Accesses.Column.Login') }}</label>
                                                <input type="text" id="login" class="form-control" placeholder="{{ __('locale.Table.Accesses.Column.Login') }}"
                                                    name="login" required />
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <div class="d-flex justify-content-between">
                                                <label class="form-label" for="password">{{ __('locale.Table.Accesses.Column.Password') }}</label>
            
                                            </div>
                                            <div class="input-group input-group-merge form-password-toggle">
                                                <span class="input-group-text"><i data-feather="lock"></i></span>
                                                <input class="form-control form-control-merge" id="password" type="password" name="password" placeholder="{{ __('locale.Table.Accesses.Column.Password') }}" aria-describedby="password" tabindex="2"  required/>
                                                <span class="input-group-text cursor-pointer" id="show-password"><i data-feather="eye"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="credential_type">{{ __('locale.Table.Accesses.Column.Credencial') }}</label>
                                                <select id="credential_type" class="form-select" name="credential_type" required>
                                                    <option value="0">{{ __('locale.Table.Accesses.Column.CredencialOperator') }}</option>
                                                    <option value="1">{{ __('locale.Table.Accesses.Column.CredencialAdministrator') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="mb-1 col-md-6">
                                            <label for="operator_id" class="form-label">{{ __('locale.Table.Accesses.Column.Operator') }}</label>
                                            <select class="form-select" name="operator_id" id="operator_id" required>
                                                @if ($operators)
                                                    @foreach ($operators as $operator)
                                                        <option value="{{ $operator->id }}">{{ $operator->beneficiary_inclusion_sla }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div> --}}
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="observation">{{ __('locale.Table.Accesses.Column.Observation') }}</label>
                                                <input type="text" id="observation" class="form-control"
                                                    placeholder="{{ __('locale.Table.Accesses.Column.Observation') }}" name="observation" />
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="row">
                                        
                                    </div> --}}
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Regras do contrato</h4>
                                <button class="btn btn-primary" id="addRule">{{ __('locale.Add') }}</button>
                            </div>
                            <div class="card-body">
                                <div class="table-responsible">
                                    <table class="table" id="table-contract-rule">
                                        <thead>
                                            <th scope="col">Nome</th>
                                            <th scope="col">Quantidade</th>
                                            <th scope="col">Ações</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Condições</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsible">
                                    <table class="table" id="table-produtos-condicoes">
                                        <thead>
                                            <th scope="col">ID</th>
                                            <th scope="col">Nome</th>
                                            <th scope="col">Copay</th>
                                            <th scope="col">Contribuição</th>
                                            <th scope="col">Condições</th>
                                            <th scope="col">Beneficiarios</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="row mt-2">
                                    <div class="col-12">
                                        <button type="button" class="btn btn-primary me-1"
                                            id="btnAddContracts">{{ __('locale.Table.Contract.Column.AddButton') }}</button>
                                        <button type="reset" class="btn btn-outline-secondary"
                                            id="btnReset">{{ __('locale.Table.Contract.Column.BackButton') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
        </div>

    </section>
    <x-contract.copay :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.contribuicao :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.beneficiario :companies="$companies"/>
    <x-contract.beneficiario-multi />
    <x-contract.condition.health :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.dental :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.life :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.travel :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.food-voucher :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.meal-voucher :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.transport-voucher :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.sfis :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.credit :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.condition.prev :isdisabled="$isdisabled" :checked="$checked"/>
    <x-contract.colab />
    <x-contract.rule :typerequests="$typerequests"/>
    <x-contract.condition.colab />
    <x-contract.document />

@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>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>


@endsection
@section('page-script')
<script>
	window.data = {
		'copay': {

		},
		'contribution': {

		},
		'holder': {

		},
        'colab': {

		},
        'rules': [],
        'documents': [],
		'conditions': {
			'product_type': undefined,
            'products': {
            
            },
		}
	}

    function removeDocument(index) {
        window.data.documents.splice(index, 1);
        updateDocumentTable();
    }

    function updateDocumentTable() {
        const tbody = $('#documentsTable tbody');
        tbody.empty();

        window.data.documents.forEach((document, index) => {
            const row = `
                <tr>
                    <td>
                        <a href="${URL.createObjectURL(document)}" target="_blank">${document.name}</a>
                    </td>
                    <td>
                        <button class="btn btn-danger btn-sm" onclick="removeDocument(${index})"><span class='iconify' data-icon='carbon:trash-can' data-inline='false'></span></button>
                        
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }

    function handleInputModalCopay(value){
        console.log(value);
        if (value == 1) {

        $("#modalCopay #limiter_value").prop("disabled", false);
        $("#modalCopay #limiter_value").prop("required", true);

        } else {
        $("#modalCopay #limiter_value").prop("disabled", true);
        $("#modalCopay #limiter_value").val('');
        $("#modalCopay #limiter_value").prop("required", false);

        }
    }

	$(document).ready(function() {

		$("#has_iof").on("change", function() {
			if ($(this).val() == 1) {
				$("#hasIofCol").show();
			} else {
				$("#hasIofCol").hide();
			}
		});

        $("#upgrade_downgrade_plan").on("change", function() {
			if ($(this).val() == 1) {

				$("#limit_date").prop("disabled", false);
                $("#inactive_charge_type").prop("disabled", false);
                $("#group_model").prop("disabled", false);
                $("#payment_type").prop("disabled", false);
                $("#contract_time").prop("disabled", false);
                $("#contributary_plan_yes").prop("disabled", false);
                $("#contributary_plan_no").prop("disabled", false);

                $("#limit_date").prop("required", true);
                $("#inactive_charge_type").prop("required", true);
                $("#group_model").prop("required", true);
                $("#payment_type").prop("required", true);
                $("#contract_time").prop("required", true);
                
			} else {
				$("#limit_date").prop("disabled", true);
                $("#limit_date").val('');
                $("#inactive_charge_type").prop("disabled", true);
                $("#inactive_charge_type").val('');
                $("#group_model").prop("disabled", true);
                $("#group_model").val('');
                $("#payment_type").prop("disabled", true);
                $("#payment_type").val('');
                $("#contract_time").prop("disabled", true);
                $("#contract_time").val('');
                $("#contributary_plan_yes").prop("disabled", true);
                $("#contributary_plan_no").prop("disabled", true);

                $("#limit_date").prop("required", false);
                $("#inactive_charge_type").prop("required", false);
                $("#group_model").prop("required", false);
                $("#payment_type").prop("required", false);
                $("#contract_time").prop("required", false);

                $("input[name='contributary_plan']").prop('checked', false);
                $("input[name='contributary_plan'][value='0']").prop('checked', true);

                
			}
		});

        $('input[name="by_eligibility"]').on("change", function() {
            if ($('#by_eligibility_yes').is(':checked')) {
                
                $("#description_plan").prop("disabled", false);
                $("#description_capital_limits").prop("disabled", false);

                $("#description_plan").prop("required", true);
                $("#description_capital_limits").prop("required", true);

            } else if ($('#by_eligibility_no').is(':checked')) {
                
                $("#description_plan").prop("disabled", true);
                $("#description_plan").val('');
                $("#description_capital_limits").prop("disabled", true);
                $("#description_capital_limits").val('');

                $("#description_plan").prop("required", false);
                $("#description_capital_limits").prop("required", false);

            }
		});

        $('input[name="childrens"]').on("change", function() {
            if ($('#Children_yes').is(':checked')) {
                
                $("#limit_age").prop("disabled", false);

                $("#limit_age").prop("required", true);

            } else if ($('#Children_no').is(':checked')) {
                
                $("#limit_age").prop("disabled", true);
                $("#limit_age").val('');

                $("#limit_age").prop("required", false);

            }
		});

        $('input[name="inclusion_scheduled_rule"]').on("change", function() {
            if ($('#inclusion_scheduled_rule_yes').is(':checked')) {
                
                $("#days").prop("disabled", false);
                $("#observations").prop("disabled", false);

                $("#days").prop("required", true);
                $("#observations").prop("required", true);

            } else if ($('#inclusion_scheduled_rule_no').is(':checked')) {
                
                $("#days").prop("disabled", true);
                $("#days").val('');
                $("#observations").prop("disabled", true);
                $("#observations").val('');

                $("#days").prop("required", false);
                $("#observations").prop("required", false);

            }
		});

        $("#modalCondicaoSaude input[name='privation_inclusion']").on("change", function() {
			if ($(this).val() == 1) {
				$("#modalCondicaoSaude #holder_and_dependent_privation").show();
                
			} else {
				$("#modalCondicaoSaude #holder_and_dependent_privation").hide();
                
			}
		});
        
        $("#modalProdutoValeAlimentaca input[name='allow_plan_upgrade']").on("change", function() {
			if ($(this).val() == 1) {
				$("#modalProdutoValeAlimentaca #whats_deadline").prop("disabled", false);
			} else {
				$("#modalProdutoValeAlimentaca #whats_deadline").prop("disabled", true);
                $("#modalProdutoValeAlimentaca #whats_deadline").val('');
			}
		});

        $("#modalProdutoValeTransporte input[name='allow_plan_upgrade']").on("change", function() {
			if ($(this).val() == 1) {
				$("#modalProdutoValeTransporte #whats_deadline").prop("disabled", false);
			} else {
				$("#modalProdutoValeTransporte #whats_deadline").prop("disabled", true);
                $("#modalProdutoValeTransporte #whats_deadline").val('');
			}
		});

        $("#modalProdutoValeRefeicao input[name='allow_plan_upgrade']").on("change", function() {
			if ($(this).val() == 1) {
				$("#modalProdutoValeRefeicao #whats_deadline").prop("disabled", false);
			} else {
				$("#modalProdutoValeRefeicao #whats_deadline").prop("disabled", true);
                $("#modalProdutoValeRefeicao #whats_deadline").val('');
			}
		});

        $("#modalProdutoSaudeFisica input[name='allow_plan_upgrade']").on("change", function() {
			if ($(this).val() == 1) {
				$("#modalProdutoSaudeFisica #minimum_billing").prop("disabled", false);
			} else {
				$("#modalProdutoSaudeFisica #minimum_billing").prop("disabled", true);
                $("#modalProdutoSaudeFisica #minimum_billing").val('');
			}
		});

        $("#modalProdutoCredi input[name='allow_plan_upgrade']").on("change", function() {
            
			if ($(this).val() == 1) {
				$("#modalProdutoCredi #whats_deadline").prop("disabled", false);
			} else {
				$("#modalProdutoCredi #whats_deadline").prop("disabled", true);
                $("#modalProdutoCredi #whats_deadline").val('');
			}
		});

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

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

        // inicio funções para manipular e criar documetos

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

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

        $('#documentForm').on('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);

            const documentFile = formData.get('document');

            if (documentFile) {
                window.data.documents.push(documentFile);
                console.log(window.data.documents)
                updateDocumentTable();
                this.reset();
                $('#modalDocument').modal('hide');
            } else {
                alert('Por favor, selecione um documento.');
            }
        });

        
                
        // Inicio funções para manipular e criar regras

        function updateTable() {
            var tbody = $("#table-contract-rule tbody");
            tbody.empty();

            window.data.rules.forEach(function(rule, index) {
                var row = "<tr>";
                row += "<td>" + rule.supplier_type_text + "</td>";
                row += "<td>" + rule.quantity + "</td>";
                row += "<td>";
                row += "<button class='btn btn-danger btn-sm remove-rule me-50' data-index='" + index + "'><span class='iconify' data-icon='carbon:trash-can' data-inline='false'></span></button><button class='btn btn-primary btn-sm edit-rule' data-index='" + index + "'><span class='iconify' data-icon='carbon:edit' data-inline='false'></span></button> ";
                row += "</td>";
                row += "</tr>";

                tbody.append(row);
            });

        }

        $("#addRule").on("click", function(e) {
            e.preventDefault();

            // Limpa o formulário e o campo oculto
            $("#ruleForm")[0].reset();
            $("#rule_index").val('');

            // Exibe o modal
            $("#modalRule").modal('show');
        });

        $("#saveButtonRule").on("click", function(e) {
            e.preventDefault();

            var formDataArray = $("#ruleForm").serializeArray();
            var formDataObject = {};
            $.each(formDataArray, function(_, field) {
                formDataObject[field.name] = field.value;
            });

            var index = $("#rule_index").val();
            var supplierTypeRequestId = formDataObject.supplier_type_request_id;
            var supplierTypeText = $("#ruleForm select[name='supplier_type_request_id'] option:selected").text();

            formDataObject.supplier_type_text = supplierTypeText;

            if (index === '') {
                // Adicionar nova regra
                var exists = window.data.rules.some(function(rule) {
                    return rule.supplier_type_request_id === supplierTypeRequestId;
                });

                if (!exists) {
                    window.data.rules.push(formDataObject);
                } else {
                    alert("Já existe uma regra com este tipo de solicitação.");
                }
            } else {
                // Atualizar regra existente
                window.data.rules[index] = formDataObject;
            }

            console.log(window.data);
            updateTable();
            $("#modalRule").modal('hide');
        });

        $(document).on("click", ".remove-rule", function() {
            var index = $(this).data("index");

            window.data.rules.splice(index, 1);

            // Atualiza o índice das regras restantes
            window.data.rules.forEach((rule, i) => {
                if (i >= index) {
                    // Ajusta o índice dos botões de edição e remoção
                    $(".edit-rule[data-index='" + (i + 1) + "']").data("index", i);
                    $(".remove-rule[data-index='" + (i + 1) + "']").data("index", i);
                }
            });

            updateTable();
        });

        $(document).on("click", ".edit-rule", function(e) {
            e.preventDefault();
            var index = $(this).data("index");
            var rule = window.data.rules[index];

            $("#supplier_type_request_id").val(rule.supplier_type_request_id);
            $("#quantity").val(rule.quantity);
            $("#rule_index").val(index);

            $("#modalRule").modal('show');
        });

        // Fim funções manipular regras

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


					// Inicializa o select2 com opção de múltipla seleção
					$('#company_id').select2({
						multiple: true,
						data: companies.map(function(company) {
							return {
								id: company.id,
								text: company.name
							};
						})
					});
				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
				});
		});

        $('#company_id').on('change', async function() {
            let company_id = $(this).val();
            await fetchAndDisplayHolders(company_id);
            
        });

        async function fetchAndDisplayHolders(company_id){
            try {

                let holders = await selectHoldersByCompany(company_id);

                let holdersData = holders;
                //let holders = response.data;
                let allHolders = Object.values(holdersData).flat();
                //console.log(allHolders);
                let uniqueRoles = [...new Set(allHolders.map(item => item.role))];

                let holderSelectTable = $('#holder_select_table');
                let $holderSelectAll = $('#holder_select_all');
                let $holderSelectTitle = $('#holder_select_title');

                $holderSelectTitle.empty();
                holderSelectTable.find('tbody').remove();
                holderSelectTable.find('thead').remove();
                $holderSelectAll.empty();
                //console.log('if' + allHolders);
                if (allHolders && allHolders.length > 0) {
                    
                    $holderSelectAll.addClass('mb-1');
                    $holderSelectAll.append(`
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" id="selectAll" name="selectAll" type="checkbox" value="">
                                    <label class="form-check-label" for="selectAll">
                                        Selecionar todos
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <input class="form-control" type="text" id="filter-name" placeholder="Search" oninput="filterTable()">
                            </div>
                            <div class="col-md-4">
                                <select class="form-control" id="filter-role" onchange="filterTable()">
                                    <option value="" selected>Selecionar Todos</option>
                                </select>
                            </div>
                        </div>
                    `);

                    const combinedSelect = document.getElementById('filter-role');

                    // Adiciona opções agrupadas por Cargo e Centro de Custo
                    const roleOptgroup = document.createElement('optgroup');
                    roleOptgroup.label = "Cargos";

                    uniqueRoles.forEach(role => {
                        const option = document.createElement('option');
                        option.value = role;
                        option.textContent = role;
                        roleOptgroup.appendChild(option);
                    });

                    combinedSelect.appendChild(roleOptgroup);

                    document.getElementById('filter-name').addEventListener('input', filterTable);
                    document.getElementById('filter-role').addEventListener('change', filterTable);

                    holderSelectTable.append(`
                        <thead style="position: sticky; top: 0; z-index: 1;">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Nome</th>
                                <th scope="col">Tipo</th>
                                <th scope="col">Empresa</th>
                                <th scope="col">Cargo</th>
                                <th scope="col">Centro de custo</th>
                                <th scope="col">Dados</th>
                            </tr>
                        </thead>
                        <tbody id="table_body">
                        </tbody>
                    `);

                    let $tableBody = $('#table_body');
                    
                    allHolders.forEach(holder => {
                        $tableBody.append(`
                            <tr>
                                <td><input class="form-check-input checkbox-option" id="${holder.id}" name="option${holder.id}" type="checkbox" value="${holder.id}" data-type="${holder.type}"></td>
                                <td><label class="form-check-label ms-3 me-6" for="${holder.id}">${holder.name}</label></td>
                                <td>${holder.type}</td>
                                <td>${holder.company_name}</td>
                                <td>${holder.role}</td>
                                <td>${holder.cost_center}</td>
                                <td><button type="button" class="btn btn-sm btn-primary" onclick="javascript:cadastrarCondicaoColab()" data-bs-dismiss="modal" disabled>Abrir</button></td>
                            </tr>
                        `);
                    });

                    $('#selectAll').on('change', function() {
                        let isChecked = $(this).prop('checked');
                        $('.checkbox-option').prop('checked', isChecked);
                        updateSelectedHolders();
                    });

                    $('#modalProdutoColab #selectAll').on('change', function(){
                        
                        let isChecked = $(this).prop('checked');

                        $('#modalProdutoColab .checkbox-option').prop('checked', isChecked);
                        
                    });

                    $('.checkbox-option').on('change', function() {
                        updateSelectedHolders();
                    });

                } else {
                    holderSelectTable.append('<tbody><tr><td colspan="4">Colaborador não encontrado</td></tr></tbody>');
                }

                } catch (error) {
                console.log('Colaborador não encontrado');
                }
        }

        async function selectHoldersByCompany(company_ids) {
            let holders = {};

            for (let company_id of company_ids) {
                try {
                    let response = await axios({
                        url: `{{ route('api.holders.company', '') }}/${company_id}`,
                        method: 'get',
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}"
                        }
                    });

                    holders[company_id] = response.data;
                    
                    
                } catch (error) {
                    console.error(`Error fetching holders for company_id ${company_id}:`, error);
                }
            }

            return holders;
        }

        function filterTable() {
			const filterValue = document.getElementById('filter-name').value.toLowerCase();
			const filterRole = document.getElementById('filter-role').value;
			const table = document.getElementById('holder_select_table');
			const trs = table.querySelectorAll('tbody tr');

			trs.forEach(tr => {
				const tdName = tr.cells[1].textContent.toLowerCase();
				const tdRole = tr.cells[3].textContent;
				const tdCostCenter = tr.cells[4].textContent.toLowerCase();
				
				const matchesTextFilter = tdName.includes(filterValue) || tdRole.toLowerCase().includes(filterValue) || tdCostCenter.includes(filterValue);
				const matchesRoleFilter = !filterRole || tdRole === filterRole;
				
				if (matchesTextFilter && matchesRoleFilter) {
					tr.style.display = '';
				} else {
					tr.style.display = 'none';
				}
			});
		}

		$("#product_type_id").on("change", async function() {

            let product_type_id = $(this).val();

            // Limpa os dados da lista de produtos
            $('#product_id').empty();     

			let {
				data: response
			} = await axios({
				url: `{{ route('api.product-types.find', '') }}/${product_type_id}`,
				method: 'get',
				headers: {
					"Authorization": "Bearer {{ session('Authorization') }}"
				}
			})

			window.data.conditions.product_type = response;

			axios.get(`{{ route('api.products.type', '') }}/${product_type_id}`, {
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				})
				.then(function(response) {

                        $('#supplier_id').empty();
                        var suppliers = response.data;
                        

					// Verifica se a resposta contém dados
					if (suppliers.length > 0) {
						$('#supplier_id').append(
							'<option value="" disabled selected>Selecione um fornecedor</option>'
						);
						suppliers.forEach(function(supplier) {
							$('#supplier_id').append(
								`<option value="${supplier.supplier_id}">${supplier.supplier.name}</option>`
							);
						});
					} else {
						// Se não houver fornecedores, adicione uma opção padrão
						$('#supplier_id').append(
							'<option value="" disabled selected>Nenhum fornecedor encontrado</option>'
						);
					}
				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
				});
		});

		$("#supplier_id").on("change", function() {
			// Lógica para obter o supplier_id e product_type_id selecionados
			let supplier_id = $(this).val();
			let product_type_id = $("#product_type_id").val();
			let url =
				"{{ route('api.products.type.supplier', ['id' => ':id', 'supplier_id' => ':supplier_id']) }}"
				.replace(':id', product_type_id)
				.replace(':supplier_id', supplier_id);

			axios.get(url, {
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				})
				.then(function(response) {
					// Limpa o select2 de products e preenche com os novos dados
					$('#product_id').empty();
					var products = response.data;

					$('#product_id').select2({
						multiple: true,
						data: products.map(function(product) {
							return {
								id: product.id,
								text: product.name
							};
						})
					});
				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
				});
		});

		$("#product_id").on("change", function() {
			// Esconde todos os campos de condição primeiro
			$(".condition").hide();

			// Obtém os produtos selecionados
			let selectedProducts = $(this).select2('data');

			$("#table-produtos-condicoes tbody").html('');

			// Itera sobre os produtos selecionados
			selectedProducts.forEach(function(selectedProduct) {



				let html = `<tr id="table-product-id-${selectedProduct.id}">
								<td>${selectedProduct.id}</td>
								<td>${selectedProduct.text}</td>
								<td>
									<button type="button" class="btn btn-sm btn-primary" onclick="cadastrarCopay(${selectedProduct.id})">
										Abrir
									</button>
								</td>
								<td>
									<button type="button" class="btn btn-sm btn-primary" onclick="cadastrarContribuicao(${selectedProduct.id})">
										Abrir
									</button>
								</td>
								<td>
									<button type="button" class="btn btn-sm btn-primary" onclick="cadastrarCondicao(${selectedProduct.id})">
										Abrir
									</button>
								</td>
                                <td>
									<button type="button" class="btn btn-sm btn-primary" onclick="cadastrarColab(${selectedProduct.id})">
										Abrir
									</button>
								</td>
							</tr>`;

				$("#table-produtos-condicoes tbody").append(html)
			});
		});

	});

	$("#btn-submit").on('click', function() {
        $("#modalContribuicao").modal('hide')
        
    });

	const salvarInformacoesContribuicao = () => {

		let product_id = $("#product_id_contribuicao").val();

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

		window.data.contribution[product_id] = json;

        $("#modalContribuicao").modal('hide')
        console.log(window.data.contribution)
    }

    const salvarInformacoesCopay = () => {

        let product_id = $("#product_id_copay").val();

        let json = Object.fromEntries((new FormData($("#modalCopay form").get(0))).entries());
       
        window.data.copay[product_id] = json;

        $("#modalCopay").modal('hide')
            
        console.log(window.data.copay)
    }

    const salvarInformacoesBeneficiario = async () => {

        let product_id = $("#product_id_beneficiario").val();

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

        //window.data.holder[product_id] = json;

        if (Object.keys(json).length > 0) {
            
            try{
                let response = await axios.post("{{ route('api.holders.store') }}", json, {
                    headers: {
                        "Authorization": "Bearer {{ session('Authorization') }}",
                        "Content-Type": "application/json"
                    }
                });

                Swal.fire({
                    title: 'Uhuul!',
                    text: "{{ __('locale.Table.Holder.Column.AddSuccess') }}",
                    icon: "success"
                }).then((result) => {
                    // if (result.isConfirmed) {
                    //     window.location.href =
                    //         "{{ route('dashboard.contracts.index') }}";
                    // }
                    $("#modalProdutoColab").modal('show')

                });
            }   catch (error) {
                                // Tratar erros da API
                if (error.response) {
                    const {
                        status,
                        data
                    } = error.response;
                    if (status === 400 || status === 422) {
                        Swal.fire({
                            title: 'Ops!',
                            text: data.message,
                            icon: "error",
                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                        });
                    } else if (status === 404) {
                        Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Contract.Column.RequestedNotFound') }}",
                            icon: "error",
                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                        });
                    } else {
                        Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Contract.Column.RegisterError') }}",
                            icon: "error",
                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                        });
                    }
                } else {
                    console.error('Erro ao chamar API:', error);
                }
            }                              
        }

        let company_id = $('#company_id').val()

        $("#modalBeneficiario").modal('hide')

        await fetchAndDisplayHolders(company_id);

    }
    
    const salvarInformacoesBeneficiarioMulti = async () => {

        try {
            let formData = new FormData($("#modalBeneficiarioMulti form")[0]);
            
            let response = await axios.post("{{ route('api.holders.import') }}", formData, {
                headers: {
                    "Authorization": "Bearer {{ session('Authorization') }}",
                    "Content-Type": "multipart/form-data"
                }
            });

            // Lidar com a resposta do controlador Laravel
            console.log("Resposta do controlador Laravel:", response.data);

            // Exibir uma mensagem de sucesso para o usuário
            Swal.fire({
                title: 'Uhuul!',
                text: "{{ __('locale.Table.Holder.Column.AddSuccess') }}",
                icon: "success"
            })
            .then((result) => {

                $("#modalProdutoColab").modal('show')

            });
        } catch (error) {
                                // Tratar erros da API
                if (error.response) {
                    const {
                        status,
                        data
                    } = error.response;
                    if (status === 400 || status === 422) {
                        Swal.fire({
                            title: 'Ops!',
                            text: data.message,
                            icon: "error",
                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                        });
                    } else if (status === 404) {
                        Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Contract.Column.RequestedNotFound') }}",
                            icon: "error",
                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                        });
                    } else {
                        Swal.fire({
                            title: 'Ops!',
                            text: "{{ __('locale.Table.Contract.Column.RegisterError') }}",
                            icon: "error",
                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                        });
                    }
                } else {
                    console.error('Erro ao chamar API:', error);
                }
            }    

        let company_id = $('#company_id').val()

        $("#modalBeneficiarioMulti").modal('hide')

        await fetchAndDisplayHolders(company_id);

        
    }


    const salvarInformacoesCondicaoSaude = () => {

		let product_id = $("#modalCondicaoSaude #product_id_condicao").val();

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

        let additionalCoverageValues = $("#additional_coverage").val();
        let holder_privation = $("#holder_privation").val();
        let dependent_privation = $("#dependent_privation").val();

        json['additional_coverage'] = additionalCoverageValues;
        json['holder_privation'] = holder_privation;
        json['dependent_privation'] = dependent_privation;

        window.data.conditions.products[product_id] = json;

        $("#modalCondicaoSaude").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoVida = () => {

        let product_id = $("#modalCondicaoVida #product_id_condicao").val();

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

        let ruleDpsValues = $("#rule_dps").val();

        json['rule_dps'] = ruleDpsValues;

        window.data.conditions.products[product_id] = json;

        $("#modalCondicaoVida").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoCredi = () => {

        let product_id = $("#modalProdutoCredi #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoCredi").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoOdonto = () => {

        let product_id = $("#modalCondicaoOdonto #product_id_condicao").val();

        let json = Object.fromEntries((new FormData($("#modalCondicaoOdonto form").get(0))).entries());
        //console.log (json);
        let coverageTypeValues = $("#coverage_type").val();

        json['coverage_type'] = coverageTypeValues;

        window.data.conditions.products[product_id] = json;

        $("#modalCondicaoOdonto").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoPrevid = () => {

        let product_id = $("#modalProdutoPrev #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoPrev").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoSaudeFisica = () => {

        let product_id = $("#modalProdutoSaudeFisica #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoSaudeFisica").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoValeAlimentacao = () => {

        let product_id = $("#modalProdutoValeAlimentacao #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoValeAlimentacao").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoValeTransporte = () => {

        let product_id = $("#modalProdutoValeTransporte #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoValeTransporte").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoValeRefeicao = () => {

        let product_id = $("#modalProdutoValeRefeicao #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoValeRefeicao").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesCondicaoViagem = () => {

        let product_id = $("#modalProdutoViagem #product_id_condicao").val();

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

        window.data.conditions.products[product_id] = json;

        $("#modalProdutoViagem").modal('hide')
        console.log(window.data.conditions)
    }

    const salvarInformacoesProdutoColab = async () => {
        let product_id = $("#modalProdutoColab #product_id_condicao").val();

        let json = {};

        let valoresSelecionados = [];

        $('.checkbox-option:checked').each(function() {
            let id = $(this).val();
            let type = $(this).data('type');

            valoresSelecionados.push({ id, type });

            // json.holders = valoresSelecionados;
        });

        window.data.holder[product_id] = valoresSelecionados;
        console.log(window.data.holder[product_id]);

        $("#modalProdutoColab").modal('hide');
    }

	const cadastrarCopay = (product_id) => {

		$("#modalCopay form").get(0).reset();

		if (window.data.copay[product_id]) carregarInformacoesCopay(product_id);
        
		$("#product_id_copay").val(product_id);

		$("#modalCopay").modal('show')

	}

	const cadastrarContribuicao = (product_id) => {


		$("#modalContribuicao form").get(0).reset();

		if (window.data.contribution[product_id]) carregarInformacoesContribuicao(product_id);

		$("#product_id_contribuicao").val(product_id);

		$("#modalContribuicao").modal('show')

	}

    const cadastrarColab = async (product_id) => {
        $("#modalProdutoColab form").get(0).reset();

        if (window.data.holder[product_id]) carregarInformacoesColab(product_id);

        $("#modalProdutoColab #product_id_condicao").val(product_id);

        $("#modalProdutoColab").modal('show');

        let company_id = $('#company_id').val();

        try {
            let response = await axios({
                url: "{{ route('api.holders.company', ':id') }}".replace(':id', company_id),
                method: 'get',
                headers: {
                    "Authorization": "Bearer {{ session('Authorization') }}"
                }
            });

            let holders = response.data;

            let $holderRoles = $('#cargo');
            let $holderCosts = $('#custo');

            $holderRoles.empty();
            $holderCosts.empty();

            if (holders && holders.length > 0) {
                // Para as roles
                let uniqueRoles = new Map();
                holders.forEach(holder => {
                    uniqueRoles.set(holder.role, holder.id);
                });

                uniqueRoles.forEach((id, role) => {
                    $holderRoles.append(`<li class="dropdown-item" data-id="${id}">${role}</li>`);
                });

                // Para os cost centers
                let uniqueCosts = new Map();
                holders.forEach(holder => {
                    uniqueCosts.set(holder.cost_center, holder.id);
                });

                uniqueCosts.forEach((id, cost_center) => {
                    $holderCosts.append(`<li class="dropdown-item" data-id="${id}">${cost_center}</li>`);
                });
            }

        } catch (error) {
            console.log('Colaborador não encontrado');
        }
    };


    const cadastrarBeneficiario = (product_id) => {

        $("#modalBeneficiario form").get(0).reset();

        if (window.data.holder[product_id]) carregarInformacoesBeneficiario(product_id);
        
        //let company_id = $('#company_id').val();

        $('#modalBeneficiario #company_id').select2();

        //$("#modalSlaEdit #types_request_id").val(company_id).trigger('change');

        $("#product_id_beneficiario").val(product_id);

        $("#modalBeneficiario").modal('show')

    }

    const cadastrarBeneficiarioMulti = (product_id) => {

        $("#modalBeneficiarioMulti form").get(0).reset();

        //if (window.data.holder[product_id]) carregarInformacoesBeneficiario(product_id);

        $("#product_id_beneficiario_multi").val(product_id);

        $("#modalBeneficiarioMulti").modal('show')

    }
    
    const cadastrarCondicaoColab = (product_id) => {

        $("#modalCondicaoColab form").get(0).reset();

        //if (window.data.contribution[product_id]) carregarInformacoesContribuicao(product_id);

        $("#product_id_contribuicao").val(product_id);

        $("#modalCondicaoColab").modal('show')

    }

    const buscaCarenciaHolder = () => {

        axios.get(`{{ route('api.holder-grace-period.index') }}`, {
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				})
				.then(function(response) {
					
                    let holder_graces = response.data

                    $('#holder_privation').select2({
						multiple: true,
						data: holder_graces.map(function(holder_grace) {
							return {
								id: holder_grace.id,
								text: holder_grace.name
							};
						})
					});


				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
				});
    }

    const buscaCarenciaDependent = () => {

        axios.get(`{{ route('api.dependent-grace-period.index') }}`, {
                    headers: {
                        "Authorization": "Bearer {{ session('Authorization') }}"
                    }
                })
                .then(function(response) {
                    
                    let dependent_graces = response.data

                    $('#dependent_privation').select2({
                        multiple: true,
                        data: dependent_graces.map(function(dependent_grace) {
                            return {
                                id: dependent_grace.id,
                                text: dependent_grace.name
                            };
                        })
                    });


                })
                .catch(function(error) {
                    console.error('Erro na requisição:', error);
                });
    }

	const cadastrarCondicao = (product_id) => {

		let product_type = window.data.conditions.product_type;

		switch (product_type.type) {
			case (1):

				$("#modalCondicaoSaude form").get(0).reset();
                $("#modalCondicaoSaude #additional_coverage").val(null).trigger('change');
                $('#modalCondicaoSaude #privation_inclusion_no').prop('checked', true);


                if (window.data.conditions.products[product_id]) carregarInformacoesSaude(product_id);

                buscaCarenciaHolder();
                buscaCarenciaDependent();

				$("#modalCondicaoSaude").modal('show');

				$("#modalCondicaoSaude #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.health_products.store') }}";

				break;
			case (2):

				$("#modalCondicaoOdonto form").get(0).reset();
                $("#modalCondicaoOdonto #coverage_type").val(null).trigger('change');

                if (window.data.conditions.products[product_id]) carregarInformacoesOdonto(product_id);

				$("#modalCondicaoOdonto").modal('show');

				$("#modalCondicaoOdonto #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.dental_products.store') }}";

				break;
			case (3):

				$("#modalCondicaoVida form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesVida(product_id);

				$("#modalCondicaoVida").modal('show');

				$("#modalCondicaoVida #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.life_products.store') }}";

				break;
			case (4):

				$("#modalProdutoPrev form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesPrev(product_id);

				$("#modalProdutoPrev").modal('show');

				$("#modalProdutoPrev #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.previd_products.store') }}";

				break;
			case (5):
                $("#modalProdutoValeRefeicao form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesValeRefeicao(product_id);

                $("#modalProdutoValeRefeicao").modal('show');

                $("#modalProdutoValeRefeicao #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.meal_ticket_products.store') }}";

                break;
			case (6):

				$("#modalProdutoValeTransporte form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesValeTransporte(product_id);

				$("#modalProdutoValeTransporte").modal('show');

				$("#modalProdutoValeTransporte #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.transport_ticket_products.store') }}";

				break;
			case (8):

				$("#modalProdutoSaudeFisica form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesValeAlimentacao(product_id);

				$("#modalProdutoSaudeFisica").modal('show');

                $("#modalProdutoSaudeFisica #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.sfis_products.store') }}";

				break;
            case (9):

                $("#modalProdutoViagem form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesViagem(product_id);

                $("#modalProdutoViagem").modal('show');

                $("#modalProdutoViagem #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.travel_products.store') }}";

                break;
            case (10):

                $("#modalProdutoCredi form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesCredi(product_id);

                $("#modalProdutoCredi").modal('show');

                $("#modalProdutoCredi #product_id_condicao").val(product_id);

                //window.data.conditions.product_type.route = "{{ route('api.conditions.credi_products.store') }}";

                break;
            case (24):

                $("#modalProdutoValeAlimentacao form").get(0).reset();

                if (window.data.conditions.products[product_id]) carregarInformacoesFisica(product_id);

                $("#modalProdutoValeAlimentacao").modal('show');

                $("#modalProdutoValeAlimentacao #product_id_condicao").val(product_id);

               // window.data.conditions.product_type.route = "{{ route('api.conditions.food_ticket_products.store') }}";

                break;

		}

	}
    // Recupera informações do json e coloca novamento no modal
	const carregarInformacoesContribuicao = (product_id) => {

		let contribution = window.data.contribution[product_id];

		$("#modalContribuicao #contribution_type").val(contribution.contribution_type);
		$("#modalContribuicao #description_rule").val(contribution.description_rule);
		$("#modalContribuicao #minimum_range_rule").val(contribution.minimum_range_rule);
		$("#modalContribuicao #maximum_range_rule").val(contribution.maximum_range_rule);
		$("#modalContribuicao #holder_discount_policy").val(contribution.holder_discount_policy);
		$("#modalContribuicao #holder_discount_policy_value").val(contribution.holder_discount_policy_value);
		$("#modalContribuicao #dependent_discount_policy").val(contribution.dependent_discount_policy);
		$("#modalContribuicao #dependent_discount_policy_value").val(contribution.dependent_discount_policy_value);	

    }

	const carregarInformacoesCopay = (product_id) => {

		let copay = window.data.copay[product_id];

		$("#modalCopay #description").val(copay.description);
		$("#modalCopay #holder_copay").val(copay.holder_copay);
		$("#modalCopay #holder_copay_value").val(copay.holder_copay_value);
		$("#modalCopay #dependent_copay").val(copay.dependent_copay);
		$("#modalCopay #dependent_copay_value").val(copay.dependent_copay_value);
		$("#modalCopay #office_differenciation_no").click();
		$("#modalCopay #limiter_no").click();
		if (parseInt(copay.office_differenciation)) $("#modalCopay #office_differenciation_yes").click();
		if (parseInt(copay.limiter)) $("#modalCopay #limiter_yes").click();
		$("#modalCopay #limiter_value").val(copay.limiter_value);

	}

    const carregarInformacoesColab = (product_id) => {

        let colab = window.data.holder[product_id];
        console.log(colab);
        for (const key in colab) {
            if (colab.hasOwnProperty(key)) {
                const id = colab[key].id;
                $(`#modalProdutoColab #${id}`).prop('checked', true);
            }
        }
    }

    const carregarInformacoesBeneficiario = (product_id) => {

        let holder = window.data.holder[product_id];

        $("#modalBeneficiario #consigned_credit_no").click();
        if (parseInt(holder.consigned_credit)) $("#modalBeneficiario #consigned_credit_yes").click();
        $("#modalBeneficiario #injuction_no").click();
        if (parseInt(holder.injuction)) $("#modalBeneficiario #injuction_yes").click();
        $("#modalBeneficiario #address").val(holder.address);
        $("#modalBeneficiario #admission_date").val(holder.admission_date);
        $("#modalBeneficiario #bank").val(holder.bank);
        $("#modalBeneficiario #bank_account").val(holder.bank_account);
        $("#modalBeneficiario #bank_agency").val(holder.bank_agency);
        $("#modalBeneficiario #bank_number").val(holder.bank_number);
        $("#modalBeneficiario #beneficy_end_date").val(holder.beneficy_end_date);
        $("#modalBeneficiario #birth_date").val(holder.birth_date);
        $("#modalBeneficiario #city").val(holder.city);
        $("#modalBeneficiario #civil_status").val(holder.civil_status);
        $("#modalBeneficiario #company_id").val(holder.company_id);
        $("#modalBeneficiario #complement").val(holder.complement);
        $("#modalBeneficiario #corporative_phone").val(holder.corporative_phone);
        $("#modalBeneficiario #cost_center").val(holder.cost_center);
        $("#modalBeneficiario #cpf").val(holder.cpf);
        $("#modalBeneficiario #district").val(holder.district);
        $("#modalBeneficiario #email").val(holder.email);
        $("#modalBeneficiario #issuing_body").val(holder.issuing_body);
        $("#modalBeneficiario #issuing_date").val(holder.issuing_date);
        $("#modalBeneficiario #mother_name").val(holder.mother_name);
        $("#modalBeneficiario #name").val(holder.name);
        $("#modalBeneficiario #number").val(holder.number);
        $("#modalBeneficiario #personal_phone").val(holder.personal_phone);
        $("#modalBeneficiario #pre_existing_cid").val(holder.pre_existing_cid);
        $("#modalBeneficiario #registration").val(holder.registration);
        $("#modalBeneficiario #rg").val(holder.rg);
        $("#modalBeneficiario #role").val(holder.role);
        $("#modalBeneficiario #sex").val(holder.sex);
        $("#modalBeneficiario #state").val(holder.state);
        $("#modalBeneficiario #status").val(holder.status);
        $("#modalBeneficiario #sus_card").val(holder.sus_card);
        $("#modalBeneficiario #wage").val(holder.wage);
        $("#modalBeneficiario #wedding_date").val(holder.wedding_date);
        $("#modalBeneficiario #zip_code").val(holder.zip_code);

    }

    const carregarInformacoesSaude = (product_id) => {

        let health = window.data.conditions.products[product_id];

        $("#modalCondicaoSaude #additional_coverage").val(health.additional_coverage).trigger('change');
        $("#modalCondicaoSaude #company_currency_refund").val(health.company_currency_refund);
        $("#modalCondicaoSaude #company_currency_reward").val(health.company_currency_reward);
        $("#modalCondicaoSaude #dependent_privation").val(health.dependent_privation);
        $("#modalCondicaoSaude #example_refund_value").val(health.example_refund_value);
        $("#modalCondicaoSaude #holder_privation").val(health.holder_privation);
        $("#modalCondicaoSaude #negociation").val(health.negociation);

        $("#modalCondicaoSaude #privation_inclusion_no").click();
        if (parseInt(health.privation_inclusion)) $("#modalCondicaoSaude #privation_inclusion_yes").click();

    }

    const carregarInformacoesOdonto = (product_id) => {

        let odonto = window.data.conditions.products[product_id];
        $("#modalCondicaoOdonto #additional_coverage").val(odonto.additional_coverage);
        $("#modalCondicaoOdonto #company_currency_refund").val(odonto.company_currency_refund);
        $("#modalCondicaoOdonto #company_currency_reward").val(odonto.company_currency_reward);
        // $("#modalCondicaoOdonto #coverage_type").val(odonto.coverage_type);
        $("#modalCondicaoOdonto #coverage_type").val(odonto.coverage_type).trigger('change');
        $("#modalCondicaoOdonto #example_refund_value").val(odonto.example_refund_value);
        $("#modalCondicaoOdonto #negotiated_details").val(odonto.negotiated_details);
        $("#modalCondicaoOdonto #type_inactive_billing").val(odonto.type_inactive_billing);

    }

    const carregarInformacoesVida = (product_id) => {

        let life = window.data.conditions.products[product_id];
        
        $("#modalCondicaoVida #maximum_age").val(life.maximum_age);
        $("#modalCondicaoVida #type_charge").val(life.type_charge);
        $("#modalCondicaoVida #negotiated_details").val(life.negotiated_details);
        $("#modalCondicaoVida #capital_type").val(life.capital_type);
        $("#modalCondicaoVida #rule_dps").val(life.rule_dps);
        $("#modalCondicaoVida #capital_limit").val(life.capital_limit);
        $("#modalCondicaoVida #administrative_costs").val(life.administrative_costs);
        $("#modalCondicaoVida #average_rate_1").val(life.average_rate_1);
        $("#modalCondicaoVida #average_rate_2").val(life.average_rate_2);
        $("#modalCondicaoVida #average_rate_3").val(life.average_rate_3);
        $("#modalCondicaoVida #business_expenses").val(life.business_expenses);
        $("#modalCondicaoVida #type_inactive_billing").val(life.type_inactive_billing);
        $("#modalCondicaoVida #coverage_percentage").val(life.coverage_percentage);
        $("#modalCondicaoVida #percentage_returning").val(life.percentage_returning);
        $("#modalCondicaoVida #ibnr").val(life.ibnr);
        $("#modalCondicaoVida #accidental_death_no").click();
        if (parseInt(life.accidental_death)) $("#modalCondicaoVida #accidental_death_yes").click();
        $("#modalCondicaoVida #basic_food_no").click();
        if (parseInt(life.basic_food)) $("#modalCondicaoVida #basic_food_yes").click();
        $("#modalCondicaoVida #basic_food_ca_no").click();
        if (parseInt(life.basic_food_ca)) $("#modalCondicaoVida #basic_food_ca_yes").click();
        $("#modalCondicaoVida #birth_kit_no").click();
        if (parseInt(life.birth_kit)) $("#modalCondicaoVida #birth_kit_yes").click();
        $("#modalCondicaoVida #capital_type_no").click();
        if (parseInt(life.capital_type)) $("#modalCondicaoVida #capital_type_yes").click();
        $("#modalCondicaoVida #congenital_disease_children_no").click();
        if (parseInt(life.congenital_disease_children)) $("#modalCondicaoVida #congenital_disease_children_yes").click();
        $("#modalCondicaoVida #coverage_percentage_no").click();
        if (parseInt(life.coverage_percentage)) $("#modalCondicaoVida #coverage_percentage_yes").click();
        $("#modalCondicaoVida #daily_disability_illness_no").click();
        if (parseInt(life.daily_disability_illness)) $("#modalCondicaoVida #daily_disability_illness_yes").click();
        $("#modalCondicaoVida #daily_disability_table_no").click();
        if (parseInt(life.daily_disability_table)) $("#modalCondicaoVida #daily_disability_table_yes").click();
        $("#modalCondicaoVida #death_no").click();
        if (parseInt(life.death)) $("#modalCondicaoVida #death_yes").click();
        $("#modalCondicaoVida #funeral_assistance_no").click();
        if (parseInt(life.funeral_assistance)) $("#modalCondicaoVida #funeral_assistance_yes").click();
        $("#modalCondicaoVida #funeral_assistance_ca_no").click();
        if (parseInt(life.funeral_assistance_ca)) $("#modalCondicaoVida #funeral_assistance_ca_yes").click();
        $("#modalCondicaoVida #funeral_aux_ca_no").click();
        if (parseInt(life.funeral_aux_ca)) $("#modalCondicaoVida #funeral_aux_ca_yes").click();
        $("#modalCondicaoVida #immediate_financial_aid_no").click();
        if (parseInt(life.immediate_financial_aid)) $("#modalCondicaoVida #immediate_financial_aid_yes").click();
        $("#modalCondicaoVida #ipa_no").click();
        if (parseInt(life.ipa)) $("#modalCondicaoVida #ipa_yes").click();
        $("#modalCondicaoVida #ipd_no").click();
        if (parseInt(life.ipd)) $("#modalCondicaoVida #ipd_yes").click();
        $("#modalCondicaoVida #labor_termination_no").click();
        if (parseInt(life.labor_termination)) $("#modalCondicaoVida #labor_termination_yes").click();
        $("#modalCondicaoVida #medical_expenses_no").click();
        if (parseInt(life.medical_expenses)) $("#modalCondicaoVida #medical_expenses_yes").click();
        $("#modalCondicaoVida #outhers_no").click();
        if (parseInt(life.outhers)) $("#modalCondicaoVida #outhers_yes").click();
        $("#modalCondicaoVida #percentage_returning_no").click();
        if (parseInt(life.percentage_returning)) $("#modalCondicaoVida #percentage_returning_yes").click();
        $("#modalCondicaoVida #pharmacy_discount_no").click();
        if (parseInt(life.pharmacy_discount)) $("#modalCondicaoVida #pharmacy_discount_yes").click();
        $("#modalCondicaoVida #serious_diseases_no").click();
        if (parseInt(life.serious_diseases)) $("#modalCondicaoVida #serious_diseases_yes").click();
        $("#modalCondicaoVida #special_compensation_children_no").click();
        if (parseInt(life.special_compensation_children)) $("#modalCondicaoVida #special_compensation_children_yes").click();
        $("#modalCondicaoVida #technical_surplus_no").click();
        if (parseInt(life.technical_surplus)) $("#modalCondicaoVida #technical_surplus_yes").click();
        $("#modalCondicaoVida #telemedicine_no").click();
        if (parseInt(life.telemedicine)) $("#modalCondicaoVida #telemedicine_yes").click();
        $("#modalCondicaoVida #type_charge_no").click();
        if (parseInt(life.type_charge)) $("#modalCondicaoVida #type_charge_yes").click();

    }

    const carregarInformacoesPrev = (product_id) => {

        let prev = window.data.conditions.products[product_id];

        $("#modalProdutoPrev #Minimum_participants").val(prev.Minimum_participants);
        $("#modalProdutoPrev #actuarial_table").val(prev.actuarial_table);
        $("#modalProdutoPrev #assistance").val(prev.assistance);
        $("#modalProdutoPrev #gain_benefit_rate").val(prev.gain_benefit_rate);
        $("#modalProdutoPrev #minimum_billing").val(prev.minimum_billing);
        $("#modalProdutoPrev #minimum_contribution").val(prev.minimum_contribution);
        $("#modalProdutoPrev #negotiated_details").val(prev.negotiated_details);
        $("#modalProdutoPrev #privation_rescue").val(prev.privation_rescue);
        $("#modalProdutoPrev #retirement_age").val(prev.retirement_age);
        $("#modalProdutoPrev #type_inactive_billing").val(prev.type_inactive_billing);
        $("#modalProdutoPrev #type_of_plan").val(prev.type_of_plan);
        $("#modalProdutoPrev #vesting").val(prev.vesting);
        $("#modalProdutoPrev #way_access_company_cash").val(prev.way_access_company_cash);
        $("#modalProdutoPrev #withdraw_rules").val(prev.withdraw_rules);

    }

    const carregarInformacoesValeAlimentacao = (product_id) => {

        let alimentacao = window.data.conditions.products[product_id];

        $("#modalProdutoValeAlimentacao #allow_plan_upgrade_no").click();
        if (parseInt(alimentacao.allow_plan_upgrade)) $("#modalProdutoValeAlimentacao #allow_plan_upgrade_yes").click();
        $("#modalProdutoValeAlimentacao #coverage_type_va").val(alimentacao.coverage_type_va);
        $("#modalProdutoValeAlimentacao #negotiated_details").val(alimentacao.negotiated_details);
        $("#modalProdutoValeAlimentacao #whats_deadline").val(alimentacao.whats_deadline);

    }

    const carregarInformacoesValeRefeicao = (product_id) => {

        let refeicao = window.data.conditions.products[product_id];

        $("#modalProdutoValeRefeicao #allow_plan_upgrade_no").click();
        if (parseInt(refeicao.allow_plan_upgrade)) $("#modalProdutoValeRefeicao #allow_plan_upgrade_yes").click();
        $("#modalProdutoValeRefeicao #coverage_type_va").val(refeicao.coverage_type_va);
        $("#modalProdutoValeRefeicao #negotiated_details").val(refeicao.negotiated_details);
        $("#modalProdutoValeRefeicao #whats_deadline").val(refeicao.whats_deadline);

    }

    const carregarInformacoesValeTransporte = (product_id) => {

        let transporte = window.data.conditions.products[product_id];

        $("#modalProdutoValeTransporte #allow_plan_upgrade_no").click();
        if (parseInt(transporte.allow_plan_upgrade)) $("#modalProdutoValeTransporte #allow_plan_upgrade_yes").click();
        $("#modalProdutoValeTransporte #coverage_type_va").val(transporte.coverage_type_va);
        $("#modalProdutoValeTransporte #negotiated_details").val(transporte.negotiated_details);
        $("#modalProdutoValeTransporte #whats_deadline").val(transporte.whats_deadline);

    }

    const carregarInformacoesFisica = (product_id) => {

        let sfis = window.data.conditions.products[product_id];

        $("#modalProdutoSaudeFisica #allow_plan_upgrade_no").click();
        if (parseInt(sfis.allow_plan_upgrade)) $("#modalProdutoSaudeFisica #allow_plan_upgrade_yes").click();
        $("#modalProdutoSaudeFisica #coverage_type").val(sfis.coverage_type);
        $("#modalProdutoSaudeFisica #minimum_billing").val(sfis.minimum_billing);
        $("#modalProdutoSaudeFisica #negotiated_details").val(sfis.negotiated_details);

    }

    const carregarInformacoesViagem = (product_id) => {

        let travel = window.data.conditions.products[product_id];

        $("#modalProdutoViagem #coverage_type").val(travel.coverage_type);
        $("#modalProdutoViagem #negotiated_details").val(travel.negotiated_details);

    }

    const carregarInformacoesCredi = (product_id) => {

        let credi = window.data.conditions.products[product_id];

        $("#modalProdutoCredi #coverage_type").val(credi.coverage_type);
        $("#modalProdutoCredi #allow_plan_upgrade_no").click();
        if (parseInt(sfis.allow_plan_upgrade)) $("#modalProdutoSaudeFisica #allow_plan_upgrade_yes").click();
        $("#modalProdutoCredi #maximum_loan_limit").val(credi.maximum_loan_limit);
        $("#modalProdutoCredi #whats_deadline").val(credi.whats_deadline);
        $("#modalProdutoCredi #negotiated_details").val(credi.negotiated_details);

    }
    
        $(function() {
            'use strict';
            
            $('#dependent_copay_value','#limiter_value','#holder_copay_value',
            '#gain_benefit_rate','#paid_value','#dependent_discount_policy_value',
            '#holder_discount_policy_value','#iof','#holder_policy_discount_percent',
            '.holder_policy_discount_percent','#holder_policy_discount_contribution_value',
            '.holder_policy_discount_contribution_value','#dependent_policy_discount_percent',
            '.dependent_policy_discount_percent','#dependent_policy_discount_contribution_value',
            '.dependent_policy_discount_contribution_value','#capital_limit','.capital_limit',
            '#average_tax','#administrative_costs','#commercial_costs','#ibnr','#maxium_capital_limit','#assessment_value'
            ).mask("#.##0,00", {
                reverse: true
            });

            // $('#break_even').mask("#.##0.00", {
            //     reverse: true
            // });

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

            let formRules = {
                group_id: {
                    required: true
                },
                company_id: {
                    required: true
                },
                product_id: {
                    required: true
                },
                coverage_type: {
                    required: true
                },
                type_closure: {
                    required: true
                },
                previous_supplier_id: {
                    required: true
                },
                brokerage_loss_id: {
                    required: true
                },
                brokerage_earn_id: {
                    required: true
                },
                contract_number: {
                    required: true
                },
                stipulator_number: {
                    required: true
                },
                policy_anniversary: {
                    required: true
                },
                number_lives: {
                    required: true
                },
                wallet_type_analysis: {
                    required: true
                },
                intermediation_model: {
                    required: true
                },
                has_iof: {
                    required: true
                },
                type_inflation_index: {
                    required: true
                },
                contractual_minium_lives: {
                    required: true
                },
                upgrade_downgrade_plan: {
                    required: true
                },
                limit_date: {
                    required: false
                },
                inactive_charge_type: {
                    required: true
                },
                group_model: {
                    required: true
                },
                payment_model: {
                    required: true
                },
                contract_time: {
                    required: true
                },
                contribution_plan: {
                    required: true
                },
                contract_billings_id: {
                    required: true
                },

                contract_discount_policies_id: {
                    required: true
                },

                contract_documents_id: {
                    required: true
                },

                contract_elegibilities_id: {
                    required: true
                },

                contract_group_characteristics_id: {
                    required: true
                },

                life_product_conditions_id: {
                    required: true
                },

                condition_travel_products_id: {
                    required: true
                },

                condition_health_products_id: {
                    required: true
                },

                copay_conditions_id: {
                    required: true
                },


            }

            


            $.validator.addMethod("fileRequired", function(value, element) {
                    const allowedExtensions = ['png', 'pdf', 'jpg', 'docx', 'jpeg', 'dock'];
                    const maxFileSize = 80 * 1024; // 5 KB

                    const file = element.files[0];

                    if (file) {

                        if (file.size > maxFileSize) {
                            return false;
                        }

                        const fileExtension = file.name.split('.').pop().toLowerCase();
                        if (!allowedExtensions.includes(fileExtension)) {
                            return false;
                        }

                        return true;
                    }


                    return false;
                },
                function(params, element) {

                    const fileInput = $(element);


                    fileInput.siblings('.error-message').remove();


                    const errorMessage = params === false ?
                        "{{ __('locale.Table.Contract.Modal.Contract.Documents.ErrorMaxFileSize ') }}" :
                        "{{ __('locale.Table.Contract.Modal.Contract.Documents.ErrorFileExtension ') }}";

                    fileInput.after(`<div class="error-message">${errorMessage}</div>`);


                    return errorMessage;
                });

            // begin validate Conditions


            // end submite life products

            var select = $('.select2'),
                horizontalWizard = document.querySelector('.horizontal-wizard');

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

            // Verificar se horizontalWizard está definido e não é nulo
            if (typeof horizontalWizard !== 'undefined' && horizontalWizard !== null) {
                const $form = $(horizontalWizard).find('form');
                
                // Verificar se encontrou o formulário
                if ($form.length > 0) {
                    
                    // Evento de clique no botão de adicionar contratos
                    $(horizontalWizard).find('#btnAddContracts').on('click', async function() {

                        // Validar o formulário
                        //$('#loading-spinner').removeClass('d-none');
                        if ($form.valid()) {
                            
                            try {
                                // Obter dados do formulário
                                const formData = new FormData($form[0]);

                                let product_id = $("#product_id").val();
                                let company_id = $("#company_id").val();

                                formData.append('products', product_id);
                                formData.append('companies', company_id);

                                for (const key in window.data) {
                                    if (window.data.hasOwnProperty(key)) {
                                        formData.append(key, JSON.stringify(window.data[key]));
                                    }
                                }

                                if (window.data.documents.length > 0) {
                                    window.data.documents.forEach((document) => {
                                        formData.append('documents[]', document);
                                    });
                                }
                                
                                // Enviar requisição para a API usando Axios

                                const response = await axios.post(
                                "{{ route('api.contracts.store') }}", formData, {
                                    headers: {
                                        "Content-Type": "multipart/form-data",
                                        "Authorization": "Bearer {{ session('Authorization') }}"
                                    }
                                });
                                    
                                // Exibir mensagem de sucesso
                                Swal.fire({
                                    title: 'Uhuul!',
                                    text: "{{ __('locale.Table.Contract.Column.AddSuccess') }}",
                                    icon: "success"
                                }).then((result) => {
                                    
                                    if (result.isConfirmed) {
                                        window.location.href =
                                            "{{ route('dashboard.contracts.index') }}";
                                    }
                                });
                            } catch (error) {
                                // Tratar erros da API
                                if (error.response) {
                                    const {
                                        status,
                                        data
                                    } = error.response;
                                    if (status === 400 || status === 422) {
                                        Swal.fire({
                                            title: 'Ops!',
                                            text: data.message,
                                            icon: "error",
                                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                                        });
                                    } else if (status === 404) {
                                        Swal.fire({
                                            title: 'Ops!',
                                            text: "{{ __('locale.Table.Contract.Column.RequestedNotFound') }}",
                                            icon: "error",
                                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                                        });
                                    } else {
                                        Swal.fire({
                                            title: 'Ops!',
                                            text: "{{ __('locale.Table.Contract.Column.RegisterError') }}",
                                            icon: "error",
                                            cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                                        });
                                    }
                                } else {
                                    console.error('Erro ao chamar API:', error);
                                }
                            }
                       }
                    });
                }
            }

            $('#btnReset').on('click', function() {
                window.location.href = '{{ route('dashboard.contracts.index') }}';
            });
        });
        
        $('#modalCopay').on('shown.bs.modal', function () {
		
            let $holder_copay = $("#modalCopay #holder_copay");
            let $dependent_copay = $("#modalCopay #dependent_copay");
            let $holder_copay_value = $("#modalCopay #holder_copay_value");
            let $dependent_copay_value = $("#modalCopay #dependent_copay_value");
            let $limiter_value = $("#modalCopay #limiter_value");
            
            $holder_copay.unmask();
            $dependent_copay.unmask();
            $holder_copay_value.unmask();
            $dependent_copay_value.unmask();
            $limiter_value.unmask();
            
            $holder_copay.mask('##00%', { reverse: true });
            $dependent_copay.mask('##00%', { reverse: true });
            $holder_copay_value.mask('#.##0,00', { reverse: true });
            $dependent_copay_value.mask('#.##0,00', { reverse: true });
            $limiter_value.mask('#.##0,00', { reverse: true });

            $("#modalCopay input[name='limiter']").on("change", function() {
                handleInputModalCopay($(this).val());
            });
        });
    </script>
@endsection