@extends('layouts/acc_layout')
@section('title', 'Financial Budget MIS Part List')
@section('content')

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

<style>

    .table tbody tr td {
        color: #000 !important;
        padding: 8px 8px !important;
    }
    .table thead tr th {
        background: #485058 !important;
    }

    .table tr:nth-child(odd) {
        background-color: #fff !important;
    }

    .table.table-bordered>thead>tr>td,
    .table.table-bordered>tbody>tr>td,
    .table.table-bordered>tfood>tr>td,
    .table.table-bordered>thead>tr>th,
    .table.table-bordered>tbody>tr>th,
    .table.table-bordered>tfood>tr>th {
        border-color: #ccc;
    }


    .table tr:hover {
        background-color: #eee !important;
    }

    .table>thead>tr>td:after,
    .table>thead>tr>th:after {
        height: 0px;
    }
    .panel .panel-heading {
        border-bottom: 1px solid #f5f5f5;
    }
    .control-label {
        text-shadow: 0px 3px 4px rgb(0 0 0 / 40%);
        color: #fff;
        margin-bottom: 8px !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" style="margin-top: 15px;">
                    <a href="{{ route('add.financial.budget.mis.part') }}" style="color: #fff;" id="reportSubmit" class="btn btn-primary"> Add </a>
                </div>
                <div>
                    <h3 style="font-family: Antiqua; letter-spacing: 2px; color: white;">Financial Budget MIS Part List</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" style="padding-left:0;">
                                <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" style="padding-left:0;">
                                <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 --}}

                            {{-- fiscal year level --}}
                            <div class="col-md-2" style="padding-left:0;">
                                <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" style="padding-left:0;">
                                <div class="form-group">
                                    {!! Form::label('', '.', ['class' => 'control-label col-md-12', 'style' => 'color:#708090']) !!}
                                    <div class="col-md-12">
                                        {!! Form::submit('Submit', ['id' => 'reportSubmit', 'class' => 'btn btn-primary']); !!}
                                    </div>
                                </div>
                            </div>

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

            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive" id="financialBudgetDiv">
                        @if (count($data['financialBudgetList']) > 0 )
                            <table class="table table-striped table-bordered" style="color:black;">
                                <thead>
                                    <tr>
                                        <th style="font-size: 10px !important;" width="5%">SL</th>
                                        <th style="font-size: 10px !important;">Project</th>
                                        <th style="font-size: 10px !important;">Project Type</th>
                                        <th style="font-size: 10px !important;">Fiscal Year</th>
                                        <th style="font-size: 10px !important;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($data['financialBudgetList'] as $list)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td style="text-align: left;">{{ $list->project }}</td>
                                        <td style="text-align: left;">{{ $list->projectType }}</td>
                                        <td>{{ $list->fiscalYearName }}</td>
                                        <td class="text-center">
                                            {{-- view budget --}}

                                            <a href="{{ url('financialBudget/mis/add') }}?projectIdFk={{ $list->projectIdFk }}&projectTypeIdFk={{ $list->projectTypeIdFk }}&fiscalYear={{ $list->fiscalYear }}&view=true" title="View">
                                                <span class="fa fa-eye" style="padding: 5px; background: #5f9a97; margin-right: 5px; border-radius: 2px; color:#fff;"></span>
                                            </a>

                                            {{-- edit budget --}}
                                            <a href="{{ url('financialBudget/mis/add') }}?projectIdFk={{ $list->projectIdFk }}&projectTypeIdFk={{ $list->projectTypeIdFk }}&fiscalYear={{ $list->fiscalYear }}" title="Edit">
                                                <span class="glyphicon glyphicon-edit"  style="padding: 5px; background: #60ca0c; border-radius: 2px; color:#fff;"></span>
                                            </a>

                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @endif
                    </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();
            $("#financialBudgetDiv").load('{{ route("get.financial.budget.mis.part") }}' + '?' + serializeValue);
        });

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

    }); 

    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