@extends('hr_main')
@section('title', '| Fund And Loan Report')

@section('stylesheets')
<style>
    .text-bold{
        font-weight: bold;
    }
    .mb-50{
        margin-bottom: 50px;
    }
    .mb-80{
        margin-bottom: 50px;
    }
    .mt-22 {
        margin-top: 22px;   
    }

    .mt-40 {
        margin-top: 40px;   
    }
    .ma-0{
        margin: 0px;    
    }
    .pa-0{
        padding: 0px;   
    }
    .panel .panel-body p + p{
        margin-top: 0px;
    }
    .panel-gray{
        background-color:#708090;
    }
    .table.table-data > tbody > tr > td {
        color: #000;
    }
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .report-label{
        width: 95%;
        text-align: center;
    }
    .print-btn{
        width: 5%;
        text-align: left;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-gray">
            <div class="panel-body panelBodyView">
                
                <section class="title-section">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box">
                                <div class="report-label">
                                    <h2 class="ma-0 pa-0">{{ $data['reportLabel'] }}</h2>
                                </div>
                                <div class="refresh-btn" style="margin-right: 10px;">
                                    <a href="{{ url('/hr/report/fundAndLoan') }}" class="btn btn-default"> 
                                        <i class="fa fa-refresh"></i> Reset
                                    </a>
                                </div>
                                <div class="print-btn">
                                    <button 
                                        class="btn btn-default" 
                                        value="true" 
                                        name="print" 
                                        type="submit" 
                                        onclick="print()">
                                            <i class="fa fa-print"></i> Print
                                    </button>
                                </div>
                            </div>
                            <hr>
                        </div>
                    </div>
                </section>
                
                <section class="filter-section">
                    <div class="row">
                        {!! Form::open(array('role' => 'form', 'class'=>'form-horizontal form-groups filter-form', 'method'=>'get')) !!}
                            <div class="col-md-2">
                                <label for="project">Project</label>
                                <select name="filter[project]" id="filter_project" class="form-control getBranch">
                                    @if( $data['projects'] )
                                        @foreach($data['projects'] as $project)
                                            <option value="{{ $project->id }}">
                                                {{ $project->name }}
                                            </option>
                                        @endforeach

                                    @endif
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label for="branch">Branch</label>
                                {!! Form::select('filter[branch]', [''=>'Select any'], (isset($data['filter']['branch']))?$data['filter']['branch']:'', ['class' => 'form-control getUser hr-select2', 'id'=>'filter_branch']) !!}
                            </div>

                            <div class="col-md-3">
                                <label for="employee">Employee Name</label>
                                {!! Form::select('filter[user]', [''=>'Select any'], (isset($data['filter']['user']))?$data['filter']['user']:'', ['class' => 'form-control', 'id' => 'filter_user']) !!}
                            </div>

                            <div class="col-md-2">
                                <label for="end-date">End Date</label>
                                {!! Form::text('filter[end_date]', !empty($data['filter']['end_date']) ? $data['filter']['end_date']:'', ['class' => 'form-control datepicker', 'id' => 'filter_end_date', 'placeholder'=>'Select Date']) !!}
                            </div>

                            <div class="col-md-1">
                                <button 
                                    class="btn btn-primary mt-22" 
                                    type="submit" 
                                    onclick="js:$('.filter-form').removeAttr('target');">
                                        <i class="fa fa-filter"></i> 
                                        Filter
                                </button>
                            </div>
                        {!! Form::close() !!}
                    </div>
                </section>

                @if( $data['filtered'] )
                    <div id="filtered-result">
                        <section class="report-header">
                            <div class="col-md-12 text-center">
                                <h2>{{ $data['foundationName'] }}</h2>
                                <p>{{ $data['foundationAddress'] }}</p>
                                <p style="text-decoration: underline; font-weight: bold;">{{ $data['reportLabel'] }}</p>
                                <p>As at {{ $data['endDate'] }}</p>
                            </div>
                        </section>
                        <section class="employee-information mb-50">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="text-bold">Employee Information</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <table 
                                    class="table table-striped table-bordered table-condensed table-data">
                                        @include('hr.report.fundAndLoan.table')
                                    </table>
                                </div>
                            </div>
                        </section>
                        <section class="fund-information mb-50">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="text-bold">Fund Information</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <table 
                                    class="table table-striped table-bordered table-condensed first-col-dark">
                                        @include('hr.report.fundAndLoan.table2')
                                    </table>
                                </div>
                            </div>
                        </section>  
                        <section class="loan-information page">
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="text-bold">Loan Information</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <table 
                                    class="table table-striped table-bordered table-condensed first-col-dark">
                                        @include('hr.report.fundAndLoan.table3')
                                    </table>
                                </div>
                            </div>
                            <div class="row mt-40">
                                <div class="signature">
                                    <div class="col-md-4">Prepared by</div>
                                    <div class="col-md-4 text-center">Checked by</div>
                                    <div class="col-md-4 text-right">Approved by</div>
                                </div>
                            </div>
                        </section>
                    
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('footerAssets')
    <script type="text/javascript">
        function getDependentDropdown(sourceAttr,targetAttr,link,selected=null){
            var sourceId=0;
            if(sourceAttr.jquery)
                sourceId = sourceAttr.val();
            else
                sourceId = sourceAttr;
            var projectId = $("#filter_project").val();
            // console.log(projectId);
            $.ajax({
                url: link,
                dataType: 'json',
                type: 'POST',
                data: {"sourceId":sourceId,"projectId":projectId, "_token":$('meta[name="_token"]').attr('content')},
                success: function( data, textStatus, jQxhr ){
                    console.log(sourceId);
                    var options='<option value="">Select any</option>';
                    $.each(data,function(key,val){
                        var selectedData='';
                        if(selected!=null && val.id==selected){
                            selectedData = 'selected="selected"';
                        }
                        
                        options += '<option '+selectedData+' value="'+val.id+'">'+val.name+'</option>';
                    });
                    targetAttr.html(options);
                    if (targetAttr.attr('id') === 'filter_branch') {
						targetAttr.trigger(selected ? 'change.select2' : 'change');
					}
                },
                error: function( jqXhr, textStatus, errorThrown ){
                    console.log( errorThrown );
                }
            });
        }

        $(document).on('change','.getBranch', function() {
            getDependentDropdown($('.getBranch'), $('#filter_branch'), "{{ url('hr/structure/getBranchFromProject') }}" );
        });

        $(document).on('change','.getUser',function(){
            getDependentDropdown($('#filter_branch'),$('#filter_user'), "{{ url('hr/structure/getUserFromBranchAndProject') }}");
        });

        $(document).ready(function(){
            @if(isset($data['filter']['project']))
                getDependentDropdown("{{ $data['filter']['project'] }}", $('#filter_branch'), "{{  url('hr/structure/getBranchFromProject') }}","{{  $data['filter']['branch'] }}");
            @endif

            @if(isset($data['filter']['branch']))
                getDependentDropdown("{{ $data['filter']['branch'] }}",$('#filter_user'), "{{ url('hr/structure/getUserFromBranchAndProject') }}",
                    "{{  $data['filter']['user'] }}" );
            @endif
        });

        function print() {
            var mainContents = document.getElementById("filtered-result").innerHTML ;   
            var win = window.open('','printwindow');
            var printStyle = `<style>
                .report-header{ text-align:center;}
                .report-header h2{ margin:0px;}
                .report-header p{ margin:0px;}
                .employee-information h5{ margin-bottom: 0;}
                .fund-information h5{ margin-bottom: 0;}
                .loan-information h5{ margin-bottom: 0;}
                
                html,body{
                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                }

                table {
                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    margin: 0px;
                }

                td,  th {
                    border: 1px solid #000;
                    padding: 5px;
                }

                th {
                    padding-top: 12px;
                    padding-bottom: 12px;
                    text-align: left;
                    color: #000;
                }
                .text-right{
                    text-align: right;
                }
                .text-center{
                    text-align: center;
                }
                .page {
                    page-break-after: always;
                    page-break-inside: avoid;
                }
                .signature{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 60px;
                    font-family: arial;
                }
            </style>`;
            var printContent = '<div>' + printStyle + mainContents +'</div>';
            win.document.write(printContent);
            win.print();
            win.close();
        }
    </script>
@endsection