@extends('layouts.dashboard')
@section('css')
    <link href="{{ asset('css/receptores/create.css') }}" rel="stylesheet">
@endsection

@section('content')
    @if ($expira >= $caducidad - $aviso_dias_caducidad && $expira < $caducidad)
        <div class="alert alert-warning alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>¡Cuidado!</strong>
            {{ __('En ') . ($caducidad - $expira) . __(' días expira su contraseña') }}

        </div>
    @else
        @if ($expira == $caducidad)
            <div class="alert alert-danger alert-dismissable col-lg-10 col-md-12"
                style="text-align: center;margin: auto;margin-bottom: 1rem;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>¡Cuidado!</strong><br>

                {{ trans('dinvbox.advertencia_contrasenia_expira_hoy_1') }}
            </div>

            @if (isset($message))
                <div class="alert alert-success alert-dismissable col-lg-4 col-md-12"
                    style="text-align: center;margin: auto;margin-bottom: 1rem;">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>{{ $message }}</strong>
                </div>
            @endif
        @endif
    @endif

    @if ($mensaje_suscripcion == 'warning')
        <div class="alert alert-warning alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>¡Recordatorio!</strong>
            @if ($dias_vencimiento > 0)
                {{ __('En ') . $dias_vencimiento . __(' días expira su suscripción') }}
            @else
                {{ __('Hoy expira su suscripción, por favor realice el pago para evitar que su servicio sea suspendido') }}
            @endif

        </div>
    @endif
    @if ($mensaje_suscripcion == 'danger')
        <div class="alert alert-danger alert-dismissable col-lg-4 col-md-12"
            style="text-align: center;margin: auto;margin-bottom: 1rem;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>¡Aviso!</strong>

            {{ __(' Su suscripción ha expirado, por favor realice el pago para poder seguir utilizando el servicio') }}
        </div>
    @endif


    <style>
        .stat-widget-five .stat-icon {
            font-size: 50px;
            line-height: 50px;
            position: absolute;
            left: 30px;
            top: 20px;
        }

        .stat-widget-five .stat-text {
            color: #455a64;
            font-size: 20px;
        }

        .stat-widget-five {
            min-height: 60px;
        }

        .card .box-title {
            font-weight: 600;
            font-size: 1em;
            padding: 5px 0;
        }

        .order-table {
            position: relative;
        }

        .ov-h {
            overflow: hidden;
        }

        .card-info .card-body {
            float: left;
            padding: 1.25em;
            position: relative;
            width: 100%;
        }

        .card-info {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
        }

        .card-info {
            margin-bottom: 1.875em;
            border-radius: 5px;
            padding: 0;
            border: 0px solid transparent;
            -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
        }

        .stat-widget-five .stat-content {
            margin-left: 100px;
            padding: 8px;
        }

        .dib {
            display: inline-block;
        }

        .stat-widget-five .stat-heading {
            color: #99abb4;
            font-size: 12px;
        }

        .flat-color-1 {
            color: #139d7d;
        }

        .flat-color-5 {
            color: #105e7b;
        }

        .flat-color-3 {
            color: #1a365e;
        }

        .flat-color-4 {
            color: #1086ac;
        }

        #weatherWidget .currentDesc {
            color: #ffffff !important;
        }

        .traffic-chart {
            min-height: 335px;
        }

        #flotPie1 {
            height: 150px;
        }

        #flotPie1 td {
            padding: 3px;
        }

        #flotPie1 table {
            top: 20px !important;
            right: -1px !important;
        }

        .chart-container {
            display: table;
            min-width: 350px;
            text-align: left;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #flotLine5 {
            height: 105px;
        }

        #flotBarChart {
            height: 150px;
        }

        #cellPaiChart {
            height: 160px;
        }

        .table-stats table th,
        .table-stats table td {
            border: none;
            border-bottom: 1px solid #e8e9ef;
            color: #868e96;
            font-size: 12px;
            font-weight: normal;
            padding: .75em 1.25em;
            text-transform: uppercase;
        }

        .order-table .badge-complete {
            background: #139d7d;
        }

        .order-table .badge-pending {
            background: #db3546;
        }

        .order-table .badge {
            color: white;
            padding: 10px;
            text-transform: uppercase;
            font-weight: normal;
        }
    </style>

    <div class="row d-flex justify-content-center">
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-tab" id="card-registro" style="background-color:rgba(0,0,0,.04)"
                    onclick="muestra('div_plan','div_facturacion');showCleinteData(this);">
                    <a style="cursor: pointer;">
                        <div class="stat-widget-five">
                            <div class="">
                                <div class="text-center">
                                    <div class="stat-text" style="line-height: 50px;"><span><b>Mi plan</b></span>
                                    </div>
                                    <!-- <div class="stat-heading">Generales</div>-->
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card">
                <div class="card-tab" id="card-direcciones"
                    onclick="muestra('div_facturacion','div_plan');showCleinteDireccion(this);comprobantesRecientes({{ $id_mat_suc }});clientesEstadisticas({{ $id_mat_suc }});">
                    <a style="cursor: pointer;">
                        <div class="stat-widget-five">
                            <div class="">
                                <div class="text-center">
                                    <div class="stat-text" style="line-height: 50px;">
                                        <span><b>Estadísticas del periodo</b></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <div id="div_plan" style="">
        <div class="row mb-2">
            <div class="col-lg-3 col-md-6">
                <div class="card card-info">
                    <div class="card-body">
                        <div class="stat-widget-five">
                            <div class="stat-icon dib flat-color-4">
                                <i class="pe-7s-albums"></i>
                            </div>
                            <div class="stat-content">
                                <div class="text-left dib">
                                    <div class="stat-text">{{ number_format($timbres_paquete, 0, '.', ',') }} </div>
                                    <div class="stat-heading">Saldo de timbres del paquete</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card card-info">
                    <div class="card-body">
                        <div class="stat-widget-five">
                            <div class="stat-icon dib flat-color-4">
                                <i class="pe-7s-box1"></i>
                            </div>
                            <div class="stat-content">
                                <div class="text-left dib">
                                    <div class="stat-text">{{ number_format($timbres_comprados, 0, '.', ',') }}</div>
                                    <div class="stat-heading">Saldo de timbres comprados</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card card-info">
                    <div class="card-body">
                        <div class="stat-widget-five">
                            <div class="stat-icon dib flat-color-4">
                                <i class="pe-7s-box2"></i>
                            </div>
                            <div class="stat-content">
                                <div class="text-left dib">
                                    <div class="stat-text">{{ number_format($timbres_excedentes, 0, '.', ',') }}</div>
                                    <div class="stat-heading">Timbres excedentes</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card card-info">
                    <div class="card-body">
                        <div class="stat-widget-five">
                            <div class="stat-icon dib flat-color-4">
                                <i class="pe-7s-date"></i>
                            </div>
                            <div class="stat-content">
                                <div class="text-left dib">
                                    <div class="stat-text">
                                        {{ isset($planes_emisores[0]->fecha_proximo_pago) ? $planes_emisores[0]->fecha_proximo_pago : 'Emisor sin plan contratado' }}
                                    </div>
                                    <div class="stat-heading">Próximo cobro</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6 col-md-6 m-0 p-1 ">
                <div class="card">
                    <div class="card-header ">
                        <div class="col-md-7">
                            <label id="label_descripcion">Informaci&oacute;n detallada de mi plan</label>
                        </div>
                        @can('compras.online')
                            <div class="col-md-5">
                                <div class="card-tools ">
                                    <div class="dropdown for-message">
                                        @if (session('bloqueo_modulos') != 'S')
                                            <button class="btn btn-primary dropdown-toggle float-right" type="button"
                                                id="message" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                                <span> Acciones rápidas</span>
                                            </button>
                                            <div class="dropdown-menu" x-placement="bottom-start"
                                                style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(1481px, 38px, 0px);">
                                                <p class="ml-5 mr-5 mt-1" style="color: red">¿Qué desea hacer?</p>
                                                <a class="dropdown-item media"
                                                    href="{{ route('timbres.create', ['txt_id_emisor' => session('ses_id_emisor'), 'txt_rfc_emisor' => session('ses_rfc_emisor')]) }}">
                                                    <div class="message media-body">
                                                        <span class="name">Comprar timbres</span>
                                                    </div>
                                                </a>
                                                <a class="dropdown-item media"
                                                    href="{{ route('planes.suscripcion', ['txt_id_emisor' => session('ses_id_emisor'), 'txt_rfc_emisor' => session('ses_rfc_emisor')]) }}">
                                                    <div class="message media-body">
                                                        <span class="name">Pagar suscripción</span>
                                                    </div>
                                                </a>
                                                <a class="dropdown-item media"
                                                    href="{{ route('planes.create', ['txt_id_emisor' => session('ses_id_emisor'), 'txt_rfc_emisor' => session('ses_rfc_emisor')]) }}">
                                                    <div class="message media-body">
                                                        <span class="name">Cambiar de plan</span>
                                                    </div>
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endcan
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-body card-block">
                                    <div class="row form-group">
                                        <div class="col col-md-7"><span><b style="color:#777373">Plan</b></span>
                                        </div>
                                        <div class="col-12 col-md-5">
                                            <div class="row form-group">
                                                <div class="col-12 col-md-9 p-0">
                                                    <span>{{ $plan_actual->nombre }}
                                                        {{ $plan_actual->periodicidad }}</span>
                                                </div>
                                                <div class="col-12 col-md-3 text-left m-0 p-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row form-group">
                                        <div class="col col-md-7"><span><b style="color:#777373">Periodo actual</b></span>
                                        </div>
                                        <div class="col-12 col-md-5">
                                            <div class="row form-group">
                                                <div class="col-12 col-md-9 p-0">
                                                    <span>{{ $plan_actual->fecha_inicio_facturacion }} al
                                                        {{ $plan_actual->fecha_proximo_pago }} </span>
                                                </div>
                                                <div class="col-12 col-md-3 text-left m-0 p-0">
                                                </div>

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

                                    <div class="row form-group">
                                        <div class="col col-md-7"><span><b style="color:#777373">Fecha de corte</b></span>
                                        </div>
                                        <div class="col-12 col-md-5">
                                            <div class="row form-group">
                                                <div class="col-12 col-md-5 p-0">
                                                    <span>{{ $plan_actual->fecha_corte }}</span>
                                                </div>
                                                <div class="col-12 col-md-7 text-left m-0 p-0">
                                                </div>

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

                                    <div class="row form-group">
                                        <div class="col col-md-7"><span><b style="color:#777373">Timbres de regalo
                                                    incluidos en el plan</b></span></div>
                                        <div class="col-12 col-md-5">
                                            <div class="row form-group">
                                                <div class="col-12 col-md-9 p-0">
                                                    <span>{{ $plan_actual->no_timbre }}</span>
                                                </div>
                                                <div class="col-12 col-md-3 text-left m-0 p-0">

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

                                    <div class="row form-group">
                                        <div class="col col-md-7"><span><b style="color:#777373">Timbres
                                                    comprados en el periodo</b></span>
                                        </div>
                                        <div class="col-12 col-md-5">
                                            <div class="row form-group">
                                                <div class="col-12 col-md-9 p-0">
                                                    <span> {{ $total_timbres }}</span>
                                                </div>
                                                <div class="col-12 col-md-3 text-left m-0 p-0">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col col-md-7"><span><b style="color:#777373">Total de timbres del periodo</b></span>
                                        </div>
                                        <div class="col-12 col-md-5">
                                            <div class="row form-group">
                                                <div class="col-12 col-md-9 p-0">
                                                    <span> {{ $total_timbres + $plan_actual->no_timbre }}</span>
                                                </div>
                                                <div class="col-12 col-md-3 text-left m-0 p-0">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if ($isfunctionalityActived)
                                <div class="col-lg-12">
                                    <div class="col-12">
                                        <label id="label_descripcion"><strong>Informaci&oacute;n de funcionalidades activadas</strong> </label>
                                    </div>
                                    <div class="card-body card-block">
                                        <div class="row form-group">
                                            <div class="col col-md-7"><span><b style="color:#777373">Funcionalidad</b></span>
                                            </div>
                                            <div class="col-12 col-md-5">
                                                <div class="row form-group">
                                                    <div class="col-12 col-md-9 p-0">
                                                        <span>Listas negras</span>
                                                    </div>
                                                    <div class="col-12 col-md-3 text-left m-0 p-0">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="row form-group">
                                            <div class="col col-md-7"><span><b style="color:#777373">Periodo actual</b></span>
                                            </div>
                                            <div class="col-12 col-md-5">
                                                <div class="row form-group">
                                                    <div class="col-12 col-md-9 p-0">
                                                        <span>{{ date('Y-m-d', strtotime($funcionalidad_orden->fecha_inicio_facturacion)) }} al
                                                            {{ date('Y-m-d', strtotime($funcionalidad_orden->fecha_fin_facturacion )) }} </span>
                                                    </div>
                                                    <div class="col-12 col-md-3 text-left m-0 p-0">
                                                    </div>

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

                                    </div>
                                </div>
                            @endif

                            

                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.card-body -->
            </div>
            <!--
                        <div class="col-6 col-md-6 m-0 p-1 ">
                            <div class="card">
                                <div class="card-header ">
                                    <div class="col-md-11">
                                        <label id="label_descripcion">Compras en el periodo</label>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="card-tools ">

                                        </div>
                                    </div>
                                </div>
                               
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">

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

    <div id="div_facturacion" style="display:">
        <div class="row mb-0">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="box-title float-left">&Uacute;ltimos 10 comprobantes</h4>
                        <div class="dropdown for-message">
                            @if (session('bloqueo_modulos') != 'S')
                                <button class="btn btn-primary dropdown-toggle float-right" type="button" id="message"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span> Acciones rápidas</span>
                                </button>
                                <div class="dropdown-menu" x-placement="bottom-start"
                                    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(1481px, 38px, 0px);">
                                    <p class="ml-5 mr-5 mt-1" style="color: red">¿Qué desea hacer?</p>
                                    <a class="dropdown-item media" href="{{ route('cfdi.create') }}">
                                        <div class="message media-body">
                                            <span class="name">Nueva factura</span>
                                        </div>
                                    </a>
                                    <a class="dropdown-item media" href="{{ route('cfdi.index') }}">
                                        <div class="message media-body">
                                            <span class="name">Buscar factura</span>
                                        </div>
                                    </a>
                                    <a class="dropdown-item media" href="{{ route('receptores.create') }}">
                                        <div class="message media-body">
                                            <span class="name">Nuevo cliente</span>
                                        </div>
                                    </a>
                                    <a class="dropdown-item media" href="{{ route('conceptos.create') }}">
                                        <div class="message media-body">
                                            <span class="name">Nuevo producto/servicio</span>
                                        </div>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="tablaComprobantes" class="tdl-content table-responsive" style="height: 14rem !important;overflow-y: scroll;">

                            <!-- Aquiba la tabla -->

                        </div> <!-- /.table-stats -->
                    </div>
                </div> <!-- /.card -->
            </div> <!-- /.col-lg-8 -->
        </div>

        <div class="row" id="clientes-estadisticas" >
            
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('js/init/jquery.flot.min.js') }}"></script>
    <script src="{{ asset('js/init/jquery.flot.pie.min.js') }}"></script>
    <!--Local Stuff-->
    <script>
        function muestra(div1, div2) {
            document.getElementById(div1).style.display = '';
            document.getElementById(div2).style.display = 'none';
        }

        var showCleinteData = function(e) {
            e.style.background = 'rgba(0, 0, 0, 0.04)';
            document.getElementById('card-direcciones').style.backgroundColor = 'white';
        }

        var showCleinteDireccion = function(e) {
            e.style.background = 'rgba(0, 0, 0, 0.04)';
            document.getElementById('card-registro').style.backgroundColor = 'white';
        }

        function comprobantesRecientes (id_mat_suc) {
            $.ajax({
                url: '/home/recientes',
                method: 'POST',
                data: {
                    "id_mat_suc" : id_mat_suc,
                    "fecha_inicio" : '{{$plan_actual->fecha_inicio_facturacion}}',
                    "fecha_corte" : '{{$plan_actual->fecha_corte}}',
                },
                success: function(response) {
                    $('#tablaComprobantes').html(response);
                },
                error: function(xhr) {
                    console.error("Error al cargar los comprobantes:", xhr);
                }
            });
        }

        function clientesEstadisticas (id_mat_suc) {
            $.ajax({
                url: '/home/clientes',
                method: 'POST',
                data: {
                    "id_mat_suc" : id_mat_suc,
                    "fecha_inicio" : '{{$plan_actual->fecha_inicio_facturacion}}',
                    "fecha_corte" : '{{$plan_actual->fecha_corte}}',
                },
                success: function(response) {
                    $('#clientes-estadisticas').html(response);
                },
                error: function(xhr) {
                    console.error("Error al cargar los comprobantes:", xhr);
                }
            });
        } 

        jQuery(document).ready(function($) {
            "use strict";

            $('#div_facturacion').hide();
        });
    </script>
@endsection