<script>
    function printPage(){
        window.print();
    }
</script>
<style type="text/css">
    .showHideSpan{
        font-size: 14px;
    }
    input[type="checkbox"]{
        width: 20px;height: 18px;
    }
    .displaynone{
        display: none;
    }
    .floatRight{
        float: right;
    }
    #generateCSVBtn,
    #generatePdfBtn{
        padding:5px 50px;
        margin-right: 40px;
    }
    form#expenseorincomelistForm {
        display: inline-flex;
    }
    @media print{
        .showHideSpan{
            display: none;
        }
    }
</style>
<div class="wrapper" id="printWrapper">

            <div class="print" style="overflow: hidden;">
                <form action="<?php echo $this->webroot . 'Expense/printReport/' . $data['Expense']['unique_url']; ?>" class="form-inline hidden-print" id="expenseorincomelistForm" method="post">
                    <div class="form-group">
                        <!-- <label for="participantId"><?php echo __("LBL_SELECT_PARTICIPANT"); ?> </label> -->
                        <input type="hidden" name="unique_url" value="<?php echo $data['Expense']['unique_url']; ?>">
                         
                        <select name="current_perticipants" id="expenseorincomelist" style="width: 50%;height: 35px;min-width: 100px;">
                            <option value="">All</option>
                            <option value="Incomes" <?php echo ($current_perticipants == 'Incomes')? 'selected="selected"':''?>>Incomes</option>
                            <option value="Expenses" <?php echo ($current_perticipants == 'Expenses')? 'selected="selected"':''?>>Expenses</option>
                        </select>
                    </div>
                </form>
                <button type="submit" class="btn btn-info floatRight hidden-print" id="generateCSVBtn"><?php echo __("LBL_CSV"); ?> <img src="<?php echo HTTP_SITE_URL; ?>images/download.png" style="height: 18px;width: 18px;"/></button>
                <button type="submit" class="btn btn-info floatRight hidden-print" id="generatePdfBtn"><?php echo __("LBL_PDF"); ?> <img src="<?php echo HTTP_SITE_URL; ?>images/download.png" style="height: 18px;width: 18px;"/></button>
                <!-- <span><?php //echo date("d/m/Y - H:i"); ?></span> -->
            </div>

