@extends('hr_main')
@section('title', '| Gratuity register Report')

@section('stylesheets')
    @include('hr.report.reportStyle')
    <style>
        #loading {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
            background-color: #fff;
            z-index: 99;
            text-align: center;
        }

        #loading-image {
            position: absolute;
            z-index: 100;
        }
    </style>
@endsection

@section('content')

<div id="loading">
    <img id="loading-image" src="{{ asset('images/loading/loading.gif') }}" alt="">
</div>

<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 class="ma-0 pa-0">{{ $data['reportLabel'] }}</h2>
                                <div class="action" style="margin-right: 10px;">
                                    <a href="{{ route('hr.report.gratuityRegister') }}" 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 
                            action="{{ route('hr.report.gratuityRegister') }}" 
                            method="get" 
                            class="form-horizontal form-groups filter-form">

                            {{-- Project --}}
                            <div class="col-md-2">
                                <label for="project">Project</label>
                                <select name="project" id="filter_project" class="form-control">
                                    @if( $data['projects'] )
                                        @foreach($data['projects'] as $project)
                                            <option value="{{ $project->id }}">
                                                {{ $project->name }}
                                            </option>
                                        @endforeach

                                    @endif
                                </select>
                            </div>
                            
                            {{-- Project Type --}}
                            <div class="col-md-2">
                                <label for="project_type">Project Type</label>
                                <select 
                                    name="project_type" 
                                    id="filter_project_type" 
                                    class="form-control">
                                </select>
                            </div>
                            
                            {{-- Branch --}}
                            <div class="col-md-2">
                                <label for="branch">Branch</label>
                                <select 
                                    name="branch" 
                                    id="filter_branch" 
                                    class="form-control">
                                </select>
                            </div>
                            
                            {{-- Employee --}}
                            <div class="col-md-3">
                                <label for="user">Employee Name</label>
                                <select 
                                    name="user" 
                                    id="filter_user" 
                                    class="form-control">
                                </select>
                            </div>
                            
                            {{-- Start Date --}}
                            <div class="col-md-1">
                                <label for="start-date">Start Date</label>
                                <input 
                                    type="text" 
                                    name="start_date"
                                    autocomplete="off"  
                                    value="{{empty($data['filter']['start_date']) ? '':$data['filter']['start_date']}}" 
                                    class="form-control datepicker"
                                    id="filter_start_date"
                                    placeholder="Select Date">
                            </div>

                            {{-- End Date --}}
                            <div class="col-md-1">
                                <label for="start-date">End Date</label>
                                <input 
                                    type="text"
                                    autocomplete="off" 
                                    name="end_date" 
                                    value="{{empty($data['filter']['end_date']) ? '':$data['filter']['end_date']}}" 
                                    class="form-control datepicker"
                                    id="filter_end_date"
                                    placeholder="Select Date">
                            </div>
                            
                            {{-- Submit Button --}}
                            <div class="col-md-1">
                                <button 
                                    name="filter_submited"
                                    class="btn btn-primary mt-22"
                                    style="margin-top: 23px;" 
                                    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 text-center">
                            <h3>{{ $data['foundationName'] }}</h3>
                            <p>{{ $data['foundationAddress'] }}</p>
                            <p>{{ $data['reportLabel'] }}</p>
                            <p>Project: {{ $data['selectedProject'] }}</p>
                            <p class="report-month">Reporting period: {{ 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.hafij.gratuityRegister.table')
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <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>
            {{-- ./panel-body --}}
        </div>
    </div>
</div>
@endsection

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

            var sourceId      = sourceAttr.val() || 0;
            var projectId     = $('#filter_project').val() || 0;
            var projectTypeId = $('#filter_project_type').val() || 0;
            var branchId      = $('#filter_branch').val() || 0;
            var token         = $('meta[name="_token"]').attr('content');

            console.log("Source="+sourceId);
            console.log("projectId="+projectId);
            console.log("projectTypeId="+projectTypeId);
            console.log("branchId="+branchId);
            
            var sendingData = {
                'sourceId': sourceId,
                'projectId': projectId,
                'projectTypeId': projectTypeId,
                '_token': token
            }

            $.ajax({
                url: link,
                dataType: 'json',
                type: 'GET',
                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);
                }
            });
        }

        // Change Project  filter
        $(document).on('change','#filter_project', function() {
            // console.log($('#filter_project').html());
            getDependentDropdown($('#filter_project'), $('#filter_project_type'), 
                "{{ url('hr/filter/getProjectType') }}" );
        });

        // Change Project Type filter
        $(document).on('change','#filter_project_type', function() {
            getDependentDropdown($('#filter_project_type'), $('#filter_branch'), 
                "{{ url('hr/filter/getBranchFromProjectAndProjectType') }}" );
        });

        // Change Branch filter
        $(document).on('change','#filter_branch', function() {
            getDependentDropdown($('#filter_branch'), $('#filter_user'), 
                "{{ url('hr/filter/getUserFromProjectProjectTypeAndBranch') }}" );
        });

        function print() {
            var mainContents = document.getElementById("filtered-result").innerHTML ;   
            var win = window.open('','printwindow');
            var printStyle = `@include('hr.report.printStyle')`;
            var printContent = '<div>' + printStyle + mainContents +'</div>';
            win.document.write(printContent);
            win.print();
            win.close();
        }

        $(window).load(function() {
            $('#loading').hide();
        });
    </script>
@endsection