@extends('layouts.app')

@section('css')

<link rel="stylesheet" href="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<style>
    .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.active:before{
        background: linear-gradient(to right, #313232, #313232) !important;
    }
    .bg-gradient-success, .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed tbody tr td.day.today:before{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .col-custom{
        width: 20%;
    }
    @media only screen and (max-width: 1440px) {
        .col-custom{
            width: 20%;
        }
    }
    @media only screen and (max-width: 720px) {
        .col-custom{
            width: 50%;
        }
    }
    @media only screen and (max-width: 480px) {
        .col-custom{
            width: 100%;
        }
    }
    .standby{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .datepicker table tr td span.active{
        background-image: linear-gradient(to bottom,#00c88b,#00c88b) !important;
        color:#fff;
    }
    .datepicker table tr td span.focused{
        background: linear-gradient(to right, #00c88b, #00c88b);
        color:#fff;
    }
    .datepicker table tr td span:hover {
        background: #c2e7e4;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-days .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-months .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-years .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-decades .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .datepicker-custom .datepicker.datepicker-inline .datepicker-centuries .table-condensed thead{
        background: linear-gradient(to right, #00c88b, #00c88b) !important;
    }
    .btnAccionesCalendar{
        font-size: 20px;
        color: #00c88b;
        border: none;
    }
    .btnAccionesCalendar:hover{
        font-size: 20px;
        color: #454a4d;
    }
</style>
@endsection
@section('content')
<div class="page-header">
    <div class="page-title">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-home"></i>
        </span>
        @if(Auth::user()->tipo_usuario == 'Admin')
        <span class="h2 text-uppercase text-left">  tablero principal </span>
        @else
        <span class="h2 text-uppercase text-left">  punto de venta </span>
        @endif
    </div>
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <a href=" {{url('clientes')}}" class="btn">Rewards</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <a href=" {{ url('ventas/corte/caja/').'/'.date("d-M-Y").'/'.date("d-M-Y") }}" class="btn">Corte</a><i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

@if (Auth::user()->tipo_usuario == 'Admin')
<div class="card card-statistics mb-5 overflow-hidden">
    <div class="row">

        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-currency-usd text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Ventas total <br /> (citas)</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium">${{number_format($total_ventas_citas, 2) }}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-calendar text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Citas del <br /> mes</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium"># {{$numero_ventas_citas}}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-currency-usd text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Venta total  <br />(productos)</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium">${{ number_format($total_ventas_productos, 2) }}</h3>
                    <h3 class="mb-0 font-weight-medium"># {{$numero_ventas_productos}}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-cart-outline text-primary mr-0 mr-sm-4 icon-lg text-primary_local"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0">Gastos  <br />del Mes</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium">${{ number_format($total_gastos, 2) }}</h3>
                    <h3 class="mb-0 font-weight-medium"># {{ $numero_gastos }}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="card-col col-custom" style="background-color: #00c88a" >
            <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <i class="mdi mdi-currency-usd mr-0 mr-sm-4 icon-lg text-white"></i>
                <div class="wrapper text-center text-sm-left">
                <p class="card-text mb-0 text-white">Venta <br /> total</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium text-white">${{$total_ventas_citas + $total_ventas_productos}}</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
@elseif(Auth::user()->tipo_usuario == 'Mayordomia')
<div class="row mb-5">
    <div class="col-custom p-3">
        <a href="{{url('cita/nueva')}}" style="font-size: 1rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">PROGRAMAR CITA</a>
    </div>
    <div class="col-custom p-3">
        <a href="{{url('caja/nuevo-ticket')}}" style="font-size: 1rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">COBRAR</a>
    </div>
    <div class="col-custom p-3">
        <a href="{{url('clientes/create')}}" style="font-size: 1rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">NUEVO CLIENTE</a>
    </div>
    <div class="col-custom p-3">
        <a href="{{url('productos/create')}}" style="font-size: 1rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">NUEVO PRODUCTO</a>
    </div>
    <div class="col-custom p-3">
        <a href="{{url('gastos')}}" style="font-size: 1rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">NUEVO GASTO</a>
    </div>
</div>
@endif

<div id="modales"></div>

<div class="row">
    <div class="col-lg-4 grid-margin stretch-card">
        <div class="card overflow-hidden">
            <div class="card-body p-0 d-flex">
                <div id="inline-datepicker" class="datepicker datepicker-custom"></div>
                {{-- <input type="text" id="inline-datepicker"> --}}
            </div>
        </div>
    </div>
    <div class="col-lg-8 grid-margin stretch-card">
        <div class="card" id="citas-agendadas">
            <div class="spinner-border text-primary_local" style="margin: 0 auto;display:none" role="status" id="loader">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="card-body" id="citaCero">
                <h4 class="card-title text-uppercase">Citas agendadas para el día <span id="diaSeleccionada"></span></h4>
                <div class="table-responsive">
                    <table class="table" id="table-citas">
                        <thead>
                            <tr>
                                <th>Hora</th>
                                <th>Servicio</th>
                                <th>Cliente</th>
                                <th>Estatus</th>
                                <th>Acciones</th>
                                <th>Costo</th>
                                <th>Asignado a</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-citas">
                        @foreach ($citas_dia_actual as $item)
                            <tr>
                                <td>{{$item->fecha_hora->format('h:i a')}}</td>
                                <td>{{$item->servicio->nombre}}</td>
                                <td>
                                    <a href="{{ URL::to('/')}}/clientes/{{$item->cliente->id}}" target="blank">
                                        {{$item->cliente->nombre.' '.$item->cliente->a_paterno.' '.$item->cliente->a_materno}}
                                    </a>
                                    <br /> {{ $item->cliente->telefono }}
                                </td>
                                <td>
                                    @if($item->estatus == "Asistida" && $item->estatus_pago == 'Pagada')
                                        <div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Asistida</div>
                                    @elseif($item->estatus == "Apartada" && $item->estatus_pago != 'Pagada')
                                        <div style="width: 90px" class="badge badge-warning badge-pill">Apartada</div>
                                    @elseif($item->estatus_pago == "Pagada")
                                        <div style="width: 90px" class="badge badge-info badge-pill">Pagada</div>
                                    @elseif($item->estatus == "Cancelada")
                                        <div style="width: 90px" class="badge badge-danger badge-pill">Cancelada</div>
                                    @elseif($item->estatus == "Asistida")
                                        <div style="width: 90px" class="badge badge-success badge-pill">Asistida</div>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        @if($item->estatus == "Asistida" && $item->estatus_pago == 'Pagada')
                                        <div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>
                                        @elseif($item->estatus == "Apartada" && $item->estatus_pago != 'Pagada')
                                            <a data-toggle2="tooltip" data-placement="top" title="Pagar" href="{!! url('caja/'.$item->id) !!}" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>
                                            <a onclick="armarModalAsistencia({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>
                                            <a data-toggle2="tooltip" data-placement="top" title="Reagendar" href="{!! url('cita/'.$item->id) !!}" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>
                                            <a onclick="armarModalEliminar({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>
                                            <a target="_blank" href="https://api.whatsapp.com/send?phone=+521{!! $item->cliente->telefono !!}&text=Buenas%20tardes%20Sr.%20{!! $item->cliente->a_paterno !!},%20su%20cita%20quedo%20agendada%20 con fecha {{$item->fecha_hora->format('d/m/Y')}} y hora {{$item->fecha_hora->format('h:i a')}}, %20le%20recordamos%20ser%20puntual,%20que%20tenga%20un%20excelente%20día." class="btnAccionesCalendar text-info"><i class="mdi mdi-whatsapp"></i></a>
                                        @elseif($item->estatus_pago == "Pagada")
                                            <a onclick="armarModalAsistencia({{$item->id}})" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>
                                            <a data-toggle2="tooltip" data-placement="top" title="Reagendar" href="{!! url('cita/'.$item->id) !!}" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>
                                        @elseif($item->estatus == "Asistida")
                                            <a data-toggle2="tooltip" data-placement="top" title="Pagar" href="{!! url('caja/'.$item->id) !!}" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>
                                        @endif
                                    </div>
                                </td>
                                <td>${{$item->servicio->costo}}</td>
                                <td>{{$item->empleado->usuario->name.' '.$item->empleado->usuario->a_paterno.' '.$item->empleado->usuario->a_materno}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-body standby" id="ceroCitas" style="display:none">
                <h3 class="card-title">No hay citas agendadas para este día</h3>
            </div>
        </div>
    </div>
</div>

@if (Auth::user()->tipo_usuario == 'Admin')
<div class="row">
    <div class="col-md-7 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">ventas en los últimos 6 meses</h4>
                    <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                </div>

                <canvas id="visit-sale-chart" class="mt-4"></canvas>

            </div>
        </div>
    </div>
    <div class="col-md-5 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">Top 3 productos</h4>
                <canvas id="traffic-chart"></canvas>
                <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4"></div>
            </div>
        </div>
    </div>
</div>
@endif

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">Cumpleaños de la semana</h4>
                @if(count($cliente_cumple)== 0)
                <h1 class="text-center">
                    No tenemos cumpleañeros esta semana.
                </h1>
                @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th> # </th>
                                <th> nombre </th>
                                <th> apellido</th>
                                <th> fecha nacimiento </th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($cliente_cumple as $venta)
                            <tr>
                                <td>{!! $venta->id !!}</td>
                                <td>
                                    <a href="{{ url('/clientes/'.$venta->id.'/' ) }}">
                                        {!! $venta->nombre  !!}
                                    </a>
                                </td>
                                <td>{!! $venta->a_paterno !!}</td>
                                <td>{!! $venta->nacimiento !!}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">Ranking de citas</h4>
                </div>
                <div class="table-responsive">
                    <div class="card-block">
                        <div class="dt-responsive table-responsive">
                            <table class="table dataTable no-footer" id="ranking-citas">
                                <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Apellido</th>
                                        <th>Citas</th>                    
                                        <th>Última asistencia</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($clientes as $item)
                                    <tr>
                                        <td>                        
                                            <a href="{!! URL::to('/') !!}/clientes/{!! $item->id !!}" target="blank">{!! $item->nombre !!}</a>
                                        </td>
                                        <td>{!! $item->a_paterno !!}</td>                   
                                        <td>
                                            <div style="width: auto;" class="badge badge-success badge-pill">AS - {!! $asistidas[$item->id] !!}</div>
                                            <div style="width: auto;" class="badge badge-danger badge-pill">C - {!! $canceladas[$item->id] !!}</div>
                                            <div style="width: auto;" class="badge badge-warning badge-pill">AP - {!! $apartadas[$item->id] !!}</div>
                                            <div style="width: auto;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">RA - {!! $reagendadas[$item->id] !!}</div>
                                        </td>
                                        <td>{!! substr($fecha_asistida[$item->id][0]->fecha_hora, 0, 10) !!}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
</div>
{{-- @if(Auth::user()->tipo_usuario == 'Mayordomia')
<div class="row mb-3">
    <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
        <a href="{{url('clientes/create')}}" style="font-size: 1.5rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">NUEVO CLIENTE</a>
    </div>
    <div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
        <a href="{{url('productos/create')}}" style="font-size: 1.5rem" class="btn btn-block btn-lg btn-primary_local pt-5 pb-5">NUEVO PRODUCTO</a>
    </div>
</div>
@endif --}}
@endsection

@section('scripts')
<script src="{!! asset('files_custom/bower_components/datatables.net/js/jquery.dataTables.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.print.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-buttons/js/buttons.html5.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive/js/dataTables.responsive.min.js') !!}" type="text/javascript"></script>
<script src="{!! asset('files_custom/bower_components/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') !!}" type="text/javascript"></script>

<script src="{!! asset('files_custom/assets/vendors/chart.js/Chart.min.js') !!}"></script>

<script src="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>

<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/moment/js/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>

<script>
(function($) {
    'use strict';
    $(function() {

    Chart.defaults.global.legend.labels.usePointStyle = true;

    if ($("#visit-sale-chart").length) {
        Chart.defaults.global.legend.labels.usePointStyle = true;
        var ctx = document.getElementById('visit-sale-chart').getContext("2d");

        var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
        gradientStrokeViolet.addColorStop(0, 'rgba(0, 200, 139, 1)');
        gradientStrokeViolet.addColorStop(1, 'rgba(0, 200, 139, 1)');
        var gradientLegendViolet = 'linear-gradient(to right, rgba(0, 200, 139, 1), rgba(0, 200, 139, 1))';

        var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 360);
        gradientStrokeBlue.addColorStop(0, 'rgba(49, 50, 50, 1)');
        gradientStrokeBlue.addColorStop(1, 'rgba(49, 50, 50, 1)');
        var gradientLegendBlue = 'linear-gradient(to right, rgba(49, 50, 50, 1), rgba(49, 50, 50, 1))';

        var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStrokeRed.addColorStop(0, 'rgba(200, 200, 200, 1)');
        gradientStrokeRed.addColorStop(1, 'rgba(201, 201, 201, 1)');
        var gradientLegendRed = 'linear-gradient(to right, rgba(200, 200, 200), rgba(201, 201, 201, 1))';


        console.log(@JSON($array_meses));
        console.log(@JSON($array_total_simples));
        console.log(@JSON($array_productos_simples));
        console.log(@JSON($array_servicios_simples));
        

      //TODO: sacar el maximo actual

      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @JSON($array_meses),
            datasets: [
              {
                label: "total",
                borderColor: gradientStrokeViolet,
                backgroundColor: gradientStrokeViolet,
                hoverBackgroundColor: gradientStrokeViolet,
                legendColor: gradientLegendViolet,
                pointRadius: 0,
                fill: false,
                borderWidth: 1,
                fill: 'origin',
                data: @JSON($array_total_simples),
              },
              {
                label: "productos",
                borderColor: gradientStrokeRed,
                backgroundColor: gradientStrokeRed,
                hoverBackgroundColor: gradientStrokeRed,
                legendColor: gradientLegendRed,
                pointRadius: 0,
                fill: false,
                borderWidth: 1,
                fill: 'origin',
                data: @JSON($array_productos_simples)
              },
              {
                label: "citas",
                borderColor: gradientStrokeBlue,
                backgroundColor: gradientStrokeBlue,
                hoverBackgroundColor: gradientStrokeBlue,
                legendColor: gradientLegendBlue,
                pointRadius: 0,
                fill: false,
                borderWidth: 1,
                fill: 'origin',
                data: @JSON($array_servicios_simples)
              }
          ]
        },
        options: {
          responsive: true,
          legend: false,
          legendCallback: function(chart) {
            var text = [];
            text.push('<ul>');
            for (var i = 0; i < chart.data.datasets.length; i++) {
                text.push('<li><span class="legend-dots" style="background:' +
                           chart.data.datasets[i].legendColor +
                           '"></span>');
                if (chart.data.datasets[i].label) {
                    text.push(chart.data.datasets[i].label);
                }
                text.push('</li>');
            }
            text.push('</ul>');
            return text.join('');
          },
          scales: {
              yAxes: [{
                  ticks: {
                      display: false,
                      min: 0,
                      stepSize: 20,
                      max: {!! $maximo > 0? $maximo + 1000 : 1000 ; !!}
                  },
                  gridLines: {
                    drawBorder: false,
                    color: 'rgba(235,237,242,1)',
                    zeroLineColor: 'rgba(235,237,242,1)'
                  }
              }],
              xAxes: [{
                  gridLines: {
                    display:false,
                    drawBorder: false,
                    color: 'rgba(0,0,0,1)',
                    zeroLineColor: 'rgba(235,237,242,1)'
                  },
                  ticks: {
                      padding: 20,
                      fontColor: "#9c9fa6",
                      autoSkip: true,
                  },
                  categoryPercentage: 0.5,
                  barPercentage: 0.5
              }]
            }
          },
          elements: {
            point: {
              radius: 0
            }
          }
      })
      
      $("#visit-sale-chart-legend").html(myChart.generateLegend());
    }

    if ($("#traffic-chart").length) {
      var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
      gradientStrokeBlue.addColorStop(0, 'rgba(0, 200, 139, 1)');
      gradientStrokeBlue.addColorStop(1, 'rgba(0, 200, 139, 1)');
      var gradientLegendBlue = 'linear-gradient(to right, rgba(0, 200, 139, 1), rgba(0, 200, 139, 1))';

      var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 50);
      gradientStrokeRed.addColorStop(0, 'rgba(49, 50, 50, 1)');
      gradientStrokeRed.addColorStop(1, 'rgba(49, 50, 50, 1)');
      var gradientLegendRed = 'linear-gradient(to right, rgba(49, 50, 50, 1), rgba(49, 50, 50, 1))';

      var gradientStrokeGreen = ctx.createLinearGradient(0, 0, 0, 300);
      gradientStrokeGreen.addColorStop(0, 'rgba(200, 200, 200, 1)');
      gradientStrokeGreen.addColorStop(1, 'rgba(200, 200, 200, 1)');
      var gradientLegendGreen = 'linear-gradient(to right, rgba(200, 200, 200, 1), rgba(200, 200, 200, 1))';

      var trafficChartData = {
        datasets: [{
          data:  @JSON($top_productos_array),
          backgroundColor: [
            gradientStrokeBlue,
            gradientStrokeGreen,
            gradientStrokeRed
          ],
          hoverBackgroundColor: [
            gradientStrokeBlue,
            gradientStrokeGreen,
            gradientStrokeRed
          ],
          borderColor: [
            gradientStrokeBlue,
            gradientStrokeGreen,
            gradientStrokeRed
          ],
          legendColor: [
            gradientLegendBlue,
            gradientLegendGreen,
            gradientLegendRed
          ]
        }],

        // These labels appear in the legend and in the tooltips when hovering different arcs
        labels: @JSON($top_productos_label),
      };
      var trafficChartOptions = {
        responsive: true,
        animation: {
          animateScale: true,
          animateRotate: true
        },
        legend: false,
        legendCallback: function(chart) {
          var text = [];
          text.push('<ul>');
          for (var i = 0; i < trafficChartData.datasets[0].data.length; i++) {
              text.push('<li><span class="legend-dots" style="background:' +
              trafficChartData.datasets[0].legendColor[i] +
                          '"></span>');
              if (trafficChartData.labels[i]) {
                  text.push(trafficChartData.labels[i]);
              }
              text.push('<span class="float-right">'+trafficChartData.datasets[0].data[i]+'</span>')
              text.push('</li>');
          }
          text.push('</ul>');
          return text.join('');
        }
      };
      var trafficChartCanvas = $("#traffic-chart").get(0).getContext("2d");
      var trafficChart = new Chart(trafficChartCanvas, {
        type: 'doughnut',
        data: trafficChartData,
        options: trafficChartOptions
      });
      $("#traffic-chart-legend").html(trafficChart.generateLegend());
    }


    if ($("#inline-datepicker").length) {
      $('#inline-datepicker').datepicker({
        enableOnReadonly: true,
        todayHighlight: true,
      });
    }
  });
})(jQuery);
</script>

<script>
var url_dinamica = "{!! URL::to('/') !!}";
$('#inline-datepicker').datepicker({
    enableOnReadonly: true,
    todayHighlight: true,
    format: 'dd/mm/yyyy'
}).on('changeDate', function(date) {
    $("#tbody-citas").remove();
    $("#citas-agendadas").addClass('standby');
    $("#loader").show();
    $("#ceroCitas").hide();
    $("#citaCero").hide();
    var fecha = new Date(date.date);
    var fecha_completa = ("0" + fecha.getDate()).slice(-2) +'-'+ ("0" + (fecha.getMonth() + 1)).slice(-2) +'-'+fecha.getFullYear();

    console.log(fecha_completa,'asd');


    var dia_actual = new Date();
    var nueva_fecha  = new Date(("0" + (fecha.getMonth() + 1)).slice(-2) +'-'+ ("0" + fecha.getDate()).slice(-2) +'-'+ fecha.getFullYear() + ' 23:59:59');

    if(nueva_fecha >= dia_actual)
    {
        console.log('fecha mayor');
    }
    else{
        console.log('fecha menor');
    }

    $.ajax({
        url: url_dinamica+"/api/traerCitas/"+fecha_completa,
        type:"GET",
        dataType:"json",
        success:function(data){
            // console.log(data);
            if (data.data == "ERROR") {
                $("#loader").hide();
                $("#ceroCitas").show();
            }
            else{
                $("#citas-agendadas").removeClass('standby');
                $("#loader").hide();
                var agregar = '<tbody id="tbody-citas">';
                data.data.forEach(element => {
                    agregar = agregar + '<tr>'+
                    '<td>'+element.hora+'</td>'+
                    '<td>'+element.servicio+'</td>';
                    if(element.estatus == "Asistida" && element.estatus_pago == "Pagada")
                    {
                        agregar = agregar + '<td><div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Asistida</div></td>';
                    }
                    else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-warning badge-pill">Apartada</div></td>';
                    }
                    else if(element.estatus_pago == "Pagada")
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-info badge-pill">Pagada</div></td>';
                    }
                    else if(element.estatus == "Cancelada")
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-danger badge-pill">Cancelada</div></td>';
                    }
                    else if(element.estatus == "Asistida")
                    {
                        agregar = agregar + '<td><div style="width: 90px" class="badge badge-success badge-pill">Asistida</div></td>';
                    }
                    agregar = agregar + '<td><div class="btn-group">';
                    if(nueva_fecha >= dia_actual)
                    {
                        if(element.estatus == "Asistida" && element.estatus_pago == 'Pagada')
                        {
                            agregar = agregar + '<div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>';
                        }
                        else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>'+
                            '<a onclick="armarModalAsistencia('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>'+
                            '<a data-toggle2="tooltip" data-placement="top" title="Reagendar" href="'+url_dinamica+'/cita/'+element.id+'" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>'+
                            '<a onclick="armarModalEliminar('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>'+
                            '<a target="_blank" href="https://api.whatsapp.com/send?phone=+521'+element.telefono+'&text=Buenas%20tardes%20Sr.%20'+element.cliente+',%20su%20cita%20quedo%20agendada%20 con fecha '+element.fecha+' y hora '+element.hora+', %20le%20recordamos%20ser%20puntual,%20que%20tenga%20un%20excelente%20día." class="btnAccionesCalendar text-info"><i class="mdi mdi-whatsapp"></i></a>';
                        }
                        else if(element.estatus_pago == "Pagada")
                        {
                            agregar = agregar + '<a onclick="armarModalAsistencia('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Asistir" href="#" class="btnAccionesCalendar text-success"><i class="mdi mdi-calendar-check"></i></a>'+
                            '<a data-toggle2="tooltip" data-placement="top" title="Reagendar" href="'+url_dinamica+'/cita/'+element.id+'" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>';
                        }
                        else if(element.estatus == "Asistida")
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>';
                        }
                    }
                    else{
                        if(element.estatus == "Asistida" && element.estatus_pago == 'Pagada')
                        {
                            agregar = agregar + '<div style="width: 90px;background-color:rgba(0,0,0,0);border:#00c88a 1px solid;color: #00c88a;" class="badge badge-pill">Pagada</div>';
                        }
                        else if(element.estatus == "Apartada" && element.estatus_pago != 'Pagada')
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>'+
                            '<a data-toggle2="tooltip" data-placement="top" title="Reagendar" href="'+url_dinamica+'/cita/'+element.id+'" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>'+
                            '<a onclick="armarModalEliminar('+element.id+')" data-toggle2="tooltip" data-placement="top" title="Eliminar" href="#" class="btnAccionesCalendar text-danger" onclick="event.preventDefault();"><i class="mdi mdi-calendar-remove"></i></a>';
                        }
                        else if(element.estatus_pago == "Pagada")
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Reagendar" href="'+url_dinamica+'/cita/'+element.id+'" class="btnAccionesCalendar text-primary"><i class="mdi mdi-calendar-clock"></i></a>';
                        }
                        else if(element.estatus == "Asistida")
                        {
                            agregar = agregar + '<a data-toggle2="tooltip" data-placement="top" title="Pagar" href="'+url_dinamica+'/caja/'+element.id+'" class="btnAccionesCalendar text-info"><i class="mdi mdi-cash-usd"></i></a>';
                        }
                    }
                    agregar = agregar + '</div></td>'+'<td>'+element.cliente+'<br> '+ element.telefono +' </td>'+'<td>$'+element.costo+'</td>'+
                    '<td>'+element.empleado+'</td></tr>';

                    console.log(element);
                });
                agregar = agregar + '</tbody>';
                $("#table-citas").append(agregar)
                $("#table-citas").show();
                $("#citaCero").show();
                $('[data-toggle2="tooltip"]').tooltip();
            }
        }
    });
});


