@extends('admin.layout')
@section('content')
<style>	
    #watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
	<section class="content-header">
		<h1> {{ trans('Manufacturing Report') }} <small class="pagination-result" style="color: #111111; font-weight: 500; margin-left: 25px;"> (Showing {{($result['MaskProductionInventorysData']->currentPage()-1)* $result['MaskProductionInventorysData']->perPage()+($result['MaskProductionInventorysData']->total() ? 1:0)}} to {{($result['MaskProductionInventorysData']->currentPage()-1)*$result['MaskProductionInventorysData']->perPage()+count($result['MaskProductionInventorysData'])}}  of  {{$result['MaskProductionInventorysData']->total()}}  Results)  </small></h1>
		<ol class="breadcrumb">
			<li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
			<li class="active"> {{ trans('Manufacturing Report') }}</li>
		</ol>
	</section>
    @include('admin.loader')
	@php
		$getUserRoleData = userRoleData();
		$manufacturing_report		= explode(",",$getUserRoleData->manufacturing_report);
	@endphp	
	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="box box-info">
					<div class="box-body">						
						<div class="col-xs-12">
							<div class="row">
                                								<form action="" method="get" id="mask_production_filter">
                                    <input type="hidden" name="date_range" id="date_range" value="{{ $date_range }}">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12"> 
                                            <strong>Filter by:Machines/Status/Date range</strong>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-2 col-md-2"> 
                                        	<div class="form-group">
                                        		<input type="text" name="mp_machines_name" id="mp_machines_name" value="{{ $mp_machines_name }}" placeholder="Machines name" class="form-control">    
                                        	</div>
                                        </div>                                       
                                        <div class="col-sm-3 col-md-3"> 
                                            <div class="form-group">
                                                {!! Form::select('mp_operator_name[]', $result['operatorsData'], $mp_operator_name, array('class'=>'form-control', 'id'=>'mp_operator_name', 'multiple'=>'')) !!}
                                            </div>
                                        </div>
                                        <div class="col-sm-2 col-md-2"> 
                                        	<div class="form-group">
                                                {!! Form::select('mp_inventory_status[]', $result['mp_inventory_status'], $mp_inventory_status, array('class'=>'form-control', 'id'=>'mp_inventory_status', 'multiple'=>'')) !!}
                                        	</div>
                                        </div>
                                        <div class="col-sm-2 col-md-2"> 
                                        	<div class="form-group">
                                           		<input type="text" name="mp_from_date" id="mp_from_date" value="{{ $mp_from_date }}" placeholder="Date range" readonly="" class="form-control">
                                       		</div>
                                        </div>                                        
                                        <div class="col-sm-3 col-md-3">
                                            <div class="pull-right">
                                                <ul  class="list-inline">
                                                    @if(in_array("Add", $manufacturing_report)) 
                                                        <li class="list-inline-item">
                                                            <a href="{{ route('mask-production-report.create') }}" type="button" class="btn btn-block btn-primary">{{ trans('Add Machine') }}</a>
                                                        </li>
                                                    @endif                                      
                                                    <li class="list-inline-item"><a href="{{ URL('admin/mask-production-report') }}" class="btn-primary-apply">Clear Filter</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
								</form>
							</div>
						</div>
						<div class="col-xs-12">
							<div class="row">
								@if(session()->has('message'))
								<div class="alert alert-success alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
									{{ session()->get('message') }}
								</div>
								@endif
								@if(session()->has('error'))
									<div class="alert alert-warning alert-dismissible">
									   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
									   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
										{{ session()->get('error') }}
									</div>
								@endif
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">										
								@if(in_array("View", $manufacturing_report))			
				                <table id="example1" class="table table-bordered table-striped">
									<thead>
                                        <tr>                      
                                            <th width="5%">{{ trans('#ID') }}</th>
                                            <th class="mp_sorting" data-sorting_type="desc" data-column_name="id" style="cursor: pointer">{{ trans('Machine') }} <span id="id_icon" style="float: right;"><span class="glyphicon glyphicon-triangle-bottom"></span></span></th>{{-- 
                                            <th>{{ trans('Order ID') }}</th> --}}
                                            <th>{{ trans('Accepted') }}</th>
                                            <th>{{ trans('Rejected') }}</th>
                                            <th>{{ trans('Total') }}</th>
                                            <th>{{ trans('Rejection %') }}</th>
                                            <th width="15%" class="mp_sorting" data-sorting_type="desc" data-column_name="created_at" style="cursor: pointer">{{ trans('Date') }} <span id="created_at_icon" style="float: right;"><span class="glyphicon glyphicon-triangle-bottom"></span></span></th>
                                            <th width="21%">{{ trans('Action') }}</th>
                                        </tr>
									</thead>
									<tbody class="result-data">
										@include('admin.mask-production-report.mask_production_report_pagination_data')
									</tbody>
				                </table>
                                <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                                <input type="hidden" name="hidden_column_name" id="hidden_column_name" value="id" />
                                <input type="hidden" name="hidden_sort_type" id="hidden_sort_type" value="asc" />  						                
								@else
									<p> <strong>Please contact with SuperAdmin</strong></p>
								@endif
							</div>
						</div>
					</div>
				</div>

                <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
                </div>

			</div>
		</div>
	</section>  