<div id="exportPrintTable">
    <div class="wrapper2">
            <div style="width: 100%; overflow: hidden;">
                <div style="width: 40%;float: left; ">
                    <!-- <p><a href="<?php echo $this->webroot; ?>"><img src="<?php echo CDN_URL; ?><?php echo __('LBL_LOGO_PDF');?>" width="270" height="72"  alt=""/></a> </p> -->
                    <div class="description">
                        <p><strong> ExpenseCount "<?php echo $data['Expense']["title"];?>"</strong></p>
                        <?php if(isset($data['Expense']["description"])){ ?>
                        <p><?php echo $data['Expense']["description"];?></p>
                        <?php }
                        $create_date = strtotime($data['Expense']["create_date"]); ?>
                        <p><?php echo __("LBL_CREATED_ON"); ?> <?php echo date('d-M-Y', $create_date);?></p>
                        <p><?php echo __("LBL_BALANCE"); ?>: <b><?php echo ($total_family_income - $total_family_expense)." ".$data['Expense']["currency"];?></b></p>
                    </div>
                </div>
                <div style="width: 60%;float: left; ">
                    <span class="showHideSpan" style=""> (<?php echo __("LBL_HIDE_SHOW"); ?> <input type="checkbox" value="1" id="isChartShow" checked="checked">)</span>
                    <div style="border: 1px solid #bbb; margin: 5px 0; " id="chartDiv">
                        <script src="<?php echo CDN_URL;?>js/highcharts/highcharts.js"></script>
                        <!-- <script src="https://code.highcharts.com/modules/exporting.js"></script> -->
                        <!-- <script src="https://code.highcharts.com/modules/export-data.js"></script> -->

                        <div id="containerLine" style=""></div>

                        <script type="text/javascript">
                            
                            Highcharts.chart('containerLine', {

                                title: {
                                    text: '<?php echo __("LBL_INCOME_EXPENSE_BALANCE_COMPARISON"); ?>'
                                },

                                subtitle: {
                                    text: ''
                                },

                                yAxis: {
                                    title: {
                                        text: 'Amount'
                                    }
                                },
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                },
                                colors: ['#1FA809', '#7E0202', '#0E9FD5', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],

                                plotOptions: {
                                    series: {
                                        label: {
                                            connectorAllowed: false
                                        },
                                        // pointStart: 2010
                                    }
                                },
                                credits: {
                                    enabled:false
                                },
                                exporting: {
                                    enabled:false
                                },

                                series: [
                                <?php if($current_perticipants != 'Expenses' ) : ?>
                                {
                                    name: '<?php echo __("LBL_INCOMES"); ?>',
                                    data: [<?php echo $total_income_str; ?>/*43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175*/]
                                }, 
                                <?php endif; ?>
                                <?php if($current_perticipants != 'Incomes' ) : ?>
                                {
                                    name: '<?php echo __("LBL_EXPENSE"); ?>',
                                    data: [<?php echo $total_expense_str; ?>/*24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434*/]
                                }, 
                                <?php endif; ?>
                                {
                                    name: '<?php echo __("LBL_BALANCE"); ?>',
                                    data: [<?php echo $total_balance_str; ?>/*11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387*/]
                                }],

                                responsive: {
                                    rules: [{
                                        condition: {
                                            maxWidth: 500
                                        },
                                        chartOptions: {
                                            legend: {
                                                layout: 'horizontal',
                                                align: 'center',
                                                verticalAlign: 'bottom'
                                            }
                                        }
                                    }]
                                }

                            });
                        </script>
                    </div>
                </div>
            </div>

        <!-- <div class="print">
            <?php echo __("LBL_INCOMES"); ?> <span><?php echo __("LBL_PRINTED_ON"); ?> <?php echo date("d/m/Y - H:i");?></span>
        </div> -->
        <?php if($current_perticipants != 'Expenses' ) : ?>
        <h5 id="summaryHeader" style="text-align: left;"><?php echo __("LBL_INCOMES"); ?>
        <span class="showHideSpan" style="width: 100%; "> (<?php echo __("LBL_HIDE_SHOW"); ?>: 
            &nbsp;&nbsp;&nbsp;&nbsp;<?php echo __("LBL_FOR_WHAT_REASONS"); ?>
            <input type="checkbox" value="1" id="isWhatReasonShowIncome" checked="checked">
            <?php echo __("LBL_CATEGORY"); ?>
            <input type="checkbox" value="1" id="isCategoryShowIncome" checked="checked">
            &nbsp;&nbsp;&nbsp;&nbsp;<?php echo __("LBL_WHEN"); ?>
            <input type="checkbox" value="1" id="isWhenShowIncome" checked="checked">
            &nbsp;&nbsp;&nbsp;&nbsp;<?php echo __("LBL_HOW_MUCH"); ?>
            <input type="checkbox" value="1" id="isHowMuchShowIncome" checked="checked">
        )
        </span></h5>
        <table class="printTable table" id="topExportTable">
            <thead>
            <tr>
                <th><?php echo __("LBL_FOR_WHAT_REASONS"); ?>?</th>
                <th><?php echo __("LBL_CATEGORY"); ?></th>
                <th><?php echo __("LBL_WHEN"); ?></th>
                <th><?php echo __("LBL_HOW_MUCH"); ?>?</th>
            </tr>
            </thead>
            <tbody>


        <?php 
        $finalIncomeList = array();
        $finalIncomeHeadingList = array();
        $finalIncomeHeadingList['nameHeading'] = __("LBL_FOR_WHAT_REASONS");
        $finalIncomeHeadingList['categoryHeading'] = __("LBL_CATEGORY");
        $finalIncomeHeadingList['dateHeading'] = __("LBL_WHEN");
        $finalIncomeHeadingList['amountHeading'] = __("LBL_HOW_MUCH");

	    foreach($data['FamilyExpense'] as $key=>$value){
            if($value['record_type'] == 2) {
                $finalIncomeList[$key]['expenseName'] = $value['what'];
                $finalIncomeList[$key]['expenseCategory'] = $value['category'];
                $finalIncomeList[$key]['expenseDate'] = $value['expense_date_new'];
                $finalIncomeList[$key]['amount'] = $value['amount'];
                $finalIncomeList[$key]['currency'] = $data['Expense']["currency"];
            ?>
            <tr>
                <td><?php echo $value["what"];?></td>
                <td><?php echo $value["category"];?></td>
                <td><?php echo $value["expense_date_new"];?></td>
                <td><?php echo $value["amount"];?><?php echo " ".$data['Expense']["currency"];?></td>
            </tr>

            <?php
            }
	    }
	    ?>
            </tbody>
            <tfoot>
            <tr style="background: transparent;">
                <td style="border:0px"> </td>
                <td  style="border:0px"> </td>
                <td  style="border:0px;text-align:right"><?php echo __("LBL_TOTAL"); ?>:</td>
                <td  style="border:0px"><b><?php echo $total_family_income." ".$data['Expense']["currency"];?></b></td>
            </tr>
            </tfoot>
        </table>
        <?php endif; ?>

        <!-- <br/>
        <div class="print">
            <?php echo __("LBL_EXPENSE"); ?>
        </div> -->
        <?php if($current_perticipants != 'Incomes' ) : ?>
        <h5 id="summaryHeader" style="text-align: left;"><?php echo __("LBL_EXPENSES"); ?>
        <span class="showHideSpan" style="width: 100%; "> (<?php echo __("LBL_HIDE_SHOW"); ?>: 
            &nbsp;&nbsp;&nbsp;&nbsp;<?php echo __("LBL_FOR_WHAT_REASONS"); ?>
            <input type="checkbox" value="1" id="isWhatReasonShowExpense" checked="checked">
            <?php echo __("LBL_CATEGORY"); ?>
            <input type="checkbox" value="1" id="isCategoryShowExpense" checked="checked">
            &nbsp;&nbsp;&nbsp;&nbsp;<?php echo __("LBL_WHEN"); ?>
            <input type="checkbox" value="1" id="isWhenShowExpense" checked="checked">
            &nbsp;&nbsp;&nbsp;&nbsp;<?php echo __("LBL_HOW_MUCH"); ?>
            <input type="checkbox" value="1" id="isHowMuchShowExpense" checked="checked">
        )
        </span></h5>
        <table class="printTable table" id="exportTable">
            <thead>
            <tr>
                <th><?php echo __("LBL_FOR_WHAT_REASONS"); ?></th>
                <th><?php echo __("LBL_CATEGORY"); ?></th>
                <th><?php echo __("LBL_WHEN"); ?></th>
                <th><?php echo __("LBL_HOW_MUCH"); ?>?</th>
            </tr>
            </thead>
            <tbody>



        <?php
        $finalExpenseList = array();
        $finalExpenseHeadingList = array();
        $finalExpenseHeadingList['nameHeading'] = __("LBL_FOR_WHAT_REASONS");
        $finalExpenseHeadingList['categoryHeading'] = __("LBL_CATEGORY");
        $finalExpenseHeadingList['dateHeading'] = __("LBL_WHEN");
        $finalExpenseHeadingList['amountHeading'] = __("LBL_HOW_MUCH");

	    foreach($data['FamilyExpense'] as $key=>$value){
            if($value['record_type'] == 1) {
                $finalExpenseList[$key]['expenseName'] = $value['what'];
                $finalExpenseList[$key]['expenseCategory'] = $value['category'];
                $finalExpenseList[$key]['expenseDate'] = $value['expense_date_new'];
                $finalExpenseList[$key]['amount'] = $value['amount'];
                $finalExpenseList[$key]['currency'] = $data['Expense']["currency"];
            ?>
            <tr>
                <td><?php echo $value["what"];?></td>
                <td><?php echo $value["category"];?></td>
                <td><?php echo $value["expense_date_new"];?></td>
                <td><?php echo $value["amount"];?><?php echo " ".$data['Expense']["currency"];?></td>
            </tr>

            <?php
            }
	    }
	    ?>
            </tbody>
            <tfoot>
            <tr style="background: #fff;">
                <td style="border:0px"> </td>
                <td  style="border:0px"> </td>
                <td  style="border:0px;text-align:right"><?php echo __("LBL_TOTAL"); ?>:</td>
                <td  style="border:0px"><b><?php echo $total_family_expense." ".$data['Expense']["currency"];?></b></td>
            </tr>
            </tfoot>
        </table>
        <?php endif; ?>


        <div style="width: 100%; overflow: hidden;margin-top: 50px;">
            <div style="width: 40%;float: right; text-align: right;margin-right: 20px;">
                <p><a href="<?php echo $this->webroot; ?>"><img src="<?php echo HTTP_SITE_URL; ?><?php echo __('LBL_FAMILY_EXPENSE_LOGO'); ?>" width="270" height="72"  alt=""/></a> </p>
            </div>
        </div>

        <!-- <div class="footerText">
            <?php echo __("LBL_CLICK"); ?> <a href="#" style="cursor:pointer" onclick="printPage()"> <?php echo __("LBL_HERE"); ?></a> <?php echo __("LBL_TO_PRINT_THE_PAGE"); ?>.</div> -->

        <div class="footer-pdf-print-link hidden-print displaynone">
            <a href="#" onclick="printPage()" class="btn btn-info"><?php echo __("LBL_PRINT"); ?></a>
            <form action="<?php echo $this->Html->url(array('controller'=>'Expense','action'=>'generatePdf'));?>" class="form-inline" method="post" id="generatePdf">
                <input type="hidden" name="whole_content" id="wholeContent">
                <div class="form-group">
                    <button type="submit" class="btn btn-info" id="generatePdfBtn2"><?php echo __("LBL_DOWNLOAD"); ?></button>
                </div>
            </form>

            <form action="<?php echo $this->Html->url(array('controller'=>'Expense','action'=>'generateFamilyCSV'));?>" class="form-inline" method="post" id="generateCSV" style="display: inline-flex;">
                <input type="hidden" name="csv_income_content" value='<?php echo serialize($finalIncomeList); ?>'>
                <input type="hidden" name="csv_income_heading" value='<?php echo serialize($finalIncomeHeadingList); ?>'>
                <input type="hidden" name="csv_expense_content" value='<?php echo serialize($finalExpenseList); ?>'>
                <input type="hidden" name="csv_expense_heading" value='<?php echo serialize($finalExpenseHeadingList); ?>'>
                <div class="form-group">
                    <button type="submit" class="btn btn-info" id="generateCSVBtn2"><?php echo __("LBL_CSV"); ?></button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<script>
    $(document).ready(function(){
        $('#topExportTable').DataTable({
            "paging":   false,
            "searching": false,
            "info":     false
        });
        $('#exportTable').DataTable({
            "paging":   false,
            "searching": false,
            "info":     false
        });

        $("#generateCSVBtn").on('click', function () {
            $("form#generateCSV").submit();
        });
        $("#generatePdfBtn").on('click', function () {
            $('.showHideSpan').hide();
            $('input[type="checkbox"]').hide();
            var Content = $('#exportPrintTable').html();
            var ContentWrap = "<!doctype html><html><body>"+Content+"</body></html>";
            var currentHtml = $("#wholeContent").val(ContentWrap);
            // alert($("#wholeContent").val());
            $("form#generatePdf").submit();
        });

        $("#isWhatReasonShowIncome").on('click', function () {
            if(this.checked) {
                $('table#topExportTable th:nth-child(1)').show();
                $('table#topExportTable td:nth-child(1)').show();
            } else {
                $('table#topExportTable th:nth-child(1)').hide();
                $('table#topExportTable td:nth-child(1)').hide();
            }
        });

        $("#isCategoryShowIncome").on('click', function () {
            if(this.checked) {
                $('table#topExportTable th:nth-child(2)').show();
                $('table#topExportTable td:nth-child(2)').show();
            } else {
                $('table#topExportTable th:nth-child(2)').hide();
                $('table#topExportTable td:nth-child(2)').hide();
            }
        });

        $("#isWhenShowIncome").on('click', function () {
            if(this.checked) {
                $('table#topExportTable th:nth-child(3)').show();
                $('table#topExportTable td:nth-child(3)').show();
            } else {
                $('table#topExportTable th:nth-child(3)').hide();
                $('table#topExportTable td:nth-child(3)').hide();
            }
        });

        $("#isHowMuchShowIncome").on('click', function () {
            if(this.checked) {
                $('table#topExportTable th:nth-child(4)').show();
                $('table#topExportTable td:nth-child(4)').show();
            } else {
                $('table#topExportTable th:nth-child(4)').hide();
                $('table#topExportTable td:nth-child(4)').hide();
            }
        });

        $("#isWhatReasonShowExpense").on('click', function () {
            if(this.checked) {
                $('table#exportTable th:nth-child(1)').show();
                $('table#exportTable td:nth-child(1)').show();
            } else {
                $('table#exportTable th:nth-child(1)').hide();
                $('table#exportTable td:nth-child(1)').hide();
            }
        });

        $("#isCategoryShowExpense").on('click', function () {
            if(this.checked) {
                $('table#exportTable th:nth-child(2)').show();
                $('table#exportTable td:nth-child(2)').show();
            } else {
                $('table#exportTable th:nth-child(2)').hide();
                $('table#exportTable td:nth-child(2)').hide();
            }
        });

        $("#isWhenShowExpense").on('click', function () {
            if(this.checked) {
                $('table#exportTable th:nth-child(3)').show();
                $('table#exportTable td:nth-child(3)').show();
            } else {
                $('table#exportTable th:nth-child(3)').hide();
                $('table#exportTable td:nth-child(3)').hide();
            }
        });

        $("#isHowMuchShowExpense").on('click', function () {
            if(this.checked) {
                $('table#exportTable th:nth-child(4)').show();
                $('table#exportTable td:nth-child(4)').show();
            } else {
                $('table#exportTable th:nth-child(4)').hide();
                $('table#exportTable td:nth-child(4)').hide();
            }
        });

        $("#isChartShow").on('click', function () {
            if(this.checked) {
                $('#chartDiv').show();
            } else {
                $('#chartDiv').hide();
            }
        });

        $("#expenseorincomelist").on('change', function () {
            // var Content = $('#exportPrintTable').html();
            // var ContentWrap = "<!doctype html><html><body>"+Content+"</body></html>";
            // var currentHtml = $("#wholeContent").val(ContentWrap);
            // alert($("#wholeContent").val());
            $("form#expenseorincomelistForm").submit();
            // dashBoard.printExpense();
        });
    });
</script>