@extends('frontend.layouts.app')


@section('content')
    <style>
body {
    font-family: Arial, sans-serif;
}

.tab-container {
    width: 100%;
    margin: 50px auto;

    max-width: 500px; /* Limit max width for large screens */
}

.tabs {
    display: flex;
    gap: 20px; /* Add gap between tabs */
}

.tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    background-color: #f1f1f1;

    height:150px;
}

.tab.active {
    background-color: #fff;

}

.tab-content {
    padding: 20px;
    border-top: 1px solid #ccc;
}

.content {
    display: none;
}

.content.active {
    display: block;
}

.revesion-back {
    background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 770px;
    opacity: 90%;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .tabs {
        flex-direction: row;
    }

    .tab {
        flex: 1 1 50%; /* Make tabs 50% width on smaller screens */
    }
    .revesion-back {
    
    height: auto;
    
}
}
</style>




<section class="space-top space-extra2-bottom revesion-back">
    <div style="margin-top:-85px" class="container">
        <div class="tab-container">
            <div class="tabs">
                <div class="tab active" onclick="switchTab('tab1')">
                    <img class="mt-4 mb-2" width="40%" src="{{ asset('/frontend/assets/images/revision.png') }}"/>
                    <p>Revision Session</p>
                </div>
                <div class="tab" onclick="switchTab('tab2')">
                    <img class="mt-4 mb-2" width="28%" src="{{ asset('/frontend/assets/images/exam.png') }}"/>
                    <p>Mock Exam</p>
                </div>
            </div>
        </div>
        
        <div class="tab-content">
            <div id="tab1" class="content active">
                <p style="text-align:center; font-size:19px; color:black">Start a new revision session</p>
                <div class="row">
                    @foreach($categories as $category)
                        @php
                            // Calculate the total number of questions for the category
                            $totalQuestionsCount = $category->subcategories->sum('questions_count');
                        @endphp
                
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="bg-white p-3 h-100">
                                <h5>{{ $category->name }}</h5>
                                
                                {{-- "All" Checkbox showing total question count --}}
                                <input type="checkbox" id="category_{{ $category->id }}" class="category-checkbox" data-category-id="{{ $category->id }}" />
                                <label for="category_{{ $category->id }}">
                                    All ({{ $totalQuestionsCount }})
                                </label>
                
                                {{-- Subcategory Checkboxes --}}
                                @foreach($category->subcategories as $subcategory)
                                    <div>
                                        <input type="checkbox" id="subcategory_{{ $subcategory->id }}" class="subcategory-checkbox" data-category-id="{{ $category->id }}" data-subcategory-id="{{ $subcategory->id }}" />
                                        <label for="subcategory_{{ $subcategory->id }}">
                                            {{ $subcategory->name }} ({{ $subcategory->questions_count }})
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
                <a style="float:right; background:darkcyan; margin-top:10px; margin-bottom:0px; padding:8px 35px; color:white; font-size:18px; border:1px solid darkcyan; border-radius:7px" class="btn" href="{{route('frontend.revise.start')}}">Start Revision</a>
            </div>
            
            <div id="tab2" class="content">
                <p style="text-align:center; font-size:19px; color:black">Start a new Exam</p>
                <div class="row p-0">
                    <div style="margin:0 auto; background:rgb(255, 255, 255); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:10px" class="col-xl-8 col-lg-8 order-lg-2 mt-1 p-5 ">
                        <p style="text-align:center;" class="p-0 m-0">120-Question Comprehensive Mock Exam: Test Your Knowledge and Skills! </p>
                        <p style="text-align:center">Helping you get comfortable with exam conditions.</p>

                <div class="row justify-content-center">
                    @foreach($categories->take(6) as $category)
                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 mt-4 d-flex justify-content-center">
                        <div style="display:flex; align-items:center;">
                            <img style="margin-top:-5px" class="mb-2" width="19%" src="{{ asset('/frontend/assets/images/list.png') }}"/>
                            <div style="margin-left:12px">
                                <h6 class="m-0 p-0">{{$category->name}}</h6>
                                <p style="margin-top:-5px">Minimum 20 Questions</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    
                </div>
                <div class="text-center mt-4">
                    <a style="background:darkcyan; margin-top:10px; margin-bottom:0px; padding:8px 35px; color:white; font-size:18px; border:1px solid darkcyan; border-radius:7px" class="btn" href="{{route('frontend.exam.start')}}">Start Exam</a>
                </div>
                
                </div>
                </div>
            </div>
        </div>
    </div>
