@extends('components.dashboard.layouts.master')

@section('title', __('Edit Quiz'))

@push('head')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <x-dashboard.layouts.breadcrumb now="{{ __('Edit Quiz') }}">
                <x-slot:name>{{ __('Quizzes List') }}</x-slot:name>
                <x-slot:route>{{ route('teacher.lessons.index') }}</x-slot:route>
            </x-dashboard.layouts.breadcrumb>

            <form action="{{ route('teacher.lesson.updateHomeWork', $lesson->id) }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" id="lesson_id" name="lesson_id" value="{{ $lesson->id }}">

                <div class="card">
                    <div class="card-body row">

                        {{-- Title --}}
                        <div class="form-group col-md-12">
                            <label>{{ __('Homework Title') }}</label>
                            <input type="text" name="title" class="form-control" value="{{ $quiz->title }}" required>
                        </div>

                        {{-- Start Time --}}
                        <div class="form-group col-md-6">
                            <label>{{ __('Start Time') }}</label>
                            <input type="datetime-local" name="start_time" class="form-control"
                                   value="{{ \Carbon\Carbon::parse($quiz->start_time)->format('Y-m-d\TH:i') }}" required>
                        </div>

                        {{-- End Time --}}
                        <div class="form-group col-md-6">
                            <label>{{ __('End Time') }}</label>
                            <input type="datetime-local" name="end_time" class="form-control"
                                   value="{{ \Carbon\Carbon::parse($quiz->end_time)->format('Y-m-d\TH:i') }}" required>
                        </div>

                        {{-- Number of Questions --}}
                        <div class="form-group col-md-6">
                            <label>{{ __('Number of Questions') }}</label>
                            <input type="number" class="form-control" value="{{ $quiz->number_of_questions }}" disabled>
                            <input type="hidden" name="number_of_questions" value="{{ $quiz->number_of_questions }}">
                        </div>

                        {{-- Creation Type --}}
                        <div class="form-group col-md-6">
                            <label>{{ __('Creation Type') }}</label>
                            <select class="form-control" disabled>
                                <option value="manual" {{ $quiz->creation_type === 'manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                <option value="auto" {{ $quiz->creation_type === 'auto' ? 'selected' : '' }}>{{ __('Auto') }}</option>
                            </select>
                            <input type="hidden" name="creation_type" value="{{ $quiz->creation_type }}">
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="with_calculator">{{ __('With Calculator') }}</label>
                                <select id="with_calculator" name="with_calculator" class="form-control" required>
                                    <option value="1" {{ $quiz->with_calculator === 1 ? 'selected' : '' }}>{{ __('Active') }}</option>
                                    <option value="0" {{ $quiz->with_calculator === 0 ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                </select>
                            </div>
                            @error('with_calculator') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                        <!-- Status -->
                        <div class="col-md-6 col-12">
                            <div class="form-group">
                                <label for="with_rules">{{ __('With Rules') }}</label>
                                <select id="with_rules" name="with_rules" class="form-control" required>
                                    <option value="1" {{ $quiz->with_rules === 1 ? 'selected' : '' }}>{{ __('Active') }}</option>
                                    <option value="0" {{ $quiz->with_rules === 0 ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                </select>
                            </div>
                            @error('with_rules') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>


                        {{-- Editable Questions --}}
                        <div class="form-group col-12">
                            <label>{{ __('Update Questions') }}</label>
                            <select multiple name="questions[]" class="form-control" id="questions-select2"></select>
                        </div>

                        {{-- Display Selected Questions --}}
                        <div class="form-group col-12" id="questions-group">
                            <div class="overflow-x-auto mt-3 border rounded shadow-sm">
                                <table class="min-w-full divide-y divide-gray-200 bg-white text-sm text-left">
                                    <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 w-full" colspan="3">{{ __('Questions') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100" id="question-table">
                                    <tr>
                                        <td class="px-4 py-3 text-center text-gray-500">
                                            {{ __('Select questions from the list above') }}
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="form-group col-12 text-end mt-4">
                            <button class="btn btn-primary" type="submit">{{ __('Update Questions') }}</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@include('dashboard.lessons.edit-scripts')