{% extends 'base.html.twig' %}
{% block title %}Clients Management | NIS{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{encore_entry_link_tags('mainCSS')}}
{{encore_entry_link_tags('clientsManagerCSS')}}
  <style>.card-panel{padding: 0 0px 20px 0px}</style>
{% endblock %}
{% block body %}
{{ include("mx/nav_menu.twig", {option:'clients-management'} ) }}
<main id="main">
  <div class="container-all">
    <div class="content-options">
        <div class="options-title">
          <span>Select an option:</span>
          <div class="grey-line md-line"></div>
        </div>
        <div class="content-option-items">
          <template v-for="option in optionsArr">
            <template>
              <div class="option-item" :id="'item_for_' + option.key" @click="selectOption(option.key)">
                <div class="item-image">
                  <img :src="'/images/icons/' + option.key + '.' + option.typeImg" alt="option img">
                </div>
                <div class="item-title">
                  [[option.text]]
                </div>
              </div>
              <div class="vertical-separator" :id="'separator_for_' + option.key"></div>
            </template>
          </template>
        </div>
    </div>
    <div class="content-seccions">
      <div class="content-all-cards" v-show="optionSelected != ''">
        <div class="content-item-to-move" v-if="Object.keys(selectedItem).length > 0">
          {# dependiendo la opcion seleccionada sera las opciones que le muestre #}
            <div class="section-content-options-process">
              <div class="option-process-title">
                <template v-if="optionSelected == 'move-policies'"><span>Information from the selected policy</span></template>
                <template v-else-if="optionSelected == 'move-quotes'"><span>Information from the selected quote</span></template>
                <template v-else><span>Information from the client</span></template>
              </div>
              <template v-if="optionSelected == 'move-policies'">
                 <div class="option-process-policies">
                    <div class="row">
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Certificate</label>
                        <input type="text" readonly :value="selectedItem.certificate_number | validateCertificate(selectedItem.policy_number)">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Product</label>
                        <input type="text" readonly :value="selectedItem.type_policy">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Company</label>
                        <input type="text" readonly :value="selectedItem.insurance_company">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Issued date</label>
                        <input type="text" readonly :value="selectedItem.issuing_date | dateFormat">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Start date</label>
                        <input type="text" readonly :value="selectedItem.start_date | dateFormat">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">End date</label>
                        <input type="text" readonly :value="selectedItem.end_date | dateFormat">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Net premium</label>
                        <input type="text" readonly :value="selectedItem.net_premium | number">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Total premium</label>
                        <input type="text" readonly :value="selectedItem.start_date | number">
                      </div>
                      <div class="col-lg-4 col-md-6 group-field">
                        <label for="">Sale person</label>
                        <input type="text" readonly :value="selectedItem.sale_person">
                      </div>
                    </div>
                 </div>
              </template>
              <template v-else-if="optionSelected == 'move-quotes'">
                <div class="option-process-policies">
                    <div class="row">
                      <div class="col-lg-3 col-md-6group-field">
                        <label for="">ID quote</label>
                        <input type="text" readonly :value="selectedItem.id_quote">
                      </div>
                      <div class="col-lg-3 col-md-6group-field">
                        <label for="">ID owner</label>
                        <input type="text" readonly :value="selectedItem.id_client">
                      </div>
                      <div class="col-6 group-field">
                        <label for="">Product</label>
                        <input type="text" readonly :value="selectedItem.product">
                      </div>
                      <div class="col-6 group-field">
                        <label for="">Quote number</label>
                        <input type="text" readonly :value="selectedItem.quote_number">
                      </div>
                      <div class="col-6 group-field">
                        <label for="">Quote date</label>
                        <input type="text" readonly :value="selectedItem.quote_date | dateFormat">
                      </div>
                    </div>
                </div>
              </template>
              <template v-else>
                <div class="option-process-policies">
                    <div class="row">
                      <div class="col-4 group-field">
                        <label for="">ID</label>
                        <input type="text" readonly :value="selectedResult.old.id_client">
                      </div>
                      <div class="col-8 group-field">
                        <label for="">Client Email</label>
                        <input type="text" readonly :value="selectedResult.old.client_email">
                      </div>
                      <div class="col-6 group-field">
                        <label for="">Client phone</label>
                        <input type="text" readonly :value="selectedResult.old.client_phone1">
                      </div>
                      <div class="col-6 group-field">
                        <label for="">Gender</label>
                        <input type="text" readonly :value="selectedResult.old.client_gender">
                      </div>
                    </div>
                </div>
              </template>
              <div class="option-process-buttons">
                <button @click="cancelProcess()" type="button" class="cancel-button process-button"><span class="material-icons">close</span>Cancel</button>
                <button v-if="optionSelected !='unir-clientes'" @click="saveProcess()" type="button" class="save-button process-button"><span class="material-icons">save</span>Move</button>
                <button v-else @click="saveProcess()" type="button" class="save-button process-button"><span class="material-icons">save</span>Join</button>
              </div>
            </div>
        </div>
        <div class="row">
          <div class="col-lg-6 col-sm-12 content-old-card">
            <div class="content-info-section">
              <div class="content-search-input">
                {{ include("components/search-client-component.html.twig", {type:'old'} ) }}
              </div>
              <div class="section-client-info row" v-show="Object.keys(selectedResult.old).length > 0">
                <template v-if="selectedResult.old.owner_type == 'Person'">
                  <div class="col-6 group-field">
                    <label for="">Complete Name</label>
                    <input type="text" readonly :value="concatCompleteName(selectedResult.old.client_first_name, selectedResult.old.client_father_last_name, selectedResult.old.client_mother_last_name)">
                  </div>
                </template>
                <template v-else>
                   <div class="col-6 group-field">
                    <label for="">Company name</label>
                    <input type="text" readonly :value="selectedResult.old.client_company">
                  </div>
                </template>
                <div class="col-lg-4 col-md-6 group-field">
                    <label for="">Email</label>
                    <input type="text" readonly :value="selectedResult.old.client_email">
                </div>
                <div class="col l2 md6 group-field">
                    <label for="">ID</label>
                    <input type="text" readonly :value="selectedResult.old.id_client">
                </div>
              </div>
              {# dependiendo la opcion seleccionada sera las opciones que le muestre #}
              <div class="section-content-options-process">
                <template v-if="optionSelected == 'move-policies' && optionResult.length > 0">
                  <div class="option-process-title">
                    <span>Select the policy to move</span>
                  </div>
                  <div class="option-process-policies">
                     <table class="responsive-table highlight bordered">
                      <thead>
                        <tr>
                            <th width="40%">Certificate</th>
                            <th width="20%">Total Premium</th>
                            <th width="20%">Start date</th>
                            <th width="20%">End date</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="table-tr-element" v-for="certificate in optionResult" :key="certificate.certificate_number"  :id="'table_tr_element_' + certificate.id_policy_info" style="cursor:pointer; color:#7C7C7C;" @click="selectItemToMove(certificate, 'table_tr_element_' + certificate.id_policy_info)">
                          <td>[[certificate.certificate_number | validateCertificate(certificate.policy_number)]]</td>
                          <td>$[[certificate.total_premium | number]] [[certificate.currency | currencyType]]</td>
                          <td>[[certificate.start_date | dateFormat]]</td>
                          <td>[[certificate.end_date | dateFormat]]</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </template>
                <template v-else-if="optionSelected == 'move-quotes' && optionResult.length > 0">
                  <div class="option-process-title">
                    <span>Select the quote to move</span>
                  </div>
                  <div class="option-process-policies">
                     <table class="responsive-table highlight bordered">
                      <thead>
                        <tr>
                            <th width="50%">Product</th>
                            <th width="30%">Quote number</th>
                            <th width="20%">Quote date</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="table-tr-element" v-for="quote in optionResult" style="cursor:pointer; color:#7C7C7C;" :id="'table_tr_element_' + quote.id_quote" @click="selectItemToMove(quote, 'table_tr_element_' + quote.id_quote)">
                          <td>[[quote.product]]</td>
                          <td>[[quote.quote_number]]</td>
                          <td>[[quote.quote_date | dateFormat]]</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </template>
                <template v-else-if="optionSelected == 'unir-clientes' && optionResult.length > 0">
                    <div class="option-process-title">
                          Client Policies
                    </div>
                    <div class="option-process-policies">
                     <table class="responsive-table highlight bordered" >
                      <thead>
                        <tr>
                            <th width="40%">Certificate</th>
                            <th width="20%">Total Premium</th>
                            <th width="20%">Start date</th>
                            <th width="20%">End date</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr class="table-tr-element" v-for="certificate in optionResult" :key="certificate.certificate_number"  :id="'table_tr_element_' + certificate.id_policy_info" style="cursor:pointer; color:#7C7C7C;"  @click="selectItemToMove(certificate, 'table_tr_element_' + certificate.id_policy_info)">
                           <td>[[certificate.certificate_number | validateCertificate(certificate.policy_number)]]</td>
                          <td>$[[certificate.total_premium | number]] [[certificate.currency | currencyType]]</td>
                          <td>[[certificate.start_date | dateFormat]]</td>
                          <td>[[certificate.end_date | dateFormat]]</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </template>
              </div>

            </div>
          </div>
          <div class="col-lg-6 col-sm-12 content-new-card">
            <div class="content-info-section">
              <div class="content-search-input">
                {{ include("components/search-client-component.html.twig", {type:'new', option: 'certificates'} ) }}
              </div>
              <div class="section-client-info row" v-show="Object.keys(selectedResult.new).length > 0">
                <template v-if="selectedResult.new.owner_type == 'Person'">
                  <div class="col-6 group-field">
                    <label for="">Complete Name</label>
                    <input type="text" readonly :value="concatCompleteName(selectedResult.new.client_first_name, selectedResult.new.client_father_last_name, selectedResult.new.client_mother_last_name)">
                  </div>
                </template>
                <template v-else>
                   <div class="col-6 group-field">
                    <label for="">Company name</label>
                    <input type="text" readonly :value="selectedResult.new.client_company">
                  </div>
                </template>
                <div class="col-lg-4 col-md-6 group-field">
                    <label for="">Email</label>
                    <input type="text" readonly :value="selectedResult.new.client_email">
                </div>
                <div class="col l2 md6 group-field">
                    <label for="">ID</label>
                    <input type="text" readonly :value="selectedResult.new.id_client">
                </div>
              </div>
              {# dependiendo la opcion seleccionada sera las opciones que le muestre #}
              <div class="section-content-options-process" v-show="Object.keys(selectedResult.new).length > 0 ">
                <div class="option-process-title">
                  <span>Client general information</span>
                </div>
                <div class="option-process-policies">
                  <div class="row">
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Owner type</label>
                      <input type="text" readonly :value="selectedResult.new.owner_type">
                    </div>
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Additional insured</label>
                      <input type="text" readonly :value="selectedResult.new.other_insured_name">
                    </div>
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Creation date</label>
                      <input type="text" readonly :value="selectedResult.new.client_creation_date | dateFormat">
                    </div>
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Client phone</label>
                      <input type="text" readonly :value="selectedResult.new.client_phone1">
                    </div>
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Gender</label>
                      <input type="text" readonly :value="selectedResult.new.client_gender">
                    </div>
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Date of birth</label>
                      <input type="text" readonly :value="selectedResult.new.client_birthday | dateFormat">
                    </div>
                    <div class="col l8 md6 group-field">
                      <label for="">Address</label>
                      <input type="text" readonly :value="selectedResult.new.client_address">
                    </div>
                    <div class="col-lg-4 col-md-6 group-field">
                      <label for="">Zip code</label>
                      <input type="text" readonly :value="selectedResult.new.client_zip_code">
                    </div>
                    <div class="col-6 group-field">
                      <label for="">County</label>
                      <input type="text" readonly :value="selectedResult.new.client_county">
                    </div>
                    <div class="col-6 group-field">
                      <label for="">City</label>
                      <input type="text" readonly :value="selectedResult.new.client_city">
                    </div>
                    <div class="col-6 group-field">
                      <label for="">State</label>
                      <input type="text" readonly :value="selectedResult.new.client_state">
                    </div>
                    <div class="col-6 group-field">
                      <label for="">Country</label>
                      <input type="text" readonly :value="selectedResult.new.client_country">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}
{% block javascripts %}
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
    <script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
  {% if app.environment == 'prod' %}    
    <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
    <script  type="text/javascript" src="{{asset('js/pages/clientsManagement.js')}}" defer></script>
  
{% endblock %}