@extends('layouts/microfin_layout')
@section('title', '| National Database Savings Report')
@section('content')
<style type="text/css">
    .form-group, .form-control{
        font-size: 11px !important;
        color: black !important;
    }
    .form-control{
        padding: 5px !important;
    }
    #reportSubmit{
        font-size: 12px;
        margin-top: 20px;
    }
    .terminal {
        background: #1e1e1e;
        color: #00ff00;
        font-family: 'Courier New', Courier, monospace;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .terminal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #333;
        padding: 5px 10px;
        border-radius: 5px 5px 0 0;
    }

    .terminal-buttons {
        display: flex;
        gap: 5px;
    }

    .terminal-buttons span {
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .terminal-buttons .red {
        background: #ff5c5c;
    }

    .terminal-buttons .yellow {
        background: #ffbd4c;
    }

    .terminal-buttons .green {
        background: #00ca56;
    }

    .terminal-title {
        font-size: 1rem;
        color: #fff;
    }

    .terminal-body {
        background: #1e1e1e;
        padding: 10px;
        overflow-y: auto;
        max-height: 400px;
        border-radius: 0 0 5px 5px;
    }

    .terminal-line {
        margin: 0;
        padding: 0;
        color: #08bf08;
        font-size: 14px;
        font-family: cursive;
    }
    .panel .panel-body p + p {
        margin-top: -5px;
    }
</style>
<script type="text/javascript">
    $("#loadingModal").show();
    $(document).keydown(function(e) {
        if (e.keyCode == 27) return false;
    });
</script>

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

    <div class="panel panel-default" style="background-color:#708090;">

        <div class="panel-heading" style="padding-bottom:0px">
            <div class="panel-options">
                <button id="printIcon" 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="btnExcel" 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>
            </div>
            <h3  style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Monthly MF CIB Generate Process</h3>
        </div>

        <div class="panel-body panelBodyView" >

            <!-- Filtering Start -->
            {!! Form::open(array('url' => '', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'id' => 'filterFormId', 'method'=>'post')) !!}
            <div class="row">
            <div class="col-md-12">

                <div class="col-md-2" id="branchDiv">
                    <div class="form-group">
                        <div class="col-md-12">
                            {!! Form::label('', 'Branch:', ['class' => 'control-label pull-left']) !!}
                        </div>
                        <div class="col-md-12">
                            {!! Form::select('branchId', $data['branches'], 0 ,['id'=>'branchId','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                        </div>
                    </div>
                </div>
                <div class="col-md-1" id="YearDiv">
                    <div class="form-group">
                        <div class="col-md-12">
                            {!! Form::label('', 'Year:', ['class' => 'control-label pull-left']) !!}
                        </div>
                        <div class="col-md-12">
                            {!! Form::select('years', $data['years'], 0 ,['id'=>'yearId','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                        </div>
                    </div>
                </div>

                <div class="col-md-2" id="monthDiv">
                    <div class="form-group">
                        <div class="col-md-12">
                            {!! Form::label('', 'Month:', ['class' => 'control-label pull-left']) !!}
                        </div>
                        <div class="col-md-12">
                            {!! Form::select('months', $data['months'], 1 ,['id'=>'monthId','class'=>'form-control input-sm','autocomplete'=>'off']) !!}
                        </div>
                    </div>
                </div>


                <div class="col-md-1">
                    <div class="form-group">
                        <div class="col-md-12">
                            {!! Form::label('', '&nbsp;', ['class' => 'control-label pull-left']) !!}
                        </div>
                        <div class="col-md-12">
                            {!! Form::submit('Generate', ['id' => 'loadData', 'class' => 'btn btn-primary btn-sm']); !!}
                        </div>
                    </div>
                </div>

            </div>
            </div>
            {!! Form::close()  !!}
            <!-- filtering end-->

            <div class="row">
                <div class="col-md-12" id="reportingDiv">
                    <div class="terminal">
                        <div class="terminal-header">
                            <div class="terminal-buttons">
                                <span class="red"></span>
                                <span class="yellow"></span>
                                <span class="green"></span>
                            </div>
                            <div class="terminal-title">MF CIB Process Terminal</div>
                        </div>
                        <div  class="terminal-body" style="display: flex;width:100%">
                            <div id="terminalBody" style="width:70%">

                            </div>
                            <div class="" style="width:30%">
                                <img src="{{url('/images/terminal.gif')}}" />

                            </div>
                            <!-- Responses will be appended here -->
                        </div>
                    </div>
                </div>
            </div>


        </div>		{{-- panel-body panelBodyView DIV --}}

    </div>

</div>
</div>
</div>
</div>


<script type="text/javascript">



    $("#reportTypeId").change(function(event) {
        $("#monthDiv").hide()
        $("#halfYearDiv").hide()
        let reportType = $(this).val();

        if(reportType == 1)  $("#monthDiv").show()
        if(reportType == 2)  $("#halfYearDiv").show()
    });


    $(document).ready(function() {

            function appendToTerminal(response) {
                const terminalBody = document.getElementById("terminalBody");
                const newLine = document.createElement("p");
                newLine.className = "terminal-line";
                terminalBody.appendChild(newLine);

                let index = 0;
                function typeCharacter() {
                    if (index < response.length) {
                        newLine.textContent += response.charAt(index);
                        index++;
                        setTimeout(typeCharacter, 20);
                    }
                }
                typeCharacter();
            }

            function sendAjaxRequest() {
                const mockResponse = {
                    message: ">> ###### =========== Monthy MF CIB Data Generate for branch. Please Start Now! =========== ########"
                };

                setTimeout(() => {
                    appendToTerminal(mockResponse.message);
                }, 1000);
            }
            sendAjaxRequest();

        $("form").submit(function(event) {
            event.preventDefault();
            $('#loadingModal').show();
            var serializeValue = $(this).serialize();

            $.ajax({
                url: '{{URL::to("mfn/monthlyMfCIBGenerateProcess")}}',
                type: 'POST',
                data: serializeValue,
                success: function(response) {
                    $('#loadingModal').hide();

                    if (response.message) {
                        appendToTerminal(">> "+response.message);
                    } else if (response.hasOwnProperty('error')) {
                        console.log('Error:', response.error);
                    } else {
                        console.log('Unexpected response format');
                    }

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('Error:', textStatus, errorThrown);
                    $('#loadingModal').hide();
                }
            });
        });


    });
</script>


<script type="text/javascript">
    $(document).ready(function() {

        $("#halfYearDiv").hide()

        $("#printIcon").click(function(event) {

            // $("#hiddenTitle").show();
            // $("#hiddenInfo").show();
            // $("#loanNSavingTable1").removeClass('table table-striped table-bordered');

            var mainContents = document.getElementById("printDiv").innerHTML;
            var headerContents = '';
            // var printContents = '<div id="order-details-wrapper">' + headerContents + mainContents +'</div>';


            var printStyle = '<style>#pomisOne1{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} #pomisOne1 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 }  .name{text-align:left;vertical-align:left;}</style><style media="print">@page{margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{#pomisOne1 tr:nth-of-type(10n){page-break-after: always;}} #reportInfoTable tr td:nth-child(1){width: 150px;} #reportInfoTable tr td:nth-child(2),#reportInfoTable tr td:nth-child(6){     width: 5px; }    #reportInfoTable tr td:nth-child(3){ width: 100px;  }  #reportInfoTable tr td:nth-child(4){ width: 150px; } #reportInfoTable tr td:nth-child(5){ width: 150px; text-align: right; padding-right: 5px;    } #reportInfoTable tr td:nth-child(7){ width: 90px; text-align: right !important;}</style>';


            /*tr:nth-of-type(10n){page-break-after: always;}*/
            // @media print {.element-that-contains-table { overflow: visible !important; }}

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


            /*document.body.innerHTML = printStyle + printContents;
            window.print();*/

            var win = window.open('','printwindow');
            win.document.write(printContents);
            win.print();
            // $("#loanNSavingTable1").addClass('table table-striped table-bordered');
            win.close();
        });

        $("#loadingModal").hide();
    }); /* Ready*/

    $(document).ready(function() {
        $("#btnExcel").click(function(e) {
            e.preventDefault();

            var branchSavingsHtml = $('#pomisOne1').html();
            var savingsSizeHtmlData = $('#pomisOne2').html();

            // Make an AJAX request
            $.ajax({
                url: '{{url("/mraGenerateExcel")}}',
                method: 'POST',
                data: {
                    branchSavingsHtml: branchSavingsHtml,
                    savingsSizeHtmlData: savingsSizeHtmlData,
                },
                success: function(response) {
                    // First file download
                    for (var key in response) {
                        if (response.hasOwnProperty(key) && response[key] !== '') {
                            downloadFile(response[key].url, 'generated_' + response[key].name + '.xlsx');
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                }
            });
        });


        function downloadFile(fileUrl, filename) {
            var a = document.createElement('a');
            a.href = fileUrl;
            a.setAttribute('download', filename);
            // Set the 'target' attribute to '_blank' to bypass security warning
            a.setAttribute('target', '_blank');
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }

    });
</script>



@endsection