@extends('layouts.app')

@section('content')

<div class='container'>
	<div class="row justify-content-start mt-3 mb-3">
			<div class="col col-md">
				<h1>{{ __('Additional Shift for Users')}}</h1>
			</div>
		</div>
</div>

<div class="container pt-3 shadow">
	<form method="POST" action="{{ route('admin.additionalShift.view') }}">
	@csrf
		<div class="row justify-content-start">
			<div class="col-md-8">
				<div class="form-group row">
					<label for="user_id" class="col-md-4 col-form-label text-md-right">{{ __('Select User') }}</label>
					<div class="form-group col-md-6">
						<select id="user_id" class="form-control" name="user_id" required>
							<option value="">Choose...</option>
							@foreach($users as $user)
								<option value="{{ $user->id }}"
								@isset($selectedUser)
									{{ $user->id == $selectedUser->id ? 'selected' : '' }}
								@endisset
								>{{ $user->name }}
								</option>
							@endforeach
						</select>
					</div>
					<button type="submit" class="btn btn-primary">
						{{ __('Submit') }}
					</button>
				</div>
			</div>
		</div>
	</form>

	@isset($selectedUser)
	<div class="row justify-content-start mt-3 mb-3">
			<div class="col col-md">
				<h5><strong>{{ __('User: '. $selectedUser->name)}}</strong> </h5>
			</div>
	</div>
	@endisset

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="table-responsive-md">
                <table class="table">
                    <thead>
                        <tr>
                        <th style="width: 1%;" scope="col">#</th>
                        <th class="text-center" style="width: 1%;" scope="col">Date</th>
                        <th class="text-center" style="width: 7%;" scope="col">Shift</th>
                        <th class="text-center" style="width: 5%;" scope="col">Start Time</th>
                        <th class="text-center" style="width: 5%;" scope="col">End Time</th>
                        <th class="text-center" style="width: 5%;" scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
						@php($i=1)
                        @foreach($futureAdditionalShift as $additionalShift)
                            <tr>
                            <th scope="row">{{ $loop->iteration }}</th>
                            <td class="text-center">{{ $additionalShift->date }}</td>
                            <td class="text-center">{{ $additionalShift->shift->name }}</td>
                            <td class="text-center">{{ $additionalShift->start_time }}</td>
                            <td class="text-center">{{ $additionalShift->end_time }}</td>
                            <td class="text-center">
                                <div class="row">
                                    <div class="col">
                                        <form action="{{ route('admin.additionalShift.delete') }}" method="POST" class="delete">
                                        @csrf
											<input type="hidden" name="additional_shift_id" value={{$additionalShift->id}}>
											<input type="hidden" name="user_id" value={{$selectedUser->id}}>
                                            <button type="submit" class="btn btn-danger">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            </td>
                            </tr>
						@php($i++)
						@endforeach
							<form action="{{ route('admin.additionalShift.store') }}" method="POST">
                        	@csrf
							<input type="hidden" name="user_id" value={{$selectedUser->id}}>
								<tr>
								<th scope="row">{{ $i }}</th>
								<td class="text-center">
									<input id="shift_date" class="form-control @error('date') is-invalid @enderror" type="date" name="shift_date" value="{{ old('date') ? old('date') : ''}}" required>

                                    @error('shift_date')
                                    <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
								<td class="text-center">

									<select hidden id="shift_id" class="form-control @error('shift_id') is-invalid @enderror" name="shift_id" required>

									</select>

                                    @error('shift_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror

								</td>

                                <td class="text-center">
                                    <select hidden id="start_time_shift" class="form-control @error('start_time_shift') is-invalid @enderror" name="start_time_shift">
                                        <?php for($i = 0; $i <= 9; $i++){ ?>
                                            <option value='0<?php echo $i ?>:00:00'>0<?php echo $i; ?>:00:00</option>
                                        <?php } ?>
                                        <?php for($i = 10; $i <= 24; $i++){ ?>
                                            <option value=<?php echo $i ?>':00:00'><?php echo $i; ?>:00:00</option>
                                        <?php } ?>
                                    </select>

                                    @error('start_time_shift')
                                    <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>

                                    <td class="text-center">
                                        <select hidden id="end_time_shift" class="form-control @error('end_time_shift') is-invalid @enderror" name="end_time_shift">
                                            <?php for($i = 0; $i <= 9; $i++){ ?>
                                                <option value="0<?php echo $i ?>:00:00">0<?php echo $i; ?>:00:00</option>
                                            <?php } ?>
                                            <?php for($i = 10; $i <= 24; $i++){ ?>
                                                <option value="<?php echo $i ?>:00:00"><?php echo $i; ?>:00:00</option>
                                            <?php } ?>
                                        </select>

                                        @error('end_time_shift')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </td>
								<td class="text-center">
                                    <button type="submit"  class="btn btn-primary">Add</button>
                                </td>
								</tr>
							</form>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $("#shift_date").change(function (){

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var shiftDate = $("#shift_date").val();
        var userSelected = $('#user_id').val();

        $.ajax({
            method: 'POST',
            url: "/admin/additionalShift/shiftList",
            data: {shiftDate:shiftDate, userSelected:userSelected},
            success: function(data) {
                $('#shift_id').empty();

                $('#shift_id').removeAttr('hidden');
                $('#start_time_shift').removeAttr('hidden');
                $('#end_time_shift').removeAttr('hidden');

                for (var i = 0; i <= data.listShift.length; i++) {
                    $('#shift_id').append('<option value="' + data.listShift[i].id + '">' + data.listShift[i].name + '</option>');
                }
            },
            error: function () {
                $('#shift_id').attr('hidden',true);
                $('#start_time_shift').attr('hidden',true);
                $('#end_time_shift').attr('hidden',true);
            }
        });
    });

</script>

@endsection
