@extends('layouts.default')

@section('title', trans('general.title.dummy', ['type' => trans_choice('accounts.account_quickreport', 1)]).' : '. isset($chart) ? $chart->name : '') 

@section('new_button')
<div class="searchBox mr-2">
   {!! Form::text('search', request('search'), ['id'=>'tableSearch','class' => 'form-control input-filter input-sm', 'placeholder' => trans('general.search_placeholder')]) !!}
   <span class="search-icn"><i class="material-icons">search</i></span>
    <span class="form-controlBrd"></span>
</div>

   {{--  <button class="btn btn-primary btn-Rcircle-iconic waves-effect waves-light pull-right" onclick="pdfGenerate();" id="fileRequest"> PDF</button> --}}

@endsection
<style>
#checkbox_div p
{
 margin:5px;
 color:#000;

 font-size:14px;
}
#checkbox_div li
{
 
 display:block;
 margin:5px;
 font-size:14px;

}
#checkbox_div input[type="checkbox"]
{
 width:20px;
 height:20px;
}

#tbl-transactions td
{
 min-width:70px;
 
}
.custom-control{padding-left:30px !important;}
.custom-control.overflow-checkbox .fill-control-indicator {top:0px !important;}

</style>


@section('content')
<!-- Default box -->
<div class="">

<input type="hidden" id="chart_id" name="chart_id" value="{{ $id }}">
   

    <!-- /.box-header -->
    <div class="row" id="content">    
        <div id="checkbox_div" class="col-md-6">
           <div class="dropdown dropdown-table-column drop-fav-responsive">
                <a class="btn" type="" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Column Visibility</a>
                <div class="dropdown-menu drop-column"> 
                    <ul>
                        <li><label class="custom-control overflow-checkbox dropdown-item"> <input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="date_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Date</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="trans_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Transaction</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="number_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Number</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="name_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Name</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" checked="checked" value="show" id="description_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Description</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="actname_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Account Name</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="debit_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Debit</label></li>
                        <li><label class="custom-control overflow-checkbox dropdown-item"><input type="checkbox" class="overflow-control-input" value="show" checked="checked" id="credit_col" onchange="hide_show_table(this.id);"><span class="overflow-control-indicator"></span>Credit</label></li>
                    </ul>
                </div>
            </div>
        </div>
        {!! Form::open(['url'=>'#', 'method'=>'POST', 'id'=>'refreshForm']) !!}
        <div class="col-md-6 m-0 p-0 pull-right">
            <div class="btn btn-default btn-sm pull-right date-range-pic" style="height:30px;padding-top:4px;">
                <div id="invoice-range" class="range-padding" onchange="dataRefresh()">
                    <i class="material-icons dateRangeIcon" style="font-size:14px;top:2px;"> calendar_today </i>&nbsp;
                    <input name="date_range" type="text" class="text-black" id="invoiceRange" value="" style="font-size:14px;">
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>

    <div id="dataRefreshDiv" class="row m-0">
        @include('accounts.accounting.chartofaccounts.receivable-table')
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" style="width:1000px;">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Print, email, or save as PDF</h4>
            </div>
            <div class="modal-body">
                <iframe id="dialog" width="100%" height="400" style="margin-left:0px;"></iframe>
              
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-default" onclick='EmailInvoice({{isset($item->id)}})';  value="Print">Email</>
                <a type="button" href="{{ url('accounting/quickreportpdfdownload/' . $id . '/pdf') }}"><button class="btn btn-default">Save as PDF</button></a>
               <button type="button" class="btn btn-default" id="dialog" onclick="print()" value="Print">Print</button>
               
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
    </div>
 
</div>
<link rel="stylesheet" type="text/css" href="{{ asset('accounts/css/daterangepicker.css') }}" />
<script type="text/javascript" src="{{ asset('accounts/js/moment/moment.js') }}"></script>
<script type="text/javascript" src="{{ asset('accounts/js/daterangepicker/daterangepicker.js') }}"></script>
<script>
    $(function() {
        var start = moment().startOf('month');
        var end = moment().endOf('month');
        
        function invoice(start,end) {
            $('#invoiceRange').val(start.format('L') + ' - ' + end.format('L'));
            dataRefresh();
        }

        $('#invoice-range').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'This Week' : [moment().startOf('isoWeek'), moment().endOf('isoWeek')],
                'Last Week' : [moment().subtract('1','week').startOf('isoWeek'), moment().subtract('1','week').endOf('isoWeek')],
                'Last Two Weeks' : [moment().subtract('2','week').startOf('isoWeek'), moment().subtract('1','week').endOf('isoWeek')],
                'This Month' : [moment().startOf('month'), moment().endOf('month')],
                'Previous Month' :[moment().subtract(1,'month').startOf('month'), moment().subtract(1,'month').endOf('month')],
               '{{ trans("reports.this_quarter") }}': [moment().subtract(2, 'months').startOf('month'), moment().endOf('month')],
                '{{ trans("reports.previous_quarter") }}': [moment().subtract(5, 'months').startOf('month'), moment().subtract(3, 'months').endOf('month')],
                '{{ trans("reports.last_12_months") }}': [moment().subtract(11, 'months').startOf('month'), moment().endOf('month')],
                '{{ trans("reports.this_year") }}': [moment().startOf('year'), moment().endOf('year')],
                '{{ trans("reports.previous_year") }}': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
                
            }
        }, invoice);

        invoice(start, end);
    });

    function dataRefresh() {
        $("#dataRefreshDiv").html('<div class="lds-dual-ring"></div>');
        var id = $("#chart_id").val();
        var dateRange = $("#invoiceRange").val();

        $.ajax({
            url: '/accounting/chartofaccounts/'+id,
            data: 'id='+id+'&dateRange='+dateRange,
            success: function(result) {
                $("#dataRefreshDiv").html(result);
            }
        })
    }
</script>
@endsection

@push('scripts')
<script type="text/javascript">
function hide_show_table(col_name)
{
 var checkbox_val=document.getElementById(col_name).value;
 if(checkbox_val=="hide")
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="table-cell";
  }
  document.getElementById(col_name+"_head").style.display="table-cell";
  document.getElementById(col_name).value="show";
 }
  
 else
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="none";
  }
  document.getElementById(col_name+"_head").style.display="none";
  document.getElementById(col_name).value="hide";
 }
}
</script>

<script type="text/javascript">
    $(document).ready(function(){
        var val = $("table:first tr:last td:last").html();
        $('#total').html(val);

        //Date picker
        $('#period_to').datepicker({
            format: '{{ $date_format }}',
            autoclose: true
        });
    });

     
    function pdfGenerate(){
        var chart_id = $('#chart_id').val();
        $.ajax({
            type : 'GET',
            url : '{{ url("accounting/quickreportpdf/") }}'+'/'+chart_id,
            success:function(data){  
               $('#dialog').attr("src",data);
                $("#myModal").modal()         
               
            },
            error:function(data){
                console.log(data);
            },

        });
    }
    function print(doc) {
        var objFra = document.createElement('iframe');   // CREATE AN IFRAME.
        objFra.style.visibility = "hidden";    // HIDE THE FRAME.
        objFra.src = doc;                      // SET SOURCE.
        document.body.appendChild(objFra);  // APPEND THE FRAME TO THE PAGE.
        objFra.contentWindow.focus();       // SET FOCUS.
        objFra.contentWindow.print();      // PRINT IT.
    }
</script>
@endpush