@extends('layouts.app')

@section('content')

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

<div class="container pt-3 shadow">
	<form method="POST" action="{{ route('admin.daysOff.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-md-8"> 
            <div class="table-responsive-md">      
                <table class="table">
                    <thead>
                        <tr>
                        <th scope="col">#</th>
                        <th class="text-center" scope="col">Date</th>
                        <th class="text-center" scope="col">Type</th>
                        <th class="text-center" scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
						@php($i=1)
                        @foreach($daysOff as $day)
                            <tr>
                            <th scope="row">{{ $loop->iteration }}</th>
                            <td class="text-center">{{ $day->date }}</td>
                            <td class="text-center">{{ $day->dayOffType->type }}</td>
                            <td>
                                <div class="row">
                                    <div class="col">
                                        <form action="{{ route('admin.daysOff.delete') }}" method="POST" class="delete">
                                        @csrf
											<input type="hidden" name="day_off_id" value={{$day->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.daysOff.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="date" class="form-control @error('date') is-invalid @enderror" type="date" name="date" value="{{ old('date') ? old('date') : ''}}" required>
								</td>
								<td class="text-center">
									<select id="type_id" class="form-control" onchange="newType()" name="type_id" required>
										<option value="">Choose...</option>
										@foreach($types as $type)
											<option value="{{ $type->id }}">{{ $type->type }}</option>
										@endforeach
											<option disabled>--------</option>
											<option value="new_type">{{ __('Enter new') }}</option>
									</select>
									<!--  -->
									
										<input hidden id="new_type" type="text" class="form-control @error('name') is-invalid @enderror" name="new_type" value="{{ old('new_type') ? old('new_type') : '' }}" autocomplete="name" autofocus>

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

<script type="text/javascript">
	function newType() {
		var select = document.getElementById('type_id');
		if(select.value == 'new_type') {
			select.disabled = true;
			select.hidden = true;
			select.required = false;

			var newType = document.getElementById('new_type');
			newType.disabled = false;
			newType.hidden = false;
			newType.required = true;
		}
		

	}
</script>

@endsection