@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('styles')
@endsection

@section('title',  __('dashboard.Edit Virtual Class Room')
@section('page_heading',  __('dashboard.Edit Virtual Class Room'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.show', $course->id) }}">{{ $course->name }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.virtual_class_rooms.index', $course->id) }}">{{ __('dashboard.All Virtual Class Rooms') }}</a></li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.virtual_class_rooms.index', $course->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-4 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200">{{ __('dashboard.Back') }}</a>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="card card-flush h-lg-100">
            <div class="card-header pt-7">
                <div class="text-lg font-black text-zinc-900 dark:text-white">
                    <i class="ki-outline ki-video-play fs-1 me-2"></i>
                    <h2>{{ __('dashboard.Edit Virtual Class Room') }}</h2>
                </div>
            </div>
            <div class="card-body pt-5">
                <form class="form" action="{{ route($routePrefix . '.courses.virtual_class_rooms.update', ['courseId' => $course->id, 'id' => $virtualClassRoom->id]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Title') }}</label>
                        <input type="text" class="form-control form-control-solid" name="title" value="{{ old('title', $virtualClassRoom->title) }}" required />
                    </div>

                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3"><span>{{ __('dashboard.Description') }}</span></label>
                        <textarea class="form-control form-control-solid" name="description" rows="3">{{ old('description', $virtualClassRoom->description) }}</textarea>
                    </div>

                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Join Link') }}</label>
                        <input type="url" class="form-control form-control-solid" name="join_link" value="{{ old('join_link', $virtualClassRoom->join_link) }}" required />
                    </div>

                    <div class="row">
                        <div class="col-md-6 fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Start Time') }}</label>
                            <input class="form-control form-control-solid" placeholder="{{ __('dashboard.Select date') }}" name="start_time" value="{{ old('start_time', $virtualClassRoom->start_time->format('Y-m-d\TH:i')) }}" id="kt_start_time_picker" required/>
                        </div>

                        <div class="col-md-6 fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.End Time') }}</label>
                            <input class="form-control form-control-solid" placeholder="{{ __('dashboard.Select date') }}" name="end_time" value="{{ old('end_time', $virtualClassRoom->end_time->format('Y-m-d\TH:i')) }}" id="kt_end_time_picker" required/>
                        </div>
                    </div>

                    <div class="row">
                         <div class="col-md-6 fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Status') }}</label>
                            <select class="form-select form-select-solid" name="status" data-control="select2" data-hide-search="true" required>
                                <option value="upcoming" {{ old('status', $virtualClassRoom->status) == 'upcoming' ? 'selected' : '' }}>{{ __('dashboard.Upcoming') }}</option>
                                <option value="ongoing" {{ old('status', $virtualClassRoom->status) == 'ongoing' ? 'selected' : '' }}>{{ __('dashboard.Ongoing') }}</option>
                                <option value="finished" {{ old('status', $virtualClassRoom->status) == 'finished' ? 'selected' : '' }}>{{ __('dashboard.Finished') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6 fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Is Published') }}</label>
                            <select class="form-select form-select-solid" name="is_published" data-control="select2" data-hide-search="true" required>
                                <option value="1" {{ old('is_published', $virtualClassRoom->is_published) == '1' ? 'selected' : '' }}>{{ __('dashboard.Yes') }}</option>
                                <option value="0" {{ old('is_published', $virtualClassRoom->is_published) == '0' ? 'selected' : '' }}>{{ __('dashboard.No') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3"><span>{{ __('dashboard.Image') }}</span></label>
                        <input type="file" class="form-control form-control-solid" name="image" accept="image/*" />
                         @if($virtualClassRoom->image)
                            <div class="mt-3">
                                <img src="{{ $virtualClassRoom->image }}" alt="Current Image" class="img-fluid rounded w-100px">
                                <p class="form-text">{{ __('dashboard.Current Image. Uploading a new one will replace it.') }}</p>
                            </div>
                         @endif
                    </div>

                    <div class="d-flex justify-content-end">
                        <a href="{{ route($routePrefix . '.courses.virtual_class_rooms.index', $course->id) }}" class="btn btn-light me-3">{{ __('dashboard.Cancel') }}</a>
                        <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">
                            <span class="indicator-label">{{ __('dashboard.Save Changes') }}</span>
                            <span class="indicator-progress">{{ __('dashboard.Please wait...') }}<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $("#kt_start_time_picker").flatpickr({ enableTime: true, dateFormat: "Y-m-d H:i" });
        $("#kt_end_time_picker").flatpickr({ enableTime: true, dateFormat: "Y-m-d H:i" });
    });
</script>
@endsection