@extends('layouts.app')

@section('content')
    <!-- 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-primary"></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-credit-card"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/cobros/debito/automatico/lista') }}">Débito Automático - Listado</a>&nbsp;<i
                                class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Débito Automático - detalle</li>
                    </ol>

                </div>

            </div>

            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-head card-topline-aqua">
                            <header><i class="fa fa-money"></i> Información del Cobro</header>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>Contrato # / id FM </b>
                                    <div class="profile-desc-item pull-right">{{ $data->contrato_codigo }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Fecha Inicio Contrato </b>
                                    <div class="profile-desc-item pull-right">{{ $data->contrato_fecha_inicial }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Documento Cliente </b>
                                    <div class="profile-desc-item pull-right">{{ $data->cliente_documento }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Nombre Cliente </b>
                                    <div class="profile-desc-item pull-right">
                                        {{ $data->cliente_nombres . ' ' . $data->cliente_apellido1 . ' ' . $data->cliente_apellido2 }}
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <b>Servicio </b>
                                    <div class="profile-desc-item pull-right">{{ $data->servicio_nombre }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Servicio Asociado </b>
                                    <div class="profile-desc-item pull-right">{{ $data->asociacion == 1 ? 'Si' : 'No' }}
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <b>Cuota </b>
                                    <div class="profile-desc-item pull-right">{{ $data->cobro_cuota }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Valor a Cobrar </b>
                                    <div class="profile-desc-item pull-right">
                                        {{ number_format($data->cobro_valor, 2, '.', ',') }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Observación Cobro </b>
                                    <div class="profile-desc-item pull-right">
                                        {{ $data->cobro_observacion != '' ? $data->cobro_observacion : '--' }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Fecha Ultimo Pago </b>
                                    <div class="profile-desc-item pull-right">{{ $data->cliente_fecha_ultimo_pago }}</div>
                                </li>
                                <li class="list-group-item">
                                    <b>Estado </b>
                                    <div class="profile-desc-item pull-right">
                                        @if ($data->contrato_estado != 1)
                                            <span class="text-warning">Inactivo</span>
                                        @else
                                            <span class="text-success">Activo</span>
                                        @endif
                                    </div>
                                </li>
                            </ul>
                            <a class="btn btn-warning btn-block" onclick="javascript:history.go(-1)">Volver a lista</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header p-2">
                            <ul class="nav nav-pills">
                                <li class="nav-item"><a class="nav-link active" href="#datos_contrato" data-toggle="tab">
                                        Novedades Contrato</a></li>
                                <li class="nav-item"><a class="nav-link" href="#datos_sin_relacion" data-toggle="tab">
                                        Novedades Cliente</a></li>
                            </ul>
                        </div><!-- /.card-header -->
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="active tab-pane" id="datos_contrato">
                                    <div class="row">
                                      <div class="col-md-12">
                                        <ul class="timeline">
                                          @if (count($novedades) > 0)
                                              
                                          @foreach ($novedades as $novedad)
                                          <li>
                                              <i class="fa fa-exchange bg-aqua"></i>
                                              <div class="timeline-item">
                                                  <span class="time">
                                                      <strong>
                                                          Creado por: {{ $novedad->contrato_novedad_creado_por }} - Fecha
                                                          Creación:
                                                          {{ carbon\carbon::parse($novedad->contrato_novedad_fecha_creacion)->format('Y-m-d') }}
                                                      </strong>
                                                  </span>
                                                  <h3 class="timeline-header">
                                                      {{ $novedad->contrato_novedad_estado }}
                                                  </h3>
                                                  <div class="timeline-body">
                                                      @foreach ($novedad->comparacion as $key => $cambio)
                                                      <span>
                                                          @php echo "<strong>".$key."</strong> ".$cambio @endphp
                                                      </span>
                                                      <br>
                                                      @endforeach
                                                  </div>
                                                  <div class="timeline-footer">
                                                      Fecha Creación: {{ $novedad->contrato_novedad_fecha_creacion }}
                                                  </div>
                                              </div>
                                          </li>
                                          @endforeach
                                          @else
                                              
                                          <li>
                                              <i class="fa fa-exchange bg-aqua"></i>
                                              <div class="timeline-item">
                                                  <span class="time">
                                                      <strong>
                                                          No hay novedades
                                                      </strong>
                                                  </span>
                                              </div>
                                          @endif
                                      </ul>
                                      </div>
                                    </div>
                                </div>
                                <!-- /.tab-pane -->
                                <div class="tab-pane" id="datos_sin_relacion">
                                    <div class="row">
                                      <div class="col-12">

                                        <div id="tablaNovedades">
  
                                        </div>
                                      </div>
                                    </div>
                                </div>
                                <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                        </div><!-- /.card-body -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->
            </div>
        </div>
    </div>
@endsection
@section('script')
<script>
      listarNovedades(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]

                listarNovedades(page)

            });


        });

        function listarNovedades(page) {

            let url = "{{ route('ver-novedades-cliente', $data->cliente_id) }}";
            $.ajax({
                url: url + '?page=' + page,
            }).done((data) => {
                $('#tablaNovedades').html(data)

            }).fail((jqXHR, ajaxOptions, thrownError) => {
                /* alert('No response from server') */
                console.log(thrownError)
            })
        }
    </script>
@endsection