@extends('hr_main')
@section('title', '| Provident Fund Register Report')

@section('stylesheets')
    @include('hr.report.reportStyle')
@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">
								<h2>{{ $data['reportLabel'] }}</h2>
								<div class="action">
                                    <a href="{{ url('/hr/report/pfRegister') }}" class="btn btn-primary"> 
                                        <i class="fa fa-refresh"></i> Reset
                                    </a>
                                    <button 
                                        class="btn btn-primary" 
                                        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([
								'url' => 'hr/report/pfRegister', 
								'class'=>'form-horizontal form-groups filter-form', 'method'=>'GET'
							]) 
						}}
							   
                            {{-- Project --}}
                            <div class="col-md-2">
                                {{ Form::label('projects','Projects',['class'=>'control-label']) }}
                                {{ Form::select('project', $data['projects'],null,['class'=>'form-control','id'=>'project']) }}
                            </div>

                            {{-- Project Type --}}
                            <div class="col-md-2">
                                {{ Form::label('project_type','Project Type',['class'=>'control-label']) }}
                                {{ Form::select('project_type', [],null,['class'=>'form-control','id'=>'project_type']) }}
                            </div>
                            
                            
                            {{-- Branch --}}
                            <div class="col-md-2">
                                {{ Form::label('branch','Branch',['class'=>'control-label']) }}
                                {{ Form::select('branch', [],null,['class'=>'form-control','id'=>'branch']) }}
                            </div>
                            
                            {{-- User --}}
                            <div class="col-md-2">
                                {{ Form::label('user','User',['class'=>'control-label']) }}
                                {{ Form::select('user', [],null,['class'=>'form-control','id'=>'user']) }}
                            </div>
							
							{{-- Start Date --}}
							<div class="col-md-1">
								<label for="start-date">Start Date</label>
								{{   
									Form::text('filter[start_date]', 
										empty($data['filter']['start_date']) ? '' : $data['filter']['start_date'], 
										[
											'class' => 'form-control datepicker', 
											'id' => 'filter_end_date', 
											'placeholder'=>'Select Date',
                                            'autocomplete'=>'off'
										]) 
								}}
							</div>
							
							{{-- End Date --}}
							<div class="col-md-1">
								<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',
                                            'autocomplete'=>'off'
										]) 
								}}
							</div>
							
							{{-- Submit Button --}}
							<div class="col-md-1">
								<button 
                                    style="margin-top: 23px;" 
									class="btn btn-primary" 
									type="submit">
										<i class="fa fa-search"></i> 
										Search
								</button>
							</div>
						{{   Form::close() }}
					</div>
				</section>

				@if( $data['filtered'] )
					<div id="filtered-result">
                        <section class="report-header text-center">
                            <h3 class="ma-0">{{ $data['foundationName'] }}</h3>
                            <p>{{ $data['foundationAddress'] }}</p>
							<p>{{ $data['reportLabel'] }}</p>
							<p>Project: {{ $data['selectedProject'] }}</p>
							<p class="report-month">
                                Month: {{ date('M Y',strtotime($data['startDate'])) }} to {{ date('M Y',strtotime($data['endDate'])) }}
                            </p>
						</section>
                        <section class="pf-register">
							<div class="row">
								<div class="col-md-12">
									<table 
										class="table table-striped table-bordered table-condensed first-col-dark">
										@include('hr.report.pfRegister.table')
									</table>
                                </div>
                            </div>
                            <div class="row 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>
                        </section>
                    </div>
                    {{-- ./filtered-result --}}
                 
				@endif
               
			</div>
			{{-- ./panel-body --}}
		</div>
	</div>
</div>
@endsection

@section('footerAssets')
    <script type="text/javascript">
        function ajaxRequest(sourceAttr,targetAttr,link,selected=null){

            var sourceId      = sourceAttr.val() || '';
            var projectId     = $('#project').val() || 0;
            var projectTypeId = $('#project_type').val() || 0;
            var branchId      = $('#branch').val() || 0;
            var token         = $('meta[name="_token"]').attr('content');
            
            var sendingData = {
                'sourceId': sourceId,
                'projectId': projectId,
                'projectTypeId': projectTypeId,
                'branchId':branchId,
                '_token': token
            }

            console.log(sendingData);

            $response = $.ajax({
                url: link,
                dataType: 'json',
                type: 'POST',
                data: sendingData,
                success: function( data ){
                    console.log(data);
                    var options="<option value=''>Select One</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);
                },
                error: function(response){
                    // console.log(response);
                }
            });

            return $response;
        }

        // Append project type
        $(document).on('change','#project', function() {
            console.log($('#project'));
            ajaxRequest($('#project'), $('#project_type'), 
                "{{ url('hr/filter/getProjectType') }}" );
        });

        // Append branch
        $(document).on('change','#project_type', function() {
            ajaxRequest($('#project_type'), $('#branch'), 
                "{{ url('hr/filter/getBranch') }}" );
        });

        // Append user
        $(document).on('change','#branch', function() {
            ajaxRequest($('#branch'), $('#user'), 
                "{{ url('hr/filter/getUsers') }}" );
        });

        

        ajaxRequest($('#project'), 
            $('#project_type'), 
            "{{ url('hr/filter/getProjectType') }}", 
            "{{ $data['filter']['project_type'] ?? null }}" )
            .then(function(){
                ajaxRequest($('#project_type'), $('#branch'), 
                    "{{ url('hr/filter/getBranch') }}", 
                    "{{ $data['filter']['branch'] ?? null }}" )
                    .then(function(){
                        ajaxRequest($('#branch'), $('#user'), 
                        "{{ url('hr/filter/getUsers') }}", 
                        "{{ $data['filter']['user'] ?? null }}" );
                    });
            });
          
        
    

        function print() {
            var mainContents = document.getElementById("filtered-result").innerHTML ;   
            var win = window.open('','printwindow');
            var printStyle = `<style>
                .report-header{ text-align:center; font-family:arial; }
                .report-header h3{ margin:0px;}
                .report-header p{ margin:0px;}
                .report-header .report-month{ margin-bottom:20px;}
                .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