@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'],$data['filter']['project'] ?? '',['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', [],$data['filter']['project_type'] ?? '',['class'=>'form-control','id'=>'project_type']) }}
                            </div>


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

                            {{-- User --}}
                            <div class="col-md-2">
                                {{ Form::label('user','User',['class'=>'control-label']) }}
                                {{ Form::select('user', [],$data['filter']['user'] ?? '',['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]',
										$data['filter']['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]',
									$data['filter']['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>

{{--                    <div id="loadingModal">Loading Modal </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">
                                    @include('loadingDiv')
									<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">
        $('#loadingModal').show();

        $(window).on('load', function() {
            // Hide the loading spinner/message
            $('#loadingModal').fadeOut();
            $('#loadingModal').hide();
        });
        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);
                    if (targetAttr.attr('id') === 'branch') {
						targetAttr.trigger(selected ? 'change.select2' : 'change');
					}
                },
                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