@extends('layouts.kaiadmin.master')

@section('title', 'Reportes')

@section('content_header')
    <h1>Reportes</h1>
@stop

@section('content')

<div class="col-md-4">
    <div class="small-box bg-info">
        <div class="inner">
          <h3>Itinerarios</h3>
        </div>
        <div class="icon">
          <i class="fas fa-shopping-cart"></i>
        </div>
        <a href="{{route('itinerario.report')}}" class="small-box-footer" data-toggle="modal" data-target="#miModal">Imprimir Itinerarios <i class="fas fa-arrow-circle-right"></i></a>
        <!-- Modal -->
        <div id="miModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <!-- Contenido del modal -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 style="color: black">Ingrese los siguientes datos:</h3> 
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="row">
                              <div class="col">
                                <label style="color: black" for="formGroupExampleInput">Ruta</label>
                                <input type="text" class="form-control" placeholder="Numero de Ruta" required>
                              </div>
                              <div class="col">
                                <label style="color: black" for="formGroupExampleInput">Itinerario</label>
                                <input type="text" class="form-control" placeholder="Numero de Itinerario" required>
                              </div>
                            </div>
                          </form>
                    </div>
                    <div class="modal-footer">
                        <a href="{{route('itinerario.report')}}" class="btn btn-primary mt-2 mb-2">Imprimir</a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div> 
                </div>
            </div>
        </div>
      </div>
</div>


@push('js')
<script>

    $(document).ready(function() {

        let sBox = new _AdminLTE_SmallBox('sbUpdatable');

        let updateBox = () =>
        {
            // Stop loading animation.
            sBox.toggleLoading();

            // Update data.
            let rep = Math.floor(1000 * Math.random());
            let idx = rep < 100 ? 0 : (rep > 500 ? 2 : 1);
            let text = 'Reputation - ' + ['Basic', 'Silver', 'Gold'][idx];
            let icon = 'fas fa-medal ' + ['text-primary', 'text-light', 'text-warning'][idx];
            let url = ['url1', 'url2', 'url3'][idx];

            let data = {text, title: rep, icon, url};
            sBox.update(data);
        };

        let startUpdateProcedure = () =>
        {
            // Simulate loading procedure.
            sBox.toggleLoading();

            // Wait and update the data.
            setTimeout(updateBox, 2000);
        };

        setInterval(startUpdateProcedure, 10000);
    })

</script>
@endpush


@endsection