@extends('layouts.app')
@section('title', trans('schedules.lbl_schedule_month_page_title'))

@section('page-styles')
<style>
.user-name{
	cursor: pointer;
}
</style>
@stop
@section('content')
	<div class="content">
		<x-content.header title="{{ __('schedules.lbl_schedule_month_page_title') }}" />
		<div class="tw-card">
			<div class="p-6">
				<form method="POST" id="form" action="{{route('months.update.all')}}">
					<div class="form-group row">
						<div class="col-md-6">
							<label class="control-label">{{trans('forms.lbl_select_employee')}}: </label>
							<select multiple class="form-control" name="users[]"  size='10'>
								@foreach($employees as $key => $employee)
								<option value="{{$employee->id}}">{{$employee->name}}</option>
								@endforeach
							</select>
						</div>
						<div class="col-md-6">
							<label class="control-label">{{trans('forms.lbl_select_months')}}: </label>
							<select multiple class="form-control" name="months[]" size='10'>
																@foreach($months as $key => $month)
									<option value="{{$month}}">{{ucfirst($month)}}</option>
								@endforeach
							</select>
						</div>
					</div>

					<div class="mt-4 border-top">
						<button type="submit" class="btn btn-info btn-save mt-4" data-action="show">
							{{trans('schedules.lbl_show_months')}}
						</button>
						<button type="submit" class="btn btn-danger btn-save mt-4" data-action="hide">
							{{trans('schedules.lbl_hide_months')}}
						</button>
					</div>
				</form><!-- END FORM-->
			</div>
		</div>
		<h4 class="card-title">
			<i class="mdi mdi-account-multiple"></i>
			{{trans('schedules.lbl_schedule_month_page_title')}}
		</h4>
		<table id="datatable" class="table dt-responsive w-100 text-center">
			<thead>
				<tr>
					<th>{{trans('forms.lbl_user')}}</th>
					<th>{{trans('forms.lbl_jan')}}</th>
					<th>{{trans('forms.lbl_feb')}}</th>
					<th>{{trans('forms.lbl_mar')}}</th>
					<th>{{trans('forms.lbl_apr')}}</th>
					<th>{{trans('forms.lbl_may')}}</th>
					<th>{{trans('forms.lbl_jun')}}</th>
					<th>{{trans('forms.lbl_jul')}}</th>
					<th>{{trans('forms.lbl_aug')}}</th> 
					<th>{{trans('forms.lbl_sep')}}</th>
					<th>{{trans('forms.lbl_oct')}}</th>
					<th>{{trans('forms.lbl_nov')}}</th>
					<th>{{trans('forms.lbl_dec')}}</th>
				</tr>
			</thead>
		</table>
	</div>
	@include('timetracker::schedules.settings.update')
@endsection


@section('footer-script')

    <script>
		$(".btn-save").on("click", function(event) {
			event.preventDefault();
			data = $('#form').serialize();
			data = data+"&action="+$(this).data('action')

			PDRequest({
				type    : "PUT",
				url     : $("#form").prop("action"),
				data    : data,
				event   : event
			}).then((response) => {

				if(response.status == "success") {
					window.PDTable.draw();
				}
			});
		});

		PDDataTable({
			url: "{{ route('months.index') }}",
			columns:[
				{ data: 'active_user.name', name: 'active_user.name', orderable: true, searchable: true , className:'user-name'},
				{ data: 'jan', name: 'jan' },
				{ data: 'feb', name: 'feb' },
				{ data: 'mar', name: 'mar' },
				{ data: 'apr', name: 'apr' },
				{ data: 'may', name: 'may' },
				{ data: 'jun', name: 'jun' },
				{ data: 'jul', name: 'jul' },
				{ data: 'aug', name: 'aug' },
				{ data: 'sep', name: 'sep' },
				{ data: 'oct', name: 'oct' },
				{ data: 'nov', name: 'nov' },
				{ data: 'dec', name: 'dec' },
			],
			order : [2, 'asc']
		});

    </script>
    @endsection