@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="#">Payables</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;">Payables </h2>
                            <span class="subtitle">Shows the payables based on filter for a given date range</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 " style="height: 32px;">
                            <span>Actions</span>

                            <form action="{{ route('admin.payables.data') }}" method="POST">
                                @csrf
                                <input type="hidden" name="from_date" id="exp_from_date" value="">
                                <input type="hidden" name="to_date" id="exp_to_date" value="">
                                <ul class="actions_list">
                                    <li>
                                        <button type="submit" class="" name="print_pdf" value="pdf">
                                            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_receivables_sales">
                                    {{ csrf_field() }}
                                    <div class="wrapper_top">
                                        <div class="row form-group" style="margin-bottom: 30px;">


                                            <div class="col-md-2">
                                                <select class="form-control select2 filter duration_by_day select2-hidden-accessible validate" name="period_filter" tabindex="-1" aria-hidden="true" required>
                                                    <option value=""></option>
                                                    <option value="this_week" selected>This Week</option>
                                                    <option value="last_week">Last Week</option>
                                                    <option value="this_month" >This month</option>
                                                    <option value="last_month">Last month</option>
                                                    <option value="this_quarter">This quarter</option>
                                                    <option value="last_quarter">Last quarter</option>
                                                    <option value="this_year">This year</option>
                                                    <option value="last_year">Last year</option>
                                                    <option value="custom">Custom</option>
                                                </select>
                                            </div>

                                            <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 validate" disabled value="{{ $data['from_date'] }}" 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">
                                                    <div class="input-group  date date-picker" data-date-format="dd-mm-yyyy">
                                                        <input type="text" name="endDate" id="endDate" class="form-control calender_popup_date_open validate" value="{{ $data['to_date'] }}" disabled 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>
                                            <div class="col-md-1">
                                                <input type="button" id="" name="" class="btn theme_btn_round load_data" value="Load">
                                            </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;
    }
    tr.bdr-btm {border-bottom: 2px solid #b7babe;}
</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, #endDate').datepicker({
        format: 'dd-mm-yyyy',
        autoclose: true,
        orientation: "top"
    });
});



$('#startDate').datepicker({
    format: 'dd-mm-yyyy',
    autoclose: true,
}).on('changeDate', function () {
    $('#endDate').datepicker('setStartDate', $(this).val(), 'dateFormat', 'dd-mm-yyyy');
});

$('#endDate').datepicker({
    format: 'dd-mm-yyyy',
    autoclose: true,
}).on('changeDate', function () {
    $('#startDate').datepicker('setEndDate', $(this).val(), 'dateFormat', 'dd-mm-yyyy');
});


var date = new Date();
//Date open either previous or upcoming
$('.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").addClass("hidden");
    
    $('#exp_from_date').val("");
    $('#exp_to_date').val("");
    
    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();

    $('#from_date').val(startDate);
    $('#to_date').val(endDate);

    var flag = validationForm("#frm_receivables_sales");
    if (flag == 1) {
        $('.alert_box').fadeIn(200).delay(5000).fadeOut(200);
        return false;
    }
    $('#exp_from_date').val(startDate);
    $('#exp_to_date').val(endDate);
    var url = "{{route('admin.payables.data')}}";
    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
    $.ajax({
        url: url,
        type: "POST",
        data: {from_date: startDate, to_date: endDate},
        beforeSend: function () {
            //$('.ajax-loading').show();
        },
        success: function (response) {
            $("#report_view").html(response.html);
            $("#report_view").removeClass("hidden");
        },
    });
});

$(document).on("change", "select[name='period_filter']", function () {
    $this = $(this);
    var period = $this.val();
    if (period == "custom") {
        $("#startDate").removeAttr("disabled");
        $("#endDate").removeAttr("disabled");
    } else {
        $("#startDate").attr("disabled", "disabled");
        $("#endDate").attr("disabled", "disabled");
        var url = "{{route('admin.report.get.date')}}";
        var token = $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
        $.ajax({
            url: url,
            type: "get",
            data: {'period': period},
            // data: {period : $this.val(),_token : token},
            processData: true,
            contentType: true,
            success: function (response) {
                if (response.status == 1000) {
                    $("#startDate").val(response.data.from_date);
                    $("#endDate").val(response.data.to_date);
//                          $(".actions_dropdown").removeClass("hidden");
                }
            },
        });
    }
});
</script>
@stop