@extends('layouts.app')

@section('content')

@php
                                        
 $data_contratos_beneficiario = $controlador->getClienteContratoBeneficiario($data->cliente_id);
                                                        
 @endphp
    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                        <div class="page-title text-danger">Sin Sucursal</div>
                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li><i class="fa fa-users"></i>&nbsp;<a class="parent-item" href="{{ url('/clientes') }}">Listado de Clientes</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Cliente - ver</li>
                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-3">
                    <!-- Profile Image -->
                    <div class="card card-primary card-outline">
                      <div class="card-body box-profile">
                        <div class="text-center">
                          <img width="50%" height="50%" class="img-circle"
                               src="{{ $data->cliente_foto == 'default_avatar.jpg' || $data->cliente_foto == '' ? URL('images/default_avatar.png') : URL('upload/foto_clientes/').'/'.$data->cliente_foto }}"
                               alt="User profile picture">
                        </div>

                        <h4 class="profile-username text-center"><strong>{{$data->cliente_nombres.' '.$data->cliente_apellido1.' '.$data->cliente_apellido2}}</strong></h4>

                        <p class="text-muted text-center">ID {{$data->cliente_documento}}</p>

                        <ul class="list-group list-group-unbordered mb-3">
                          <li class="list-group-item">
                            <b>Celular</b> <a class="float-right">{{ $data->codigo_telefono_pais }} {{$data->cliente_celular}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Sexo</b> <a class="float-right">{{$data->cliente_sexo}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Fecha de Nacimiento</b> <a class="float-right">{{date_format(date_create($data->cliente_fecha_nacimiento),'d-m-Y')}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Nacionalidad</b> <a class="float-right">{{$data->cliente_nacionalidad}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Estado Civil</b> <a class="float-right">{{$data->cliente_estado_civil}}</a>
                          </li>
                        </ul>

                        <a href="{{url('cliente/editar/'.$data->cliente_id)}}" class="btn btn-primary btn-block"><b>Actualizar</b></a>
                        @php
                            $url_previa = str_replace(url('/'), '', url()->previous());

                            $return_url = strpos($url_previa, 'crear') == false ? url()->previous() : url('clientes');

                        @endphp
                        <a href="{{ route('cliente.index') }}" class="btn btn-warning btn-block"><b>Volver a Lista</b></a>
                      </div>
                      <!-- /.card-body -->
                    </div>
                    <!-- /.card -->

                    <!-- About Me Box -->
                    <div class="card card-primary">
                      <!-- /.card-header -->
                      <div class="card-body">
                        <strong><i class="fa fa-map-marker mr-1"></i>Dirección</strong>

                        <p class="text-muted">
                          {{$data->cliente_direccion}}
                        </p>

                        <hr>

                        <strong><i class="fa fa-map mr-1"></i>Distrito</strong>

                        <p class="text-muted">{{$data->cliente_localidad_id != '' ? $data->localidad->localidad_nombre.', '.$data->localidad->localidadPadre->localidad_nombre : ''}}</p>

                        <hr>

                        <strong><i class="fa fa-phone mr-1"></i>Otros Teléfonos</strong>

                        <p class="text-muted">{{str_replace('"]','',str_replace('","',',',str_replace('["','',$data->cliente_telefonos)))}} </p>

                        <hr>

                        <strong><i class="fa fa-comment mr-1"></i>Observacion Fija</strong>

                        <p class="text-muted">{{$data->cliente_observaciones_fija_id}}</p>
                         <hr>

                        <strong><i class="fa fa-envelope mr-1"></i> Autoriza el Envío de Email?</strong>

                        <p class="text-muted">{{$data->cliente_autoriza_envio_email == 1 ? 'Si' : 'No'}}</p>
                         <hr>

                        <strong><i class="fa fa-mobile mr-1"></i> Autoriza el Envío de SMS?</strong>

                        <p class="text-muted">{{$data->cliente_autoriza_envio_sms == 1 ? 'Si' : 'No'}}</p>
                      </div>
                      <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>

                <div class="col-md-9">
                    <div class="card">
                      <div class="card-header p-2">
                        <ul class="nav nav-pills">
                          <li class="nav-item"><a class="nav-link active" href="#estado_cuenta" data-toggle="tab">Estado de Cuenta</a></li>
                          <li class="nav-item"><a class="nav-link" href="#contratos" data-toggle="tab">Contratos</a></li>
                          <li class="nav-item"><a class="nav-link" href="#comunicaciones" data-toggle="tab">Comunicaciones</a></li>
                          <li class="nav-item"><a class="nav-link" href="#documentos" data-toggle="tab">Documentos</a></li>
                          <li class="nav-item"><a class="nav-link" href="#tarjeras" data-toggle="tab">Tarjetas a Debitar</a></li>
                          <li class="nav-item"><a class="nav-link" href="#pagos_contratos" data-toggle="tab">Pagos Contratos</a></li>
                          <li class="nav-item"><a class="nav-link" href="#pagos_productos" data-toggle="tab">Pagos Productos</a></li>
                          <li class="nav-item"><a class="nav-link" href="#novedades" data-toggle="tab">Novedades</a></li>
                          <li class="nav-item"><a class="nav-link" href="#contrato_beneficiario" data-toggle="tab">Contratos Como Beneficiario</a></li>
                        </ul>
                      </div><!-- /.card-header -->
                      <div class="card-body">
                        <div class="tab-content">
                          <div class="active tab-pane" id="estado_cuenta">
                            Estado de cuenta

                            <div class="alert bg-info alert-dismissible">
                                                                  <i class="fa fa-info"></i> El cliente no posee un estado de cuenta activo para visualizar detalles al respecto.
                                                                </div>
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="contratos">
                            Contratos
                            <br>
                            <div id="tablaContratos">

                            </div>
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="comunicaciones">
                            Comunicaciones
                          </div>
                          <!-- /.tab-pane -->
                           <div class="tab-pane" id="documentos">
                            Documentos
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="tarjeras">
                            Tarjetas a Debitar
                          </div>
                          <!-- /.tab-pane -->
                           <div class="tab-pane" id="pagos_contratos">
                            Pagos Contratos
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="pagos_productos">
                            Pagos Productos
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="novedades">
                            Novedades
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="contrato_beneficiario">
                            Contratos Como Beneficiario
                            @if(count($data_contratos_beneficiario) > 0)
                                                                <div class="table-responsive" id="">
                                                                    <table class="table table-wrap">
                                                                        <thead>
                                                                            <tr>
                                                                                <th>#</th>
                                                                                <th>Contrato</th>
                                                                                <th>Cliente principal</th>
                                                                                <th>Sede</th>
                                                                                <th>Vendedor</th>
                                                                                <th>Valor Cuota</th>
                                                                                <th>Estado</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach($data_contratos_beneficiario as $key => $item)
                                                                                <tr>
                                                                                    <td>{{$key+1}}</td>
                                                                                    <td>{{$item->contrato_codigo}}</td>
                                                                                    <td>{{$item->cliente_documento}} {{$item->cliente_nombres}} {{$item->cliente_apellido1}} {{$item->cliente_apellido2}} </td>
                                                                                    <td>{{$item->entidad_nombre}}</td>
                                                                                    <td>{{$item->empleado_nombres.' '.$item->empleado_apellido1.' '.$item->empleado_apellido2}}</td>
                                                                                    <td>{{$simbolo_moneda.number_format($controlador->getValorCoutaContrato($item->contrato_id),2,',',',')}}</td>
                                                                                    <td>{{$controlador->getEstadoLabel($item->contrato_estado)}}</td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                @else
                                                                <div class="alert bg-info alert-dismissible">
                                                                  <i class="fa fa-info"></i> Este cliente no posee contratos asociados como beneficiario.
                                                                </div>
                                                                @endif
                          </div>
                          <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                      </div><!-- /.card-body -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->

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

@endsection
@section('script')
    </script>
    <script type="text/javascript">
        var page = null
        listar(1)

        $(document).ready(() => {
            $(document).on('click','.pagination a', function (event) {
                event.preventDefault()
                $('li').removeClass('active')
                $(this).parent('li').addClass('active')
                page = $(this).attr('href').split('page=')[1]
                listar(page)
            })
        })
        function listar(page) {
          let url = "{{route('contratos-ajax', $data->cliente_id)}}"; 
            $.ajax({
              url : url + '?page=' + page,
            }).done( (data) => {
                $('#tablaContratos').html(data)
            }).fail( (jqXHR,ajaxOptions,thrownError) => {
                alert('No response from server')
            })
        }
    </script>
@endsection