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

<div class="row">
    <div class="col-md-12 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 Scheduler')}}</h4>
                    </div>
                    <div class="col-lg-3">
                        <a href="{{ route('special.show') }}" class="btn btn-outline-warning">{{translate('Create Tournament Quiz')}}</a>
                    </div>
                </div>
            </div>
            <!-- end card header -->

            <div class="card-body mx-5">
                <form action="{{ route('scheduler.store') }}" method="POST" id="myForm">
                    @csrf
                    <div class="row">
                        <div class="form-row">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">{{translate('Schedule From')}}</label>
                                    <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">
                                    @error('schedule_from')
                                    <span class="invalid-feedback" role="alert">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="">{{translate('Schedule To')}}</label>
                                    <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">
                                    @error('schedule_to')
                                    <span class="invalid-feedback" role="alert">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                            </div>                            
                        </div>
                    </div>
                    <div class="row g-4 mb-3 mt-1">
                        <div class="col-lg-3">
                            <div class="form-check form-switch form-switch-secondary">
                                <input class="form-check-input small-checkbox question_checkbox" name="same_for_all_day" type="checkbox" data-id="" id="same_for_all_day">
                                <label for="same_for_all_day">{{translate('Same for All Day')}}</label>
                            </div>
                        </div>
                        <div class="col-lg-auto" title="Language Change">
                            <div class="form-group row">
                                <select class="form-control rns-selectpicker @error('question_lang') is-invalid @enderror" name="question_lang">
                                    <option value="ar" >{{translate('Please Select Language')}}</option>
                                    <option value="en" >{{translate('English')}}</option>
                                    <option value="ar">{{translate('Arabic')}}</option>
                                </select>
                                @error('question_lang')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Accordion Section -->
                    <div class="accordion" id="accordionExample">
                        @for ($i = 1; $i <= 7; $i++)
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="heading{{ $i }}">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $i }}" aria-expanded="false" aria-controls="collapse{{ $i }}">
                                        Every {{ \Carbon\Carbon::now()->startOfWeek()->addDays($i - 1)->format('l') }}
                                    </button>
                                </h2>
                                <div id="collapse{{ $i }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $i }}" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div class="col-sm-3">
                                            <label for="quiz_number{{ $i }}" class="col-form-label">{{ translate('Number of Quiz') }}</label>
                                        </div>
                                        <div class="col-sm-6">
                                            <div>
                                                <select id="quiz_number{{ $i }}" class="form-control rns-selectpicker">
                                                    <option value=""> Select .....</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                    <option value="7">7</option>
                                                    <option value="8">8</option>
                                                    <option value="9">9</option>
                                                    <option value="10">10</option>

                                                </select>
                                                @error('quiz_number{{ $i }}')
                                                    <span class="invalid-feedback" role="alert">
                                                        {{ $message }}
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div id="timingInputs{{ $i }}" class="row">
                                                <div class="col-md-6" class="timingInputs{{ $i }}">
                                                    <!-- Time inputs will be dynamically added here -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                    
                    <!-- Section to show/hide -->
                    <div id="quiz-section">
                        <div class="row">
                            <div class="col-sm-6">
                                <div>
                                    <label for="quiz_number">{{translate('Number of Quiz')}}</label>
                                    <select id="quiz_number" class="form-control rns-selectpicker">
                                        <option value=""> {{translate('Select .....')}}</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                    </select>
                                    @error('quiz_number')
                                        <span class="invalid-feedback" role="alert">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 mb-2 mt-2">
                            <div id="timingInputs" class="row mb-2 mt-2">
                                <!-- Time inputs will be dynamically added here -->
                            </div>
                        </div>
                    </div>
                    <!-- End of Section -->
    
                    <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>
        <!-- end col -->
        </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);
        });
    });


    //Reset Button
    $(document).ready(function() {
        $('#customResetButton').click(function() {
            $('#form_control')[0].reset();
            $('#quiz_number').val('');
        });
    });
        /////Time Schedular///
    document.addEventListener("DOMContentLoaded", function () {
        const checkbox = document.querySelector('.question_checkbox');
        const accordion = document.getElementById('accordionExample');
        const quizSection = document.getElementById('quiz-section');
        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';

                    const col1 = document.createElement('div');
                    col1.className = 'col-sm-12';
                    col1.style = 'display:flex';

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

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

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

                    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;
                    // timeInput.setAttribute('required', 'required');

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

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

                    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 + ']';
                    // descriptionInput.setAttribute('required', 'required');

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

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

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

                    container.appendChild(row);

                    flatpickr(timeInput, {
                        noCalender: true,
                        enableTime: true,
                        dateFormat: 'h:i K',
                        minDate: new Date()
                    });
                }


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

        function handleAccordionChange(select) {
            const selectedValue = parseInt(select.value);
            const containerId = 'timingInputs' + select.id.substring(select.id.length - 1);
            updateTimingInputs(selectedValue, containerId);
        }

        function clearAccordionInputs() {
            const accordionInputs = accordion.querySelectorAll('input');
            accordionInputs.forEach(function (input) {
                input.value = '';
            });
        }

        function handleCheckboxChange() {
            if (checkbox.checked) {
                quizSection.style.display = 'block';
                accordion.style.display = 'none';
                clearAccordionInputs();
            } else {
                quizSection.style.display = 'none';
                accordion.style.display = 'block';
            }
        }

        handleCheckboxChange();

        checkbox.addEventListener('change', function () {
            if (checkbox.checked) {
                handleCheckboxChange();
            } else {
                quizSection.style.display = 'none';
                accordion.style.display = 'block';
            }
        });

        quizSelect.addEventListener('change', function () {
            updateTimingInputs(parseInt(quizSelect.value), 'timingInputs');
        });

        const accordionSelects = document.querySelectorAll('.accordion .rns-selectpicker');
        accordionSelects.forEach(function (select) {
            select.addEventListener('change', function () {
                handleAccordionChange(select);
            });
        });
    });



    //Custom Validation 
    function validateAccordionInputs() {
        const accordionItems = document.querySelectorAll('.accordion-item');
        accordionItems.forEach(item => {
            const inputs = item.querySelectorAll('input[type="text"]');
            const isEmpty = Array.from(inputs).some(input => !input.value.trim());
            if (isEmpty) {
                item.classList.add('has-invalid-inputs');
            } else {
                item.classList.remove('has-invalid-inputs');
            }
        });
    }

    $(document).ready(function () {
        $("#myForm").submit(function (event) {
            validateAccordionInputs();
            const isValidTime = validateTimeInputs('timingInputs');
            if ($('.has-invalid-inputs').length > 0 || !isValidTime) {
                event.preventDefault();
                if (!isValidTime) {
                    RNS.plugins.notify('danger', '{{ ('Selected times should be unique.') }}');
                } else {
                    RNS.plugins.notify('danger', '{{ ('Some Field are missing!!!') }}');
                }
            }
        });

        $('#myForm').on('change', '.timing-input input[type="text"]', function () {
            const containerId = $(this).closest('.row').parent().attr('id');
            const isValidTime = validateTimeInputs(containerId);
            if (!isValidTime) {
                RNS.plugins.notify('danger', 'Selected times should be unique.');
            }
        });
    });

    function validateTimeInputs(containerId) {
        const container = document.getElementById(containerId);
        const timeInputs = container.querySelectorAll('.timing-input input[type="text"]');
        const selectedTimes = new Set();
        let isValid = true;

        timeInputs.forEach(function (input) {
            const time = input.value.trim();
            if (time !== '') {
                if (selectedTimes.has(time)) {
                    isValid = false;
                    return;
                }
                selectedTimes.add(time);
            }
        });

        return isValid;
    }

 





</script>

@endsection