@extends('layouts.main_without_top_button')
@section('title')
    Consumption Reports Reports
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('operations.reports.reports')}}">Managements Reports</a> <span class="divider">/</span></li>
        <li class="active">Consumption Reports Reports</li>
    </ul>
@stop
@section('contentinner')
    <div class="tabbable">
        <style>
            .td_left_border {
                border-top: 1px solid #dddddd;
                border-left: 1px solid #dddddd;
                border-bottom: 0;
            }

            .td_border_right {
                border-right: 1px solid #dddddd;
            }

            .widgettitle {
                color: #000000;
            }
        </style>
        <div class="tab-content">
            <div class="tab-pane active" style="margin-top: 12px">
                <center>
                    <center style="margin-bottom: 8px">
                        <form class=" form-inline">
                            <label class="control-label" for="Category"> Date from </label>
                            <input type="text" name="start_date" id="start_date"
                                   class="form-control date_picker"
                                   value="{{\Carbon\Carbon::now()->format('Y-m-d')}}"  style="width: 70px">
                            <label class="control-label" for="Category"> Date To </label>
                            <input type="text" name="end_date" id="end_date" class="form-control date_picker"
                                   value="{{\Carbon\Carbon::now()->format('Y-m-d')}}"  style="width: 70px">
                            <label class="control-label" for="Category"> Item </label>
                            <select name="item_id" id="item_id" style="width: 200px"  class="searchable_select">
                                <option value="ALL">ALL</option>
                                @foreach($items as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                            </select>
                            <select name="cost_center_id" id="cost_center_id" style="width: 200px"  class="searchable_select">
                                <option value="ALL">ALL</option>
                                @foreach($cost_centers as $cost_center)
                                    <option value="{{$cost_center->id}}">{{$cost_center->name}}</option>
                                @endforeach
                            </select>
                            <button type="submit" class="btn" id="re_generate_report">GENERATE</button>
                                                        <a id="print_generate_report" class="btn" style="" data-href="">PRINT</a>
                        </form>
                    </center>
                    <div id="report_body">


                    </div>
                </center>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->
    <script>
        jQuery('.searchable_select').select2();
        jQuery('.date_picker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

        jQuery('#re_generate_report').on('click', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: '{{route('reports.consumption_reports.generate')}}',
                type: 'get',
                data: jQuery('form').serialize(),
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#report_body').empty().append(data);

                },
                complete: function () {
                    stopSpinner();
                },
                error: function (xhr, textStatus, error) {
                    console.log(error);
                    console.log(textStatus);
                    stopSpinner();
                }
            });
        });

        $('#print_generate_report').on('click', function (e) {
            e.preventDefault();

            var url = '{{ route('reports.consumption_reports.print',[':start_date',':end_date',':item_id',':cost_center_id']) }}';
            url = url.replace(':start_date', $('#start_date').val());
            url = url.replace(':end_date', $('#end_date').val());
            url = url.replace(':item_id', $('#item_id').val());
            url = url.replace(':cost_center_id', $('#cost_center_id').val());

            window.open(url, '_blank');

        });
    </script>
@stop