@extends('layouts/microfin_layout')
@section('title', 'MIS Yearly Plan Details')
@section('content')

@include('microfin.AopBudget.misYearlyPlan.entry.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">

                    <a href="{{url('/misYearlyBudget/view')}}" class="btn btn-info pull-right addViewBtn" style="margin: 10px"><i class="glyphicon glyphicon-th-list viewIcon"></i>MIS Yearly Plans</a>

                    <button id="printIcon" class="btn btn-info pull-right print-icon" style="">
                        <i class="fa fa-print fa-lg" aria-hidden="true"> Print</i>
                    </button>

                </div>

                <div>
                    <h3 style="margin: .5em 10em; text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Plan Details</h3>
                </div>

            </div>


            <div class="panel-body panelBodyView">

                <div id="printDivUpper">
                    <div class="row" style="padding-bottom: 10px; text-align: center; vertical-align: middle; color: black; font-weight: bold; margin: 0 .5em;">
                        <span style="font-size:14px;">{{ $companyInfo->name }}</span>
                        <br />
                        <span style="font-size:13px;">{{ $companyInfo->address }}</span>
                        <br />
                        <span style="font-size:12px;">Annual Operation Plan {{ $fiscalyear }} ({{ ucfirst($budgetType) }}) </span>
                        <br />
                        <span style="font-size:10px; float:left">Project Name : {{ $projectName }}</span>
                        <span style="font-size:10px; float:right">Branch Name : {{ $branchName }}</span>
                        <br />
                        <span style="font-size:10px; float:left">Project Type : {{ $projectTypeName }}</span>
                        <span style="font-size:10px; float:right">Print Date : {{ date("d-m-Y") }}</span>
                    </div>
                </div>


                <div class="table-responsive" id="printDiv1">
                    {!! Form::open(array('url' => '', 'id' => 'budget-form', 'role' => 'form')) !!}

                    <table id="budgetTable" class="table table-hover table-sm table-bordered" style="color:black; border-collapse: collapse; border:1px solid ash;">

                        <thead>
                            <tr>
                                <th rowspan="2" colspan="2">Components</th>

                                @if( $branchId != 1)
                                <th rowspan="2" colspan="1">{{ $prevLastFy }}</th>
                                <th rowspan="2" colspan="1">{{ $lastFy }}</th>
                                @endif

                                <th rowspan="1" colspan="13">{{ $fiscalyear }}</th>                
                                <th class="w80" rowspan="2" colspan="1">{{ $fiscalyear }}</th>
                            </tr>
                            <tr>
                                <th>Jul, {{ $partOfyear[0] }}</th>
                                <th>Aug, {{ $partOfyear[0] }}</th>
                                <th>Sep, {{ $partOfyear[0] }}</th>
                                <th>Oct, {{ $partOfyear[0] }}</th>
                                <th>Nov, {{ $partOfyear[0] }}</th>
                                <th>Dec, {{ $partOfyear[0] }}</th>
                                <th>Jan, {{ $partOfyear[1] }}</th>
                                <th>Feb, {{ $partOfyear[1] }}</th>
                                <th>Mar, {{ $partOfyear[1] }}</th>
                                <th>Apr, {{ $partOfyear[1] }}</th>
                                <th>May, {{ $partOfyear[1] }}</th>
                                <th>Jun, {{ $partOfyear[1] }}</th>
                                <th>Total</th>
                            </tr>
                        </thead>

                        <tbody>

                            @foreach($budgets as $key => $item)
                                @php
                                    $value[1] = (int) $item['july'];
                                    $value[2] = (int) $item['august'];
                                    $value[3] = (int) $item['september'];
                                    $value[4] = (int) $item['october'];
                                    $value[5] = (int) $item['november'];
                                    $value[6] = (int) $item['december'];
                                    $value[7] = (int) $item['january'];
                                    $value[8] = (int) $item['february'];
                                    $value[9] = (int) $item['march'];
                                    $value[10] = (int) $item['april'];
                                    $value[11] = (int) $item['may'];
                                    $value[12] = (int) $item['june'];
                                    $total = (int) array_sum($value);
                                @endphp

                            <tr>
                                @if( $item['hrPosGroupDisplay'] )
                                    <td class="text-left" rowspan="{{ $item['rowspan'] }}">{{ $item['hrPosGroupDisplay'] }}</td>
                                @endif

                                <td class="text-left">{{ preg_replace("/[\s_]+/", " ", $item['hrPosition']) }}</td>

                                @if( $branchId != 1)
                                    <td id="prevLastFy_{{ $item['hrPosition'] }}" class="text-center" >{{ $item['prevOpening'] == 0 ? '-' : number_format($item['prevOpening']) }}</td>
                                    <td id="lastFy_{{ $item['hrPosition'] }}" class="text-center" >{{ $item['opening'] == 0 ? '-' : number_format($item['opening']) }}</td>
                                @endif

                                @for($i = 1; $i <= 12; $i++) 
                                    <td id="staff_{{ $item['hrPosition'] }}_{{ $i }}" class="text-center"> {{ $value[$i] == 0 ? '-' : number_format($value[$i]) }}</td>                                        
                                @endfor

                                <td id="total_{{ $item['hrPosition'] }}" class="text-center"> {{ $total == 0 ? '-' : number_format($total) }}</td>
                                <td id="totalFy_{{ $item['hrPosition'] }}" class="text-center"> {{ $total == 0 ? '-' : number_format($total) }}</td>
                            </tr>

                            @endforeach

                            <tr class="level-constant">
                                <td colspan="2">Total</td>

                                @if( $branchId != 1)
                                    <td id="total_prevLastFy" class="text-center"> plt </td>
                                    <td id="total_lastFy" class="text-center"> lt </td>
                                @endif

                                @for ($i = 1; $i <= 12; $i++) 
                                    <td id="gTotal_{{ $i }}" class="text-center"> t </td>
                                @endfor

                                <td id="gTotal" class="text-center"> T </td>
                                <td id="gTotalFy" class="text-center"> T </td>
                            </tr>

                        </tbody>                        

                    </table>

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

            </div>

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



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

        let hr_position_infos_keys = "{{ $hr_position_infos_keys }}".split(",")
        let budgetKeys = "{{ $budgetKeys }}".split(",").map(Number)

        let lastFy = new Array(hr_position_infos_keys.length).fill(0)
        let total_staff = new Array(hr_position_infos_keys.length).fill(0)

        let total_prevLastFy = 0
        let total_lastFy = 0

        // calculateGrandTotal()

        hr_position_infos_keys.forEach(key => {
            calculateStaff(key)
        })

        hr_position_infos_keys.forEach(key => {            
            total_prevLastFy += ~~parseInt($(`#prevLastFy_${key}`).text())
            total_lastFy += ~~parseInt($(`#lastFy_${key}`).text())
        }); // category loop end

        $(`#total_prevLastFy`).text(total_prevLastFy)
        $(`#total_lastFy`).text(total_lastFy)
        calculateGrandTotal()
        function calculateStaff(key) {
            lastFy[key] = ~~parseInt($(`#lastFy_${key}`).text())
            total_staff[key] = ~~parseInt($(`#staff_${key}_12`).text())
            $(`#total_${key}`).text( (total_staff[key] != 0) ? total_staff[key] : '-')
            $(`#totalFy_${key}`).text( (total_staff[key] != 0) ? total_staff[key] + lastFy[key] : '-')
        }

        function calculateGrandTotal() {
            let gTotal = 0
            for (let i = 1; i <= 12; i++) {
                let total = 0
                hr_position_infos_keys.forEach(key => {
                    let val = ~~parseInt($(`#staff_${key}_${i}`).text())
                    total += val;
                });
                $(`#gTotal_${i}`).text( (total != 0) ? total : '-' )
                gTotal = total
            }
            $(`#gTotal`).text( (gTotal != 0) ? gTotal : '-');
            $(`#gTotalFy`).text( (gTotal != 0) ? (gTotal + total_lastFy) : '-')
        }

    }); // ready function end
