@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-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('/pagos/prima') }}">Listado de Pagos Prima</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Pago Prima - 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">

                        <h4 class="profile-username text-center"><strong>{{$data->pago_prima_nombre_listado}}</strong></h4>

                        <ul class="list-group list-group-unbordered mb-3">
                          <li class="list-group-item">
                            <b>Id de la tabla</b> <a class="float-right">{{ $data->pago_prima_id }}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Forma de Pago</b> <a class="float-right">{{ $data->pago_prima_id }}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Fecha Inicial</b> <a class="float-right">{{date_format(date_create($data->pago_prima_fecha_inicial),'d-m-Y')}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Fecha Final</b> <a class="float-right">{{date_format(date_create($data->pago_prima_fecha_final),'d-m-Y')}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Fecha Creación</b> <a class="float-right">{{date_format(date_create($data->pago_prima_fecha_creacion),'d-m-Y')}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Creado Por</b> <a class="float-right">{{$data->empleado_name ?? 'N/A'}}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Fecha Modificación</b> <a class="float-right">@php echo $data->pago_prima_fecha_modificacion ? date_format(date_create($data->pago_prima_fecha_modificacion),'d-m-Y') : "<span style='color: red'>(No definido)</span>"@endphp</a>
                          </li>
                          <li class="list-group-item">
                            <b>Modificado Por</b> <a class="float-right"><span style='color: red'>(No definido)</span></a>
                          </li>
                          <li class="list-group-item">
                            <b>Observación</b> <a class="float-right">{{ $data->pago_prima_observacion }}</a>
                          </li>
                          <li class="list-group-item">
                            <b>Estado</b> <a class="float-right">
                              @switch($data->pago_prima_estado)
                                  @case(1)
                                      <span class="label label-info">Abierto</span>
                                      @break
                                  @case(2)
                                      <span class="label label-success">Cerrado</span>
                                      @break
                                  @case(3)
                                      <span class="label label-danger">Cancelado</span>
                                      @break
                              @endswitch
                            </a>
                          </li>
                        </ul>

                        <a href="{{url('/pagos/prima')}}" class="btn btn-primary btn-block"><b>Actualizar</b></a>
                        <a href="{{ route('pagos-prima.index') }}" class="btn btn-warning btn-block"><b>Volver</b></a>
                      </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="#relacionados" data-toggle="tab">Relacionados</a></li>
                          <li class="nav-item"><a class="nav-link" href="#falta" data-toggle="tab">Falta Por Relacionar</a></li>
                          <li class="nav-item"><a class="nav-link" href="#procesados" data-toggle="tab">Procesados</a></li>
                        </ul>
                      </div><!-- /.card-header -->
                      <div class="card-body">
                        <div class="tab-content">
                          <div class="active tab-pane" id="relacionados">
                            <div class="col-2 offset-10">
                              <a href="" class="btn">
                                <i class="fa fa-repeat">

                                </i>
                              </a>
                              <a href="" class="btn btn-primary">
                                <i class="fa fa-download">

                                </i>
                              </a>
                            </div>
                            <br>
                            <div id="tablaRelacionados">

                            </div>
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="falta">
                            <div class="col-2 offset-10">
                              <a href="" class="btn">
                                <i class="fa fa-repeat">

                                </i>
                              </a>
                              <a href="" class="btn btn-primary">
                                <i class="fa fa-download">

                                </i>
                              </a>
                            </div>
                            <br>
                            <div id="porRelacionar">

                            </div>
                          </div>
                          <!-- /.tab-pane -->
                          <div class="tab-pane" id="procesados">
                            <div class="col-2 offset-10">
                              <a href="" class="btn">
                                <i class="fa fa-repeat">

                                </i>
                              </a>
                              <a href="" class="btn btn-primary">
                                <i class="fa fa-download">

                                </i>
                              </a>
                            </div>
                            <br>
                            <div id="porRelacionar2">

                            </div>
                          </div>
                        </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)
        listar2(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('pagos-prima.pagos_relacionados_ajax')}}"; 
            $.ajax({
              url : url + '?page=' + page,
            }).done( (data) => {
                $('#tablaRelacionados').html(data)
            }).fail( (jqXHR,ajaxOptions,thrownError) => {
                alert('No response from server')
            })
        }
        function listar2(page) {
          let url = "{{route('pagos-prima.pagos_no_relacionados_ajax')}}"; 
            $.ajax({
              url : url + '?page=' + page,
            }).done( (data) => {
                $('#porRelacionar').html(data)
                $('#porRelacionar2').html(data)
            }).fail( (jqXHR,ajaxOptions,thrownError) => {
                alert('No response from server')
            })
        }

        function buscar(tipo){

        }
    </script>
@endsection