@extends('layouts.app')

@section('breadcrumb')
	<ul class="breadcrumb">
		<li><a href="/home">{!! trans('messages.home') !!}</a></li>
		<li class="active">{!! trans('messages.payroll') !!}</li>
	</ul>
@stop

@section('content')
	<div class="row">
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

		{{-- Payroll filter --}}
		<div class="col-sm-12 collapse" id="box-detail-filter">
			<div class="box-info">
				<h2><b>{!! trans('messages.filter') !!}</b> {!! trans('messages.payroll') !!}</h2>
				<div class="additional-icon">
					<button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#box-detail-filter"><i class="fa fa-minus icon"></i> {!! trans('messages.hide') !!}</button>
				</div>
				{!! Form::open(['url'=>'filter', 'id'=>'payroll-filter-form', 'data-no-form-clear' => 1]) !!}
				<div class="row">
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('month',trans('messages.month'),[]) !!}
							{!! Form::select('month',$months,'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('year',trans('messages.year'),[]) !!}
							{!! Form::select('year',$years,'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('type',trans('messages.type'),[]) !!}
							{!! Form::select('type',$types,'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('status',trans('messages.status'),[]) !!}
							{!! Form::select('status',$status,'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
					{{-- @if(Laratrust::isAbleTo('manage-officer-deployment'))
						<div class="col-sm-2">
							<div class="form-group">
								{!! Form::label('site',trans('messages.site'),[]) !!}
								{!! Form::select('site',$sites,'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
							</div>
						</div>
					@endif --}}
				</div>
				{!! Form::submit(trans('messages.filter'),['class' => 'btn btn-default btn-success pull-right','name' => 'submit']) !!}
				{!! Form::close() !!}
			</div>
		</div>

		{{-- One-time Payment --}}
		<div class="col-sm-12 collapse" id="box-onetime-payment">
			<div class="box-info">
				<h2><b>{!! trans('messages.create') !!}</b> {!! trans('messages.one_time').' '.trans('messages.payment') !!}</h2>
				<div class="additional-icon">
					<button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#box-onetime-payment"><i class="fa fa-minus icon"></i> {!! trans('messages.hide') !!}</button>
				</div>
				{!! Form::open(['route'=>'payroll.onetime_payment', 'role'=>'form', 'id'=>'create-onetime-payment', 'data-submit'=>'noAjax']) !!}
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label for="date_range">{{trans('messages.date')}}</label>
							<div class="input-daterange input-group" id="datepicker">
								<input type="text" class="input-sm form-control" name="from_date" readonly value="{{isset($user_salary) ? $user_salary->from_date : ''}}" />
								<span class="input-group-addon">{{trans('messages.to')}}</span>
								<input type="text" class="input-sm form-control" name="to_date" readonly value="{{isset($user_salary) ? $user_salary->to_date : ''}}"  />
							</div>
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('user_ids',trans('messages.user'),[]) !!}
							{!! Form::select('user_ids[]', $users, isset($user_ids) ? $user_ids : '',['multiple'=>'multiple','data-actions-box'=>'true','class'=>'form-control show-tick','title'=>trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('onetime_type',trans('messages.type'),[]) !!}
							{!! Form::select('onetime_type', $onetime_type, isset($onetime_type) ? $onetime_type : '',['class'=>'form-control show-tick','title'=>trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-3">
						<div class="form-group">
							{!! Form::label('onetime_amount',trans('messages.amount'),[]) !!}
							{!! Form::number('onetime_amount',0,['class'=>'form-control','step' => '0.01','min'=>0]) !!}
						</div>
					</div>
				</div>
				{!! Form::submit(trans('messages.add').' '.trans('messages.payment'),['class' => 'btn btn-default btn-success pull-right','name' => 'submit']) !!}
				{!! Form::close() !!}
			</div>
		</div>

		{{-- Generate CPF --}}
		{{-- <div class="col-sm-12 collapse" id="box-detail-cpf">
			<div class="box-info">
				<h2><b>{!! trans('messages.bulk') !!}</b> {!! trans('messages.generate_monthly_summary') !!}</h2>
				<div class="additional-icon">
					<button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#box-detail-cpf"><i class="fa fa-minus icon"></i> {!! trans('messages.hide') !!}</button>
				</div>
				{!! Form::open(['route'=>'payroll.generate_monthly_summary', 'role'=>'form', 'id'=>'generate-cpf-form', 'data-submit'=>'noAjax']) !!}
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							{!! Form::label('month',trans('messages.month'),[]) !!}
							{!! Form::select('month',$months,strtolower(\Carbon\Carbon::now()->format('F')),['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							{!! Form::label('year',trans('messages.year'),[]) !!}
							{!! Form::select('year',$years,\Carbon\Carbon::now()->year,['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							{!! Form::label('monthly_summary_type',trans('messages.type'),[]) !!}
							{!! Form::select('monthly_summary_type',$monthly_summary_type,'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!}
						</div>
					</div>
				</div>
				{!! Form::submit(trans('messages.bulk').' '.trans('messages.generate'),['class' => 'btn btn-default btn-success pull-right','name' => 'submit']) !!}
				{!! Form::close() !!}
			</div>
		</div> --}}

		{{-- Upload Payroll --}}
		<div class="col-sm-12 collapse" id="box-detail-upload">
			<div class="box-info">
				<h2><b>{!! trans('messages.upload') !!}</b> {!! trans('messages.payroll') !!}</h2>
				<div class="additional-icon">
					<button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#box-detail-upload"><i class="fa fa-minus icon"></i> {!! trans('messages.hide') !!}</button>
				</div>
				{!! Form::open(['route'=>'payroll.upload', 'files'=>'true','role'=>'form', 'id'=>'upload-payroll-form', 'data-submit'=>'noAjax']) !!}
					<div>
						<a href="/payroll/download-excel-template">
							<i class="fa fa-cloud-download"></i>
							Download Template
						</a>
					</div><br>
					<div class="form-group">
						<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="file" id="file" class="btn btn-success btn-sm file-input" title="{!! trans('messages.select').' '.trans('messages.file') !!}">
					</div>
					<div class="form-group">
						<label for="sheet_num">Which sheet are you importing? (1 - 10)</label><br>
						<input type="number", name="sheet_num", title="Sheet number">
					</div>
					<div class="form-group">
						<label for="payroll_type">{!! trans('messages.type') !!}</label><br>
						<select name="payroll_type", placeholder="{!! trans('messages.type') !!}">
							<option disabled selected value> -- Select an option -- </option>
							<option value="salary_detail">{!! trans('messages.salary').' '.trans('messages.detail') !!}
							<option value="attendance">{!! trans('messages.attendance') !!}
							<option value="fixed">{!! trans('messages.fixed') !!}
							<option value="daily">{!! trans('messages.daily') !!}
						</select>
						{{-- {!! Form::label('payroll_type',trans('messages.type'),[]) !!}
						{!! Form::select('payroll_type',['salary_detail'=>'Salary Detail','attendance'=>'Attendance','fixed'=>'Fixed','daily'=>'Daily'],'',['class'=>'form-control show-tick','title' => trans('messages.select_one')]) !!} --}}
					</div>
				{!! Form::submit(trans('messages.upload'),['class' => 'btn btn-default btn-success pull-right','name' => 'submit']) !!}
				{!! Form::close() !!}
			</div>
		</div>

		<div class="col-md-12">
			<div class="box-info full">
				<h2><b>{!! trans('messages.list_all') !!}</b> {!! trans('messages.payroll') !!}</h2>
				<div class="additional-btn">
					<a href="#" data-toggle="collapse" data-target="#box-detail-filter"><button class="btn btn-sm btn-primary"><i class="fa fa-filter icon"></i> {!! trans('messages.filter') !!}</button></a>
					{{-- @if(Laratrust::isAbleTo('create-multiple-payroll'))
						<a href="/payroll/create/multiple"><button class="btn btn-sm btn-primary"><i class="fa fa-users icon"></i> {!! trans('messages.create').' '.trans('messages.multiple').' '.trans('messages.payroll') !!}</button></a>
					@endif --}}
					@if(Laratrust::isAbleTo('create-one-time-payment'))
						<a href="#" data-toggle="collapse" data-target="#box-onetime-payment"><button class="btn btn-sm btn-primary"><i class="fa fa-money icon"></i> {!! trans('messages.advance').' '.trans('messages.payment') !!}</button></a>
					@endif
					{{-- @if(Laratrust::isAbleTo('generate-cpf'))
						<a href="#" data-toggle="collapse" data-target="#box-detail-cpf"><button class="btn btn-sm btn-primary"><i class="fa fa-sticky-note icon"></i> {!! trans('messages.generate_monthly_summary') !!}</button></a>
					@endif --}}
					@if(Laratrust::isAbleTo('create-payroll'))
						<a href="/payroll/create"><button class="btn btn-sm btn-primary"><i class="fa fa-users icon"></i> {!! trans('messages.create').' '.trans('messages.payroll') !!}</button></a>
					@endif
					{{-- @if(Laratrust::isAbleTo('create-payroll'))
						<a href="/payroll/create/daily"><button class="btn btn-sm btn-primary"><i class="fa fa-users icon"></i> {!! trans('messages.create').' '.trans('messages.daily').' '.trans('messages.payroll') !!}</button></a>
					@endif --}}
					@if(Laratrust::isAbleTo('upload-payroll'))
						<a href="#" data-toggle="collapse" data-target="#box-detail-upload"><button class="btn btn-sm btn-primary"> {!! trans('messages.upload').' '.trans('messages.payroll') !!}</button></a>
					@endif
				</div>
				<div class="row" style="margin:10px">
					@if(Laratrust::isAbleTo('verify-payroll'))
						<button class="btn btn-xs btn-warning"id="change_selected_status"><i class="fa fa-check icon" style="margin-right:4px"></i>Change Selected Status</button>
					@endif
					@if(Laratrust::isAbleTo('delete-payroll'))
						<button class="btn btn-xs btn-danger" id="delete_selected"><i class="fa fa-trash icon" style="margin-right:4px"></i>Delete Selected</button>
					@endif
				</div>
				@include('global.datatable',['table' => $table_data['payroll-table']])
			</div>
		</div>

		{{-- @if(defaultRole())
      <div class="col-md-12">
        <div class="box-info custom-scrollbar">
          <div id="payroll-monthly-report-graph"></div>
        </div>
      </div>
    @endif --}}

	</div>
@stop

@section('js')
	<script type="text/javascript">
		$(document).ready(function() {
			var table = $('#payroll_table').DataTable();
			var table_data;
			var id_array;
			$('#payroll_table tbody').on( 'click', 'tr', function () {
				$(this).toggleClass('selected');
			});

			$('#delete_selected').click( function() {
				id_array = [];
				table_data = table.rows('.selected').data().toArray();
				table_data.forEach(function(data){ //only loop when user press action button (delete, etc...)
					item = data[0].split('/payroll/').pop().split('"')[0];
					id_array.push(item);
				});
				if (confirm("Delete payroll(s)?")) {
				  $.ajax({
						type: 'DELETE',
						url:'/payroll/'+id_array,
						success: function(response){
							alert('Payrolls deleted!');
							window.location = "/payroll";
						},
						error: function(response){
							alert('Error deleting');
						}
					});
				} else {
				  console.log("Delete Cancelled");
				}
			})

			$('#change_selected_status').click( function() {
				id_array = [];
				table_data = table.rows('.selected').data().toArray();
				table_data.forEach(function(data){ //only loop when user press action button (delete, etc...)
					item = data[0].split('/payroll/').pop().split('"')[0];
					id_array.push(item);
				});
				if (confirm("Change status of payroll(s)?")) {
				  $.ajax({
						type: 'GET',
						url:'/payroll/'+id_array+'/verify',
						success: function(response){
							alert('Payroll(s) status changed!');
							window.location = "/payroll";
						},
						error: function(response){
							alert('Error changing status');
						}
					});
				} else {
				  console.log("Status Changing Cancelled");
				}
			})
		});
	</script>
@stop