@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;
    }


    .mini-title{
        font-size: 16px !important;
    }

    .mini-description{
        font-size: 12px !important;
        font-weight: 300 !important;
    }

    .text-align-center{
        text-align: center;
    }

    /* 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" />
                <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> -->
                    <p class="card-text mb-0">Ventas por Citas</p>
                    <div class="fluid-container">
                        <!-- <h3 class="mb-0 font-weight-medium" id="venta_efectivo">$</h3> -->
                        <h3 class="mb-0 font-weight-medium" id="venta_citas">$</h3>
                    </div>
                </div>
                <div class="wrapper text-center text-sm-left ml-5">
                    <p class="card-text mb-0">Periodo Anterior</p>
                    <div class="fluid-container">
                        <!-- <h3 class="mb-0 font-weight-medium" id="total_ventas_efectivo_anterior">$0</h3> -->
                        <h3 class="mb-0 font-weight-medium" id="total_ventas_citas_anterior">$0</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">Ventas Tarjeta</p> -->
                    <p class="card-text mb-0">Ventas por Productos</p>
                    <!-- <h3 class="mb-0 font-weight-medium" id="venta_tarjeta">$</h3> -->
                    <h3 class="mb-0 font-weight-medium" id="venta_productos">$</h3>
                </div>

                <div class="wrapper text-center text-sm-left ml-5">
                <p class="card-text mb-0">Periodo Anterior</p>
                <!-- <h3 class="mb-0 font-weight-medium" id="total_ventas_tarjeta_anterior">$0</h3> -->
                    <h3 class="mb-0 font-weight-medium" id="total_ventas_productos_anterior">$0</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-1 text-white text-align-center">Total de ventas </p>
                <div class="fluid-container">

                <div class="row mt-4">
                    <div class="col">
                        <h3 class="mb-0 font-weight-medium text-white" id="venta_total">

                        </h3>
                    </div>

                    <div class="col">
                        <h3 class="text-white ml-2" id="anio_total"></h3>
                        <p class="mini-description text-align-center text-white">año/prev.</p>
                    </div>

                    <div class="col">
                        <h3 class="text-white ml-2" id="periodo_total"></h3>
                        <p class="mini-description text-align-center text-white">per/prev.</p>
                    </div>

                </div>
                </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-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 Tarjeta</p>
                <h3 class="mb-0 font-weight-medium" id="egreso_tarjeta">$</h3>
                </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 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 Totales</p>
                        <div class="fluid-container">
                            <h3 class="mb-0 font-weight-medium" id="citas_totales">0</h3>
                        </div>
                    </div>

                    <div class="wrapper text-center text-sm-left ml-5">
                        <p class="card-text mb-0">Periodo Anterior</p>
                        <div class="fluid-container">
                            <h3 class="mb-0 font-weight-medium" id="citas_anteriores">0</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 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 Nuevas</p>
                        <div class="fluid-container">
                            <h3 class="mb-0 font-weight-medium" id="citas_nuevas">0</h3>
                        </div>
                    </div>

                    <div class="wrapper text-center text-sm-left ml-5">
                        <p class="card-text mb-0">Periodo Anterior</p>
                        <div class="fluid-container">
                            <h3 class="mb-0 font-weight-medium" id="citas_nuevas_anteriores">0</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">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="col row" id="contenedor-citas">
      
    </div>
       
    <div style="background-color: #00c88a; width: 34%" >
            <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 justify-content-center card" style="margin: 20px 0px; flex-direction: row !important;">
    <div class="col-xl-6 col-lg-6">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <table id="tabla-citas" cellpadding="5" cellspacing="0" style="width: 100%;">
                    <thead></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-xl-6 col-lg-6">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                <canvas id="myChart" class="mt-4" width="100%"></canvas>
            </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>

<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">Detalle de periodo</h4>
                    <div id="period-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                </div>

                <canvas id="period-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>
     window.addEventListener('resize', () => {
                myChart.resize();
            
        });
</script>

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


    $( 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");
            chartHora = document.getElementById('myChart').getContext("2d");

             myChart = new Chart(chartHora,  {
                    type: 'bar',
                    data: [],
                    options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'top' },
                        title: {
                        display: true,
                        text: 'Citas por hora y empleado'
                        }
                    }
                }
            });

            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 - Año"
                    },
                    plugins: {
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        },
                    
                    },
                    hover: {
                        mode: 'index',
                        intersec: false
                    },
                }
            });

        }


        if ($("#period-sale-chart").length) {

            periodChart = document.getElementById('period-sale-chart').getContext("2d");

            periodGraph = new Chart(periodChart, {
                type: "line",
                data: {
                    labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],
                    datasets: [
                    {
                        label: "Ventas Periodo anterior",
                        data: [],
                        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 Periodo Actual",
                        data: [],
                        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 - Periodo"
                    },
                    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>';
                            '<a href="#" class="btnAccionesCalendar text-info" onclick="createICSAndOpenWhatsApp(event, element)" title="Enviar WhatsApp + Descargar invitación"><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_citas").text('$' + datos.total_ventas_citas);
                $("#venta_productos").text('$' + datos.total_ventas_productos);

                $("#total_ventas_citas_anterior").text('$' + datos.total_ventas_citas_anterior);
                $("#total_ventas_productos_anterior").text('$' + datos.total_ventas_productos_anterior);
                
                $("#venta_total").text('$' + datos.total_ventas);
                $("#anio_total").text('$' + datos.total_ventas_anio_anterior);
                $("#periodo_total").text('$' + datos.total_ventas_anterior);
                
                $("#total_ventas_efectivo_anterior").text('$' + datos.total_ventas_efectivo_anterior);
                $("#total_ventas_tarjeta_anterior").text('$' + datos.total_ventas_tarjeta_anterior);


                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_ventas - total_egresos);
                $("#gran_total").text('$' + gran_total);   

                $("#citas_totales").text(datos.citas_totales);
                $("#citas_anteriores").text(datos.citas_totales_anterior);


                $("#citas_nuevas").text(datos.total_clientes_nuevos);
                $("#citas_nuevas_anteriores").text(datos.total_clientes_nuevos_anterior);

                
                let labels_anio_actual = datos.labels_periodo_actual ;
                let datos_anio_actual = datos.datos_periodo_actual ;
                let citasHora = datos.citas_hora;

                function parseHora(hora) {
                    let [time, ampm] = hora.split(" ");
                    let [h, m] = time.split(":").map(Number);

                    if (ampm.toLowerCase() === "pm" && h !== 12) h += 12;
                    if (ampm.toLowerCase() === "am" && h === 12) h = 0;

                    return h * 60 + (m || 0);
                }

                let $thead = $("#tabla-citas thead");
                let $tbody = $("#tabla-citas tbody");

                $thead.empty();
                $tbody.empty();

                let horasUnicas = new Set();
                $.each(citasHora, function (id, data) {
                $.each(data.horas, function (hora, total) {
                    horasUnicas.add(hora);
                });
                });

                horasUnicas = Array.from(horasUnicas).sort((a, b) => parseHora(a) - parseHora(b));

                console.log('horasUnicas', horasUnicas, citasHora);

                let headerRow = "<tr><th></th>";
                $.each(citasHora, function (id, data) {
                headerRow += `<th>${data.nombre_empleado}</th>`;
                });
                headerRow += "</tr>";
                $thead.append(headerRow);

                $.each(horasUnicas, function (i, hora) {
                let row = `<tr><td>${hora}</td>`;
                $.each(citasHora, function (id, data) {
                    let total = data.horas[hora] !== undefined ? data.horas[hora] : "-";
                    row += `<td>${total}</td>`;
                });
                row += "</tr>";
                $tbody.append(row);
                });


               const allHours = Array.from( new Set(Object.values(citasHora).flatMap(e => Object.keys(e.horas)))).sort((a, b) => parseHora(a) - parseHora(b));

                const datasets = Object.values(citasHora).map((empleado, idx) => {
                    return {
                    label: empleado.nombre_empleado,
                    data: allHours.map(hora => empleado.horas[hora] || 0), 
                    backgroundColor: `hsl(${idx * 80}, 70%, 50%)`
                    };
                });

                const data = {
                    labels: allHours,
                    datasets: datasets
                };


               
                myChart.data = data;
                myChart.update();

                mylineGraph.data.labels = datos.labels_periodo_actual;
                mylineGraph.data.datasets[0].data =  datos.datos_anio_anterior;
                mylineGraph.data.datasets[1].data =  datos.datos_periodo_actual;

                $("#contenedor-citas").empty();


                let empleados = datos.citas_empleados;
                // let empleadosAnterior = datos.citas_empleados_anterior;

                $.each(empleados, function(index, empleado) {
                    let card = `
                        <div class="card-col col">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-center flex-column flex-sm-row">
                                    <i class="mdi mdi-calendar 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">${empleado.nombre}</p>
                                        <div class="fluid-container">
                                            <h3 class="mb-0 font-weight-medium">${empleado.total}</h3>
                                        </div>
                                    </div>

                                    <div class="wrapper text-center text-sm-left ml-5">
                                        <div class="fluid-container">
                                            <p class="card-text mb-0">Periodo anterior</p>
                                            <h3 class="mb-0 font-weight-medium">${empleado.total_anterior}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                    
                    $("#contenedor-citas").append(card);
                });

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

                mylineGraph.update();

               periodGraph.data.labels = datos.labels_periodo_actual.map((labelActual, index) => {
                    const labelAnterior = datos.labels_periodo_anterior[index] || 'N/A';
                    
                    // Acortar si son muy largos (ej: "Ene-23 / Ene-22")
                    const shortActual = labelActual.length > 6 ? labelActual : labelActual;
                    const shortAnterior = labelAnterior.length > 6 ? labelAnterior : labelAnterior;
                    
                    return `${shortActual} / ${shortAnterior}`;
                });

                // Tooltip con información completa
                periodGraph.options.plugins.tooltip = {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        title: function(tooltipItems) {
                            const dataIndex = tooltipItems[0].dataIndex;
                            const fullActual = datos.labels_periodo_actual[dataIndex];
                            const fullAnterior = datos.labels_periodo_anterior[dataIndex] || 'N/A';
                            return `Actual: ${fullActual} | Anterior: ${fullAnterior}`;
                        }
                    }
                };

                periodGraph.data.datasets[0].data = datos.datos_periodo_anterior;
                periodGraph.data.datasets[1].data = datos.datos_periodo_actual;
                periodGraph.update();


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

</script>

<script>
/**
 * Crea y descarga un .ics, y abre WhatsApp en nueva pestaña.
 * Asume:
 *  - element.fecha = "YYYY-MM-DD"
 *  - element.hora  = "HH:mm"
 *  - element.cliente, element.telefono, element.ubicacion, element.duracion_min (opcional), element.descripcion (opcional)
 */
