@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Chart of Accounts')

@section('css')
<style type="text/css">
	.datatable-column-width {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		max-height: 90px;
	}
</style>
<style>
    .tebal {
        font-weight:bold;
        font-size:8px;
        background-color: #f2f2f2;
        border-top:1px solid black !important;
        border-bottom:1px solid black !important;
    }

    .tebal_view {
        font-weight:bold;
        font-size:14px;
        background-color: #f2f2f2;
        border-top:1px solid black !important;
        border-bottom:1px solid black !important;
    }

    .listtable {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
        font-size: 8px;
    }

    .listtable td, .listtable th {
        border: 1px solid #ddd;
        padding: 2px;
    }

    .listtable th {
        background-color: #f2f2f2;
    }
</style>
@endsection

@section('content')

<!-- Page header -->
<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">COA mutation -</span> Data</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">

	<div class="row">
		<div class="col-md-12">

            <div class="card-header header-elements-inline">
                <div class="d-flex row">
                    <div class="col-lg-6">
                        <label>Method Filter :</label>
                        <select name="method" id="method" class="form-control form-control-select2">
                            <option value="">Filter Date</option>
                            <option value="today" selected>today</option>
                            <option value="lastweek">lastweek</option>
                            <option value="1months">one month ago</option>
                            <option value="3months">3 months ago</option>
                            <option value="1years">1 years ago</option>
                        </select>
                    </div>
                    <div class="col-lg-6">
                        <label class="date_con">Date :</label>
                        <input type="text" name="tanggal" style="display:none;"
                            class="form-control daterange-picker date_con"
                            id="tanggal"
                        >
                    </div>
                </div>
                <div class="d-flex right row font-weight-bold">
                    <label>&nbsp;</label><br>
                    <label>
                        Beginning balance: {{ ribuanDuaAngkaBelakangKoma($prev_balance) }}
                    </label>
                </div>
            </div>

			<!-- Hover rows -->
			<div class="card">
				{{-- <div class="card-header header-elements-inline">
                    &nbsp;
                    <div class="d-flex right row">
                        <div class="col-sm-4">
                            <label>Previous debits: </label>
                            <br>
                            <label class="font-weight-bold">10.000</label>
                        </div>
                        <div class="col-sm-4">
                            <label>Previous credit: </label>
                            <label class="font-weight-bold">10.000</label>
                        </div>
                        <div class="col-sm-4">
                            <label>Previous balance: </label>
                            <label class="font-weight-bold">10.000</label>
                        </div>
                    </div>
				</div> --}}

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th style="width: 10%">Date</th>
							<th style="width: 20%">Source</th>
							<th style="width: 20%">Account-no</th>
							<th style="width: 20%">Description</th>
							<th style="width: 20%">Debit</th>
							<th style="width: 20%">Credit</th>
							<th style="width: 15%; text-align: center">Detail</th>
						</tr>
					</thead>
					<tbody>
				    </tbody>
				</table>
			</div>
			<!-- /hover rows -->
		</div>
	</div>

</div>
<!-- /content area -->

<!-- Detail Mutasi modal -->
<div id="detail-mutasi-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" align="center">
                <h6 class="modal-title font-weight-bold">Detail stock mutation</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">

                <div class="form-group row">
                    <div class="col-lg-3"> Date </div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-5" id="date"></div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-3"> Account-no </div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-5" id="account"></div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-3"> Description </div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-5" id="description"></div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-3"> Debit </div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-5" id="debit"> 0 </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-3"> Credit </div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-5" id="credit"> 0 </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-3"> Balance </div>
                    <div class="col-lg-1">:</div>
                    <div class="col-lg-5" id="balance"> 0 </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
<!-- /Detail Mutasi modal -->
@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/editors/summernote/summernote.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>

<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>

