<div class="p-4">
    <div class="form-group">
        <i class="fas fa-spinner fa-pulse" style="position: absolute;right:40px;top:81px;" wire:loading></i>
        <input type="text" class="form-control" wire:model="search" placeholder="Escriba para buscar">
    </div>

    {{-- <div class="w-full flex">
        <input class="w-100 border mb-2" type="text" name="" id=""  wire:model="search">
    </div> --}}
    @if (count($policyholders))
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Resultados de la búsqueda</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($policyholders as $pholder)
                    {{-- Obtener los beneficiarios detail --}}
                    @foreach ($pholder->details as $item)
                        {{-- @php
                        $pagina = $item->beneficiaries_paginated
                    @endphp --}}
                        @foreach ($item->beneficiaries as $item) @endforeach
                    @endforeach
                    <tr>
                        <td>
                            <a href="javascript:" onclick="show({{ $pholder }}, {{ $pholder->details }})">
                                {{ $pholder->name }} {{ $pholder->lastname }} - {{ $pholder->document }}
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>

            <tfoot>
                <tr>
                    <th class="links-pagination">
                        {{ $policyholders->links() }}
                    </th>
                </tr>
            </tfoot>
        </table>
    @elseif (!empty($search))
        <div class="alert alert-secondary" role="alert">
            No se encontraron resultados
        </div>
    @endif

    <!-- Modal -->
    <div class="modal fade" id="modalAseguradoDetalle" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="modalAseguradoDetalleLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAseguradoDetalleLabel">Información del Asegurado</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="beneficiario"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Aceptar</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts_policyholders')
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css"
        integrity="sha512-RntatPOhEcQEA81gC/esYoCkGkL7AYV7TeTPoU+R9zE44/yWxVvLIBfBSaMu78rhoDd73ZeRHXRJN5+aPEK53Q=="
        crossorigin="anonymous" /> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"
        integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA=="
        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.js"
        integrity="sha512-h1Xtd9Xz5HglyzafV0MQ2j9RU30SbD+QdVRJXxdIdMixcGLiljJqtuu1W8Ig20IzYI8lskIKEppDJbF/zkdRtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.css"
        integrity="sha512-QmxybGIvkSI8+CGxkt5JAcGOKIzHDqBMs/hdemwisj4EeGLMXxCm9h8YgoCwIvndnuN1NdZxT4pdsesLXSaKaA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script>
        function show(user, details, pagina) {

            document.getElementById('beneficiario').innerHTML = `
                <div class="form-row my-3">
                    <div class="col-md-4">
                        <strong>Documento</strong><br>
                        <span>${user.document ? user.document : '-'}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>Tipo</strong><br>
                        <span>${user.document_type ? user.document_type : '-'}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>E-mail</strong><br>
                        <span>${user.email1 ? user.email1 : '-'}</span>
                    </div>
                </div>

                <div class="form-row my-3">
                    <div class="col-md-4">
                        <strong>Nombre</strong><br>
                        <span>${user.name ? user.name : '-'}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>Apellido</strong><br>
                        <span>${user.lastname ? user.lastname : '-'}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>E-mail (Alt)</strong><br>
                        <span>${user.email2 ? user.email2 : '-'}</span>
                    </div>
                </div>

                <div class="form-row my-3">
                    <div class="col-md-4">
                        <strong>Celular</strong><br>
                        <span>${user.mobile ? user.mobile : '-'}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>Teléfono #1</strong><br>
                        <span>${user.phone1 ? user.phone1 : '-'}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>Teléfono #2</strong><br>
                        <span>${user.phone2 ? user.phone2 : '-'}</span>
                    </div>
                </div>

                <div class="form-row my-3">
                    <div class="col">
                        <strong>Dirección</strong><br>
                        <span>${user.main_address ? user.main_address : '-'}</span>
                    </div>
                </div>

                <div class="form-row my-3">
                    <div class="col">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="polizas-tab" data-toggle="tab" href="#polizas-content" role="tab" aria-controls="polizas" aria-selected="true">PÓLIZAS</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="beneficiarios-tab" data-toggle="tab" href="#beneficiarios-content" role="tab" aria-controls="beneficiarios" aria-selected="false">BENEFICIARIOS</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="polizas-content" role="tabpanel" aria-labelledby="polizas-tab">...</div>
                            <div class="tab-pane fade" id="beneficiarios-content" role="tabpanel" aria-labelledby="beneficiarios-tab">
                                <div id="data-container-beneficiaries"></div>
                                <div id="pagination-container-beneficiaries"></div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            if (details.length > 0) {
                var polizas = ``;
                details.forEach(element => {
                    polizas += `
                    <tr>
                        <td>
                            <div class="form-row">
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Número</small>
                                    <p class="m-0">${element.number}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Aseguradora</small>
                                    <p class="m-0">${element.insurance_carrier}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Rama / Sub-Rama</small>
                                    <p class="m-0">${element.branch} / ${element.subbranch}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Vendedor</small>
                                    <p class="m-0">${element.seller}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Inicio</small>
                                    <p class="m-0">${element.date_start}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Fin</small>
                                    <p class="m-0">${element.date_end}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Estado</small>
                                    <p class="m-0">${element.status}</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;
                });
                document.getElementById('polizas-content').innerHTML = `
                <table class="table">
                    <tbody>${polizas}</tbody>
                </table>
            `;

            } else {
                document.getElementById('polizas-content').innerHTML = `
                <p style='padding:10px'>
                    El sistema no tiene póliza disponible de este usuario.
                </p>
                `;
            }

            //BENEFICIARIOS
            var beneficiaryAll = [];
            var beneficiaries = ``;
            details.forEach(element => {
                element.beneficiaries.forEach(element => {
                    beneficiaryAll.push(element)
                });
            })

            if (beneficiaryAll.length > 0) {
                //Paginatios beneficiaries
                $('#pagination-container-beneficiaries').pagination({
                    dataSource: beneficiaryAll,
                    pageSize: 4,
                    showNavigator: true,
                    formatNavigator: '<span style="color: #f00"><%= currentPage %></span>, <%= totalPage %> pages, <%= totalNumber %> entries',
                    callback: function(data, pagination) {
                        // template method of yourself
                        var html = simpleTemplating(data);
                        $('#data-container-beneficiaries ').html(html);
                    }
                });
            } else {
                document.getElementById('data-container-beneficiaries').innerHTML = `
                <p style='padding:10px'>
                No tiene beneficiarios disponibles
                </p>
            `;
            }

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

        //Functions para crear template de beneficiarios paginations
        function simpleTemplating(data) {
            var html = '<table class="table">';
            html += '<tbody>';
            $.each(data, function(index, element) {
                html += `
                    <tr>
                        <td>
                            <div class="form-row">
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">RNC</small>
                                    <p class="m-0">${element.rnc ? element.rnc : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Número</small>
                                    <p class="m-0">${element.number ? element.number : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Asegurado</small>
                                    <p class="m-0">${element.insured ? element.insured : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Codigo Asegurado</small>
                                    <p class="m-0">${element.secured_code ? element.secured_code : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Tipo Asegurado</small>
                                    <p class="m-0">${element.insured_type ? element.insured_type : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Parentesco</small>
                                    <p class="m-0">${element.relationship ? element.relationship : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Nombre Titular</small>
                                    <p class="m-0">${element.name_owner ? element.name_owner : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Nombre Asegurado</small>
                                    <p class="m-0">${element.insured_name ? element.insured_name : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Apellido Asegurado</small>
                                    <p class="m-0">${element.insured_surname ? element.insured_surname : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Documento</small>
                                    <p class="m-0">${element.client_document ? element.client_document : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Sexo</small>
                                    <p class="m-0">${element.gender ? element.gender : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Edad</small>
                                    <p class="m-0">${element.age ? element.age : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Plan</small>
                                    <p class="m-0">${element.plan ? element.plan : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Tipo Plan</small>
                                    <p class="m-0">${element.type_plan ? element.type_plan : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Fecha Nacimiento</small>
                                    <p class="m-0">${element.birth_date ? element.birth_date : '--'}</p>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <small class="font-weight-bold">Tipo póliza</small>
                                    <p class="m-0">${element.type_policy ? element.type_policy : '--'}</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                `;
            });
            html += '</tbody>';
            html += '</table>';
            return html;
        }
    </script>

@endpush