function armarModalAsistencia(id)
{
    $("#modales").html('<div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">'+
        '<div class="modal-dialog" role="document">'+
            '<div class="modal-content">'+
                '<div class="modal-header">'+
                    '<h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>'+
                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                    '<span aria-hidden="true">&times;</span>'+
                    '</button>'+
                '</div>'+
                '<div class="modal-body">'+
                    '<h1>RECUERDA</h1><h3> brindar el mejor servicio al cliente</h3>'+
                    '<hr />'+
                    '<h4 style="margin-top:0px!important;"> Al confirmar tu cita sera marcada como asistida, ¿estás seguro de continuar? </h4>'+
                '</div>'+
                '<div class="modal-footer">'+
                    '<button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>'+
                    '<a href="'+url_dinamica+'/citas/cita-cambiar-estatus/'+id+'" class="btn btn-primary_local btnAcceptModal" >aceptar</a>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>');
    $("#modalAd").modal();
}

function armarModalEliminar(id)
{
    $("#modales").html('<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">'+
        '<div class="modal-dialog" role="document">'+
            '<div class="modal-content">'+
                '<div class="modal-header">'+
                    '<h5 class="modal-title" id="exampleModalLabel">Advertencia</h5>'+
                    '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
                    '<span aria-hidden="true">&times;</span>'+
                    '</button>'+
                '</div>'+
                '<div class="modal-body">'+
                    '<h4 style="margin-top:0px!important;"> Al confirmar tu cita sera eliminada de forma definitiva, ¿estás seguro de continuar? </h4>'+
                '</div>'+
                '<div class="modal-footer">'+
                    '<button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>'+
                    '<form action="'+url_dinamica+'/citas/cita-eliminar/'+id+'" method="POST" role="form" id="form_"'+id+'>'+
                    '<button type="submit" class="btn btn-primary_local">aceptar</button>'+
                        '{{ method_field("DELETE") }}'+
                        '{{ csrf_field() }}'+
                    '</form>'+
                '</div>'+
            '</div>'+
        '</div>'+
    '</div>');
    $("#modalDelete").modal();
}

$('#ranking-citas').DataTable({
    language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Entradas",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    },
    searching: false
});
</script>
@endsection