@extends('layouts/microfin_layout')
@section('title', '| Loan & Savings Adjustment')
@section('content')

    <style>
        .error {
            border:2px solid red;
        }

        .panel-default {
            color: black!important;
            padding-top: 10px!important;
        }
    </style>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:0px">

                    <div class="panel-options">
                        <button id="printIcon1" class="btn btn-info pull-left print-icon"  target="_blank" style="">
                            <i class="fa fa-print fa-lg" aria-hidden="true">Print</i>
                        </button>
                        <button id="printIcon2" class="btn btn-info pull-left print-icon"  target="_blank" style="">
                            <i class="fa fa-print fa-lg" aria-hidden="true">Print</i>
                        </button>
                        <button id="btnExportExcel1" class="btn btn-info pull-center print-icon"  target="_blank" style="">
                            <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Excel</i>
                        </button>
                        <button id="btnExportExcel2" class="btn btn-info pull-center print-icon"  target="_blank" style="">
                            <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Excel</i>
                        </button>

                        <button  id="btnExportPdf1" class="btn btn-info pull-right print-icon"  target="_blank" style="">
                            <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Pdf</i>
                        </button>
                        <button  id="btnExportPdf2" class="btn btn-info pull-right print-icon"  target="_blank" style="">
                            <i class="fa-file-excel-o fa-lg" aria-hidden="true"> Pdf</i>
                        </button>
                    </div>

                    <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">
                        Loan & Savings Adjustment Report
                    </h3>
                </div>

                <div class="panel-body panelBodyView">
                    {!! Form::open(array('name' => 'searchForm', 'class' => 'searchForm', 'id' => 'searchForm', 'url' => '#', 'method' => 'GET')) !!}
                    <div class="row">
                        <div class="col-xs-1">
                            {!! Form::label('Report Level', 'Report Level:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('levelId', array('' => 'Select') + $reportLevel, null, array('class'=>'form-control', 'id' => 'levelId')) !!}
                        </div>
                        <div class="col-xs-1" id="regionDiv">
                            {!! Form::label('region', 'Region:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('regionId', array('' => 'Select', 'all' => 'All') + $getRegion, null, array('class'=>'form-control', 'id' => 'regionId')) !!}
                        </div>
                        <div class="col-xs-1" id="zoneDiv">
                            {!! Form::label('zone', 'Zone:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('zoneId', array('' => 'Select', 'all' => 'All') + $getZone, null, array('class'=>'form-control', 'id' => 'zoneId')) !!}
                        </div>
                        <div class="col-xs-1" id="areaDiv">
                            {!! Form::label('area', 'Area:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('areaId', array('' => 'Select', 'all' => 'All') + $getArea, null, array('class'=>'form-control', 'id' => 'areaId')) !!}
                        </div>
                        <div class="col-xs-1">
                            {!! Form::label('branch', 'Branch:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('branchId', array('' => 'Select'), null, array('class'=>'form-control', 'id' => 'branchId')) !!}
                        </div>
                        <div class="col-xs-1">
                            {!! Form::label('samity', 'Samity:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('samityId', array('' => 'Select'), null, array('class'=>'form-control', 'id' => 'samityId')) !!}

                        </div>
                        <div class="col-xs-1">
                            {!! Form::label('report option', 'Report Option:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::select('optioId', array('' => 'Select', '0' => 'Summary', '1' => 'Details'), null, array('class'=>'form-control', 'id' => 'optioId')) !!}
                        </div>
                        <div class="col-xs-1">
                            {!! Form::label('date from', 'Date From:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::text('dateFrom', $value = null, ['class' => 'form-control datepicker', 'id' => 'dateFrom', 'type' => 'text', 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="col-xs-1">
                            {!! Form::label('date to', 'Date To:*', ['class' => 'control-label']) !!} <br/>
                            {!! Form::text('dateTo', $value = null, ['class' => 'form-control datepicker', 'id' => 'dateTo', 'type' => 'text', 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="col-xs-1">
                            {!! Form::label('', '', ['class' => 'control-label']) !!} <br/>
                            {!! Form::submit('Show Report', ['id' => 'submit', 'class' => 'btn btn-search', 'style' => 'float:right;color:white']) !!}
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>

                <br>

                <div class="row">
                    <div class="col-md-12" style="float: left">
                        <div id="summaryTableDiv">
                            <div class="row" style="padding-bottom: 0px; text-align: center; vertical-align: middle; color: black; font-weight: bold; "> {{-- div for Company --}}
                              <span style="font-size:14px;">Ambala Foundation</span><br/>
                              <span style="font-size:14px;">Loan & Savings Adjustment Summary Report</span><br/>
                              <span style="font-size:14px;">Reporting Branch : </span><span id="summaryReportingBranch"></span><br/>
                              <span style="font-size:14px;">Reporting Period : </span><span id="summaryReportingPeriod" style="font-size:13px;"></span>
                            </div>
                            <br>
                            <table class="table table-striped table-bordered" border="1px solid black" id="summaryTable" style="border-collapse: collapse;">
                                <tr style="background-color: #696969!important;">
                                    <th rowspan="3">#SL</th>
                                    <th rowspan="3">Name & Code Of Zone</th>
                                    <th rowspan="3">Name & Code Of Area</th>
                                    <th rowspan="3">Name & Code Of Branch</th>
                                    <th rowspan="1" colspan="4">Loan Adjustment With Savings Account</th>
                                </tr>
                                <tr style="background-color: #696969!important;">
                                    <th rowspan="2">Savings Amount (TK)</th>
                                    <th rowspan="1" colspan="3">Loan Amount (TK)</th>
                                </tr>
                                <tr style="background-color: #696969!important;">
                                    <th rowspan="1">Principal</th>
                                    <th rowspan="1">Servicce Charge</th>
                                    <th rowspan="1">Total</th>
                                </tr>
                                <tbody id="summaryTableBody">
                                </tbody>
                            </table>
                        </div>

                        <div id="detailsTableDiv">
                            <div class="row" style="padding-bottom: 0px; text-align: center; vertical-align: middle; color: black; font-weight: bold; "> {{-- div for Company --}}
                              <span style="font-size:14px;">Ambala Foundation</span><br/>
                              <span style="font-size:14px;">Loan & Savings Adjustment Details Report</span><br/>
                              <span style="font-size:14px;">Reporting Branch : </span><span id="detailsReportingBranch"></span><br/>
                              <span style="font-size:14px;">Reporting Period : </span><span id="detailsReportingPeriod"></span>
                            </div>
                            <br>
                            <table class="table table-striped table-bordered" border="1px solid ash" id="detailsTable" style="border-collapse: collapse;">
                                <tr style="background-color: #696969!important;">
                                    <th rowspan="3">#SL</th>
                                    <th rowspan="3">Date</th>
                                    <th rowspan="3">Branch</th>
                                    <th rowspan="1" colspan="2">Member Information</th>
                                    <th rowspan="3">Code & Name of Samity</th>
                                    <th rowspan="1" colspan="2">Adjustment Code</th>
                                    <th rowspan="1" colspan="4">Loan Adjustment With Savings Amount (TK)</th>
                                </tr>
                                <tr style="background-color: #696969!important;">
                                    <th rowspan="2">Member Code</th>
                                    <th rowspan="2">Member Name</th>
                                    <th rowspan="2">Savings Code</th>
                                    <th rowspan="2">Loan Code</th>
                                    <th rowspan="2">Savings (TK)</th>
                                    <th rowspan="1" colspan="3">Loan (TK)</th>
                                </tr>
                                <tr style="background-color: #696969!important;">
                                    <th rowspan="1">Principal</th>
                                    <th rowspan="1">Servicce Charge</th>
                                    <th rowspan="1">Total</th>
                                </tr>
                                <tbody id="detailsTableBody" style="color: black !important;">

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

            </div>


        </div>
    </div>

    <script type="text/javascript">
        $("#btnExportExcel1").click(function(e) {
            //alert('sdsds');
            var today = new Date();
            var dd = today.getDate();

            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();
            if(dd<10) 
            {
                dd='0'+dd;
            } 

            if(mm<10) 
            {
                mm='0'+mm;
            } 
            today = dd+'-'+mm+'-'+yyyy;
            //alert(today);
            let file = new Blob([$('#summaryTableDiv').html()], {type:"application/vnd.ms-excel"});
            let url = URL.createObjectURL(file);
            let a = $("<a />", {
              href: url,
              download: "Loan and Savings Adjustment Summary Report_"+ today + ".xls"}).appendTo("body").get(0).click();
            e.preventDefault();
        });
    </script>

    <script type="text/javascript">
        $("#btnExportExcel2").click(function(e) {
            //alert('sdsds');
            var today = new Date();
            var dd = today.getDate();

            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();
            if(dd<10) 
            {
                dd='0'+dd;
            } 

            if(mm<10) 
            {
                mm='0'+mm;
            } 
            today = dd+'-'+mm+'-'+yyyy;
            //alert(today);
            let file = new Blob([$('#detailsTableDiv').html()], {type:"application/vnd.ms-excel"});
            let url = URL.createObjectURL(file);
            let a = $("<a />", {
              href: url,
              download: "Loan and Savings Adjustment Details Report_"+ today + ".xls"}).appendTo("body").get(0).click();
            e.preventDefault();
        });
    </script>

    <script type="text/javascript">


        $("#btnExportPdf1").click(function(e) {
            var today = new Date();
            var dd = today.getDate();

            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();
            if(dd<10) 
            {
                dd='0'+dd;
            } 

            if(mm<10) 
            {
                mm='0'+mm;
            } 
            today = dd+'-'+mm+'-'+yyyy;
            //alert(today);
            // let file = new Blob([$('#printDiv').html()], {type:"application/pdf"});
            // let url = URL.createObjectURL(file);
            // let a = $("<a />", {
            //   href: url,
            //   download: "POMIS-1 Report_"+ today + ".pdf"}).appendTo("body").get(0).click();
            // e.preventDefault();
            // var blob = new Blob([$('#printDiv').html()]);
            // var link = document.createElement('a');
            // link.href = window.URL.createObjectURL(blob);
            // link.download = "Sample.pdf";
            // link.click();
            var file = new Blob([$('#summaryTableDiv').html()], {type: 'application/octet-stream'});
            var fileURL = URL.createObjectURL(file);
            //window.open(fileURL);
            let a = $("<a />", {
                href: fileURL,
                download: "Loan and Savings Adjustment Summary Report_"+ today + ".pdf"}).appendTo("body").get(0).click();
            e.preventDefault();
        });


    </script>

    <script type="text/javascript">


        $("#btnExportPdf2").click(function(e) {
            var today = new Date();
            var dd = today.getDate();

            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();
            if(dd<10) 
            {
                dd='0'+dd;
            } 

            if(mm<10) 
            {
                mm='0'+mm;
            } 
            today = dd+'-'+mm+'-'+yyyy;
            //alert(today);
            // let file = new Blob([$('#printDiv').html()], {type:"application/pdf"});
            // let url = URL.createObjectURL(file);
            // let a = $("<a />", {
            //   href: url,
            //   download: "POMIS-1 Report_"+ today + ".pdf"}).appendTo("body").get(0).click();
            // e.preventDefault();
            // var blob = new Blob([$('#printDiv').html()]);
            // var link = document.createElement('a');
            // link.href = window.URL.createObjectURL(blob);
            // link.download = "Sample.pdf";
            // link.click();
            var file = new Blob([$('#detailsTableDiv').html()], {type: 'application/octet-stream'});
            var fileURL = URL.createObjectURL(file);
            //window.open(fileURL);
            let a = $("<a />", {
                href: fileURL,
                download: "Loan and Savings Adjustment Details Report_"+ today + ".pdf"}).appendTo("body").get(0).click();
            e.preventDefault();
        });


    </script>

    <script>
        $(document).ready(function() {
            $("#printIcon1").click(function(event) {
                var mainContents = document.getElementById("summaryTableDiv").innerHTML;
                var headerContents = '';

                var printStyle = '<style>#summaryTable{float:left;height:auto;padding:0px;width:100% !important;font-size:11px;border:1pt ash;page-break-inside:auto;font-family:Arial;}  thead tr th{text-align:center;vertical-align: top;padding:3px;font-size:11px} #summaryTable thead tr th:nth-child(1){ width: 50px;} thead tr th:nth-child(10){ width: 40px;} tbody tr td:nth-child(10){ width: 40px;} tbody tr td.amount {border: 1px solid ash;text-align:right;vertical-align: middle;padding:3px;font-size:11px} tbody tr td {border: 1px solid ash;text-align:center;vertical-align: middle;padding:3px;font-size:11px} td:nth-child(1){text-align:left;} tr{ page-break-inside:avoid; page-break-after:auto } tr:last-child { font-weight: bold;} .name{text-align:left;vertical-align:left;}</style><style media="print">@page{margin:8mm 8mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{#summaryTable tr:nth-of-type(10n){page-break-after: always;}} td.name{text-align:left;}</style>';

                var printContents = '<div id="order-details-wrapper">' + headerContents +printStyle+ mainContents +'</div>';

                var win = window.open('','printwindow');
                win.document.write(printContents);
                win.print();
                win.close();
            });

            $("#printIcon2").click(function(event) {
                var mainContents = document.getElementById("detailsTableDiv").innerHTML;
                var headerContents = '';

                var printStyle = '<style>#detailsTable{float:left;height:auto;padding:0px;width:100% !important;font-size:11px;border:1pt ash;page-break-inside:auto;font-family:Arial;}  thead tr th{text-align:center;vertical-align: top;padding:3px;font-size:11px} #summaryTable thead tr th:nth-child(1){ width: 50px;} thead tr th:nth-child(10){ width: 40px;} tbody tr td:nth-child(10){ width: 40px;} tbody tr td.amount {border: 1px solid ash;text-align:right;vertical-align: middle;padding:3px;font-size:11px} tbody tr td {border: 1px solid ash;text-align:center;vertical-align: middle;padding:3px;font-size:11px} td:nth-child(1){text-align:left;} tr{ page-break-inside:avoid; page-break-after:auto } tr:last-child { font-weight: bold;} .name{text-align:left;vertical-align:left;}</style><style media="print">@page{margin:8mm 8mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{#summaryTable tr:nth-of-type(10n){page-break-after: always;}} td.name{text-align:left;}</style>';

                var printContents = '<div id="order-details-wrapper">' + headerContents +printStyle+ mainContents +'</div>';

                var win = window.open('','printwindow');
                win.document.write(printContents);
                win.print();
                win.close();
            });

            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                yearRange: '1950:present',
            });

            $("#areaDiv").hide();
            $("#zoneDiv").hide();
            $("#regionDiv").hide();

            $("#summaryTableDiv").hide();
            $("#detailsTableDiv").hide();

            $("#printIcon1").hide();
            $("#printIcon2").hide();

            $("#btnExportExcel1").hide();
            $("#btnExportExcel2").hide();

            $("#btnExportPdf1").hide();
            $("#btnExportPdf2").hide();

            var getDesignation = '<br />
<b>Warning</b>:  Undefined variable $getDesignation in <b>/home/shikkhaplus/public_html/demo_bk/resources/views/microfin/reports/loanAndSavingsAdjustment/loanAndSavingsAdjustment.blade21072020.php</b> on line <b>371</b><br />
';
            var areaId = '<br />
<b>Warning</b>:  Undefined variable $areaId in <b>/home/shikkhaplus/public_html/demo_bk/resources/views/microfin/reports/loanAndSavingsAdjustment/loanAndSavingsAdjustment.blade21072020.php</b> on line <b>372</b><br />
';
            var zoneId = '<br />
<b>Warning</b>:  Undefined variable $zoneId in <b>/home/shikkhaplus/public_html/demo_bk/resources/views/microfin/reports/loanAndSavingsAdjustment/loanAndSavingsAdjustment.blade21072020.php</b> on line <b>373</b><br />
';
            var regionId = '<br />
<b>Warning</b>:  Undefined variable $regionId in <b>/home/shikkhaplus/public_html/demo_bk/resources/views/microfin/reports/loanAndSavingsAdjustment/loanAndSavingsAdjustment.blade21072020.php</b> on line <b>374</b><br />
';

            $(document).on('change', '#levelId', function() {
                console.log('level id changed');
                console.log('id : ', $(this).val());

                $("#areaDiv").hide();
                $("#zoneDiv").hide();
                $("#regionDiv").hide();

                if ($(this).val() == 1) {
                    var divt= $(this).parent();
                    op = '';
                    $('#branchId').empty();

                    $.ajax({
                        type: 'get',
                        url: './getDataAccordingToBranch',
                        dataType: 'json',
                        data: {
                        'designation' : getDesignation,
                        'areaId' : areaId,
                        'zoneId' : zoneId,
                        'regionId' : regionId
                        },
                        success: function(_response) {
                            console.log('Success');
                            console.log(Array.isArray(_response));
                            console.log(Object.keys(_response).length);

                            op+='<option value="" style="color: black;">Select</option>';
                            op+='<option value="all" style="color: black;">All</option>';

                            for (const [key, value] of Object.entries(_response)) {
                                op+='<option value="'+key+'" style="color: black;">'+value+'</option>';
                            }

                            divt.find('#branchId').html(' ');
                            $('#branchId').append(op);
                        },
                        error: function(_response) {
                            alert(_response.errors);
                        }
                    });
                }
                else if ($(this).val() == 2) {
                    $("#areaDiv").show();
                    $("#zoneDiv").hide();
                    $("#regionDiv").hide();
                }
                else if ($(this).val() == 3) {
                    $("#areaDiv").hide();
                    $("#zoneDiv").show();
                    $("#regionDiv").hide();
                }
                else {
                    $("#areaDiv").hide();
                    $("#zoneDiv").hide();
                    $("#regionDiv").show();
                }

            });

            $(document).on('change', '#areaId', function() {
                var divt= $(this).parent();
                op = '';
                $('#branchId').empty();

                $.ajax({
                    type: 'get',
                    url: './getDataAccordingToArea',
                    dataType: 'json',
                    data: {
                        'regionId' : $('#regionId').val(),
                        'zoneId' : $('#zoneId').val(),
                        'areaId': $(this).val()
                    },
                    success: function(_response) {
                        console.log('Success');
                        console.log(_response);

                        op+='<option value="" style="color: black;">Select</option>';
                        op+='<option value="all" style="color: black;">All</option>';

                        for (const [key, value] of Object.entries(_response)) {
                            op+='<option value="'+key+'" style="color: black;">'+value+'</option>';
                        }

                        divt.find('#branchId').html(' ');
                        $('#branchId').append(op);
                    },
                    error: function(_response) {
                        alert(_response.errors);
                    }
                });
            });

            $(document).on('change', '#zoneId', function() {
                var divt= $(this).parent();
                op = '';
                $('#branchId').empty();
                $('#areaId').empty();

                $.ajax({
                    type: 'get',
                    url: './getDataAccordingToZone',
                    dataType: 'json',
                    data: {
                    'zoneId': $(this).val(),
                    },
                    success: function(_response) {
                        console.log('Success');
                        console.log(_response);

                        $('#areaDiv').show();

                        op+='<option value="" style="color: black;">Select</option>';
                        op+='<option value="all" style="color: black;">All</option>';

                        for (const [key, value] of Object.entries(_response)) {
                            op+='<option value="'+key+'" style="color: black;">'+value+'</option>';
                        }

                        divt.find('#areaId').html(' ');
                        $('#areaId').append(op);

                    },
                    error: function(_response) {
                        alert(_response.errors);
                    }
                });
            });

            $(document).on('change', '#regionId', function() {
                var divt= $(this).parent();
                op = '';
                $('#branchId').empty();
                $('#zoneId').empty();

                $.ajax({
                    type: 'get',
                    url: './getDataAccordingToRegion',
                    dataType: 'json',
                    data: {
                    'regionId': $(this).val(),
                    },
                    success: function(_response) {
                        console.log('Success');
                        console.log(_response);

                        $("#zoneDiv").show();

                        op+='<option value="" style="color: black;">Select</option>';
                        op+='<option value="all" style="color: black;">All</option>';

                        for (const [key, value] of Object.entries(_response)) {
                            op+='<option value="'+key+'" style="color: black;">'+value+'</option>';
                        }

                        divt.find('#zoneId').html(' ');
                        $('#zoneId').append(op);

                    },
                    error: function(_response) {
                        alert(_response.errors);
                    }
                });
            });

            $(document).on('change', '#branchId', function() {
                var divt= $(this).parent();
                op = '';
                $('#samityId').empty();

                if (document.getElementById("branchId").className == 'form-control error') {
                    document.getElementById("branchId").className = document.getElementById("branchId").className.replace(" error", "");
                }

                if ($(this).val() != 'all') {
                    $.ajax({
                        type: 'get',
                        url: './getSamityData',
                        dataType: 'json',
                        data: {
                        'branchId': $(this).val(),
                        },
                        success: function(_response) {
                            console.log('Success');
                            console.log(_response);

                            op+='<option value="" style="color: black;">Select</option>';

                            for (const [key, value] of Object.entries(_response)) {
                                op+='<option value="'+key+'" style="color: black;">'+value+'</option>';
                            }

                            divt.find('#samityId').html(' ');
                            $('#samityId').append(op);

                        },
                        error: function(_response) {
                            alert(_response.errors);
                        }
                    });
                }
            });

            $('#searchForm').on('submit', function() {
                event.preventDefault();

                console.log('Submit clicked');

                if ($('#branchId').val() == 'all' || $('#branchId').val() > 0) {
                    console.log('Branch : ', $('#branchId').val());
                    console.log('Option : ', $('#optioId').val());

                    if (document.getElementById("branchId").className == 'form-control error') {
                        document.getElementById("branchId").className = document.getElementById("branchId").className.replace(" error", "");
                    }

                    if ($('#optioId').val() != "") {
                        if (Number($('#optioId').val()) == 0) {
                            console.log('optioId 0 : ', $('#optioId').val());

                            if (document.getElementById("optioId").className == 'form-control error') {
                                document.getElementById("optioId").className = document.getElementById("optioId").className.replace(" error", "");
                            }

                            if ($('#dateFrom').val() != "") {
                                if (document.getElementById("dateFrom").className == 'form-control datepicker hasDatepicker error') {
                                    document.getElementById("dateFrom").className = document.getElementById("dateFrom").className.replace(" error", "");
                                }

                                if ($('#dateTo').val() != "") {
                                    if (document.getElementById("dateTo").className == 'form-control datepicker hasDatepicker error') {
                                        document.getElementById("dateTo").className = document.getElementById("dateTo").className.replace(" error", "");
                                    }

                                    $('#loadingModal').show();

                                    $.ajax({
                                        type: 'get',
                                        url: './getSummaryReport',
                                        dataType: 'json',
                                        data: {
                                        'branchId': $('#branchId').val(),
                                        'samityId': $('#samityId').val(),
                                        'dateFrom': $('#dateFrom').val(),
                                        'dateTo'  : $('#dateTo').val(),
                                        'zoneId'  : $('#zoneId').val(),
                                        'areaId'  : $('#areaId').val()
                                        },
                                        success: function(_response) {
                                            $('#loadingModal').hide();

                                            $("#summaryTableDiv").show();
                                            $("#detailsTableDiv").hide();

                                            $("#printIcon1").show();
                                            $("#printIcon2").hide();

                                            $("#btnExportExcel1").show();
                                            $("#btnExportExcel2").hide();

                                            $("#btnExportPdf1").show();
                                            $("#btnExportPdf2").hide();

                                            var i = 0;
                                            var branchName = '';

                                            document.getElementById('summaryReportingBranch').innerHTML = _response.branchName;

                                            var dateFrom = new Date($('#dateFrom').val());
                                            var dateTo = new Date($('#dateTo').val());
                                            console.log(dateFrom);
                                            console.log(dateTo);

                                            document.getElementById('summaryReportingPeriod').innerHTML = ('0'+dateFrom.getDate()).slice(-2)+'.'+('0'+dateFrom.getMonth()).slice(-2)+'.'+dateFrom.getFullYear()+' to '+('0'+dateTo.getDate()).slice(-2)+'.'+('0'+dateTo.getMonth()).slice(-2)+'.'+dateTo.getFullYear();

                                            $("#summaryTableBody tr").remove();

                                            console.log(_response);
                                            console.log(_response.branchName);

                                            var savingTotal = 0;
                                            var principalTotal = 0;
                                            var interestTotal = 0;
                                            var finalTotal = 0;

                                            var savingSubTotal = 0;
                                            var principalSubTotal = 0;
                                            var interestSubTotal = 0;
                                            var finalSubTotal = 0;

                                            if (_response.isSamityData == true) {
                                                for (const [key, value] of Object.entries(_response.data)) {
                                                    ++i;
                                                    $('#summaryTable > tbody:last-child').append('<tr><td>'+i+'</td><td style="text-align: left !important;">'+value.zoneNameCode+'</td><td style="text-align: left !important;">'+value.areaNameCode+'</td><td style="text-align: left !important;">'+value.branchNameCode+'</td><td style="text-align: right !important">'+Math.round(value.savingsAmount).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(value.principal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(value.interest*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(value.total).toFixed(2)+'</td></tr>');
                                                    savingTotal += Number(value.savingsAmount);
                                                    principalTotal += Number(value.principal);
                                                    interestTotal += Number(value.interest);
                                                    finalTotal += Number(value.total);
                                                }
                                            }
                                            else {
                                                for (const [keyZone, valueZone] of Object.entries(_response.data)) {
                                                    console.log('Zone : '+valueZone.zoneNameCode);

                                                    ++i;
                                                    $('#summaryTable > tbody:last-child').append(
                                                        '<tr><td rowspan='+valueZone.zoneRowSpan+'>'+i+'</td><td rowspan='+valueZone.zoneRowSpan+' style="text-align: left !important;">'+valueZone.zoneNameCode+'</td></tr>'
                                                        );

                                                    for (const [keyArea, valueArea] of Object.entries(valueZone.areaInfo)) {
                                                        console.log('Area : '+valueArea.areaNameCode);

                                                        $('#summaryTable > tbody:last-child').append(
                                                            '<tr><td rowspan='+valueArea.areaRowSpan+' style="text-align: left !important;">'+valueArea.areaNameCode+'</td></tr>'
                                                            );

                                                        for (const [keyBranch, value] of Object.entries(valueArea.branchInfo)) {
                                                            // console.log('Area : '+valueBranch.areaNameCode);
                                                            console.log('Branch : '+value.branchNameCode);

                                                            // ++i;
                                                            $('#summaryTable > tbody:last-child').append('<tr><td style="text-align: left !important;">'+value.branchNameCode+'</td><td style="text-align: right !important">'+Math.round(value.savingsAmount).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(value.principal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(value.interest*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(value.total).toFixed(2)+'</td></tr>');
                                                            savingTotal += Number(value.savingsAmount);
                                                            principalTotal += Number(value.principal);
                                                            interestTotal += Number(value.interest);
                                                            finalTotal += Number(value.total);

                                                            savingSubTotal += Number(value.savingsAmount);
                                                            principalSubTotal += Number(value.principal);
                                                            interestSubTotal += Number(value.interest);
                                                            finalSubTotal += Number(value.total);

                                                        }

                                                    }

                                                    $('#summaryTable > tbody:last-child').append('<tr style="font-weight: bold !important; font-size:12px !important; background-color: #9AA4FC !important;"><td colspan="4">Sub-Total:</td><td style="text-align: right !important">'+Math.round(savingSubTotal).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(principalSubTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(interestSubTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(finalSubTotal).toFixed(2)+'</td></tr>');

                                                    savingSubTotal = 0;
                                                    principalSubTotal = 0;
                                                    interestSubTotal = 0;
                                                    finalSubTotal = 0;
                                                }
                                            }

                                            $('#summaryTable > tbody:last-child').append('<tr style="font-weight: bold !important; font-size:13px !important; background-color: #7986FD !important;"><td colspan="4">Total:</td><td style="text-align: right !important">'+Math.round(savingTotal).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(principalTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(interestTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(finalTotal).toFixed(2)+'</td></tr>');
                                        },
                                        error: function(_response) {
                                            alert(_response.errors);
                                        }
                                    });
                                }
                                else {
                                    if (document.getElementById("dateTo").className == 'form-control error') {
                                        document.getElementById("dateTo").className = document.getElementById("dateTo").className.replace(" error", "");
                                    }
                                    document.getElementById("dateTo").className = document.getElementById("dateTo").className + " error";
                                }

                            }
                            else {
                                if (document.getElementById("dateFrom").className == 'form-control error') {
                                    document.getElementById("dateFrom").className = document.getElementById("dateFrom").className.replace(" error", "");
                                }
                                document.getElementById("dateFrom").className = document.getElementById("dateFrom").className + " error";
                            }

                        }
                        else if (Number($('#optioId').val()) == 1) {
                            console.log('optioId 1 : ', $('#optioId').val());

                            if (document.getElementById("optioId").className == 'form-control error') {
                                document.getElementById("optioId").className = document.getElementById("optioId").className.replace(" error", "");
                            }

                            if ($('#dateFrom').val() != "") {
                                if (document.getElementById("dateFrom").className == 'form-control datepicker hasDatepicker error') {
                                    document.getElementById("dateFrom").className = document.getElementById("dateFrom").className.replace(" error", "");
                                }

                                if ($('#dateTo').val() != "") {
                                    if (document.getElementById("dateTo").className == 'form-control datepicker hasDatepicker error') {
                                        document.getElementById("dateTo").className = document.getElementById("dateTo").className.replace(" error", "");
                                    }

                                    $('#loadingModal').show();

                                    $.ajax({
                                        type: 'get',
                                        url: './getDetailsReport',
                                        dataType: 'json',
                                        data: {
                                        'branchId': $('#branchId').val(),
                                        'samityId': $('#samityId').val(),
                                        'dateFrom': $('#dateFrom').val(),
                                        'dateTo': $('#dateTo').val()
                                        },
                                        success: function(_response) {
                                            $('#loadingModal').hide();

                                            $("#summaryTableDiv").hide();
                                            $("#detailsTableDiv").show();

                                            $("#printIcon1").hide();
                                            $("#printIcon2").show();

                                            $("#btnExportExcel1").hide();
                                            $("#btnExportExcel2").show();

                                            $("#btnExportPdf1").hide();
                                            $("#btnExportPdf2").show();

                                            console.log('data : ', _response);

                                            var i = 0;
                                            var branchName = '';

                                            document.getElementById('detailsReportingBranch').innerHTML = _response.branchName;

                                            var dateFrom = new Date($('#dateFrom').val());
                                            var dateTo = new Date($('#dateTo').val());

                                            // document.getElementById('detailsReportingPeriod').innerHTML = dateFrom.getDate()+'.'+dateFrom.getMonth()+'.'+dateFrom.getFullYear()+' to '+dateTo.getDate()+'.'+dateTo.getMonth()+'.'+dateTo.getFullYear();

                                            document.getElementById('detailsReportingPeriod').innerHTML = ('0'+dateFrom.getDate()).slice(-2)+'.'+('0'+dateFrom.getMonth()).slice(-2)+'.'+dateFrom.getFullYear()+' to '+('0'+dateTo.getDate()).slice(-2)+'.'+('0'+dateTo.getMonth()).slice(-2)+'.'+dateTo.getFullYear();

                                            $("#detailsTableBody tr").remove();

                                            var savingsSubTotal = 0;
                                            var principalSubTotal = 0;
                                            var interestSubTotal = 0;
                                            var subTotal = 0;

                                            var savingsTotal = 0;
                                            var principalTotal = 0;
                                            var interestTotal = 0;
                                            var finaltotal = 0;

                                            for (const [key, value] of Object.entries(_response.data)) {
                                                ++i;
                                                if (branchName == '') {
                                                    branchName = value.branch;
                                                }
                                                else if (branchName != value.branch) {
                                                    $('#detailsTable > tbody:last-child').append('<tr style="font-weight: bold !important; background-color: #9AA4FC !important;"><td colspan="8">Sub-Total:</td><td style="text-align: right !important">'+Math.round(savingsSubTotal).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(principalSubTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(interestSubTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(subTotal).toFixed(2)+'</td></tr>');
                                                    branchName = value.branch;

                                                    savingsSubTotal = 0;
                                                    principalSubTotal = 0;
                                                    interestSubTotal = 0;
                                                    subTotal = 0;
                                                }

                                                savingsSubTotal += Number(value.savingsAmount);
                                                principalSubTotal += Number(value.principal);
                                                interestSubTotal += Number(value.interest);
                                                subTotal += Number(value.total);

                                                savingsTotal += Number(value.savingsAmount);
                                                principalTotal += Number(value.principal);
                                                interestTotal += Number(value.interest);
                                                finaltotal += Number(value.total);

                                                $('#detailsTable > tbody:last-child').append('<tr><td>'+i+'</td><td>'+value.date+'</td><td style="text-align: left !important;">'+value.branch+'</td><td style="text-align: left !important;">'+value.memberCode+'</td><td style="text-align: left !important;">'+value.memberName+'</td><td style="text-align: left !important;">'+value.samityNameCode+'</td><td style="text-align: left !important;">'+value.savingsCode+'</td><td style="text-align: left !important;">'+value.loanCode+'</td><td style="text-align: right !important">'+Math.round(value.savingsAmount).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(value.principal * 100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(value.interest*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(value.total).toFixed(2)+'</td></tr>');
                                            }

                                            $('#detailsTable > tbody:last-child').append('<tr style="font-weight: bold !important; background-color: #9AA4FC !important;"><td colspan="8">Sub-Total:</td><td style="text-align: right !important">'+Math.round(savingsSubTotal).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(principalSubTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(interestSubTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(subTotal).toFixed(2)+'</td></tr>');

                                            $('#detailsTable > tbody:last-child').append('<tr style="font-weight: bold !important;  font-size:13px !important; background-color: #7986FD !important;"><td colspan="8">Total:</td><td style="text-align: right !important">'+Math.round(savingsTotal).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(principalTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+(Math.round(interestTotal*100)/100).toFixed(2)+'</td><td style="text-align: right !important">'+Math.round(finaltotal).toFixed(2)+'</td></tr>');
                                        },
                                        error: function(_response) {
                                            alert(_response.errors);
                                        }
                                    });
                                }
                                else {
                                    if (document.getElementById("dateTo").className == 'form-control error') {
                                        document.getElementById("dateTo").className = document.getElementById("dateTo").className.replace(" error", "");
                                    }
                                    document.getElementById("dateTo").className = document.getElementById("dateTo").className + " error";
                                }

                            }
                            else {
                                if (document.getElementById("dateFrom").className == 'form-control error') {
                                    document.getElementById("dateFrom").className = document.getElementById("dateFrom").className.replace(" error", "");
                                }
                                document.getElementById("dateFrom").className = document.getElementById("dateFrom").className + " error";
                            }

                        }
                    }
                    else {
                        console.log('Error');
                        if (document.getElementById("optioId").className == 'form-control error') {
                            document.getElementById("optioId").className = document.getElementById("optioId").className.replace(" error", "");
                        }
                        document.getElementById("optioId").className = document.getElementById("optioId").className + " error";
                    }
                }
                else {
                    console.log('Error');
                    if (document.getElementById("branchId").className == 'form-control error') {
                        document.getElementById("branchId").className = document.getElementById("branchId").className.replace(" error", "");
                    }
                    document.getElementById("branchId").className = document.getElementById("branchId").className + " error";
                }
            });


        });
    </script>

@endsection