@extends('layouts.app')

@section('content')
<div class="container">
    <center><h2>Reporte Bitcora</h2></center>
    <!-- <form action="{{ route('generatecsv') }}" method="GET"> -->
        <div class="row">
            <div class="col-sm-3">
                <label for="dateIn">Departamento</label>
                <select class="form-control" id="department" name="department[]" multiple>
                    <option value="0" selected>Todos </option>
                    @foreach($departments as $department)
                        <option value="{{ $department->id }}">{{ $department->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-3">
            <label for="dateIn">Proveedor</label>
                <select class="form-control" id="supplier" name="supplier[]" multiple>
                    <option value="0" selected>Todos </option>
                    @foreach($suppliers as $supplier)
                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-3">
                <label for="dateIn">Fecha Inicio</label>
                <input type="text" class="form-control" id="dateIn" name="dateIn" autocomplete="off">
            </div>
            <div class="col-sm-3">
                <label for="dateEn">Fecha Fin</label>
                <input type="text" class="form-control" id="dateEn" name="dateEn" autocomplete="off">
            </div>
        </div>
        <br />
        <div class="row">
           
            <div class="col-sm-4">
                <input type="submit"   class="btn btn-success" id="btnReports" value="Generar"></button>
                <input type="submit"   class="btn btn-success" id="btnReportsExcel" value="Generar Excel"></button>
                <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
            </div>
        </div>
        <br />
        <br />
        <div class="row" id='infoReports' name='infoReports'>
        </div>
  <!--  </form> --->
    
</div>
@stop
@push('scripts')
<script>
$( document ).ready(function() {
    $("#dateIn").datepicker({
        format: 'yyyy-mm-dd',
        language: 'es',
        autoclose: true,
        todayBtn: 'linked'
    });

    $("#dateEn").datepicker({
        format: 'yyyy-mm-dd',
        language: 'es',
        autoclose: true,
        todayBtn: 'linked'
    });

    $("#btnReportsExcel").on('click', function() {
        var dateIn = $("#dateIn").val();
        var dateEn = $("#dateEn").val()
        var supplier= JSON.stringify($("#supplier").val() );
        var department = JSON.stringify( $("#department").val() );
        var params = '?dateIn='+dateIn+'&dateEn='+dateEn+'&supplier='+supplier+'&department='+department;
        var url = '{{ route('generatecsv') }}';
        if($("#dateIn").val().length > 0 && $("#dateEn").val().length > 0 ) {
            window.open(url+params, '_blank')
        } else {
            alert("Favor de Seleccionar un rango de Fechas")
        }
    })

    $("#btnReports").on('click', function() {
        
        if($("#dateIn").val().length > 0 && $("#dateEn").val().length > 0 ) {
            $.ajax({
                type: 'GET',
                url: "{{ route('reportbydepartment') }}", // call your php file
                data: { department: JSON.stringify($("#department").val()), supplier: JSON.stringify($("#supplier").val()) ,dateIn: $("#dateIn").val(), dateEn:$("#dateEn").val(), _token: $("#_token").val() },
                cache: false,
                success: function(data){
                    var info = data; //JSON.parse(data);
                    var html = "";
                    $("#infoReports").html(html);
                // if(info.length > 0 ){
                        $.each(data.events, function(index,value) {
                            html += "<table class='table table-bordered'>"
                            html += "<thead><tr><th>id</th><th>Vehiculo</th><th>Marca</th><th>Modelo</th><th>Año</th><th>Placa</th><th>Departamento</th></tr></thead>";
                            html += "<tbody><tr><td>"+value.header.id+"</td><td>"+value.header.vehicle+"</td><td>"+value.header.brand+"</td><td>"+value.header.model+"</td><td>"+value.header.year+"</td><td>"+value.header.plate+"</td><td>"+value.header.department+"</td></tr></tbody>";
                            html += "</table>"

                            html += "<table class='table table-bordered'>"
                            html += "<thead><tr><th>Concepto</th><th>Qty</th><th>Precio</th><th>Factura</th><th>Proveedor</th><th>Pago</th><th>Fecha</th></tr></thead>";
                                $.each(value.concept, function(x,valor) { 
                                    var pago = valor.paymenttype ;
                                    html += "<tbody><tr><td>"+valor.concept+"</td><td>"+valor.qty+"</td><td>"+numeral(valor.price).format('$0,0.00')+"</td><td>"+valor.invoice+"</td><td>"+valor.supplier+"</td><td>"+pago+"</td><td>"+valor.created_at+"</td></tr></tbody>";  
                                })
                            html += "</table>"
                        })

                        $("#infoReports").html(html);
                //}
                }
            });
        } else {
            alert("Favor de Seleccionar un rango de Fechas")
        }

    }) 
 
});

</script>
@endpush