@extends('admin.layouts.master')

@section('title')
    Quarterly Sales Report
@stop

@section('style')
{{--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">--}}
{{--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">--}}

    <style>
    thead input {
            width: 100%;
        }
    .fstyle {
        text-align: center;
        width: 90%;
        padding:5px;
    }
    .bs-example{
        	margin: 50px;
        }
    </style>
@stop

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-pie-chart"></span> Quarterly Sales Report
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-pie-chart"></i> Admin Panel</a></li>
                <li class="active">Quarterly Sales Report</li>
            </ol>
        </section>
        <div style="margin: 20px;"></div>

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 100%;">
            {{--<div class="page-header">
                <a href="{{route('reports.quarter')}}" class="btn btn-primary"><i class="fa fa-plus-circle"></i> View Report</a>
            </div>--}}

            {{--<div class="btn-group dropdown">
                <button type="button" class="btn btn-info">Action Options</button>
                <button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
                    <span class="caret"></span>
                    <span class="sr-only">Action option</span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
                    <li><a href="#">View PDF</a></li>
                    <li><a href="#">Export to Excel</a></li>
                </ul>
            </div>--}}
            <div style="margin: 10px;"></div>

            <form action="{{route('reports.sales.quarter')}}" method="post" class="form-inline form-template">
              {{ csrf_field() }}
               <div class="form-group" style="margin-bottom: 20px;">
                  <button type="submit" class="btn btn-primary">View Quarter Report</button>
              </div>
            </form>
            <table class="table table-hover " id="user_table" style="width:100%">
                <thead>
                    <tr style="background: grey ;color:#fff; font-weight: bold">
                        <td style="text-align: center">Quarter</td>
                        <td style="text-align: center">Month</td>
                        <td style="text-align: center">Year</td>
                        <td style="text-align: center">Trxn Count</td>
                        <td style="text-align: center">Gross Sales</td>
                        <td style="text-align: center">Net Sales</td>
                    </tr>
                </thead>
                {{--<tr style="background: grey ;color:#fff; font-weight: bold">
                    <td>
                        @if ($qtr->quarter == 1)
                            First Quarter
                        @elseif($qtr->quarter == 2)
                            Second Quarter
                        @elseif($qtr->quarter == 3)
                            Third Quarter
                        @endif
                    </td>
                </tr>--}}
                @foreach($qtrs as $qtr)
                    <tr>
                        <td width="10%" style="text-align: center">{{$qtr->quarter}}</td>
                        <td width="20%" style="text-align: center">{{$qtr->month}}</td>
                        <td width="15%" style="text-align: center">{{$qtr->year}}</td>
                        <td width="15%" style="text-align: center">{{$qtr->trxn_count}}</td>
                        <td width="20%" style="text-align: right">{{number_format($qtr->ttl_amt,2)}}</td>
                        <td width="20%" style="text-align: right">{{number_format($qtr->net_amt,2)}}</td>
                     </tr>
                @endforeach
                <tfoot>
                    <tr>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td style="text-align: right">TOTAL</td>
                      <td width="20%" style="text-align: right"></td>
                      <td width="20%" style="text-align: right"></td>
                    </tr>
                  </tfoot>
            </table>


            @if(Session('info'))
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <div class="tem alert alert-success navbar-fixed-bottom"><span class="glyphicon glyphicon-ok-circle"></span> {{Session('info')}}</div>
                    </div>
                </div>
            @endif
        </section>

    </div>
@stop

@section('script')

<script>

$(document).ready(function() {

    filterr();

    /*$('#lnOpt').on('change', function () {
        //alert('sdf');
    });*/

    /*$('#user_table').dataTable({
    "bDestroy": true,
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;
        var intVal = function ( i ) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0;
            };
            data = api.column(4).data();

            total = data.length ? data.reduce( function (a, b) {
                    return intVal(a) + intVal(b); } ) : 0;
            data = api.column(4, { page: 'current'} ).data();

            total3 = api
                    .column(3)
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

            pageTotal3 = api
                    .column( 3, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

            pageTotal4 = data.length ? data.reduce( function (a, b) {
                return intVal(a) + intVal(b); } ) : 0;

            $(api.column(3).footer()).html(currencyFormat(pageTotal3));
            $(api.column(4).footer()).html(currencyFormat(pageTotal4));
            }
        });*/

    });

    function currencyFormat(num) {
      return '' + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }

    function filterr() {
        $("#user_table").dataTable().fnDestroy();
            $('#user_table').DataTable( {
                initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select class="fstyle" id="lnOpt"><option value=""></option></p>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );
                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    } );
                }
            } );
    }

</script>

@stop