@php Fun::lang() @endphp
@extends('adminlte::page')
@section('content')
    <div class="title-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li><a href="#">Accounting</a></li>
                <li><a href="#">Journal List</a></li>
            </ul>
        </div>
    </div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-add">
                        <div class="pull-left">
                            <h3>Journal List</h3>
                        </div>
                        <div class="pull-right">
                            @can('Journal-Create')
                                <a href="{{route('journal.create')}}" class="btn btn-primary fa fa-plus"> Add New</a>
                            @endcan
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 block-action">
                    <p class="pull-right btn-action btn btn-xs btn-info" data-toggle="tooltip" data-placement="top" title="Hide/Show"><i class="fa fa-caret-down" aria-hidden="true"></i></p>
                    {!! Form::open(array('route' => 'voucher.print','method'=>'POST','id'=>'print-voucher')) !!}
                    <input type="hidden" name="voucher" id="voucher">
                    @can('Journal-Voucher-Print')
                        <button type="submit" class="pull-right btn btn-xs btn-warning" data-toggle="tooltip" data-placement="top" title="Print Voucher"><i class="fa fa-print" aria-hidden="true"></i></button>
                    @endcan
                    {!! Form::close() !!}
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" id="block-action" style="display:none">
                    <div class="content-action">
                        <div class="col-sm-4">
                            <div class="col-sm-4">
                                <label for="">Reference Number</label>
                            </div>
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <input type="text" name="reference_no" class="form-control ref_no" placeholder="Reference Number">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="col-sm-4">
                                <label for="">Start Date</label>
                            </div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control date_picker start_date">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="col-sm-4">
                                <label for="">End Date</label>
                            </div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control date_picker end_date">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-warning fa fa-search" onclick="search_journal()"> Search</button>
                            <button type="button" class="btn btn-success fa fa-file-excel-o " onclick="tableToExcel('table_journal', 'Journal List')"> Excel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="form-wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table id="table_journal" class="table table-bordered table-striped table table-condensed table-hover">
                                    <thead>
                                    <tr>
                                        {{--                                        <th><label for="checkall">--}}
                                        {{--                                                <input type="checkbox" id="checkall">--}}
                                        {{--                                            </label>--}}
                                        {{--                                        </th>--}}
                                        <th>No</th>
                                        <th>Journal Date</th>
                                        <th>Voucher Type</th>
                                        <th>Voucher Number</th>
                                        <th>Account Name</th>
                                        <th>Reference Number</th>
                                        <th>Description</th>
                                        <th>Debit</th>
                                        <th>Credit</th>
                                        <th width="10%">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody"></tbody>
                                    <tfoot id="tfoot">
                                    <tr>
                                        <td colspan="7" class="text-right bold-green">Total </td>
                                        <td class="bold-orange"></td>
                                        <td class="bold-orange"></td>
                                        <td class="bold-orange"></td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bs-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h3 class="modal-title text-danger">Warning...!</h3>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-10">
                            <h4>Receivable amount must be smaller than or equal available amount.</h4>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="button_primary"><i class="fa fa-close"></i> Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    @include('administrator.accounting.journal.confirm-delete')
@endsection
<style>
    .modal-body {
        position: relative;
        padding: 15px;
        margin-top: -33px;
        margin-left: 20px;
    }
</style>
@section('js')
    <script src="{{asset('assets/controller/journal.js')}}"></script>
    <script type="text/javascript">
        var ArrId = [];
        $(document).on('change', '#checkall', function() {
            ArrId = [];
            if ($(this).is(':checked')) {
                $('button[type="submit"]').removeAttr('disabled');
                $('.checkbox').each(function() {
                    $(this).prop('checked', true);
                    var id = $(this).attr('id');
                    ArrId.push(id);
                });
            } else {
                $('.checkbox').each(function() {
                    $(this).prop('checked', false);
                    ArrId = [];
                });
            }
            push_data(ArrId);
        });
        $(document).ready(function () {
            $('#journal-del').on('click',function (e) {
                e.preventDefault();
                var id = $('#delete-id').val();
                $.ajax({
                    url:"{{route('journal_confirm_delete')}}",
                    type:"POST",
                    dataType:"JSON",
                    data:{
                        "_token": "{{ csrf_token() }}",
                        "delete_id" : id
                    },
                    success:function (data) {
                        $('#form-delete').modal('hide');
                        $('#table_journal').DataTable().ajax.reload();
                        toastr['success'](data['message']);
                    },
                    error:function (err) {
                        console.log(err);
                    }
                });
            });
        });
        $(document).on('change', '.checkbox', function() {
            var id = $(this).attr('id');
            if ($(this).is(':checked')) {
                $('input[type="submit"]').removeAttr('disabled');
                ArrId.push(id);
            } else {
                var index = ArrId.indexOf(id);
                if (index > -1) {
                    ArrId.splice(index, 1);
                }
            }
            push_data(ArrId);
        });
        $(document).on('click', '.btn-action', function() {
            $('#block-action').toggle("fast");
        });


        $("form").submit(function(e) {
            if (ArrId === undefined || ArrId.length == 0) {
                $.alert({
                    title: 'Error',
                    icon: 'fa fa-warning',
                    type: 'orange',
                    content: 'No fileds Selected' +
                        '<hr>' +
                        'Please Select Any Fields',
                });
                return false;
            }
        });

        function push_data(obj) {
            $('#voucher').val(obj);
        }

        function push_array(obj) {
            obj = [];
            $('.checkbox').each(function() {
                var id = $(this).attr('id');
                obj.push(id);
            });
            return obj;
        }

        function search_journal() {
            $('#table_journal').DataTable().destroy();
            var ref = $('.ref_no').val();
            var end_date = $('.end_date').val();
            var start_date = $('.start_date').val();
            $('#table_journal').DataTable({
                "aaSorting": [],
                ordering: false,
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [20, 50, 100, 250, 500],
                    [20, 50, 100, 250, 500]
                ],
                ajax: {
                    url: "{{ route('datatable.get-journal')}}",
                    method: "POST",
                    dataType: "json",
                    data: {
                        ref: ref,
                        start_date: start_date,
                        end_date: end_date,
                        _token: '{{ csrf_token() }}',
                    }
                },
                columns: [
                    {
                        data: 'id'
                    },
                    {
                        data: 'journal_paydate'
                    },
                    {
                        data: 'voucher'
                    },
                    {
                        data: 'voucher_ref'
                    },
                    {
                        data: 'account_code'
                    },
                    {
                        data: 'journal_invoice'
                    },
                    {
                        data: 'journal_des'
                    },
                    {
                        data: 'journal_debit',
                        "className": 'text-right'
                    },
                    {
                        data: 'journal_credit',
                        "className": 'text-right'
                    },
                ],
                "initComplete": function(settings, json) {
                    $('.main-spinner').hide();
                    var export_excel = "{{Gate::check('Export-Excel')}}";
                    if (export_excel != 1) {
                        $('.dt-buttons .buttons-excel').css('display', 'none');
                    }
                },
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    var Total_Owned = api
                        .column(8)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                    var Total_Received = api
                        .column(9)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                    var currentcyFormat = $.fn.dataTable.render.number('\,', '.', 2, '$').display;
                    $(api.column(8).footer()).html(currentcyFormat(Total_Owned));
                    $(api.column(9).footer()).html(currentcyFormat(Total_Received));
                },
            });

            $.fn.dataTable.ext.errMode = 'throw';
        }
        $(document).on('click','.confirm_delete',function () {
            var id = $(this).data('id');
            $('#delete-id').val(id);
            $('#form-delete').modal('show');
        });
    </script>
@endsection