@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
<div class="row">
    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-book"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">N° total de reclamos</span>
                <span class="info-box-number">
                    {{$total_reclamos}}
                </span>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box mb-3">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-thumbs-up"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Reclamos contestados</span>
                <span class="info-box-number">{{$total_reclamos_respondido}}</span>
            </div>
        </div>
    </div>
    <div class="clearfix hidden-md-up"></div>
    <div class="col-12 col-sm-6 col-md-4">
        <div class="info-box mb-3">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-down"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Reclamos sin contestar</span>
                <span class="info-box-number">{{$total_reclamos_no_respondido}}</span>
            </div>
        </div>
    </div>
  </div>
  <div class="row">
      <div class="col-12">
        @if (Session::has('buena'))
            <div class="alert alert-success alert-dismissible" style="text-align: center;">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h5><i class="icon fas fa-check"></i></h5>
                Se actualizó y se notificó al cliente correctamente
            </div>
        @endif
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-6">
                        <h3 style="margin-top: 10px;" class="card-title">Listado de reclamos o quejas</h3>
                    </div>
                    <div class="col-6" style="text-align: right;">
                        <a style="display: inline-block !important; width: 200px;" class="btn btn-block btn-outline-primary" href="{{route('exportar-excel')}}">Exportar reclamos</a>
                    </div>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="example1" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Código Reclamo</th>
                            <th>Nombre Consumidor</th>
                            <th>Fec. de Reclamo</th>
                            <th>S. Contratado</th>
                            <th>Sede</th>
                            <th>Estado</th>
                            <th>Quedan D.</th>
                            <th>Fecha Rpta.</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($reclamos as $reclamo)
                            <tr>
                                <td>{{$reclamo->codigo}}</td>
                                <td>{{$reclamo->persona->nombres_apellidos}}</td>
                                <td>{{ $reclamo->created_at->format('m-d-Y') }}</td>
                                <td>{{$reclamo->tiposcontratado->nombre}}</td>
                                <td>{{$reclamo->sede->sede}}</td>
                                <td>
                                    @if ($reclamo->status == 0)
                                        <span class="badge bg-danger">No contestado</span>
                                    @else
                                        <span class="badge bg-success">Contestado</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $fecha30dias = \Carbon\Carbon::parse($reclamo->created_at)->addDays(31);
                                        $fecha = \Carbon\Carbon::now();
                                        $queda = $fecha->diffInDays($fecha30dias);
                                    @endphp
                                    @if ($reclamo->status == 1)
                                    ----
                                    @else
                                    {{ $queda  }} día(s)
                                    @endif
                                </td>
                                <td>
                                    @if ($reclamo->status == 0)
                                        -----
                                    @else
                                    {{$reclamo->fech_respuesta}}
                                    @endif
                                </td>
                                <td>
                                    <a 
                                        href="{{route('reclamo', $reclamo->codigo)}}" 
                                        class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center">
                                        Ver
                                    </a>
                                </td>
                            </tr>
                        @endforeach  
                    </tbody>
                </table>
            </div>  
        </div>    
      </div>
  </div>
@stop

@section('css')
    <style>
        #example1 > thead > tr > th{
            font-size: 10.5pt !important;
        }
		.preloader{
			display: none;
		}
    </style>
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop
<script src="https://cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"></script>
@section('js')
    <script> 
        $(function () {
            $("#example2").DataTable();
            $('#example1').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": false,
                "info": true,
                "autoWidth": true,
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
                }
            });
        }); 
    </script>
@stop