@extends('layouts/acc_layout')
@section('title', 'Statement Of Budget(MIS)')
@section('content')

@include('accounting.misYearlyPlan.entry.style')

<style>
    .stRowStyle td { background-color: #cfe2f3 }
    .gtRowStyle td { background-color: #9fc5e8 }
</style>

{{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script> --}}

<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="printIcon" class="btn btn-info pull-right print-icon" style="">
                        <i class="fa fa-print fa-lg" aria-hidden="true"> Print </i>
                    </button>
                    {{-- <button id="btnExportExcel" 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>
                <div>
                    <h3 style="margin: .5em 10em; text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Statement Of Budget(MIS)</h3>
                </div>
            </div>

            <div class="panel-body panelBodyView">
                <form action="" class="form-horizontal form-groups">
                    <div class="row">
                        <div class="col-md-12">
                            {{-- report level --}}
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="reportLevel" class="control-label pull-left" >Project</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="project" class="form-control input-sm" onchange="getProjectType(this.value)">
                                            @foreach ($data["projects"] as $key=>$project)
                                                <option value="{{$key}}">{{$project}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {{-- Report level end --}}

                            {{-- Start of branch level --}}
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="branch" class="control-label pull-left">Project Type</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="projectType" id="projectTypes" class="form-control input-sm">
                                            <option value="">All</option>
                                            @foreach ($data['projectTypes'] as $key=>$types)
                                                <option value="{{$key}}">{{$types}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {{-- end of branch level --}}

                            {{-- Start of branch level --}}
                            {{-- <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="branch" class="control-label pull-left">Branch</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="branch" class="form-control input-sm">
                                            @foreach ($data['branchLists'] as $key=>$branch)
                                                <option value="{{$key}}">{{$branch}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- end of branch level --}}

                            {{-- fiscal year level --}}
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="fiscalYear" class="control-label pull-left">Fiscal Year</label>
                                    </div>
                                    <div class="col-md-12">
                                        <select name="fiscalYear" class="form-control input-sm">
                                            @foreach ($data['fiscalYears'] as $key=>$item)
                                                <option value="{{$key}}">{{$item}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {{-- end fiscal year level --}}

                            <div class="col-md-2">
                                <div class="form-group">
                                    {!! Form::label('', '.', ['class' => 'control-label col-md-12', 'style' => 'color:#708090']) !!}
                                    <div class="col-md-12">
                                        {!! Form::submit('Show Report', ['id' => 'reportSubmit', 'class' => 'btn btn-primary']); !!}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </form>

            </div>
            <div class="row" id="reportingDiv">

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

<script>
    $(document).ready(function () {
        /*on change filReportLevel hide/show contents*/
        $("#filReportLevel").change(function (event) {
            if ($(this).val() == "Branch") {
                $("#branchDiv").show();
                $("#areaDiv").hide();
                $("#zoneDiv").hide();
                $("#regionDiv").hide();
            } else if ($(this).val() == "Area") {
                $("#branchDiv").hide();
                $("#areaDiv").show();
                $("#zoneDiv").hide();
                $("#regionDiv").hide();
            } else if ($(this).val() == "Zone") {
                $("#branchDiv").hide();
                $("#areaDiv").hide();
                $("#zoneDiv").show();
                $("#regionDiv").hide();
            } else if ($(this).val() == "Region") {
                $("#branchDiv").hide();
                $("#areaDiv").hide();
                $("#zoneDiv").hide();
                $("#regionDiv").show();
            }
        });

        /*end on change filReportLevel hide/show contents*/
        $("#filReportLevel").trigger('change');
    });

    $(document).ready(function () {

        $("form").submit(function (event) {
            event.preventDefault()
            var serializeValue = $(this).serialize()

            $('#loadingModal').show();
            $("#reportingDiv").load('{{ route("get.statement.report.mis") }}' + '?' + serializeValue);
        });

        $("#printIcon").click(function (event) {
            var mainContents = document.getElementById("reportingDiv").innerHTML;
            var win = window.open('', 'printwindow');
            win.document.write(mainContents);
            win.print();
            win.close();
        });

        // $("#btnExportExcel").click(function(e) {
        //     var today = new Date();
        //     var dd = today.getDate();
        //     if(dd<10) dd='0'+dd;
        //     var mm = today.getMonth()+1;
        //     if(mm<10)mm='0'+mm;
        //     var yyyy = today.getFullYear();
        //     today = dd+'-'+mm+'-'+yyyy;
        //     let file = new Blob([$('#reportingDiv').html()], {type:"application/vnd.ms-excel"});
        //     let url = URL.createObjectURL(file);
        //     let a = $("<a />", {
        //     href: url,
        //     download: "Statement_Budget"+ today + ".xls"}).appendTo("body").get(0).click();
        //     e.preventDefault();
        // });
    });
    function getProjectType(project) {
        $.ajax({
            type: "POST",
            url: "{{url('gnr/getProjectTypes')}}",
            data: {projectId: project},
            dataType: "json",
            success: function(response) {
                $('#projectTypes').empty();
                $.each(response, function(index,val){
                    $('#projectTypes').append("<option value='" + index + "'>" + val + "</option>");
                });
            }
        });
        }

</script>
@endsection