@extends('backend.layouts.app')
@section('content')

<div class="row">
    <div class="col-md-10 mb-5">
        <div class="card">
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>           
                </div>
            @elseif (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            <div class="card-header">
                <div class="row">
                    <div class="col-lg-9">
                        <h4 class="card-title mb-0">{{ translate('Quiz Special Scheduler') }}</h4>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('scheduler.store') }}" method="POST" id="myForm">
                    @csrf
                    <input type="hidden" name="special" value="special">

                    <div class="row">
                        <div class="form-row">
                            <div class="row">
                                <div class="col-md-3 mt-2 mb-2">
                                    <label for="">{{ translate('Quiz Prize') }}<span class="text-danger"> * </span></label>
                                </div>
                                <div class="col-md-9">
                                    <input type="number" class="form-control @error('prize') is-invalid @enderror" name="prize" placeholder="Quiz Prize" value="{{ old('prize') }}" required>
                                    @error('prize')
                                        <span class="invalid-feedback" role="alert">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-md-2 mt-2">
                                    <label for="">{{ translate('Schedule From') }}<span class="text-danger"> * </span></label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control @error('schedule_from') is-invalid @enderror" name="schedule_from" data-provider="flatpickr" data-date-format="Y-m-d" placeholder="DD-MM-YYYY" minDate="today" value="{{ old('schedule_from') }}" required>
                                    @error('schedule_from')
                                        <span class="invalid-feedback" role="alert">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                                <div class="col-md-2 mt-2">
                                    <label for="">{{ translate('Schedule To') }}<span class="text-danger"> * </span></label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" class="form-control @error('schedule_to') is-invalid @enderror" name="schedule_to" data-provider="flatpickr" data-date-format="Y-m-d" placeholder="DD-MM-YYYY" minDate="today" value="{{ old('schedule_to') }}" required>
                                    @error('schedule_to')
                                        <span class="invalid-feedback" role="alert">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Days of the Week Section -->
                    @php
                        $daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                    @endphp
                    <div id="quiz-section">
                        <div class="row mt-2">
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label for="quiz_number">{{ translate('Days of the Week') }}</label>
                                    </div>
                                    <div class="col-md-8">
                                        <select class="select2 form-control rns-selectpicker" name="days[]" data-toggle="select2" data-placeholder="Choose Day..." data-live-search="true" multiple required>
                                            @foreach ($daysOfWeek as $day)
                                                <option value="{{ $day }}">{{ $day }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label for="quiz_number">{{ translate('Number of Quiz') }}</label>
                                    </div>
                                    <div class="col-md-8">
                                        <select class="select2 form-control rns-selectpicker" name="quiz_number" id="quiz_number" data-toggle="select2" data-placeholder="Choose Number Of Quiz..." data-live-search="true" required>
                                            @for ($i = 1; $i <= 100; ++$i)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 mt-2">
                            <div id="timingInputs" class="row">
                                <!-- Time inputs will be dynamically added here -->
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-9"></div>
                            <div class="col-sm-auto">
                                <button type="submit" class="btn btn-outline-warning">{{ translate('Create Quiz') }}</button>
                                <button type="reset" class="btn btn-outline-danger" id="customResetButton">{{ translate('Clear') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var flatpickrElements = document.querySelectorAll("[data-provider='flatpickr']");
        
        flatpickrElements.forEach(function (item) {
            var options = {
                enableTime: item.hasAttribute("data-enable-time"),
                dateFormat: item.getAttribute("data-date-format") || "Y-m-d H:i",
                minDate: "today",
                disableMobile: true
            };

            flatpickr(item, options);
        });
    });

    document.addEventListener("DOMContentLoaded", function () {
        const quizSelect = document.querySelector('#quiz_number');
        const timingInputsContainer = document.getElementById('timingInputs');

        function updateTimingInputs(selectedValue, containerId) {
            const container = document.getElementById(containerId);
            container.innerHTML = '';

            if (selectedValue > 0) {
                for (let i = 0; i < selectedValue; i++) {
                    const row = document.createElement('div');
                    row.className = 'row mt-2';

                    const col1 = document.createElement('div');
                    col1.className = 'col-sm-6';

                    const wrapperDiv1 = document.createElement('div');
                    wrapperDiv1.className = 'form-group';

                    const label1 = document.createElement('label');
                    label1.className = 'col-form-label';
                    label1.innerText = 'Choose Timing';

                    const timingInputDiv = document.createElement('div');
                    timingInputDiv.className = 'input-group';

                    const timeInput = document.createElement('input');
                    timeInput.type = 'text';
                    timeInput.className = 'form-control flatpickr-input';
                    timeInput.placeholder = 'HH:MM';
                    timeInput.name = containerId + '[' + i + ']';
                    timeInput.setAttribute('data-provider', 'flatpickr');
                    timeInput.setAttribute('data-enable-time', 'true');
                    timeInput.setAttribute('data-no-calendar', 'true');
                    timeInput.setAttribute('data-date-format', 'H:i');
                    timeInput.readOnly = true;

                    timingInputDiv.appendChild(timeInput);
                    wrapperDiv1.appendChild(label1);
                    wrapperDiv1.appendChild(timingInputDiv);
                    col1.appendChild(wrapperDiv1);

                    const col2 = document.createElement('div');
                    col2.className = 'col-sm-6';

                    const wrapperDiv2 = document.createElement('div');
                    wrapperDiv2.className = 'form-group';

                    const label2 = document.createElement('label');
                    label2.className = 'col-form-label';
                    label2.innerText = 'Quiz Description';

                    const descriptionInput = document.createElement('input');
                    descriptionInput.type = 'text';
                    descriptionInput.className = 'form-control';
                    descriptionInput.name = containerId + 'quiz_description[' + i + ']';

                    wrapperDiv2.appendChild(label2);
                    wrapperDiv2.appendChild(descriptionInput);
                    col2.appendChild(wrapperDiv2);

                    row.appendChild(col1);
                    row.appendChild(col2);

                    container.appendChild(row);

                    flatpickr(timeInput, {
                        noCalendar: true,
                        enableTime: true,
                        dateFormat: 'H:i',
                        // minDate: new Date()
                    });
                }

                container.style.display = 'block';
            } else {
                container.style.display = 'none';
            }
        }

        quizSelect.addEventListener('change', function () {
            updateTimingInputs(parseInt(quizSelect.value), 'timingInputs');
        });
    });
</script>
@endsection