<script>
    let idcoa = {!! json_encode($idcoa) !!};
    let tanggal = $('#tanggal').val();;
    let method  = $('#method').val();;

    var DatatableBasic = function() {

        // Basic Datatable examples
        var _componentDatatableBasic = function() {
            if (!$().DataTable) {
                console.warn('Warning - datatables.min.js is not loaded.');
                return;
            }

            // Setting datatable defaults
            $.extend( $.fn.dataTable.defaults, {
                autoWidth: false,
                columnDefs: [{
                    orderable: false,
                    // width: 200,
                    targets: [ 5 ]
                }],
                dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                language: {
                    search: '<span>Filter:</span> _INPUT_',
                    searchPlaceholder: 'Type to filter...',
                    lengthMenu: '<span>Show:</span> _MENU_',
                    paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                }
            });

            let datas = [
                {data: 'date'},
                {data: 'from'},
                {data: 'accdesc'},
                {data: 'remark'},
                {data: 'debet'},
                {data: 'credit'},
                {data:null, render:function(data, type, row){
                    let html = '';
                    html += `
                        <button type="button"
                                class="btn btn-light btn-icon"
                                title="See Detail"
                                data-toggle="modal"
                                data-target="#modal_show"
                                onclick="viewDetail(${data.id});"
                        >
                            <i class="icon-exclamation"></i>
                        </button>
                    `;
                    return html
                }}
            ];

            // Basic datatable
            $('.datatable-basic').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{url('/coamuatasi-datatable')}}/"+idcoa,
                    type: "GET",
                    data:{
                        _token: '{{csrf_token()}}',
                        tanggal: tanggal,
                        method: method,
                    },
                },
                columns: datas,
                "order": [[ 0, "desc" ]],
            });
            // $('.datatable-basic').DataTable({
            //     "bInfo" : false
            // });

            $('.datatable-journal-lists').DataTable({
                "bInfo" : false,
            });

            // Alternative pagination
            $('.datatable-pagination').DataTable({
                pagingType: "simple",
                language: {
                    paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
                }
            });

            // Datatable with saving state
            $('.datatable-save-state').DataTable({
                stateSave: true
            });

            // Scrollable datatable
            var table = $('.datatable-scroll-y').DataTable({
                autoWidth: true,
                scrollY: 300
            });

            // Resize scrollable table when sidebar width changes
            $('.sidebar-control').on('click', function() {
                table.columns.adjust().draw();
            });
        };

        // Select2 for length menu styling
        var _componentSelect2 = function() {
            if (!$().select2) {
                console.warn('Warning - select2.min.js is not loaded.');
                return;
            }

            // Initialize
            $('.dataTables_length select').select2({
                minimumResultsForSearch: Infinity,
                dropdownAutoWidth: true,
                width: 'auto'
            });
        };


        //
        // Return objects assigned to module
        //

        return {
            init: function() {
                _componentDatatableBasic();
                _componentSelect2();
            }
        }
    }();

    var FormValidation = function() {

        // Validation config
        var _componentValidation = function() {
            if (!$().validate) {
                console.warn('Warning - validate.min.js is not loaded.');
                return;
            }

            // Initialize
            var validator_edit_coa = $('#form_edit_coa').validate({
                focusInvalid: false,
                ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
                errorClass: 'validation-invalid-label',
                //successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').addClass('has-error');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').removeClass('has-error');
                },
                // success: function(label) {
                //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
                //},

                // Different components require proper error label placement
                errorPlacement: function(error, element) {

                    // Unstyled checkboxes, radios
                    if (element.parents().hasClass('form-check')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parents('.form-check').parent() );
                    }

                    // Input with icons and Select2
                    else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent() );
                    }

                    // Input group, styled file input
                    else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent().parent() );
                    }

                    // Other elements
                    else {
                        $(element).closest('.addError').addClass('has-error');
                        error.insertAfter(element);
                    }
                },
                messages: {
                    account_no: {
                        required: 'Please fill out this field.'
                    },
                    description: {
                        required: 'Please fill out this field.'
                    },
                    dept: {
                        required: 'Please select an item in the list.'
                    },
                },
            });

            // Initialize
            var validator_add_coa = $('#form_coa').validate({
                focusInvalid: false,
                ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
                errorClass: 'validation-invalid-label',
                //successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').addClass('has-error');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                    $(element).closest('.addError').removeClass('has-error');
                },
                // success: function(label) {
                //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
                //},

                // Different components require proper error label placement
                errorPlacement: function(error, element) {

                    // Unstyled checkboxes, radios
                    if (element.parents().hasClass('form-check')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parents('.form-check').parent() );
                    }

                    // Input with icons and Select2
                    else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent() );
                    }

                    // Input group, styled file input
                    else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                        $(element).closest('.addError').addClass('has-error');
                        error.appendTo( element.parent().parent() );
                    }

                    // Other elements
                    else {
                        $(element).closest('.addError').addClass('has-error');
                        error.insertAfter(element);
                    }
                },
                messages: {
                    account_no: {
                        required: 'Please fill out this field.'
                    },
                    description: {
                        required: 'Please fill out this field.'
                    },
                    dept: {
                        required: 'Please select an item in the list.'
                    },
                },
            });

            $('#modal_edit_budget, #modal_add_budget').on('hidden.bs.modal', function () {
                validator_edit_coa.resetForm();
                validator_add_coa.resetForm();
            })
        };

        // Return objects assigned to module
        return {
            init: function() {
                _componentValidation();
            }
        }
    }();

    // Initialize module
    // ------------------------------

    document.addEventListener('DOMContentLoaded', function() {
        DatatableBasic.init();
        FormValidation.init();
    });
</script>
<script type="text/javascript">
	$( document ).ready(function() {

        $('.form-control-select2').select2();

        $('.daterange-picker').daterangepicker({
            applyClass: 'btn-primary',
            cancelClass: 'btn-light',
            startDate: `${moment("{{getSystemDate()}}").format('DD-MM-YYYY')}`,
            endDate: `${moment("{{getSystemDate()}}").format('DD-MM-YYYY')}`,
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        // Default style
        @if(session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
        @if ( session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

    });

    function viewDetail(params) {
        $.ajax({
            type: "get",
            url: "{{url('coa-detail-mutasi')}}/"+params,
            dataType: "json",
            success: function (response) {
                var mutasi = response.detail

                $('#detail-mutasi-modal #date').html(mutasi?.date)
                $('#detail-mutasi-modal #account').html(mutasi?.account_no)
                $('#detail-mutasi-modal #description').html(mutasi?.remark)
                $('#detail-mutasi-modal #debit').html(mutasi?.debet)
                $('#detail-mutasi-modal #credit').html(mutasi?.credit)
                $('#detail-mutasi-modal #balance').html(mutasi?.balance)

                $('#detail-mutasi-modal').modal('show')
            }
        });
    }

    // ketika tanggal di pilih
    $(document).on("change", "#tanggal", function () {
        tanggal = $('#tanggal').val()
        method  = $('#method').val()
        if (method) {
            $('#tanggal').prop('disabled', true)
            $('.date_con').hide()
        }else{
            $('#tanggal').prop('disabled', false)
            $('.date_con').show()
        }
        $('.datatable-basic').DataTable().clear().destroy()
        DatatableBasic.init()
    });

    // ketika method di pilih
    $(document).on("change", "#method", function () {
        tanggal = $('#tanggal').val()
        method  = $('#method').val()
        if (method) {
            $('#tanggal').prop('disabled', true)
            $('.date_con').hide()
        }else{
            $('#tanggal').prop('disabled', false)
            $('.date_con').show()
        }
        $('.datatable-basic').DataTable().clear().destroy()
        DatatableBasic.init()
    });
</script>
@endsection