@extends('plantilla.master')
@section('title', 'Inicio')
@section('contenido_title', 'Inicio')
@section('scripts')
    <link rel="stylesheet" href="{{ asset('plugins/calendar/calendar.css') }}">
@endsection
@section('contenido')
    @include('plantilla.mensajes')
    <!-- NOTIFICACIONES ALERT -->
    <div class="row">
        <div class="col-sm-12 col-md-12 mt-3">
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <h3> <strong>¡Atención!</strong></h3>
                <p>
                    Hemos actualizado nuestro modelo de negocio, a partir de enero la plataforma paso a ser de renta
                    mensual,
                    a los clientes que aun tengan el modelo de adquisición de paquete de timbres se les respetara su
                    contrato hasta el 06 de junio de 2024. Si al
                    termino de periodo aun cuenta con timbres, se hara una bonificacion del 50% en los 2 primeros meses del
                    paquete seleccionado.
                    <a href="javascript:tablaPrecios();">Tabla de precios</a>.
                </p>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-sm-12 col-md-6">
            <div class="btn-group" role="group" aria-label="Basic example">
                <a role="button" class="btn btn-warning" href="javascript:tablaPrecios();" data-placement="bottom"
                    title="Tabla de Precios">
                    <i class="fa fa-wallet"></i> Tabla de Precios
                </a>
                <a role="button" class="btn btn-success d-none" href="{{ route('empleado.create') }}" onclick="saveid()"
                    data-placement="bottom" title="Nueva registro" id="newRow">
                    <i class="fas fa-plus"></i> Registrar empleado
                </a>
            </div>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-sm-12 col-md-12 mb-2">
            @include('plantilla.timbres')
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-prepend">
                        <label class="input-group-text  bg-info text-white" for="empresa">Empresa</label>
                    </span>
                    <select class="selectpicker" data-width="auto" data-live-search="true" name="empresa" id="empresa">
                        @foreach ($empresas as $empresa)
                            <option value="{{ $empresa->CNEMPRESA }}">{{ $empresa->DXEMPRESA }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- .col .card  Informacion de la cuenta -->
        <div class="col-sm-12 col-md-12 col-lg-4 mb-2">
            <div class="card">
                <div class="card-header bg-danger text-white">Información de la cuenta</div>
                <div class="card-body">
                    <div class="card-text">
                        <div class="row">
                            <div class="col-sm-12 col-md-12 mb-2">
                                <ul class="list-group">
                                    <li
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <strong>Timbres:</strong>
                                        <span id="timbres-info">
                                            <div class="spinner-grow spinner-grow-sm" role="status">
                                                <span class="sr-only">Espere...</span>
                                            </div>
                                        </span>
                                    </li>
                                    <li
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <strong>Paquete:</strong>
                                        <span id="paquete">
                                            <div class="spinner-grow spinner-grow-sm" role="status">
                                                <span class="sr-only">Espere...</span>
                                            </div>
                                        </span>
                                    </li>
                                    <li
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <strong>Fecha de renovación:</strong>
                                        <span id="fecha-renovacion">
                                            <div class="spinner-grow spinner-grow-sm" role="status">
                                                <span class="sr-only">Espere...</span>
                                            </div>
                                        </span>
                                    </li>
                                    <li
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <strong>Empleados:</strong>
                                        <span id="max-empleados">
                                            <div class="spinner-grow spinner-grow-sm" role="status">
                                                <span class="sr-only">Espere...</span>
                                            </div>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .col .card  Nominas Recientes -->
        <div class="col-sm-12 col-md-12 col-lg-4 mb-2">
            <div class="card">
                <div class="card-header bg-info text-white">Nóminas Recientes</div>
                <div class="card-body">
                    <div class="card-text">
                        <div id="table" class="table-responsive">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .col .card  Calendario wire:-->
        <div class="col-sm-12 col-md-12 col-lg-4">
            <div id='wrap'>
                <div id='calendar'></div>
            </div>
        </div>
    </div>

    <hr />
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-6 mb-2">
            <div class="card">
                <div class="card-header bg-info text-white">Gráfica de empleados</div>
                <div class="card-body mb-5">
                    <p class="card-text embed-responsive">
                        <canvas id="charts_empleados" class="chartjs" style="display: block; width: 100%;"></canvas>
                    </p>
                </div>
            </div>

        </div>
        <div class="col-xs-12 col-md-12 col-lg-6" id="contenedor">
            <div class="card">
                <div class="card-header bg-info text-white">Cumpleaños</div>
                <p class="card-text table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Nombre</th>
                            <th scope="col">Día</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
                </p>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('endscript')
    <script src="{{ asset('plugins/chartjs/chart.min.js') }}"></script>
    <script src="{{ asset('plugins/chartjs/chart.bundle.min.js') }}"></script>
    <script src="{{ asset('js/inicio.js') }}"></script>
    <script src="{{ asset('plugins/calendar/calendar.js') }}"></script>
    <script src="{{ asset('plugins/calendar/moment-with-locales.min.js') }}"></script>
    <script src="{{ asset('js/confCalendar.js') }}"></script>
    <script>
        const linkNewRow = document.getElementById('newRow');
        var activos, prealtas, bajas;
        var actual = 0;
        var creado = false;
        var empleados;
        var empresa = document.getElementById("empresa");
        $(document).ready(function(e) {

            empresa.addEventListener("change", function() {
                actual = 0;
                saveid();
                infoLicencia(false);
                cargaGraficoEmpleados();
                consultaNominas();
                cargaCumpleaniosMes();
            });



            infoLicencia(false);
            cargaGraficoEmpleados();
            consultaNominas();
            cargaCumpleaniosMes();

            $('#empresa option[value="' + getCookie("empresa") + '"]').attr(
                "selected",
                true
            );
            confCalendar();
        });

        const tablaPrecios = () => {
            // paquete | mensualidad | maximo timbres | maximo empleados
            const precios = [
                ['Básico', '$ 150.00', '22', '5'],
                ['Estándar', '$ 300.00', '90', '20'],
                ['Negocio', '$ 500.00', '220', '50'],
                ['Pyme', '$ 900.00', '450', '100'],
                ['Empresarial', '$ 2,000.00', '1300', '300'],
                ['Despachos Contables', 'Contactar', '--', '']
            ];
            let html = '<div class="table-responsive"><table class="table table-striped table-sm table-hover">';
            html +=
                '<thead><tr><th>Paquete</th><th>Mensualidad</th><th>Máximo Timbres</th><th>Máximo Empleados</th></tr></thead>';
            html += '<tbody>';
            precios.forEach(precio => {
                html += '<tr>';
                precio.forEach(p => {
                    html += `<td>${p}</td>`;
                });
                html += '</tr>';
            });
            html += '</tbody>';
            html += '</table></div>';
            Swal.fire({
                title: 'Tabla de Precios',
                html: html,
                showCloseButton: true,
                showCancelButton: false,
                focusConfirm: false,
                confirmButtonText: 'Cerrar',
            });
        }
    </script>
@endsection