</section>



@endsection

@push('js')


<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
    // Store selected subcategory IDs globally
    let selectedSubcategoryIds = [];

    // Function to set cookies
    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    // Handle subcategory checkbox changes
    $(document).on('change', '.subcategory-checkbox', function() {
        let subcategoryId = $(this).data('subcategory-id');
        let isChecked = $(this).is(':checked');

        // Add or remove the subcategory ID from the selectedSubcategoryIds array
        if (isChecked) {
            if (!selectedSubcategoryIds.includes(subcategoryId)) {
                selectedSubcategoryIds.push(subcategoryId);
            }
        } else {
            // Remove the ID if unchecked
            selectedSubcategoryIds = selectedSubcategoryIds.filter(id => id !== subcategoryId);
        }
      

        // // Set the cookie after updating the selected IDs
        // setCookie('selectedSubcategoryIds', JSON.stringify(selectedSubcategoryIds), 365);

        // Send AJAX request to update the session
    $.ajax({
        url: '/update-selected-subcategories', // Change to your actual endpoint
        method: 'POST',
        data: {
            selectedSubcategoryIds: selectedSubcategoryIds,
            _token: '{{ csrf_token() }}' // Include CSRF token for security
        },
        success: function(response) {
            console.log('Session updated:', response);
        },
        error: function(xhr) {
            console.error('Error updating session:', xhr);
        }
    });
        
        
        // Output the array for testing
        console.log('Selected Subcategory IDs:', selectedSubcategoryIds);
    });

    $(document).on('change', '.category-checkbox', function() {
        let categoryId = $(this).data('category-id');
        let isChecked = $(this).is(':checked');

        // Find all subcategory checkboxes for this category
        let subcategoryCheckboxes = $(`.subcategory-checkbox[data-category-id="${categoryId}"]`);
        

        subcategoryCheckboxes.each(function() {
            let subcategoryId = $(this).data('subcategory-id');

            // Set subcategory checkboxes to match the "All" checkbox state
            $(this).prop('checked', isChecked);

            if (isChecked) {
                // Add to the array if not already present
                if (!selectedSubcategoryIds.includes(subcategoryId)) {
                    selectedSubcategoryIds.push(subcategoryId);
                }
            } else {
                // Remove from the array if unchecked
                selectedSubcategoryIds = selectedSubcategoryIds.filter(id => id !== subcategoryId);
            }
        });

        // Set the cookie after updating the selected IDs
        // setCookie('selectedSubcategoryIds', JSON.stringify(selectedSubcategoryIds), 365);

        $.ajax({
        url: '/update-selected-subcategories', // Change to your actual endpoint
        method: 'POST',
        data: {
            selectedSubcategoryIds: selectedSubcategoryIds,
            _token: '{{ csrf_token() }}' // Include CSRF token for security
        },
        success: function(response) {
            console.log('Session updated:', response);
        },
        error: function(xhr) {
            console.error('Error updating session:', xhr);
        }
    });

        
        
        // Output the array for testing
        console.log('Selected Subcategory IDs after "All":', selectedSubcategoryIds);
    });
});




// Functions to handle cookies
function getCookie(name) {
            let value = "; " + document.cookie;
            let parts = value.split("; " + name + "=");
            if (parts.length === 2) return parts.pop().split(";").shift();
        }

        function setCookie(name, value, days) {
            let expires = "";
            if (days) {
                let date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }

</script>

<script>

function switchTab(tabId) {
    const tabs = document.querySelectorAll('.tab');
    const contents = document.querySelectorAll('.content');

    tabs.forEach(tab => {
        tab.classList.remove('active');
    });

    contents.forEach(content => {
        content.classList.remove('active');
    });

    document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
    document.getElementById(tabId).classList.add('active');
}







</script>



@endpush