@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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: 33%;
    }
    @media only screen and (max-width: 1440px) {
        .col-custom{
            width: 33%;
        }
    }
    @media only screen and (max-width: 720px) {
        .col-custom{
            width: 33%;
        }
    }
    @media only screen and (max-width: 480px) {
        .col-custom{
            width: 33%;
        }
    }
    .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>
<style>
    .daterangepicker .ranges li.active{
		background: #00c88b !important;
	}
	.daterangepicker td.in-range{
		background: #00c88c38;
	}
	.daterangepicker td.active, .daterangepicker td.active:hover{
		background: #00c88b;
	}
	.btnArrow{
        font-size: 25px;
        background: #f9f9f9;
        margin: 0px 10px;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
    }
    #daterange{
        background: #f9f9f9;
        border: none;
        cursor: pointer;
        border-radius: 4px;
    }
    .month{
        /* padding: 10px;
        background: #00c88a; */
    }
    .datepicker {
        padding: 20px !important;
    }
    .blink_me {
        animation: blinker 1.5s linear infinite;
    }
    .bootstrap-datetimepicker-widget button[data-action]{
        background-color: #00c88b !important;
        border-color: #00c88b !important;
    }
    @keyframes blinker {
        50% {
            opacity: .5;
        }
    }

    .fc-unthemed td.fc-today{
        background-color: #ebf8fa;

    }
    .select2, .card-header div div h5{
        font-family: "Fixture Expandend Extra light" !important;
    }
    #calendar .fc-center h2{
        color: #fff;
        font-family: "Fixture ebold", sans-serif;
    }

    .fc-day-header{
        font-family: "Fixture ebold", sans-serif;
    }

    .fc-button-primary:hover{
        background-color: rgba(255, 255, 255, 0) !important;
        border-color: rgba(255, 255, 255, 0) !important;
    }

    .btn-primary_local_disabled:hover{
        background-color: #00c88b !important;
        color: #fff !important;
        cursor: no-drop !important;
    }

    .fc-toolbar.fc-header-toolbar{
        background: linear-gradient(to right, #00c88b, #00c88b);
        margin-bottom: 0em;
        padding: 30px 0px;
        color: #fff;
    }
    .fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{
        display: flex;
        justify-content: center;
        float: none;
    }

    .fc-day{
        border: none !important;
    }
    .fc-button-primary:disabled{
        background-color: rgba(255, 255, 255, 0) !important;
        border-color: rgba(255, 255, 255, 0) !important;
        color: #fff !important;
    }
    .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active{
        background-color: rgba(255, 255, 255, 0) !important;
        border-color: rgba(255, 255, 255, 0) !important;
        color: #fff !important;
    }
    .fc-button-primary:not(:disabled).fc-button-active:focus{
        box-shadow: none !important;
    }
    .fc-button-primary:focus{
        box-shadow: none !important;
    }
    /* .fc-button-primary:disabled{
        border-color: #00c88b !important;
    }
    .fc-button-primary:not(:disabled).fc-button-active{
        border-color: #00c88b !important;
    } */
    /* .fc-button-primary:hover{
        border-color: #00c88b !important;
        background: #00d896 !important;
    } */
    .close
    {
        color: #fff;
    }

    .close:hover
    {
        color: #fff;
        text-decoration: none;
    }

    .select2-dropdown{
        z-index:999999999 !important;
    }
    h4 {
    color: #4f4866;
    font-weight: normal;
    font-size: 25px;
    font-family: Arial;
    }
    .btnsHora,.fc-prev-button,.fc-next-button,.fc-today-button,
    .fc-dayGridMonth-button,.fc-dayGridWeek-button,.fc-timeGridFourDay-button {
        background-color:rgba(255, 255, 255, 0);!important;
        border-color:rgba(255, 255, 255, 0);;
        font-family:'Fixture ebold';
        text-transform: uppercase;
        font-weight:400;
        font-size:13px;
        border-radius: 0px;
        color:#fff;
    }
    .content{
        background: #fff;
        padding: 30px;
    }
    .card-header{
        background:#fff;
    }
    .modal-header{
        background-color: #00c88b;
    }
    .modal-header h5{
        /* //font-family: 'Poppins'; */
        font-size: 35px;
        font-weight: 400;
        color: #fff;
    }
    .modal-content {
        border: 0px solid #ebedf2;
        border-radius: 0.3rem;
    }
    .modal-body h4{
        font-family:'Poppins';
        font-weight:400;
        font-size:20px;
        background:#fff;
    }
    .modal-body,.modal-footer {
        background:#fff;
    }
    .fc-center h2{
        font-family:'Poppins';
        font-weight:400;
        font-size:23px;
        color:#67666a;
    }
    .select2,.card-header div div h5{
        font-family:'Poppins';
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected],#select2-selectSala-result-v48f-0 {
        background-color: #00c88b;
        color: white;
    }
    .select2-container{
        width:100% !important;
    }
    .card-block{
        position: relative;
    }
    .text-info {
        color: #00c88b !important;
    }
    #loader {
        /*IMPORTANTE*/
        position: absolute;
        top: 50%;
        margin-top: 0px;
        margin-left:50%;
        margin-right:40%;
    }

    @media only screen and (max-width:480px){
        .content{
            background: #fff;
            padding: 0px;
        }
        #calendar{
            margin-bottom:100px;
        }
        .content-wrapper {
            padding: 40px 10px;
        }
        .fc-right{
            margin-left:-50px;
        }
        .fc-center h2{
            margin-top:-70px;
        }
        .card-block{
            margin-top: 25px;
        }
    }

    .modal-body h4{
        font-family: 'Fixture light';
    }
    .cuerpoForm{
        font-family: 'Fixture bold' !important;
    }

    #promedio-diario, #promedio-asistencias
    {
        font-family: "Fixture ebold", sans-serif;
        font-size: 1.125rem;
        color: #343a40;
    }




    /* ipad Mini Portrait */
    @media only screen and (max-width:768px){

        .btnAccionesCalendar i{
            font-size: 25px;
        }

    }


