@extends('layouts.app')

@section('content')
<div class="container">
    <center><h2>Gastos por Departamento</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('generatecostdepartmentCsv') }}';
        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('costbydepartmentdata') }}", // 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 ){
                    html += "<table class='table table-bordered'>"
                            html += "<thead><tr><th>id</th><th>Departamento</th><th>Proveedor</th><th>Total Eventos</th><th>Total Gasto</th></tr></thead>";
                            html += "<tbody>"
                        $.each(data.events, function(index,value) {
                            html += "<tr><td>"+value.id+"</td><td>"+value.department+"</td><td>"+value.supplier+"</td><td>"+value.eventosQty+"</td><td>"+numeral(value.precioTotal).format('$0,0.00')+"</td></tr>";
                        })
                            html += "</tbody></table>"
                        $("#infoReports").html(html);
                //}
                }
            });
        } else {
            alert("Favor de Seleccionar un rango de Fechas")
        }

    }) 
 
});

</script>
@endpush