@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
	<div class="side-app">
        <x-page.header>Live Support</x-page.header>
        @include('admin.errors.form-errors')
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">New Support Schedule</h3>
			</div>

			<div class="card-body">
				<form method="POST" action="{{route('staff.live-support.store')}}" class="form-horizontal">
					@csrf
					<div class="form-group ">
						<label class="form-control-label">Schedule:</label>
						<div class="row table-responsive">
							<table class="table table-striped table-bordered table-vcenter text-nowrap">
								<thead>
									<tr>
										<th>Start Date</th>
                                        <th>End Date</th>
										<th>Time</th>
										<th>Duration</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td><input type="date" name="sdate" id="sdate" placeholder="Date"
												class="form-control" required value={{old('sdate')}}>
										</td>
                                        <td><input type="date" name="edate" id="edate" placeholder="Date"
                                            class="form-control" required value={{old('edate')}}>
                                         </td>
										<td><input type="time" name="mstarttime" placeholder="Start Time"
												class="form-control" required value={{old('mstarttime')}}>
										</td>
										<td><select name="mduration" placeholder="Duration" class="form-control select2"
												required>
											<option value="" selected disabled>Select</option>
											<option value="15" {{old('mduration') == 15 ? 'selected':'' }}>15 min</option>
											<option value="30" {{old('mduration') == 30 ? 'selected':'' }}>30 min</option>
											<option value="60" {{old('mduration') == 60 ? 'selected':'' }}>1 h</option>
											<option value="90" {{old('mduration') == 90 ? 'selected':'' }}>1.5 h</option>
											<option value="120" {{old('mduration') == 120 ? 'selected':'' }}>2 h</option>
											<option value="150" {{old('mduration') == 150 ? 'selected':'' }}>2.5 h</option>
											<option value="180" {{old('mduration') == 180 ? 'selected':'' }}>3 h</option>
											<option value="210" {{old('mduration') == 210 ? 'selected':'' }}>3.5 h</option>
											<option value="240" {{old('mduration') == 240 ? 'selected':'' }}>4 h</option>
											<option value="270" {{old('mduration') == 270 ? 'selected':'' }}>4.5 h</option>
											<option value="300" {{old('mduration') == 300 ? 'selected':'' }}>5 h</option>
											</select>
										</td>

									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="form-group mb-0 row justify-content-end">
						<div class="col-md-3">
							<button type="submit" class="btn btn-primary waves-effect waves-light">New
								Support Schedule</button>
						</div>
					</div>
				</form>
			</div>
		</div>

<!-- Live Support Schedules -->

		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Live Support Schedule</h3>
			</div>
			<div class="card-body">
				<div class="table-responsive">
					<table
						class="table border-top table-striped table-bordered table-vcenter text-nowrap">
						<thead>
							<tr>
								<th style="text-align: center;display: table-cell; vertical-align: middle">
								 ID
								</th>
								<th style="text-align: center;display: table-cell; vertical-align: middle">Start Date
								</th>
								<th style="text-align: center;display: table-cell; vertical-align: middle">
									Start Time</th>
								<th style="text-align: center;display: table-cell; vertical-align: middle">
									End Date
								</th>
								<th style="text-align: center;display: table-cell; vertical-align: middle">End Time
								</th>
								<th style="text-align: center;display: table-cell; vertical-align: middle">
									Meetings
								</th>
							</tr>
						</thead>
						<tbody>
							@foreach ( $live_support_schedules as $key=>$schedule )
								<tr class="text-center">
									<td>{{++$key}}</td>
									<td>{{date('Y-m-d',strtotime($schedule->start_date))}}</td>
									<td>{{ date('h:i A',strtotime($schedule->start_time)) }}</td>
									<td>{{date('Y-m-d',strtotime($schedule->end_date))}}</td>
									<td>{{  date('h:i A',strtotime($schedule->end_time) )}}</td>
									<td><a href="{{route('staff.live-support-meetings.getMeetings',$schedule->id)}}" class="btn btn-outline-light btn-sm waves-effect waves-light">View</a> </td>

								</tr>
							@endforeach
						</tbody>
					</table>
					<div class="mt-4">
						{{ $live_support_schedules->appends(Request::except('page'))->render('inc.paginate') }}
					</div>
					<p class="mt-3">
						Displaying {{$live_support_schedules->count()}} of {{ $live_support_schedules->total() }} schedule(s).
					</p>
				</div>
			</div>
		</div>
	</div>
</div>


@endsection