@extends('layouts.main')

@section('title', 'Create HR Meeting')

@section('navbarTitle', 'Setup Meeting')

@section('css')
    @include('meetings.admin.partials.participant-picker-css')
@endsection

@section('content')
<!-- Start - Page Title & Breadcrumb -->
				<div class="page-title">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li><h1>Setup Meeting</h1></li>
							<li class="breadcrumb-item">
								<a href="{{ route('dashboard') }}">
									<svg width="18" height="18" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
									Home
								</a>
							</li>
							<li class="breadcrumb-item" aria-current="page">Setup Meeting</li>
							<li class="breadcrumb-item active" aria-current="page">Create Meeting</li>
						</ol>
					</nav>
				</div>
				<!-- End - Page Title & Breadcrumb -->
				
				<div class="tab-content" id="tabContentMyProfileBottom">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header border-0 pb-0">
                                    <div>
                                        <h4 class="card-title">Schedule a Zoom Meeting</h4>
                                        <p class="fs-13 mb-0">
                                            Fill in the meeting details below to schedule and share the Zoom session.
                                        </p>
                                    </div>
                                </div>
                                <form method="POST" action="{{ route('hr-meetings.store') }}" class="card-body">
                                    @csrf
                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                <label for="meeting_title" class="form-label">Meeting Title</label>
                                                <input type="text" class="form-control @error('title') is-invalid @enderror" id="meeting_title" name="title" value="{{ old('title') }}" placeholder="Purpose" required>
                                                @error('title')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                <label for="meeting_type" class="form-label">Meeting Type</label>
                                                <select class="selectpicker form-select @error('type') is-invalid @enderror" id="meeting_type" name="type" required>
                                                    @foreach ($meetingTypeLabels as $value => $label)
                                                        <option value="{{ $value }}" @selected(old('type', 'weekly_meeting') === $value)>{{ $label }}</option>
                                                    @endforeach
                                                </select>
                                                @error('type')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <div class="mb-3">
                                                @php
                                                    $meetingDateValue = old('meeting_date');
                                                    $meetingDateDisplay = '';

                                                    try {
                                                        $meetingDateDisplay = $meetingDateValue
                                                            ? \Carbon\Carbon::parse($meetingDateValue)->format('d/m/Y')
                                                            : '';
                                                    } catch (\Throwable $exception) {
                                                        $meetingDateDisplay = (string) $meetingDateValue;
                                                    }
                                                @endphp
                                                <label for="meeting_date" class="form-label">Date</label>
                                                <input type="hidden" id="meeting_date" name="meeting_date" value="{{ $meetingDateValue }}">
                                                <input type="text" class="form-control js-meeting-date-picker @error('meeting_date') is-invalid @enderror" id="meeting_date_display" value="{{ $meetingDateDisplay }}" data-hidden-target="#meeting_date" placeholder="dd/mm/yyyy" readonly required>
                                                @error('meeting_date')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-3">
                                            <div class="mb-3">
                                                <label for="meeting_time" class="form-label">Time</label>
                                                <input type="time" class="form-control @error('meeting_time') is-invalid @enderror" id="meeting_time" name="meeting_time" value="{{ old('meeting_time') }}" required>
                                                @error('meeting_time')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                <label for="meeting_link" class="form-label">Meeting Link</label>
                                                <input type="text" class="form-control @error('meeting_link') is-invalid @enderror" id="meeting_link" name="meeting_link" value="{{ old('meeting_link') }}" placeholder="Link">
                                                @error('meeting_link')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                @php
                                                    $selectedParticipantGroupValue = old('participant_group', 'all_staff');
                                                    $selectedParticipants = old('participant_ids', []);
                                                @endphp
                                                @include('meetings.admin.partials.participant-picker', [
                                                    'employeeOptions' => $employeeOptions,
                                                    'selectedParticipantGroupValue' => $selectedParticipantGroupValue,
                                                    'selectedParticipants' => $selectedParticipants,
                                                ])
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                <label for="exampleFormControlInput1" class="form-label">Meeting Status</label>
                                                <div class="form-group mt-1 mb-0">
                                                    <div class="form-check d-inline-block me-3">
                                                        <input class="form-check-input" type="radio" name="status" id="meeting_status_scheduled" value="scheduled" @checked(old('status', 'scheduled') === 'scheduled')>
                                                        <label class="form-check-label" for="meeting_status_scheduled">Scheduled</label>
                                                    </div>
                                                    <div class="form-check d-inline-block me-3">
                                                        <input class="form-check-input" type="radio" name="status" id="meeting_status_completed" value="completed" @checked(old('status') === 'completed')>
                                                        <label class="form-check-label" for="meeting_status_completed">Completed</label>
                                                    </div>
                                                    <div class="form-check d-inline-block me-3">
                                                        <input class="form-check-input" type="radio" name="status" id="meeting_status_canceled" value="canceled" @checked(old('status') === 'canceled')>
                                                        <label class="form-check-label" for="meeting_status_canceled">Canceled</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                <label for="attachment_link" class="form-label">Attachment Link</label>
                                                <input type="text" class="form-control @error('attachment_link') is-invalid @enderror" id="attachment_link" name="attachment_link" value="{{ old('attachment_link') }}" placeholder="Presentation link">
                                                @error('attachment_link')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <div class="mb-3">
                                                <label for="meeting_notes" class="form-label">Notes</label>
                                                <input type="text" class="form-control @error('notes') is-invalid @enderror" id="meeting_notes" name="notes" value="{{ old('notes') }}" placeholder="Additional notes">
                                                @error('notes')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end mt-3">
                                        <a class="btn light btn-danger me-2 mb-2 btn-lg" href="{{ route('hr-meetings.index') }}">Back</a>
                                        <button type="submit" class="btn light btn-success mb-2 btn-lg">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

				</div>
                    
				<!-- End - Attendance -->
@endsection

@section('script')
    @include('meetings.admin.partials.participant-picker-script')
    <script>
        $(function () {
            $('.js-meeting-date-picker').each(function () {
                var input = $(this);
                var hiddenInput = $(input.data('hidden-target'));
                var initialDate = hiddenInput.val() ? moment(hiddenInput.val(), 'YYYY-MM-DD') : moment();

                input.daterangepicker({
                    singleDatePicker: true,
                    autoUpdateInput: false,
                    showDropdowns: true,
                    startDate: initialDate.isValid() ? initialDate : moment(),
                    locale: {
                        format: 'DD/MM/YYYY',
                        cancelLabel: 'Clear',
                    },
                });

                input.on('apply.daterangepicker', function (event, picker) {
                    input.val(picker.startDate.format('DD/MM/YYYY'));
                    hiddenInput.val(picker.startDate.format('YYYY-MM-DD'));
                    input.trigger('blur');
                });

                input.on('cancel.daterangepicker', function () {
                    input.val('');
                    hiddenInput.val('');
                });
            });
        });
    </script>
@endsection