</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>
        <span class="h2 text-uppercase text-left">  Detalles de venta </span>
    </div>
</div>

<div class="card card-statistics mb-5 overflow-hidden pt-5 pb-5">
    <div class="row">
        <div class="col-9 text-right" id="filtroFechas">
            <div class="btn-group w-50">
                <button class="btnArrow" data-tipo="anterior"> < </button>
                <input class="w-100 text-center" type="text" id="daterange" name="daterange" value="{{ $inicio_mes.' / '.$fin_mes }}" />
                <button class="btnArrow" data-tipo="siguiente"> > </button>
            </div>
        </div>
    </div>
</div>

<div class="card card-statistics mb-2 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 Efectivo</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium" id="venta_efectivo">$</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">Ventas Tarjeta</p>
                <h3 class="mb-0 font-weight-medium" id="venta_tarjeta">$</h3>
                </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">Ventas total</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium text-white" id="venta_total">
                        $
                    </h3>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <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">Egresos Efectivo</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium" id="egreso_efectivo">$</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">Egresos Tarjeta</p>
                <h3 class="mb-0 font-weight-medium" id="egreso_tarjeta">$</h3>
                </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">Egresos total</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium text-white" id="egreso_total">$</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    
</div>

<div class="card card-statistics mb-2 overflow-hidden">
    <div class="row">
        <div class="card-col col-custom" >
        </div>
        <div class="card-col col-custom" >
        </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">Gran total</p>
                <div class="fluid-container">
                    <h3 class="mb-0 font-weight-medium text-white" id="gran_total">$</h3>
                </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">Detalles de ventas</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"  height="100"></canvas>

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

@endsection

@section('scripts')
<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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="{{ asset('/js/citas') }}/loadingoverlay.min.js"></script>

<script>
    let inicio = "{{ $inicio_mes}}";
	let fin = "{{ $fin_mes}}";
    var ctx = '';
    var mylineGraph = '';
    


    $( document ).ready(function() {
        actualizarDatos();
    });

        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))';



            ctx = document.getElementById('visit-sale-chart').getContext("2d");

            mylineGraph = new Chart(ctx, {
                type: "line",
                data: {
                    labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],
                    datasets: [
                    {
                        label: "Ventas Año anterior",
                        data: [45, 59, 68, 45, 45, 35, 41],
                        fill: false,
                        borderColor: "rgba(200, 200, 200, 1)",
                        backgroundColor: "rgba(200, 200, 200, .25)",
                        lineTension: 0.4,
                        pointBorderWidth: 2,
                        borderDash: [5, 5],
                        pointStyle: "rectRounded"
                    },
                    {
                        label: "Ventas Año Actual",
                        data: [65, 61, 80, 81, 51, 55, 56],
                        fill: true,
                        borderColor: "rgba(0, 200, 139, 1)",
                        backgroundColor: "rgba(0, 200, 139, .25)",
                        lineTension: 0.4,
                        pointBorderWidth: 2,
                        pointStyle: "rectRounded"
                    }
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: "Gráfico de ventas - Ejemplo de Título"
                    },
                    plugins: {
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        },
                    
                    },
                    hover: {
                        mode: 'index',
                        intersec: false
                    },
                }
            });

        }

