@extends('hr_main')
@section('title', '| Salary Deduction Report')

@section('stylesheets')
    @include('hr.report.reportStyle')
    <style>
        .first-col-dark tbody > tr > td:first-child {
            background-color: transparent !important;
            color: #000!important;
        }
    </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">
                                <h2>{{ $data['reportLabel'] }}</h2>
                                <div class="action">
                                    <a href="{{ url('/hr/report/salaryDeduction') }}" 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="{{ url('hr/report/salaryDeduction/show') }}" 
                            method="get" 
                            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'],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>
                                <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">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.salaryDeduction.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>
                @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