{% extends 'base.html.twig' %}
{% block title %}Customer Profile{% endblock %}
{% block stylesheets %}
{{ parent() }}
    {{encore_entry_link_tags('customPCSS')}}
{# css para polizas manuales #}
    {{encore_entry_link_tags('sicasManualPCSS')}}
{% endblock %}
{% block body %}
{{ include('./components/full-loader-container.html.twig') }}
{{ include("mx/nav_menu.twig", {option:'new_client'} ) }}
<main>
	{% if app.flashes is defined %}
		{% for message in app.flashes('requestApiError') %}
			<div class="alert alert-danger">
				{{ message }},  if persist, contact <a href="mailto:support@novamar.net">support@novamar.net</a>
			</div>
		{% endfor %}
	{% endif %}
   <div class="row">
    <br>
        <div class="col-12 text-end mt-2">
            <div class="dropdown dropdown-hover d-flex justify-content-end">
                <button class="btn btn-orange dropdown-toggle pulse" id="products" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    PRODUCTS
                </button>
                <ul class="dropdown-menu" aria-labelledby="products">
                    <li><span class="dropdown-item" style="color:#333">Select product</span></li>
                    <!-- Dropdown anidado -->
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Tourist Auto</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="TAQ" id="view-form">Qualitas / CHUBB / HDI</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" data-product="TA" id="view-form">ANA</a></li>
                        </ul>
                    </li>
                    <!-- Dropdown anidado -->
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Resident Auto</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="RAQ" id="view-form">Qualitas</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" data-product="RA" id="view-form">ANA</a></li>
                        </ul>
                    </li>
                    <!-- Dropdown anidado -->
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Boat Liability</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="BL" id="view-form">CHUBB / ABBA</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Homeowners</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="HO" id="view-form">GMX / AIG</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Travel</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="TM" id="view-form">Mapfre</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Health</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="Health" id="view-form">Cotizador GMM</a></li>
                        </ul>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Boat Full Coverage</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#" data-product="BFC" id="view-form">Cotizador Atlas</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row" style="margin-top: 2%;">
            <div class="col-12 col-md-6">
                <div class="box-information">
                <h5 class="text-blue-darken text-center fs-3">Client Information</h5>
                <hr>
                <div class="client-information_card" id="client-information"></div>
                </div>
            </div>
            <div class="col-12 col-md-6" id="more-info">
                <div class="box-information">
                <h5 class="text-blue-darken text-center fs-3">More Information</h5>
                <hr><br>
                <div id="additional-information"></div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div><br>
        <div class="row">
            <div class="col-12 p-0">
                <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="policies-tab" data-bs-toggle="tab" href="#policies" role="tab" aria-controls="policies" aria-selected="true">
                    Policies <span id="number_of_policies" class="badge bg-primary">0</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="manualPolicies-tab" data-bs-toggle="tab" href="#manualPolicies" role="tab" aria-controls="manualPolicies" aria-selected="false">
                    Manual Policies
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="quotes-tab" data-bs-toggle="tab" href="#quotes" role="tab" aria-controls="quotes" aria-selected="false">
                    Quotes <span id="total-quotes" class="badge bg-primary">0</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="claims-tab" data-bs-toggle="tab" href="#claims" role="tab" aria-controls="claims" aria-selected="false">
                    Claims <span id="number_of_claims" class="badge bg-primary">0</span>
                    </a>
                </li>
                {# <li class="nav-item">
                    <a class="nav-link" id="workOrder-tab" data-bs-toggle="tab" href="#workOrder" role="tab" aria-controls="workOrder" aria-selected="false">
                    Work Order <span id="number_of_work_order" class="badge bg-primary">0</span>
                    </a>
                </li> #}
                <li class="nav-item">
                    <a class="nav-link" id="contacts-tab" data-bs-toggle="tab" href="#contacts" role="tab" aria-controls="contacts" aria-selected="false">
                    Contacts <span id="total-contacts" class="badge bg-primary">0</span>
                    </a>
                </li>
                </ul>
            </div>
        </div>
        <div class="tab-content">
            <!-- Policies Tab Content -->
            <div id="policies" class="tab-pane fade show active" role="tabpanel" aria-labelledby="policies-tab">
                <div class=" p-3 box-information">
                    <h5 class="text-center text-blue-darken" >Policies Information</h5>
                    <div id="policy-section"></div>
                </div>
            </div>
            <!-- Manual Policies Tab Content -->
            <div id="manualPolicies" class="tab-pane fade" role="tabpanel" aria-labelledby="manualPolicies-tab">
                {{ include('components/sicas-manual-policies-component.html.twig') }}
            </div>
            <!-- Quotes Tab Content -->
            <div id="quotes" class="tab-pane fade" role="tabpanel" aria-labelledby="quotes-tab">
                <div class=" p-3 box-information">
                    <h5 class="text-center text-blue-darken" >Quotes Information</h5>
                    <div>
                        <table id="quotes-table" class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="text-align: center;">Quote Number</th>
                                    <th style="text-align: center;">Product</th>
                                    <th style="text-align: center;">Closed by</th>
                                    <th style="text-align: center;">Origin</th>
                                    <th style="text-align: center;">Action</th>
                                    <th style="text-align: center;">Date</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <!-- Claims Tab Content -->
            <div id="claims" class="tab-pane fade" role="tabpanel" aria-labelledby="claims-tab">
                <div class=" p-3 box-information">
                    <h5 class="text-center text-blue-darken" >Claims Information</h5>
                    <div id="claim-section"></div>
                </div>
            </div>
            <!-- Work Order Tab Content -->
            {# <div id="workOrder" class="tab-pane fade" role="tabpanel" aria-labelledby="workOrder-tab">
                <div class=" p-3 box-information">
                    <h5 class="text-center text-blue-darken" >Work Order Information</h5>
                    <div id="work-order-section"></div>
                </div>
            </div> #}
            <!-- Contacts Tab Content -->
            <div id="contacts" class="tab-pane fade" role="tabpanel" aria-labelledby="contacts-tab">
                <div class=" p-3 box-information">
                    <h5 class="text-center text-blue-darken" >Contacts</h5>
                    <div>
                        <table id="contacts-table" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
     {% set agentCode = userData.agentCode %}
    <input type="hidden" id="agent_code" name="Form[agentCode]" value="{{ agentCode }}">
    <input type="hidden" id="form_id_client" value="{{ idClient }}">
</main>
{# modal para la verificacion de los datos del cliente #}
{{ include('mx/modals/validate-client-info-modal.html.twig') }}
{% endblock %}
{% block javascripts %}
	 {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}
    <script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="{{asset('/js/complements/validInformationService.js')}}" defer></script>
    <script src="{{asset('/js/complements/verifyClientStatus.js')}}" defer></script>
    <script src="{{asset('/js/complements/getManualPoliciesService.js')}}" defer></script>
    <script src="{{asset('/js/pages/customer-profile.js')}}" defer></script>
{% endblock %}