</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();
}

    $('#daterange').daterangepicker({
        "cancelButtonClasses": "btn btn-secondary",
        "applyButtonClasses" : "btn btn-primary_local",
        ranges: {
            'Hoy': [moment(), moment()],
            'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
            'Este mes': [moment().startOf('month'), moment().endOf('month')],
            'Último mes': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        "alwaysShowCalendars": true,
        "startDate": inicio,
        "endDate": fin,
        "opens": "center",
        "locale": {
            "format": "DD-MMM-YYYY",
            "separator": " / ",
            "applyLabel": "Aplicar",
            "cancelLabel": "Cancelar",
            "fromLabel": "Desde",
            "toLabel": "Hasta",
            "customRangeLabel": "Personalizado",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Mie",
                "Jue",
                "Vie",
                "Sa"
            ],
            "monthNames": [
                "Enero",
                "Febrero",
                "Marzo",
                "Abril",
                "Mayo",
                "Junio",
                "Julio",
                "Agosto",
                "Septiembre",
                "Octubre",
                "Noviembre",
                "Diciembre"
            ],
            "firstDay": 1
        },
    });

    $(".btnArrow").click(function(){
		$.LoadingOverlay("show");

        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        var tipo = $(this).data('tipo');

        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/api/get_fecha/"+tipo+"/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            $('#daterange').data('daterangepicker').setStartDate(data.data.inicio_mes);
			$('#daterange').data('daterangepicker').setEndDate(data.data.fin_mes);

			actualizarDatos();
            $.LoadingOverlay("hide");
        })
        .fail(function(error) {
            console.log('error',error);
        });
    });

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        $.LoadingOverlay("show");
        actualizarDatos();
        $.LoadingOverlay("hide");
    });

    function actualizarDatos(){
        var result = $("#daterange").val().split('/');

        var fecha_inicio = $.trim(result[0]);
        var fecha_final = $.trim(result[1]);

        $("#tbody-citas").remove();
        $("#ceroCitas").hide();
        $("#citaCero").hide();


        $.ajax({
            type        : 'GET',
            url         : url_dinamica+"/reporte_data/"+fecha_inicio+"/"+fecha_final,
            dataType    : 'json',
            encode          : true
        })
        .done(function(data){
            var datos = (data.data);
            console.log(datos);

            if (datos == "ERROR") {
                $("#loader").hide();
                $("#ceroCitas").show();
            }
            else{
                $("#loader").hide();
                let total_ventas = parseInt(datos.total_ventas_efectivo + datos.total_ventas_tarjeta);
                $("#venta_efectivo").text('$' + datos.total_ventas_efectivo);
                $("#venta_tarjeta").text('$' + datos.total_ventas_tarjeta);
                $("#venta_total").text('$' + total_ventas);

                let total_egresos = parseInt(datos.total_egresos_efectivo + datos.total_egresos_tarjeta);
                $("#egreso_efectivo").text('$' + datos.total_egresos_efectivo);
                $("#egreso_tarjeta").text('$' + datos.total_egresos_tarjeta);
                $("#egreso_total").text('$' + total_egresos);
                
                let gran_total = parseInt(datos.total_egresos_efectivo + total_egresos);
                $("#gran_total").text('$' + total_egresos);   

                let labels_anio_actual = datos.labels_anio_actual ;
                let datos_anio_actual = datos.datos_anio_actual ;
                
                mylineGraph.data.labels = datos.labels_anio_actual;
                mylineGraph.data.datasets[0].data =  datos.datos_anio_anterior;
                mylineGraph.data.datasets[1].data =  datos.datos_anio_actual;

                //             chart.data.labels.push(label);
                // chart.data.datasets.forEach((dataset) => {
                //     dataset.data.push(data);
                // });

                mylineGraph.update();
                

                console.log(mylineGraph.data.datasets );

            }
        })
        .fail(function(error) {
            console.log('error',error);
        });
    }

</script>
@endsection