function pad(n){ return n<10 ? '0'+n : n; }

function toICSDateUTC(date){ // date: JS Date (local) -> returns YYYYMMDDTHHMMSSZ
  return date.getUTCFullYear()
    + pad(date.getUTCMonth()+1)
    + pad(date.getUTCDate())
    + 'T'
    + pad(date.getUTCHours())
    + pad(date.getUTCMinutes())
    + pad(date.getUTCSeconds())
    + 'Z';
}

function escapeICSText(text){
  if(!text) return '';
  return String(text)
    .replace(/\\/g, '\\\\')
    .replace(/;/g, '\\;')
    .replace(/,/g, '\\,')
    .replace(/\r\n|\r|\n/g, '\\n');
}

async function createICSAndOpenWhatsApp(ev, element){
  ev.preventDefault();

  // --- Valores por defecto y extracción ---
  const fecha = element.fecha; // "2025-10-03"
  const hora = element.hora;   // "16:30"
  const cliente = element.cliente || '';
  const telefono = String(element.telefono || '').replace(/\D/g,''); // solo dígitos
  const ubicacion = element.ubicacion || 'DICKISS BARBERSHOP';
  const descripcion = element.descripcion || `Cita DICKISS BARBERSHOP - Cliente: ${cliente}`;
  const duracionMin = parseInt(element.duracion_min) || 60; // por defecto 60 minutos

  if (!telefono) return alert('Número de teléfono requerido');

  // Construir Date local a partir de fecha+hora (sin zona explícita; JS usará la zona del navegador)
  const localISO = `${fecha}T${hora}:00`;
  const startLocal = new Date(localISO); // interpretado en la zona del navegador
  if (isNaN(startLocal.getTime())){
    console.error('Fecha/hora no válidas:', localISO);
    alert('Error: formato de fecha/hora inválido para generar .ics.');
    return;
  }

  const endLocal = new Date(startLocal.getTime() + duracionMin * 60000);

  // Tiempos en formato UTC para máxima compatibilidad (usa Z)
  const dtstamp = toICSDateUTC(new Date());
  const dtstart = toICSDateUTC(startLocal);
  const dtend   = toICSDateUTC(endLocal);

  // UID único simple
  const uid = 'cita-' + Date.now() + '@dickiss-barbershop.com';

  // Construir campos (escape de texto importante)
  const summary = escapeICSText(`Cita DICKISS BARBERSHOP`);
  const desc = escapeICSText(`${descripcion}\n\nPor favor confirmar asistencia.`);

  // Construir contenido ICS
  const icsLines = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//DICKISS BARBERSHOP//ES',
    'CALSCALE:GREGORIAN',
    'METHOD:REQUEST',
    'BEGIN:VEVENT',
    `UID:${uid}`,
    `DTSTAMP:${dtstamp}`,
    `DTSTART:${dtstart}`,
    `DTEND:${dtend}`,
    `SUMMARY:${summary}`,
    `DESCRIPTION:${desc}`,
    `ORGANIZER;CN="DICKISS BARBERSHOP":mailto:info@dickiss-barbershop.com`,
    `LOCATION:${ubicacion}`,
    'SEQUENCE:0',
    'STATUS:CONFIRMED',
    'TRANSP:OPAQUE',
    'BEGIN:VALARM',
    'ACTION:DISPLAY',
    'DESCRIPTION:Recordatorio',
    'TRIGGER:-PT15M',
    'END:VALARM',
    'END:VEVENT',
    'END:VCALENDAR'
  ];
  const icsContent = icsLines.join('\r\n');

  // Aplicar reglas de plegado de líneas ICS
  const icsFolded = foldICSLines(icsContent);

  try {
    // Guardar archivo ICS en el servidor
    const formData = new FormData();
    formData.append('ics_content', icsFolded);
    formData.append('fecha', fecha);
    formData.append('hora', hora);
    formData.append('cliente', cliente);

    const response = await fetch(url_dinamica + '/api/save-ics-file', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();

    if (result.success) {
      const fileUrl = result.data.file_url;

      const waText = encodeURIComponent(
        `Buenos días Sr. *${cliente}*, su cita quedó agendada con los siguientes datos:\n`
        + `📅 Fecha: *${fecha.split('-').reverse().join('/')}*\n`
        + `⏰ Hora: *${hora}*\n\n`
        + `📎 Archivo de calendario: ${fileUrl}\n\n`
        + `¡Que tenga un excelente día!`
      );

      // Abrir WhatsApp en nueva pestaña (prefijo +521 si es México; mantenemos solo dígitos)
      const phoneForWa = telefono.startsWith('521') ? telefono : ('521' + telefono.replace(/^0+/,''));
      const waUrl = `https://api.whatsapp.com/send?phone=${phoneForWa}&text=${waText}`;

      // Abrir en nueva pestaña
      window.open(waUrl, '_blank');
    } else {
      alert('Error al guardar el archivo: ' + result.message);
    }
  } catch (error) {
    console.error('Error:', error);
    alert('Error al procesar la solicitud');
  }
}
</script>
@endsection