</div>
</div>
@endsection 
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />

<script type="text/javascript"> 

   
function submitSearchForm() {
    $('.fullLoader').show();
    $('#mask_production_filter').submit();
}

$('#mp_machines_name').donetyping(function(){
    submitSearchForm();
});

function fetchMPInventorysData(page = '', mp_inventory_status = [], machine = '', startDate = '', operator_name = '', column_name = '', sort_type = '') {
    $.ajax({
        url: '{{URL("admin/get-mask-production-by-data")}}',
       type: "GET",
       //async: false,
        data:{'page':page, 'mp_inventory_status':mp_inventory_status, 'machine':machine, 'startDate':startDate, 'operator_name':operator_name, 'column_name':column_name, 'sort_type':sort_type},
        success:function(data) {
            $('tbody.result-data').html('');
            $('tbody.result-data').html(data.data);
            $('.pagination-result').html(data.pagination_val);
        }
    });
}

$(function () { 
    // $(document).on('click', '.mp-pagination .pagination a', function(event){    
    //     event.preventDefault();
    //     var page = $(this).attr('href').split('page=')[1];
    //     /*console.log(page);
    //     return false;*/
    //     $('#hidden_page').val(page);
    //     $('li').removeClass('active');
    //     $(this).parent().addClass('active');

    //     var startDate = '';            
    //     var machine = '';
    //     var mp_inventory_status = '';            
    //     var operator_name = '';

    //     if ($('#date_range').val() != '') {
    //         startDate = $('#date_range').val();                
    //     }  
    //     if ($('#mp_machines_name').val() != '') {
    //         machine = $('#mp_machines_name').val();
    //     }  
    //     if ($('#mp_inventory_status').val() != '') {
    //         mp_inventory_status = $('#mp_inventory_status').val();
    //     }        
    //     if ($('#mp_operator_name').val() != '') {
    //         operator_name = $('#mp_operator_name').val();
    //     }                       
        
    //     fetchMPInventorysData(page = page, mp_inventory_status = mp_inventory_status, machine = machine, startDate = startDate, operator_name = operator_name);
    // });

    // Mask Production Report Filter
    $("#mp_inventory_status").select2({
        closeOnSelect: false,
        placeholder: 'Please status',
    }).on("select2:select", function (e) {
        var selected_mp_inventory_status = $(e.currentTarget);
        var select_mp_inventory_status = selected_mp_inventory_status.val();
        var machine = $('#mp_machines_name').val();            
        var operator_name = $('#mp_operator_name').val();
        var column_name = '';
        var sort_type = '';
        if ($('#hidden_column_name').val() != '') {
            column_name = $('#hidden_column_name').val();
        }        
        if ($('#hidden_sort_type').val() != '') {
            sort_type = $('#hidden_sort_type').val();
        }   

        //fetchMPInventorysData(page = '', inventory_status = select_mp_inventory_status, machine = machine, startDate = '', operator_name = operator_name, column_name = column_name, sort_type = sort_type);
        submitSearchForm();
    }).on('select2:unselect', function (e) {
        var selected_mp_inventory_status = $(e.currentTarget);
        var select_mp_inventory_status = selected_mp_inventory_status.val();
        var machine = $('#mp_machines_name').val();            
        var operator_name = $('#mp_operator_name').val();
        var column_name = '';
        var sort_type = '';
        if ($('#hidden_column_name').val() != '') {
            column_name = $('#hidden_column_name').val();
        }        
        if ($('#hidden_sort_type').val() != '') {
            sort_type = $('#hidden_sort_type').val();
        }   
        
        //fetchMPInventorysData(page = '', inventory_status = select_mp_inventory_status, machine = machine, startDate = '', operator_name = operator_name, column_name = column_name, sort_type = sort_type);
        submitSearchForm();
    }); 
    // $('#mp_machines_name').on('keyup',function(){
    //     var machine = $('#mp_machines_name').val();
    //     var mp_inventory_status = $('#mp_inventory_status').val();            
    //     var operator_name = $('#mp_operator_name').val();
    //     var column_name = '';
    //     var sort_type = '';
    //     if ($('#hidden_column_name').val() != '') {
    //         column_name = $('#hidden_column_name').val();
    //     }        
    //     if ($('#hidden_sort_type').val() != '') {
    //         sort_type = $('#hidden_sort_type').val();
    //     }   
    //     fetchMPInventorysData(page = '', mp_inventory_status = mp_inventory_status, machine = machine, startDate = '', operator_name = operator_name, column_name = column_name, sort_type = sort_type);
    // }); 

           
    $("#mp_operator_name").select2({
        closeOnSelect: false,
        placeholder: 'Operators name',
    }).on("select2:select", function (e) {
        var selected_operators_status = $(e.currentTarget);
        var operator_name = selected_operators_status.val();           
        var machine = $('#mp_machines_name').val();
        var mp_inventory_status = $('#mp_inventory_status').val();
        var column_name = '';
        var sort_type = '';
        if ($('#hidden_column_name').val() != '') {
            column_name = $('#hidden_column_name').val();
        }        
        if ($('#hidden_sort_type').val() != '') {
            sort_type = $('#hidden_sort_type').val();
        }
        //fetchMPInventorysData(page = '', mp_inventory_status = mp_inventory_status, machine = machine, startDate = '', operator_name = operator_name, column_name = column_name, sort_type = sort_type);
        submitSearchForm();
    }).on('select2:unselect', function (e) {            
        var selected_operators_status = $(e.currentTarget);
        var operator_name = selected_operators_status.val();           
        var machine = $('#mp_machines_name').val();
        var mp_inventory_status = $('#mp_inventory_status').val();
        var column_name = '';
        var sort_type = '';
        if ($('#hidden_column_name').val() != '') {
            column_name = $('#hidden_column_name').val();
        }        
        if ($('#hidden_sort_type').val() != '') {
            sort_type = $('#hidden_sort_type').val();
        }
        //fetchMPInventorysData(page = '', mp_inventory_status = mp_inventory_status, machine = machine, startDate = '', operator_name = operator_name, column_name = column_name, sort_type = sort_type);
        submitSearchForm();
    }); 

    $('#mp_from_date').daterangepicker({
        opens: 'left',
        locale: { cancelLabel: 'Clear' },
        //autoUpdateInput: false,
        //startDate: moment().subtract('days', 29),      
        startDate: moment().subtract(1, 'month').startOf('month'),
        endDate: moment(),      
        ranges: {
             'Today': [moment(), moment()], 
             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             'Last 7 Days': [moment().subtract(6, 'days'), moment()],
             'Last 30 Days': [moment().subtract(29, 'days'), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, 
     function(start, end, label) {  
         console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
     });
    $('#mp_from_date').on('apply.daterangepicker', function(ev, picker) {
        //console.log(picker.startDate.format('YYYY-MM-DD'));
        //console.log(picker.endDate.format('YYYY-MM-DD'));
        var startDate = picker.startDate.format('YYYY-MM-DD')+'/'+picker.endDate.format('YYYY-MM-DD');
        $('#date_range').val(startDate);
        //console.log(startDate);
        //return false;
        var machine = $('#mp_machines_name').val();
        var mp_inventory_status = $('#mp_inventory_status').val();            
        var operator_name = $('#mp_operator_name').val();
        var column_name = '';
        var sort_type = '';
        if ($('#hidden_column_name').val() != '') {
            column_name = $('#hidden_column_name').val();
        }        
        if ($('#hidden_sort_type').val() != '') {
            sort_type = $('#hidden_sort_type').val();
        }
        //fetchMPInventorysData(page = '', mp_inventory_status = mp_inventory_status, machine = machine, startDate = startDate, operator_name = operator_name, column_name = column_name, sort_type = sort_type);
        submitSearchForm();
    });
    $('#mp_from_date').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
    });
    $('#mp_from_date').on('cancel.daterangepicker', function(ev, picker) {
        //do something, like clearing an input
        $('#date_range').val('');
        $('#mp_from_date').val('');
        var startDate = '';
        var machine = $('#mp_machines_name').val();
        var mp_inventory_status = $('#mp_inventory_status').val();            
        var operator_name = $('#mp_operator_name').val();
        var column_name = '';
        var sort_type = '';
        if ($('#hidden_column_name').val() != '') {
            column_name = $('#hidden_column_name').val();
        }        
        if ($('#hidden_sort_type').val() != '') {
            sort_type = $('#hidden_sort_type').val();
        }
       
        //fetchMPInventorysData(page = '', mp_inventory_status = mp_inventory_status, machine = machine, startDate = startDate, operator_name = operator_name, column_name = column_name, sort_type = sort_type);
        submitSearchForm();
    });

    // Mask Production Reports Sorting
    function clear_icon() {
        $('#id_icon').html('');
        $('#post_title_icon').html('');
    }
    $(document).on('click', '.mp_sorting', function(){
        var column_name = $(this).data('column_name');
        var order_type = $(this).data('sorting_type');
        var reverse_order = '';
        if(order_type == 'asc')
        {
         $(this).data('sorting_type', 'desc');
         reverse_order = 'desc';
         //clear_icon();
         $('#'+column_name+'_icon').html('<span class="glyphicon glyphicon-triangle-bottom"></span>');
       }
       if(order_type == 'desc')
       {
         $(this).data('sorting_type', 'asc');
         reverse_order = 'asc';
         clear_icon
         $('#'+column_name+'_icon').html('<span class="glyphicon glyphicon-triangle-top"></span>');
       }
       $('#hidden_column_name').val(column_name);
       $('#hidden_sort_type').val(reverse_order);
       
        var operator_name = $('#mp_operator_name').val();
        var machine = $('#mp_machines_name').val();
        var mp_inventory_status = $('#mp_inventory_status').val();

        fetchMPInventorysData(page = '', mp_inventory_status = mp_inventory_status, machine = machine, startDate = '', operator_name = operator_name, column_name = column_name, sort_type = reverse_order);
     });
});
</script>
<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
@endsection