@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
    <style>
        ul {
            margin: 0;
        }
        .custom-box {
            border: 1px solid black;
            margin-top: 75px;
            padding: 20px;
            border-radius: 10px;
        }
    </style>
@endsection
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <b>Filter</b>
                                </div>
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label class="col-xs-12 col-sm-3 control-label">Date Filter :</label>
                                            <div class="col-xs-12 col-sm-9">
                                                <input type="date" class="form-control" name="tanggal" value="{{ $today }}" id="tanggal">
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-9" style="margin-top: 20px; margin-left: 130px">
                                            <button type="submit" class="btn btn-default btn-search">Search</button>
                                        </div>
                                    </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="x_panel">
                                <div class="x_title">
                                    <b>REKAP AUM APPS</b>
                                </div>
                                <div class="x_content">
                                    <div class="x_title" id="summary_apps">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Row Labels</th>
                                                    <th class="text-center">Jumlah Cust</th>
                                                    <th class="text-center">Sum of Aum</th>
                                                </tr>
                                            </thead>
                                            <tbody id="load_summary_apps">
                                                <td colspan="3" class="text-center">
                                                    <h3><i class="fa fa-spinner fa-pulse"></i></h3>
                                                </td>
                                            <tfoot>
                                                <th class="text-right">Grand Total : </th>
                                            </tfoot>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="x_panel">
                                <div class="x_title">
                                    <b>REKAP AUM BNC</b>
                                </div>
                                <div class="x_content">
                                    <div class="x_title" id="summary_bnc">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Row Labels</th>
                                                    <th class="text-center">Jumlah Cust</th>
                                                    <th class="text-center">Sum of Aum</th>
                                                </tr>
                                            </thead>
                                            <tbody id="load_summary_bnc">
                                                <tr>
                                                    <td colspan="3" class="text-center">
                                                        <h3><i class="fa fa-spinner fa-pulse"></i></h3>
                                                    </td>
                                                </tr>
                                            <tfoot>
                                                <th class="text-right">Grand Total : </th>
                                            </tfoot>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="x_panel">
                                <div class="x_title">
                                    <b>REKAP AUM BBX</b>
                                </div>
                                <div class="x_content">
                                    <div class="x_title" id="summary_BBX">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Row Labels</th>
                                                    <th class="text-center">Sum of Aum</th>
                                                </tr>
                                            </thead>
                                            <tbody id="load_summary_bbx">
                                                <tr>
                                                    <td colspan="2" class="text-center">
                                                        <h3><i class="fa fa-spinner fa-pulse"></i></h3>
                                                    </td>
                                                </tr>
                                                <tfoot>
                                                    <th class="text-right">Grand Total : </th>
                                                </tfoot>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                        <div class="col-xs-12 col-sm-6">
                            <div class="x_panel">
                                <div class="x_title">
                                    <b>REKAP AUM ICDX</b>
                                </div>
                                <div class="x_content">
                                    <div class="x_title" id="summary_icdx">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Row Labels</th>
                                                    <th class="text-center">Jumlah Cust</th>
                                                    <th class="text-center">Sum of Aum</th>
                                                </tr>
                                            </thead>
                                            <tbody id="load_summary_icdx">
                                                <tr>
                                                    <td colspan="3" class="text-center">
                                                        <h3><i class="fa fa-spinner fa-pulse"></i></h3>
                                                    </td>
                                                </tr>
                                            <tfoot>
                                                <th >Grand Total : </th>
                                            </tfoot>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="x_panel">
                                <div class="x_title">
                                    <b>REKAP AUM BNC ICDX</b>
                                </div>
                                <div class="x_content">
                                    <div class="x_title" id="summary_bnc_icdx">
                                        <table class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Row Labels</th>
                                                    <th class="text-center">Jumlah Cust</th>
                                                    <th class="text-center">Sum of Aum</th>
                                                </tr>
                                            </thead>
                                            <tbody id="load_summary_bnc">
                                                <tr>
                                                    <td colspan="3" class="text-center">
                                                        <h3><i class="fa fa-spinner fa-pulse"></i></h3>
                                                    </td>
                                                </tr>
                                            <tfoot>
                                                <th class="text-right">Grand Total : </th>
                                            </tfoot>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            @include('includes.footer')
        </div>
    </div>
    <table></table>
@endsection
@section('scripts')
    @include('includes.helper_js')
    <script>
        $(document).ready(function() {
            setTimeout(function() {
                getIcdx();
                getApps();
                getBnc();
                getBncICDX();
                getBBXs();
            }, 900);
        });

        $('.btn-search').click(function() {
            $('#summary_apps').html(
                '<table><tr><td colspan="3" class="text-center"><h3><i class="fa fa-spinner fa-pulse"></i></h3></td></tr></table>'
            );
            $('#summary_icdx').html(
                '<table><tr><td colspan="4" class="text-center"><h3><i class="fa fa-spinner fa-pulse"></i></h3></td></tr></table>'
            );
            $('#summary_bnc').html(
                '<table><tr><td colspan="4" class="text-center"><h3><i class="fa fa-spinner fa-pulse"></i></h3></td></tr></table>'
            );
            $('#summary_bnc_old').html(
                '<table><tr><td colspan="4" class="text-center"><h3><i class="fa fa-spinner fa-pulse"></i></h3></td></tr></table>'
            );
            $('#summary_BBX').html(
                '<table><tr><td colspan="4" class="text-center"><h3><i class="fa fa-spinner fa-pulse"></i></h3></td></tr></table>'
            );
            setTimeout(function() {
                getIcdx();
                getApps(); 
                getBnc();
                getBncICDX();
                getBBXs();
            }, 900);
        });

        function getBnc() {
            Axios.post('/report_aum/bnc', {
                tanggal: $('#tanggal').val(),
                }).then(function(response) {
                    $('#summary_bnc').html(response.data);
                })
                .catch(function(error) {
                    Helper.handleErrorResponse(error);
                });
        }

        function getBncICDX() {
            Axios.post('/report_aum/bnc_icdx', {
                tanggal: $('#tanggal').val(),
                }).then(function(response) {
                    $('#summary_bnc_icdx').html(response.data);
                })
                .catch(function(error) {
                    Helper.handleErrorResponse(error);
                });
        }
        
        // function getBncOld() {
        //     Axios.post('/report_aum/bnc_old', {
        //         tanggal: $('#tanggal').val(),
        //         }).then(function(response) {
        //             $('#summary_bnc_old').html(response.data);
        //         })
        //         .catch(function(error) {
        //             Helper.handleErrorResponse(error);
        //         });
        // }

        function getIcdx() {
            Axios.post('/report_aum/icdx', {
                tanggal: $('#tanggal').val()
                }).then(function(response) {
                    $('#summary_icdx').html(response.data);
                })
                .catch(function(error) {
                    Helper.handleErrorResponse(error);
                });
        }

        function getApps() {
            Axios.post('/report_aum/apps', {
                tanggal: $('#tanggal').val()
                }).then(function(response) {
                    $('#summary_apps').html(response.data);
                })
                .catch(function(error) {
                    Helper.handleErrorResponse(error);
                });
        }

        function getBBXs() {
            Axios.post('/report_aum/bbx', {
                tanggal: $('#tanggal').val()
                }).then(function(response) {
                    $('#summary_BBX').html(response.data);
                })
                .catch(function(error) {
                    Helper.handleErrorResponse(error);
                });
        }

    </script>
@endsection