@push('css')
<link rel="stylesheet" href="{{ asset('css/flatpickr.min.css') }}">

@endpush

@push('js')
    <script src="{{ asset('js/flatpickr.js') }}"></script>

@endpush
<link rel="stylesheet" href="{{ asset('css/select2.css') }}" />
<div class="mb-3">
	<label for="title" class="form-label form-label-required">Session Name</label>
	<input type="text" name="title" id="title" value="{{$model->title}}" required="required" class="form-control">
</div>
<input type="hidden" name="is_break" value="0" >
<div class="row gx-3">
    <div class="col-sm-6">
		<div class="mb-3">
			<label for="date" class="form-label form-label-required">Date</label>
			<input type="text" name="date" id="programDate" value="{{old('date') ? : $model->present()->date}}" required="required" class="form-control">
		</div>
       
    </div>
    <div class="col-sm-3">
		<div class="mb-3">
			<label for="time_from" class="form-label form-label-required">From</label>
			<input type="text" name="time_from" id="programStartTime" value="{{$model->time_from}}" required="required" class="form-control">
		</div>
       
    </div>
    <div class="col-sm-3">
		<div class="mb-3">
			<label for="time_till" class="form-label form-label-required">Till</label>
			<input type="text" name="time_till" id="programEndTime" value="{{$model->time_till}}" required="required" class="form-control">
		</div>
        
    </div>
</div>
<div class="row no-break">
	<div class="col-sm-4">
        <div class="form-group">
            <label for="chair_persons" class="form-label">Chairpersons*</label>
            <select class="form-control selecteer" name="chair_persons[]" multiple>
                <option value="">Select</option>
                @foreach($conference_team as $team):
                <option {{in_array($team->id, ($model->chair_persons ?? [])) ? 'selected' : null}} value="{{$team->id}}">{{$team->title}}</option>
                @endforeach
            </select>
        </div>
		
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label for="moderators" class="form-label">Moderator*</label>
            <select class="form-control selecteer" name="moderators[]">
                <option value="">Select</option>
                @foreach($conference_team as $team):
                <option {{in_array($team->id,($model->moderators ?? [])) ? 'selected' : null}} value="{{$team->id}}">{{$team->title}}</option>
                @endforeach
            </select>
        </div>
    </div>
    
</div>

@for($i=0;$i<=9;$i++)
<div class="row gx-3 no-break">
    <div class="col-sm-6">
		<div class="mb-3">
			<label for="topicsnew[time][]" class="form-label">Time</label>
			<input type="text" name="topicsnew[time][]" value="{{$model->present()->topicsnew['time'][$i] ?? ''}}" id="topicsnew[time][]" class="form-control topictime">
		</div>
        
    </div>
    <div class="col-sm-3">
		<div class="mb-3">
			<label for="topicsnew[title][]" class="form-label">Title</label>
			<input type="text" name="topicsnew[title][]" value="{{$model->present()->topicsnew['title'][$i] ?? ''}}" id="topicsnew[title][]" class="form-control">
		</div>
       
    </div>
    <div class="col-sm-3">
        <div class="form-group">
            <label for="topicsnew[panel][]" class="form-label">Panelist</label>
            <select class="form-control selecteer" name="topicsnew[panel][]">
                <option value="">Select</option>
                @foreach($conference_team->pluck('title','id')->toArray() as $id => $team):
                <option {{isset($model->present()->topicsnew['panel']) && $model->present()->topicsnew['panel'][$i] == $id  ? 'selected' : ''}} value="{{$id}}">{{$team}}</option>
                @endforeach
            </select>
        </div>
        
    </div>
</div>
@endfor

<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/select2.full.js') }}"></script>
<script>
	function initializeSelect5() {
		
		$('.selecteer').select2({
			tags: true // Enable tagging if required
		});
		
	}
    function initializeFlatpickr5() {
		const programDatePicker = flatpickr('#programDate', {
			enableTime: false,
			dateFormat: "Y-m-d",
		});
		
		const programStartDatePicker = flatpickr('#programStartTime', {
			enableTime: true,
			noCalendar: true,
			dateFormat: "h:i K", // Format for returned value (e.g., 2:00 PM)
			time_24hr: false,
		});
		const programEndDatePicker = flatpickr('#programEndTime', {
			enableTime: true,
			noCalendar: true,
			dateFormat: "h:i K", // Format for returned value (e.g., 2:00 PM)
			time_24hr: false,
		});
		
		const programTopicDatePicker = flatpickr('.topictime', {
			enableTime: true,
			noCalendar: true,
			dateFormat: "h:i K", // Format for returned value (e.g., 2:00 PM)
			time_24hr: false,
		});
		
	}
	
	if (document.readyState === 'loading') {
        // DOM is not fully loaded, listen for the DOMContentLoaded event
		document.addEventListener('DOMContentLoaded', initializeFlatpickr5);
		document.addEventListener('DOMContentLoaded', initializeSelect5);
	} else {
		// DOM is already loaded (e.g., via AJAX)
		initializeFlatpickr5();
		$('.selecteer').select2();
	}
	
</script>