@extends('site.layouts.app')
@section('title', 'Dashboard Business')
@section('datatable')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <style type="text/css">
        input {
            border: 0;
            outline: 0;
            border-bottom: 2px solid #03a8f45e !important;
            color: #ccc;
        }
    </style>
@endsection
@section('subtitle', 'Control Panel')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Dashboard Business</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('site.home',['site'=>$site->slug])}}">Dashboard Business</a></li>
                </ol>
            </div>

        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
    </div>
        <div class="col">

            <div class="h-100">
                <div class="row">
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header border-0 align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Cash Flow<span id="filterName"></span></h4>
                                <div class="me-2">
                                    <select name="year_line" class="select2" id="year_line">
                                        @php
                                            $year_now = date('Y');
                                        @endphp
                                        @for ($i = $year_now; $i >= 1991; $i--)
                                            <option @if ($i == date('Y')) selected @endif
                                                value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="d-flex justify-content-sm-end">
                                    <a href="#" onclick="filter()" class="btn btn-danger">
                                        <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                    </a>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body p-0 pb-2">
                                <div class="overlay d-none"  id="overlayBusiness">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <div class="w-100">
                                    <div id="status_wo" data-colors='["--vz-primary","--vz-warning", "--vz-success"]' class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->

                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header border-0 align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Expense & Revenue <span id="filterNameExpense"></span></h4>
                                <div class="me-2">
                                    <select name="year_line_expense" class="select2" id="year_line_expense">
                                        @php
                                            $year_now = date('Y');
                                        @endphp
                                        @for ($i = $year_now; $i >= 1991; $i--)
                                            <option @if ($i == date('Y')) selected @endif
                                                value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="d-flex justify-content-sm-end">
                                    <a href="#" onclick="filterexpense()" class="btn btn-danger">
                                        <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                    </a>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body p-0 pb-2">
                                <div class="overlay d-none"  id="overlayExpense">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <div class="w-100">
                                    <div id="expense" data-colors='["--vz-primary","--vz-warning", "--vz-success"]' class="apex-charts" dir="ltr"></div>
                                </div>
                            </div><!-- end card body -->
                        </div><!-- end card -->
                    </div><!-- end col -->
                </div>

                <div class="row">
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Expense (Top 10) <span id="filterExpense"></span></h4>
                                <div class="flex-shrink-0">
                                    <a href="#" onclick="filterReadExpense()" class="btn btn-danger">
                                        <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                    </a>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div class="overlay d-none" id="overlay_expense">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline" data-paging="false" id="datatable-expense" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Account</th>
                                            <th>Last Month</th>
                                            <th>Current Month</th>
                                            <th>Difference (%)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Revenue (Top 10) <span id="filteRevenue"></span></h4>
                                <div class="flex-shrink-0">
                                    <a href="#" onclick="filterReadRevenue()" class="btn btn-danger">
                                        <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                    </a>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div class="overlay d-none" id="overlay_revenue">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline" data-paging="false" id="datatable-revenue" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Account</th>
                                            <th>Last Month</th>
                                            <th>Current Month</th>
                                            <th>Difference (%)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div> <!-- end row-->

                <div class="row">
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Account Payable Aging <span id="filterNamePayable"></span></h4>
                                <div class="flex-shrink-0">
                                    <a href="#" onclick="filterPayable()" class="btn btn-danger">
                                        <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                    </a>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div class="overlay d-none" id="overlayPayable">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <table class="table table-bordered nowrap table-striped align-middle no-footer dtr-inline" data-paging="false" id="datatable-payable" style="width:100%">
                                    <tbody>
                                        <tr>
                                            <th width="20">Not Due</th>
                                            <th width="100" class="text-end" id="Payable_not_due"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">1-30 Days</th>
                                            <th width="100" class="text-end" id="Payable_1days"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">31-60 Days</th>
                                            <th width="100" class="text-end" id="Payable_30days"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">61-90 Days</th>
                                            <th width="100" class="text-end" id="Payable_60days"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">> 90 Days</th>
                                            <th width="100" class="text-end" id="Payable_90days"></th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-6">
                        <div class="card card-height-100">
                            <div class="card-header align-items-center d-flex">
                                <h4 class="card-title mb-0 flex-grow-1">Account Receivable Aging <span id="filterNameReceivable"></span></h4>
                                <div class="flex-shrink-0">
                                    <a href="#" onclick="filterReceivable()" class="btn btn-danger">
                                        <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                    </a>
                                </div>
                            </div><!-- end card header -->

                            <div class="card-body">
                                <div class="overlay d-none" id="overlayReceivable">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <table class="table table-bordered display nowrap table-striped align-middle no-footer dtr-inline" data-paging="false" id="receivable-table" style="width:100%">
                                    <tbody>
                                        <tr>
                                            <th width="20">Not Due</th>
                                            <th width="100" class="text-end" id="Receivable_not_due"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">1-30 Days</th>
                                            <th width="100" class="text-end" id="Receivable_1days"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">31-60 Days</th>
                                            <th width="100" class="text-end" id="Receivable_30days"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">61-90 Days</th>
                                            <th width="100" class="text-end" id="Receivable_60days"></th>
                                        </tr>
                                        <tr>
                                            <th width="20">> 90 Days</th>
                                            <th width="100" class="text-end" id="Receivable_90days"></th>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div> <!-- .card-->
                    </div> <!-- .col-->
                </div> <!-- end row-->
            </div> <!-- end .h-100-->

        </div> <!-- end col -->
    </div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvas" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search" autocomplete="off">
            <div class="mb-4" id="colSite">
                <label for="" class="control-labe">Company</label>
                <select class="form-select select2" id="location_1" name="location_1" data-placeholder="Company" required>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3">
        <div class="row d-flex">
            <div class="col text-start">
                <button type="button" onclick="reset()" class="btn btn-danger" title="Apply">
                    <i class="ri-delete-bin-line"></i> Reset
                </button>
            </div>
            <div class="col text-end">
                <button form="form-search" type="submit" class="btn btn-primary" title="Apply" id="button-filter">
                    <i class="ri-search-line"></i> Filter
                </button>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvasExpense" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search-expense" autocomplete="off">
            <div class="mb-4" id="colSite">
                <label for="" class="control-labe">Company</label>
                <select class="form-select select2" id="location_1_expense" name="location_1_expense" data-placeholder="Company" required>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3">
        <div class="row d-flex">
            <div class="col text-start">
                <button type="button" onclick="resetexpense()" class="btn btn-danger" title="Apply">
                    <i class="ri-delete-bin-line"></i> Reset
                </button>
            </div>
            <div class="col text-end">
                <button form="form-search-expense" type="submit" class="btn btn-primary" title="Apply" id="button-filter">
                    <i class="ri-search-line"></i> Filter
                </button>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="searchExpense" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-expense" autocomplete="off">
            <div class="mb-4" id="colSite">
                <label for="" class="control-labe">Company</label>
                <select class="form-select select2" id="location_expense" name="location_expense" data-placeholder="Company" required>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3">
        <div class="row d-flex">
            <div class="col text-start">
                <button type="button" onclick="resetreadexpense()" class="btn btn-danger" title="Apply">
                    <i class="ri-delete-bin-line"></i> Reset
                </button>
            </div>
            <div class="col text-end">
                <button form="form-expense" type="submit" class="btn btn-primary" title="Apply" id="button-filter">
                    <i class="ri-search-line"></i> Filter
                </button>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="searchRevenue" aria-labelledby="searchCanvasLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-revenue" autocomplete="off">
            <div class="mb-4" id="colSite">
                <label for="" class="control-labe">Company</label>
                <select class="form-select select2" id="location_revenue" name="location_revenue" data-placeholder="Company" required>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3">
        <div class="row d-flex">
            <div class="col text-start">
                <button type="button" onclick="resetreadrevenue()" class="btn btn-danger" title="Apply">
                    <i class="ri-delete-bin-line"></i> Reset
                </button>
            </div>
            <div class="col text-end">
                <button form="form-revenue" type="submit" class="btn btn-primary" title="Apply" id="button-filter">
                    <i class="ri-search-line"></i> Filter
                </button>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="searchPayable" aria-labelledby="searchPayableLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchPayableLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search-payable" autocomplete="off">
            <div class="mb-4" id="colSite">
                <label for="" class="control-labe">Company</label>
                <select class="form-select select2" id="location_payable" name="location_1" data-placeholder="Company" required>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3">
        <div class="row d-flex">
            <div class="col text-start">
                <button type="button" onclick="resetPayable()" class="btn btn-danger" title="Apply">
                    <i class="ri-delete-bin-line"></i> Reset
                </button>
            </div>
            <div class="col text-end">
                <button form="form-search-payable" type="submit" class="btn btn-primary" title="Apply">
                    <i class="ri-search-line"></i> Filter
                </button>
            </div>
        </div>
    </div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="searchReceivable" aria-labelledby="searchReceivableLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="searchReceivableLabel">Filter</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <!--end offcanvas-header-->
    <div class="offcanvas-body">
        <form id="form-search-receivable" autocomplete="off">
            <div class="mb-4" id="colSite">
                <label for="" class="control-labe">Company</label>
                <select class="form-select select2" id="location_receivable" name="location_1" data-placeholder="Company" required>
                </select>
            </div>
        </form>
    </div>
    <!--end offcanvas-body-->
    <div class="offcanvas-footer border-top p-3">
        <div class="row d-flex">
            <div class="col text-start">
                <button type="button" onclick="resetReceivable()" class="btn btn-danger" title="Apply">
                    <i class="ri-delete-bin-line"></i> Reset
                </button>
            </div>
            <div class="col text-end">
                <button form="form-search-receivable" type="submit" class="btn btn-primary" title="Apply">
                    <i class="ri-search-line"></i> Filter
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/swiper/swiper-bundle.min.js"></script>
<!-- <script src="https://themesbrand.com/velzon/html/creative/assets/js/pages/dashboard-ecommerce.init.js"></script> -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script src="{{ asset('adminlte/component/accounting/accounting.min.js') }}"></script>
<script src="{{ asset('creative/component/validate/jquery.validate.min.js') }}"></script>
<script type="text/javascript">
    function filter() {
        $('#searchCanvas').offcanvas('show');
    }

    function filterexpense() {
        $('#searchCanvasExpense').offcanvas('show');
    }

    function filterReadExpense() {
        $('#searchExpense').offcanvas('show');
    }
    function filterReadRevenue() {
        $('#searchRevenue').offcanvas('show');
    }

    function filterPayable() {
        $('#searchPayable').offcanvas('show');
    }

    function filterReceivable() {
        $('#searchReceivable').offcanvas('show');
    }

    function reset() {
        $('#form-search').trigger('reset');
        $("#location_type, #location_area, #location_1, #location_2").val('').trigger('change')
        chartdonut();
        $('#filterName').html('');
        $('#searchCanvas').offcanvas('hide');
    }

    function resetexpense() {
        $('#form-search-expense').trigger('reset');
        $("#location_type, #location_area, #location_1,#location_1_expense, #location_2").val('').trigger('change')
        chartexpenserevenue();
        $('#filterNameExpense').html('');
        $('#searchCanvasExpense').offcanvas('hide');
    }

    function resetreadexpense() {
        $('#form-expense').trigger('reset');
        $("#location_expense").val('').trigger('change')
        dataTableExpense.draw();
        $('#filterExpense').html('');
        $('#searchExpense').offcanvas('hide');
    }

    function resetreadrevenue() {
        $('#form-revenue').trigger('reset');
        $("#location_revenue").val('').trigger('change')
        dataTableRevenue.draw();
        $('#filterRevenue').html('');
        $('#searchRevenue').offcanvas('hide');
    }

    function resetPayable() {
        $('#form-search-payable').trigger('reset');
        $("#location_payable").val('').trigger('change');
        getPayable();
        $('#filterNamePayable').html('');
        $('#searchPayable').offcanvas('hide');
    }

    function resetReceivable() {
        $('#form-search-receivable').trigger('reset');
        $("#location_receivable").val('').trigger('change');
        getReceivable();
        $('#filterNameReceivable').html('');
        $('#searchReceivable').offcanvas('hide');
    }

    function getChartColorsArray(chartId) {
        if (document.getElementById(chartId) !== null) {
            var colors = document.getElementById(chartId).getAttribute("data-colors");
            if (colors) {
                colors = JSON.parse(colors);
                return colors.map(function(value) {
                    var newValue = value.replace(" ", "");
                    if (newValue.indexOf(",") === -1) {
                        var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
                        if (color) return color;
                        else return newValue;
                    } else {
                        var val = value.split(',');
                        if (val.length == 2) {
                            var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
                            rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
                            return rgbaColor;
                        } else {
                            return newValue;
                        }
                    }
                });
            }
        }
    }

    $(function(){
        $('.select2').select2();

        $('#location_type').change(function(e){
            val = $(this).val();//Villa or Office
            if(val == "villa"){
                $( "#location_area" ).parent().removeClass('d-none');
                $( "#location_2" ).parent().removeClass('d-none');
                $('#colSite').addClass('d-none');
            } else if (val == "office") {
                $( "#location_area" ).parent().addClass('d-none');
                $( "#location_2" ).parent().addClass('d-none');
                $('#colSite').removeClass('d-none');
            } else {
                $( "#location_area" ).parent().addClass('d-none');
                $( "#location_2" ).parent().addClass('d-none');
                $('#colSite').addClass('d-none');
            }
        });

        $('#location_type').change(function(){
            $( "#location_area" ).val("").trigger('change');
            $( "#location_2" ).val("").trigger('change');
            $( "#location_1" ).val("").trigger('change');
        });

        $( "#location_area").select2({
            ajax: {
                url: "{{route('site.area.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.rows,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            allowClear: true,
            dropdownParent: $("#searchCanvas"),
        });

        $( "#location_area").change(function(){
            $( "#location_2" ).val("").trigger('change');
        });

        $( "#location_1" ).select2({
            ajax: {
                url: "{{route('site.site.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.data,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $('#searchCanvas')
        });

        $( "#location_1_expense" ).select2({
            ajax: {
                url: "{{route('site.site.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.data,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $('#searchCanvasExpense')
        });

        $( "#location_expense" ).select2({
            ajax: {
                url: "{{route('site.site.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.data,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $('#searchExpense')
        });

        $( "#location_revenue" ).select2({
            ajax: {
                url: "{{route('site.site.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.data,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $('#searchRevenue')
        });

        $( "#location_payable" ).select2({
            ajax: {
                url: "{{route('site.site.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.data,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $('#searchPayable')
        });

        $( "#location_receivable" ).select2({
            ajax: {
                url: "{{route('site.site.select',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.data,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            dropdownParent: $('#searchReceivable')
        });

        $( "#location_2" ).select2({
            ajax: {
                url: "{{route('site.workorder.selectvilla',['site'=>$site->slug])}}",
                type:'GET',
                dataType: 'json',
                data: function (params) {
                    return {
                        name:params.term,
                        area:$( "#location_area").val(),
                        page:params.page,
                        limit:30,
                    };
                },
                processResults: function (data,params) {
                    params.page = params.page || 1;
                    var option = [];
                    $.each(data.rows,function(index,item){
                        option.push({
                            id:item.id,
                            text: `${item.name}`,
                        });
                    });
                    return {
                        results: option,
                        pagination: {
                            more : (params.page * 30) < data.total
                        },
                    };
                },
            },
            allowClear: true,
            dropdownParent: $("#searchCanvas"),
        });

        $('#year_line').on('change', function() {
			chartdonut();
		});

        $('#year_line_expense').on('change', function() {
			chartexpenserevenue();
		});

        $("#form-search").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }else if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                chartdonut();
                $('#searchCanvas').offcanvas('hide');
                var site = $('#location_1').select2('data');
                // var villa = $('#location_2').select2('data');

                var text = ''

                if (site.length > 0) {
                    text = site[0].text;
                }

                // if (villa.length > 0) {
                //     text = villa[0].text;
                // }

                $('#filterName').html('('+text+')');
            }
        });

        $("#form-search-expense").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }else if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                chartexpenserevenue();
                $('#searchCanvasExpense').offcanvas('hide');
                var site = $('#location_1_expense').select2('data');
                // var villa = $('#location_2').select2('data');

                var text = ''

                if (site.length > 0) {
                    text = site[0].text;
                }

                // if (villa.length > 0) {
                //     text = villa[0].text;
                // }

                $('#filterNameExpense').html('('+text+')');
            }
        });

        $("#form-expense").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }else if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                dataTableExpense.draw();
                $('#searchExpense').offcanvas('hide');
                var site = $('#location_expense').select2('data');
                // var villa = $('#location_2').select2('data');

                var text = ''

                if (site.length > 0) {
                    text = site[0].text;
                }

                // if (villa.length > 0) {
                //     text = villa[0].text;
                // }

                $('#filterExpense').html('('+text+')');
            }
        });

        $("#form-revenue").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }else if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                dataTableRevenue.draw();
                $('#searchRevenue').offcanvas('hide');
                var site = $('#location_revenue').select2('data');
                // var villa = $('#location_2').select2('data');

                var text = ''

                if (site.length > 0) {
                    text = site[0].text;
                }

                // if (villa.length > 0) {
                //     text = villa[0].text;
                // }

                $('#filterRevenue').html('('+text+')');
            }
        });

        $("#form-search-payable").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }else if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                getPayable();
                $('#searchPayable').offcanvas('hide');
                var site = $('#location_payable').select2('data');

                var text = ''

                if (site.length > 0) {
                    text = site[0].text;
                }

                $('#filterNamePayable').html('('+text+')');
            }
        });

        $("#form-search-receivable").validate({
            errorElement: 'div',
            errorClass: 'invalid-feedback',
            focusInvalid: false,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success').addClass('was-validated has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is(':file')) {
                    error.insertAfter(element.parent().parent().parent());
                }else if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                }else if (element.attr('type') == 'checkbox') {
                    error.insertAfter(element.parent());
                }else{
                    error.insertAfter(element);
                }
            },
            submitHandler: function() {
                getReceivable();
                $('#searchReceivable').offcanvas('hide');
                var site = $('#location_receivable').select2('data');

                var text = ''

                if (site.length > 0) {
                    text = site[0].text;
                }

                $('#filterNameReceivable').html('('+text+')');
            }
        });

        chartdonut();
        getPayable();
        getReceivable();
        chartexpenserevenue();

        dataTableExpense = $('#datatable-expense').DataTable( {
            stateSave:true,
            processing: true,
            serverSide: true,
            filter:false,
            info:false,
            lengthChange:true,
            responsive: true,
            ordering: false,
            order: [],
            ajax: {
                url: "{{route('site.home.readexpense',['site'=>$site->slug])}}",
                type: "GET",
                data:function(data){
                    location_expense = $('#form-expense').find('#location_expense').val();
                    data.site_id = location_expense;
                }
            },
            columnDefs:[
                {
                    orderable: false,targets:[0,1,2,3,4]
                },
                { className: "text-end", targets: [2,3,4] },
                { className: "text-center", targets: [0] },
                {
                    targets: [2,3],
                    render: function(data, type, row) {
                        return accounting.formatMoney(data, '', ',', '.');
                    }
                },
            ],
            columns: [
                { data: "no" },
                { data: "account_name" },
                { data: "lastmonth" },
                { data: "currentmonth" },
                { data: "difference" },
            ]
        });

        dataTableRevenue = $('#datatable-revenue').DataTable( {
            stateSave:true,
            processing: true,
            serverSide: true,
            filter:false,
            info:false,
            lengthChange:true,
            responsive: true,
            ordering: false,
            order: [],
            ajax: {
                url: "{{route('site.home.readrevenue',['site'=>$site->slug])}}",
                type: "GET",
                data:function(data){
                    location_revenue = $('#form-revenue').find('#location_revenue').val();
                    data.site_id = location_revenue;
                }
            },
            columnDefs:[
                {
                    orderable: false,targets:[0,1,2,3,4]
                },
                { className: "text-end", targets: [2,3,4] },
                { className: "text-center", targets: [0] },
                {
                    targets: [2,3],
                    render: function(data, type, row) {
                        return accounting.formatMoney(data, '', ',', '.');
                    }
                },
            ],
            columns: [
                { data: "no" },
                { data: "account_name" },
                { data: "lastmonth" },
                { data: "currentmonth" },
                { data: "difference" },
            ]
        });

    });

    function getPayable() {
        var location = $('#form-search-payable').find('#location_payable').val();
        $.ajax({
            type: "GET",
            url: "{{ route('site.home.readpayable', ['site' => $site->slug]) }}",
            data: {
                type: 'ap',
                location: location,
            },
            cache: false,
            beforeSend: function () {
                $('#overlayPayable').removeClass('d-none');
            },
            success: function (response) {
                var data = response.data
                $('#overlayPayable').addClass('d-none');
                $('#Payable_not_due').html(accounting.formatMoney(data[0].total_not_due, "Rp. ", 0, ".", ","));
                $('#Payable_1days').html(accounting.formatMoney(data[0].total_1_30, "Rp. ", 0, ".", ","));
                $('#Payable_30days').html(accounting.formatMoney(data[0].total_31_60, "Rp. ", 0, ".", ","));
                $('#Payable_60days').html(accounting.formatMoney(data[0].total_61_90, "Rp. ", 0, ".", ","));
                $('#Payable_90days').html(accounting.formatMoney(data[0].total_90, "Rp. ", 0, ".", ","));
            }
        });
    }

    function getReceivable() {
        var location = $('#form-search-receivable').find('#location_receivable').val();
        $.ajax({
            type: "GET",
            url: "{{ route('site.home.readpayable', ['site' => $site->slug]) }}",
            data: {
                type: 'ar',
                location: location,
            },
            cache: false,
            beforeSend: function () {
                $('#overlayReceivable').removeClass('d-none');
            },
            success: function (response) {
                var data = response.data
                $('#overlayReceivable').addClass('d-none');
                $('#Receivable_not_due').html(accounting.formatMoney(data[0].total_not_due, "Rp. ", 0, ".", ","));
                $('#Receivable_1days').html(accounting.formatMoney(data[0].total_1_30, "Rp. ", 0, ".", ","));
                $('#Receivable_30days').html(accounting.formatMoney(data[0].total_31_60, "Rp. ", 0, ".", ","));
                $('#Receivable_60days').html(accounting.formatMoney(data[0].total_61_90, "Rp. ", 0, ".", ","));
                $('#Receivable_90days').html(accounting.formatMoney(data[0].total_90, "Rp. ", 0, ".", ","));
            }
        });
    }

    function chartdonut() {
        var year_line = $('#year_line').val();
        var location_1 = $('#form-search').find('#location_1').val();
        // var location_2 = $('#form-search').find('#location_2').val();
        $.ajax({
            url: "{{route('site.home.chartbusiness',['site'=>$site->slug])}}",
            type: "GET",
            dataType: 'json',
            data: {
                year_line: year_line,
                site_id: location_1,
                // villa_id: location_2,
            },
            beforeSend: function () {
                $('#overlayBusiness').removeClass('d-none');
            },
            success: function(data) {
                $('#overlayBusiness').addClass('d-none');
                var chartColumnColors = getChartColorsArray("status_wo");
                if (chartColumnColors) {
                    var chartwo = {
                        chart: {
                            height: 350,
                            type: 'line',
                            dropShadow: {
                                enabled: true,
                                color: '#000',
                                top: 18,
                                left: 7,
                                blur: 10,
                                opacity: 0.2
                            },
                            zoom: {
                                enabled: false
                            },
                            toolbar: {
                                show: false
                            }
                        },
                        plotOptions: {
                            bar: {
                                horizontal: false,
                                columnWidth: '45%',
                                endingShape: 'rounded'
                            },
                        },
                        dataLabels: {
                            enabled: false,
                            formatter: function (value) {
                                return accounting.formatMoney(value, "Rp. ", 0, ".", ",");
                            }
                        },
                        stroke: {
                            curve: 'smooth'
                        },
                        series: [
                            {
                                name: 'Cash In',
                                data: data.valuein
                            },
                            {
                                name: 'Cash Out',
                                data: data.valueout
                            },
                            {
                                name: 'Net',
                                data: data.valuenet
                            }
                        ],
                        colors: chartColumnColors,
                        xaxis: {
                            categories: data.month,
                        },
                        yaxis: {
                            title: {
                                text: 'Value'
                            },
                            labels: {
                                formatter: function (value) {
                                    return accounting.formatMoney(value, "Rp. ", 0, ".", ",");
                                }
                            },
                        },
                        grid: {
                            borderColor: '#e7e7e7',
                            row: {
                                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                                opacity: 0.5
                            },
                        },
                        markers: {
                            size: 1
                        },
                    }

                    var chartwo = new ApexCharts(
                        document.querySelector("#status_wo"),
                        chartwo
                    );

                    chartwo.render();
                }

                chartwo.updateSeries([
                    {
                        name: 'Cash In',
                        data: data.valuein
                    },
                    {
                        name: 'Cash Out',
                        data: data.valueout
                    },
                    {
                        name: 'Net',
                        data: data.valuenet
                    }
                ]);
            }
        })
    }

    function chartexpenserevenue() {
        var year_line = $('#year_line_expense').val();
        var location_1 = $('#form-search-expense').find('#location_1_expense').val();
        // var location_2 = $('#form-search').find('#location_2').val();
        $.ajax({
            url: "{{route('site.home.chartexpense',['site'=>$site->slug])}}",
            type: "GET",
            dataType: 'json',
            data: {
                year_line: year_line,
                site_id: location_1,
                // villa_id: location_2,
            },
            beforeSend: function () {
                $('#overlayExpense').removeClass('d-none');
            },
            success: function(data) {
                $('#overlayExpense').addClass('d-none');
                var chartColumnColors = getChartColorsArray("expense");
                if (chartColumnColors) {
                    var chartexpense = {
                        chart: {
                            height: 350,
                            type: 'line',
                            dropShadow: {
                                enabled: true,
                                color: '#000',
                                top: 18,
                                left: 7,
                                blur: 10,
                                opacity: 0.2
                            },
                            zoom: {
                                enabled: false
                            },
                            toolbar: {
                                show: false
                            }
                        },
                        plotOptions: {
                            bar: {
                                horizontal: false,
                                columnWidth: '45%',
                                endingShape: 'rounded'
                            },
                        },
                        dataLabels: {
                            enabled: false,
                            formatter: function (value) {
                                return accounting.formatMoney(value, "Rp. ", 0, ".", ",");
                            }
                        },
                        stroke: {
                            curve: 'smooth'
                        },
                        series: [
                            {
                                name: 'Expense',
                                data: data.valueexpense
                            },
                            {
                                name: 'Revenue',
                                data: data.valuerevenue
                            }
                            // {
                            //     name: 'Net',
                            //     data: data.valuenet
                            // }
                        ],
                        colors: chartColumnColors,
                        xaxis: {
                            categories: data.month,
                        },
                        yaxis: {
                            title: {
                                text: 'Value'
                            },
                            labels: {
                                formatter: function (value) {
                                    return accounting.formatMoney(value, "Rp. ", 0, ".", ",");
                                }
                            },
                        },
                        grid: {
                            borderColor: '#e7e7e7',
                            row: {
                                colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                                opacity: 0.5
                            },
                        },
                        markers: {
                            size: 1
                        },
                    }

                    var chartexpense = new ApexCharts(
                        document.querySelector("#expense"),
                        chartexpense
                    );

                    chartexpense.render();
                }

                chartexpense.updateSeries([
                    {
                        name: 'Expense',
                        data: data.valueexpense
                    },
                    {
                        name: 'Revenue',
                        data: data.valuerevenue
                    }
                    // {
                    //     name: 'Net',
                    //     data: data.valuenet
                    // }
                ]);
            }
        })
    }
</script>
@endpush