@extends('layouts.backend')

@section('content')
    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Main Title</h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">Examples</li>
                        <li class="breadcrumb-item active" aria-current="page">Blank</li>
                    </ol>
                </nav>
            </div>
       </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        <!-- Your Block -->
        <div class="block block-rounded block-bordered">
            <div class="block-header block-header-default">
                <h3 class="block-title">Block Title</h3>
            </div>
            <div class="block-content">
                    <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                        <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Valor Salida
                        </div>
                        <select id="salida" class="form-select" aria-label="Default select example">
                            <option value="2">Ventas ($)</option>
                            <option value="1">Unidades (U)</option>
                            <option value="3">Costo ($)</option>
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                        <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Variable
                        </div>
                        <div class="input-group mb-3">
                            <input id="variables" type="text" class="form-control" placeholder="variable" aria-label="variable">
                        </div>
                        <!-- <select name="variables" id="variables">
                            <optgroup label="Cliente">
                                <option value="2-1">Canal</option>
                                <option value="2-5" selected>Cliente</option>
                                <option value="2-0">Cadena</option>
                                <option value="3-5">Local</option>
                            </optgroup>
                            <optgroup label="Cliente">
                                <option value="2-1">Canal</option>
                                <option value="2-5"selected>Cliente</option>
                                <option value="2-0">Cadena</option>
                            </optgroup>
                            <optgroup label="Geograf&iacute;a">
                                <option value="3-1">Regi&oacute;n</option>
                                <option value="3-2">Ciudad</option>
                                <option value="3-3">Comuna</option>
                                <option value="3-4">Zona Nielsen</option>
                                <option value="3-6">Zona</option>
                                <option value="3-7">Zonal</option>
                                <option value="3-8">Cluster</option>
                            </optgroup>
                            <optgroup label="RRHH">
                                <option value="4-1">KAM/Jefe Zonal</option>
                                <option value="4-2">Supervisor</option>
                                <option value="4-3">Vendedor</option>
                                <option value="4-4">GPV/Merchand</option>
                            </optgroup>
                        </select> -->
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                        <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Tipo periodo
                        </div>
                        <select id="tmp" class="form-select" aria-label="Default select example">
                            <option value="dia">Días</option>
                            <option value="sem">Semanas</option>
                            <option value="mes">Meses</option>
                        </select>
                    </div>
                
                    <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4">
                        <div style="text-align:center; font-size: 1.0em;color:#566573">
                            Rango periodo
                        </div>
                        <div class="input-group mb-3">
                            <input id="inicio_periodo" type="text" class="form-control" placeholder="Inicio" aria-label="Inicio">
                            <input id="fin_periodo" type="text" class="form-control" placeholder="Fin" aria-label="Fin">
                        </div>
                    </div>
                
                    <div class="col-lg-2 col-md-4 col-sm-4 col-xs-4" style="width:110px;">
                        <button class="btn btn-success btn-sm" style="width:100px;" onclick="getTabla();">
                            <span class="glyphicon glyphicon-refresh"></span>
                            Actualizar
                        </button>
                    </div>
                    <div id="tabla">
                    </div>
                  
            </div>
        </div>
        <!-- END Your Block -->
    </div>
    <!-- END Page Content -->
@endsection

@section('js_after')
<script>
    function getTabla() {
        $.ajax({
            url: "/reporte/402",
            method: "POST",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            data: {
                variables: [document.getElementById("variables").value],
                salida: document.getElementById("salida").value,
                tmp: document.getElementById("tmp").value,
                rangoTmp: [document.getElementById("inicio_periodo").value, document.getElementById("fin_periodo").value],
                cliente: "Modular Corp"
            },
        })
        .done(function(data, textStatus, jqXHR) {
            let tabla = document.getElementById("tabla");
            tabla.innerHTML = data;
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            // console.log(jqXHR);
        });
    }
</script>
@endsection