@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="top_bar page-content" style="min-height:375px">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar" style="width: 100%;">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a  href="{{route('admin.dashboard')}}">Home</a></li>
                <li><a   href="{{ url('admin/reports')}}">Reports</a></li>
                    <li><a  href="#">Aged Receivables</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
        <div class="page-content">
            <div class="portlet">
                <!-- BEGIN PAGE HEADER-->
                <div class="portlet-title page_heading">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="caption">
                                <h2 style="font-weight: 600; margin-top: 0;">Aged Receivables</h2>
                                <span class="subtitle"> Shows outstanding or unallocated customers by age.</span>
                            </div>
                        </div>
                        <!-- <div class="col-md-3 text-right">
                            <button type="button" class="btn theme_btn_round add_new_customer">Actions</button>
                        </div> -->
                        <div class="actions success_actions" style="">
                            <div class="actions_dropdown hidden" style="height: 32px;">
                                <span>Actions</span>
                                <form action="{{ route('admin.aged.receivables.data') }}" method="POST">
                                @csrf
                                <input type="hidden" name="from_date" id="from_date" value="">
                                <input type="hidden" name="sales_type" id="sales_type" value="">
                                <input type="hidden" name="aged_data" id="data" value="">
                                <ul class="actions_list ">
                                    <li>
                                        <button type="submit" class="" name="print_pdf" style="" value="landscape">
                                            Landscape PDF
                                        </button>
                                    </li>
                                    <li>
                                        <button type="submit" class="" name="print_pdf" value="portrait">
                                            Portrait PDF
                                        </button>
                                    </li>
                                     <li>
                                        <button type="submit" class="" name="excel" value="excel">
                                            Export to Excel
                                        </button>
                                    </li>
                                </ul>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!--THIS IS CONTENT DIV START-->
                        <div class="portlet-body flip-scroll">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form target="_blank" method="post"  id="frm_aged_receivables">
                                          @csrf
                                        <div class="wrapper_top">
                                            <div class="row form-group" style="margin-bottom: 30px;">


                                                <div class="dates_wrap">
                                                    <div class="col-md-2">
                                                        <div class="input-group  date date-picker" data-date-format="dd-mm-yyyy" >
                                                            <input type="text" id="startDate" name="startDate" class="form-control calender_popup_date_open" value="{{ date('d-m-Y') }}"  autocomplete="off" required>
                                                            <span class="input-group-btn">
                                                                <button
                                                                class="btn default custom_calender custom_calender_date_open"
                                                                type="button" style="margin: 0" value="">
                                                                <i class="fa fa-calendar"></i>
                                                            </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                    <select class="form-control select2 filter duration_by_day select2-hidden-accessible validate" tabindex="-1" aria-hidden="true" id="aged_receivables">
                                                        <option value=""></option>
                                                      
                                                        <option value="customers" >Show by customers</option>
                                                        <option value="invoices">Show by invoices</option>
                                                        
                                                    </select>
                                                </div>
                                                    <div class="col-md-2">
                                                    <select class="form-control select2 filter duration_by_day select2-hidden-accessible validate" id="aged_data" name="period_filter" tabindex="-1" aria-hidden="true" required>
                                                        <option value=""></option>
                                                          <option value="aging by issue dates" >Aging by issue dates</option>
                                                          <option value="aging by due date">Aging by due date</option>
                                                        
                                                    </select>
                                                </div>

                                                </div>
                                                <div class="col-md-1">
                                                    <input type="button" id="" name="" class="btn theme_btn_round load_data" value="Filter">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="contain_wrapper report_view_wrap hidden" id="report_view">
                                            
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--THIS IS CONTENT DIV END-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    @endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
<style>
        .table-container {
            padding: 50px 0 0;
        }
        .contain_wrapper {
            padding: 10px 70px;
            background: #6e6e6e;
        }
        .wrapper_income {
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;

    }     
        .report_wrap {
            background: #fff;
            padding: 100px 70px;
        }
        .report_header {
            margin-bottom: 70px;
            overflow: hidden;
        }
        .top_section {
            overflow: hidden;
            border-bottom: 3px solid #37c6d3;
        }
        .report_title {
            font-size: 35px;
            color: #000;
        }
        .company_name {
            font-size: 25px;
            color: #37c6d3;
            /* margin-top: 6px; */
        }
        .company_name {
            font-size: 25px;
            color: #37c6d3;
            /* margin-top: 6px; */
        }
        .filter_head {
            font-weight: 500;
            font-size: 20px;
            color: #898a8a;
        }
        .table {
            margin-bottom: 0 !important;
        }
        .dates_wrap {overflow: inherit;}
        .section_divider {
            /* border-top: 2px solid #000 !important; */
            border-bottom: 2px solid #A5A5A5 !important;
        }
        .section_end {
            border-bottom-style: double;
            font-weight: 600;
            font-size: 20px !important;
            border-color: #000;
        }
    </style>

@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}" type="text/javascript"></script>

<script>
        $(document).ready(function () {
            //SELECT 2 Simple//
            $(".select2").select2({
                placeholder: "--Select--",
                allowClear: true
            });
           
            $('#startDate').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            orientation: "top"
        });

           
        });
        
        $('.calender_popup_date_open').datepicker({
        format: 'dd-mm-yyyy',
        pickerPosition: "top-left",
        autoclose: true,
        //startDate: date
    }).on('hide.bs.modal', function (event) {
        // prevent datepicker from firing bootstrap modal "show.bs.modal"
        event.stopPropagation();
    });
    $('body').on('click', '.custom_calender_date_open', function () {
        $(this).parent().parent().find('.calender_popup_date_open').trigger('focus');
    });
    var datePicker = $(".calendar").datepicker({});
    var t;
    $(document).on(
        'DOMMouseScroll mousewheel scroll',
        '#myModal',
        function () {
            window.clearTimeout(t);
            t = window.setTimeout(function () {
                $('.calendar').datepicker('place')
            }, 100);
        }
    );


        $(document).on("click",".load_data",function(){
            $("#report_view").html("");
            var url = "{{route('admin.aged.receivables.data')}}";
            var startDate=$('#startDate').val();
            var type= $('#aged_receivables').val(); 
            var aged_data = $('#aged_data').val();
            $('#from_date').val(startDate);
            $('#sales_type').val(type);
            $('#data').val(aged_data);
            
        
            var flag = validationForm("#frm_aged_receivables");
            if (flag == 1) {
            $('.alert_box').fadeIn(200).delay(5000).fadeOut(200);
            return false;
        } 

            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
              $.ajax({
                    url: url,
                    method: "POST",
                    data: {from_date:startDate,sales_type: type,aged_data: aged_data},
                    beforeSend: function () {
                        //$('.ajax-loading').show();
                    },
                    success: function (response) {
                       $("#report_view").html(response.html); 
                       $("#report_view").removeClass("hidden");
                       $(".actions_dropdown").removeClass("hidden");
                    },
                });
        });

    </script>
@stop