</script>


<script>
    $("#printIcon").click(function(event) {
        var printStyle = `        
            <style type="text/css">
                #budgetTable {
                    float: left;
                    height: auto;
                    padding: 0px;
                    width: 100%;
                    font-size: 11px;
                    border: 1pt solid ash;
                    page-break-inside: auto;
                    font-family: arial !important;
                }

                table {
                    width: 100%;
                    border-collapse: collapse;
                }

                table, th, td {
                    border: 1pt solid ash;
                }

                thead tr th {
                    text-align: center;
                    vertical-align: middle;
                    padding: 3px;
                    font-size: 11px;
                }
                
                tr {
                    page-break-inside: avoid;
                    page-break-after: auto
                }               

                .text-left {
                    text-align: left !important;
                    padding-left: 5px !important;
                }
                .text-right {
                    text-align: right !important;
                    padding-right: 5px !important;
                }
                .text-center {
                    text-align: center !important;
                    padding-left: 5px !important;
                    padding-right: 5px !important;
                }
            </style>
            <style media="print">
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                table, th, td {
                    border: 1pt solid ash;
                }
                #budgetTable {
                    float: left;
                    height: auto;
                    padding: 0px;
                    width: 100%;
                    font-size: 11px;
                    border: 1pt solid ash;
                    page-break-inside: auto;
                    font-family: arial !important;
                }
                .text-left {
                    text-align: left !important;
                    padding-left: 5px !important;
                }
                .text-right {
                    text-align: right !important;
                    padding-right: 5px !important;
                }
                .text-center {
                    text-align: center !important;
                    padding-left: 5px !important;
                    padding-right: 5px !important;
                }
                @page {
                    size: landscape;
                    margin: 10mm 10mm;
                }
            </style>
            <style type="text/css">
                @media print {
                    .element-that-contains-table {
                        overflow: visible !important;
                    }
                    #budgetTable {
                        float: left;
                        height: auto;
                        padding: 0px;
                        width: 100%;
                        font-size: 11px;
                        border: 1pt solid ash;
                        page-break-inside: auto;
                        font-family: arial !important;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                    }
                    table, th, td {
                        border: 1pt solid ash;
                    }
                    table {
                        border: solid #000 !important;
                        border-width: 1px 0 0 1px !important;
                    }
                    th, td {
                        border: solid #000 !important;
                        border-width: 0 1px 1px 0 !important;
                    }
                    .text-left {
                        text-align: left !important;
                        padding-left: 5px !important;
                    }
                    .text-right {
                        text-align: right !important;
                        padding-right: 5px !important;
                    }
                    .text-center {
                        text-align: center !important;
                        padding-left: 5px !important;
                        padding-right: 5px !important;
                    }
                }
            </style>
            <style>
                @page: first {
                    tr:nth-of-type(4n) {
                        page-break-after: always;
                    }
                }
            </style> 
        `
        var mainContentsUpper = document.getElementById("printDivUpper").innerHTML;
        var mainContents1 = document.getElementById("printDiv1").innerHTML;
        var headerContents = '';
        var footerContents = "<div class='row' style='font-size:12px; padding-left:5px; padding-top:20px;'>Prepared By <span style='display:inline-block; width: 35%; padding-top:40px;'></span> Checked By <span style='display:inline-block; width: 34%; padding-right:15px; padding-top:40px;'></span>Approved By</div>";

        var printContents = '<div id="order-details-wrapper"  style="padding: 10px;">' + headerContents + mainContentsUpper + printStyle + '<div>' + mainContents1 + '</div>' + footerContents;


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

@endsection