@extends('hr_main')
@section('title', '| Eps Register Report')
@section('content')
<style>
    .table thead tr th {
        vertical-align: middle;
        padding: 8px;
    }

    .panel-gray{
        background-color:#708090;
    }
    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .report-header{
        margin-bottom: 15px;
    }
    table#epsRegisterTable th,
    table#epsRegisterTable td {
        word-break: break-word;
        border-width: 1px;
    }
    .table#epsRegisterTable td{
        padding: 3px;
    }
    #project,#project_type, #branch, #user, #start_date, #end_date{
        height: 37px
    }
    .control-label{
        margin-bottom: 5px !important;
    }
    footer.main-footer {
        position: absolute;
        bottom: 0;
         width: 100%;
    }
    footer.main-footer .footer-inner {
        display: flex;
        justify-content: center;
    }
    footer.main-footer .footer-text p {
        margin: 0;
    }
    footer.main-footer .go-up a {
        padding: 0px 5px;
    }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-gray">
            <div class="panel-body panelBodyView">
                
                <section class="title-section" style="padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #ddd;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box">
                                <h3 class="" style="margin: 0">{{ $data['reportLabel'] }}</h3>
                                <div class="action">
                                    <a href="{{ url('/hr/report/epsRegister') }}" class="btn btn-primary"> 
                                        <i class="fa fa-refresh"></i> Reset
                                    </a>
                                    <button id="printIcon" class="btn btn-primary" target="_blank" style="">
                                        <i class="fa fa-print " aria-hidden="true"> Print</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <section class="filter-section">
                    <div class="row">
                        <form 
                            action="{{ route('hr.report.epsRegister') }}" 
                            method="post" 
                            class="form-horizontal form-groups filter-form">

                            {{ csrf_field() }}

                            {{-- Project --}}
                            <div class="col-md-2">
                                {{ Form::label('projects','Projects',['class'=>'control-label']) }}
                                {{ Form::select('project', $data['projects'], $data['filter']['project'] ?? 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 hr-select2','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">
                                {{ Form::label('start_date','Start Date',['class'=>'control-label']) }}
                                {{ Form::text('start_date',empty($data['filter']['start_date']) ? '':$data['filter']['start_date'],
                                ['class'=>'form-control datepicker','id'=>'start_date', 'readonly'=> true, 'style'=> 'cursor: pointer;']) }}
                            </div>

                             
                            {{-- End Date --}}
                            <div class="col-md-1">
                                {{ Form::label('end_date','End Date',['class'=>'control-label']) }}
                                {{ Form::text('end_date',empty($data['filter']['end_date']) ? '':$data['filter']['end_date'],
                                ['class'=>'form-control datepicker','id'=>'end_date','readonly'=> true, 'style'=> 'cursor: pointer;']) }}
                            </div>
                            
                            {{-- Submit Button --}}
                            <div class="col-md-1">
                                <label for="filter_submited" class="control-label" style="visibility: hidden; display: block;" >End Date</label>
                                <button 
                                    name="filter_submited"
                                    class="btn btn-primary"
                                    style="height: 37px;" 
                                    type="submit">
                                    <i class="fa fa-search"></i> 
                                    Search
                                </button>
                            </div>

                        </form>
                    </div>
                    {{-- ./row --}}
                </section>

                @if( $data['filtered'] )
                    <div id="filtered-result">
                        <section class="report-header">
                            <div class="row" style="padding-bottom: 0px; text-align: center; vertical-align: middle; color: black; font-weight: bold; ">
                                <span style="font-size:14px;"><br>{{ $data['foundationName'] }}</span><br/>
                                <span style="font-size:11px;">{{ $data['foundationAddress'] }}</span><br/>
                                <span style="font-size:11px;">{{ $data['reportLabel'] }}</span><br/>
                                <span style="font-size:11px;">Project: {{ $data['selectedProject'] }}</span><br/>
                            </div>
                            <br>
    
                            <div class="row">
                                <div class="col-md-12" style="font-size: 12px;">
                                    <div>
                                        <span style="color: black; float: left;">
                                            <span style="font-weight: bold;">Branch: </span>
                                            <span>{{ $data['selectedBranch'] }}</span>
                                        </span>
                                        <span style="color: black; float: right;">
                                            <span style="font-weight: bold;">Month: </span>
                                            <span>{{ date('M Y',strtotime($data['startDate'])) }} to {{ date('M Y',strtotime($data['endDate'])) }}</span>
                                        </span>
                                        <span style="clear: both;"></span>
                                    </div>
                                    <br>
                                    <div>
                                        <span style="color: black; float: left;">
                                            <span style="font-weight: bold;">Project Type: </span>
                                            <span>{{ $data['selectedProjectType'] }}</span>
                                        </span>
                                        <span style="color: black; float: right;">
                                            <span style="font-weight: bold;">Print Date: </span>
                                            <span>{{ date('d-m-Y H:i A') }}</span>
                                        </span>
                                        <span style="clear: both;"></span>
                                    </div>
                                    <br>
                                </div>
                            </div>
                        </section>
                        <section class="eps-register">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered" style="color:black; border-collapse: collapse; table-layout: fixed;"  border="1" width="100%" id="epsRegisterTable">
                                    @include('hr.report.epsRegister.table')
                                </table>
                            </div>
                        </section>
                    </div>
                @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);
                    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 }}" );
                    });
            });

        $("#printIcon").click(function(event) {
            var mainContents = document.getElementById("filtered-result").innerHTML;
            var headerContents = '';
            var printStyle = `
                <style>
                    body {
                        margin: 0;
                        padding: 0;
                    }
                    table th, table td {
                        word-break: break-word;
                        font-size: 11px;
                        padding: 3px;
                    }
                    thead tr th {
                        text-align: center;
                        vertical-align: middle;
                    }
                    tr {
                        page-break-inside: avoid;
                        page-break-after: auto;
                    }
                    .text-right {
                        text-align: right;
                    }
                    .text-center {
                        text-align: center;
                    }
                    .text-bold {
                        font-weight: bold;
                    }
                    @media print {
                        @page {
                            size: A4 landscape;
                            margin: 10mm 10mm;
                        }
                    }
                </style>
            `;

            var footerContents = `
                <div class='row' style='font-size:12px; padding-left:5px; padding-right:5px; padding-top:40px; display: flex; justify-content: space-between;'>
                    <div>Prepared By:</div>
                    <div>Checked By:</div>
                    <div>Approved By:</div>
                </div>
            `;
            var printContents = '<div id="">' + headerContents + printStyle +
                mainContents + footerContents + '</div>';
            var win = window.open('', 'printwindow');
            win.document.write(printContents);
            const today = new Date();
            const formattedDate = today.toLocaleDateString("en-GB").split('/').join('-');
            const title = "EPS_Register_Report_" + formattedDate;
            win.document.title = title;
            win.print();
            win.close();
        });
    </script>
@endsection