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

    @include('layouts.toolbar')

    <style>
        .summarycamp-section {
            margin-bottom: 24px;
            width: 100%;
        }

        .summarycamp-section-title {
            font-size: 14px;
            line-height: 1;
            font-weight: 800;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: #284f3f;
            margin: 0 0 16px;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 3px;
        }

        .summarycamp-group {
            margin-bottom: 16px;
        }

        .summarycamp-group-title {
            font-size: 10px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: 0.45px;
            text-transform: uppercase;
            color: #2f3235;
            margin: 0 0 9px;
        }

        /* wrapper should be FULL width */
        .summarycamp-wrap {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0 0 8px;
        }

        /* 2 cards per row, full width */
        .summarycamp-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px 18px;
            width: 100%;
        }

        /* CARD: background fills FULL card */
        .summarycamp-ui-card {
            position: relative;
            width: 100%;
            min-height: 140px;
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            align-items: stretch;
            padding: 14px 14px 20px 25px;
            box-shadow:
                    0 8px 16px rgba(16, 24, 40, 0.10),
                    0 2px 4px rgba(16, 24, 40, 0.05);

            /* ensure background covers full card */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        /* overlay (keep subtle). You can remove this if you want pure background */
        .summarycamp-ui-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 32%, rgba(255,255,255,0) 62%),
                    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
            pointer-events: none;
            /*z-index: 1;*/
        }

        /* content must be above overlay */
        .summarycamp-ui-card__content {
            position: relative;
            /*z-index: 2;*/
            width: calc(100% - 74px);
            display: flex;
            align-items: flex-end;
        }

        .summarycamp-ui-card__title {
            margin: 0;
            color: #ffffff;
            font-size: 16px;
            line-height: 1.35;
            font-weight: 700;
            letter-spacing: -0.1px;
            text-shadow: 0 1px 1px rgba(0,0,0,0.10);
            word-break: break-word;
        }

        /* icon container above overlay */
        .summarycamp-ui-card__icon {
            position: absolute;
            top: 40px;
            right: 5px;
            max-width: 135px;
            min-width: 135px;
            height: 98px;
            /*z-index: 2;*/
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .summarycamp-ui-card__icon img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 3px 5px rgba(0,0,0,0.16));
        }

        /* page shell */
        .card.card-page.summarycamp-shell {
            background: #eef1ef !important;
            border: 0;
            border-radius: 0;
        }

        /* top week tabs styling */
        .summer-tabs-area .nav-tabs .nav-item button {
            font-size: 12px;
            line-height: 1.2;
            border: 1px solid #dbe3dd;
            color: #374151;
            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
            min-width: 96px;
            background: #fff;
        }

        .summer-tabs-area .nav-tabs .nav-item button.active {
            border-color: #1f9f58;
            color: #14532d;
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(31,159,88,0.10);
        }

        /* edit buttons */
        a.edit-color {
            position: absolute;
            top: -7px;
            left: 5px;
            background: #f8f8f8;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 50%;
            /*z-index: 5;*/
        }

        a.edit-icon {
            position: absolute;
            top: -7px;
            left: 36px;
            background: #f8f8f8;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 50%;
            /*z-index: 5;*/
        }

        /* Mobile */
        @media (max-width: 768px) {
            .summarycamp-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .summarycamp-ui-card {
                min-height: 94px;
                border-radius: 10px;
                padding: 12px 12px 10px;
            }

            .summarycamp-ui-card__title {
                font-size: 14px;
                line-height: 1.32;
            }

            .summarycamp-ui-card__icon {
                width: 60px;
                height: 46px;
                top: 6px;
                right: 6px;
                max-width: 60px;
                min-width: 60px;
            }
        }
    </style>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card card-page summarycamp-shell">
                <div class="card-body p-0">
                    <section class="summer-camp-area pt-5 mt-4">
                        <div class="container">
                            <div class="heading mb-10">
                                <h2 class="fw-bolder text-center">
                                    Yang Fan Academy {{ session('enrollment_year') }} Summer Camp Specialty Camp at a Glance
                                </h2>
                            </div>
                        </div>

                        @if(!empty($resultArray))
                            <div class="tabs-sticky-scroll pb-8">
                                <div class="container-fluid p-0">
                                    <div class="tabs-line">
                                        <hr />
                                    </div>
                                </div>
                                <div class="container">
                                    <div class="summer-tabs-area">
                                        <ul class="nav nav-tabs justify-content-between border-0" id="myTab" role="tablist">
                                            @foreach($resultArray as $result)
                                                <li class="nav-item position-relative" role="presentation">
                                                    <button class="btn btn-sm btn-white px-4 py-2 rounded-pill overflow-hidden {{ $loop->first ? 'active' : '' }}"
                                                            data-bs-toggle="tab"
                                                            data-bs-target="{{ '#weektab'.$result['order'] }}"
                                                            data-bs-week="{{ $result['order'] }}"
                                                            type="button"
                                                            role="tab"
                                                            aria-selected="true">
                                                        WK {{ $result['order'] }}<br />
                                                        @php usDateFormat($result['start_date']) @endphp - @php usDateFormat($result['end_date']) @endphp
                                                    </button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            {{-- FULL WIDTH container for cards --}}
                            <div class="container-fluid px-4 px-xl-8">
                                <div class="summer-tabs-content-area mt-15">
                                    <div class="tab-content" id="weekstavContent">

                                        @foreach ($resultArray as $tabresult)
                                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                                 id="{{ 'weektab'.$tabresult['order'] }}"
                                                 role="tabpanel"
                                                 tabindex="0">

                                                <div class="summarycamp-wrap">
                                                    @if(!empty($tabresult['activities']))
                                                        @foreach($tabresult['activities'] as $group => $classes)
                                                            <div class="summarycamp-section mt-10">
                                                                <div class="summarycamp-group">
                                                                    <div class="summarycamp-grid mb-5">
                                                                        @if(!empty($classes))
                                                                            @foreach($classes as $class)
                                                                                @php
                                                                                // background url or fallback
                                                                                $bg = !empty($class['class_color_wp']) ? $class['class_color_wp'] : url('assets/class-bg-color.png');
                                                                                @endphp

                                                                                <div class="summarycamp-ui-card mt-3" style="background-image: url('{{ $bg }}');">

                                                                                    <div class="summarycamp-ui-card__content">
                                                                                        <p class="summarycamp-ui-card__title">
                                                                                            {!! collect(explode(' ', ucwords($class['class_title'])))
                                                                                                ->chunk(6)
                                                                                                ->map(fn($chunk) => $chunk->implode(' '))
                                                                                                ->implode('<br>') !!}
                                                                                        </p>
                                                                                    </div>

                                                                                    <div class="icon" style="position: relative;">
                                                                                        <a href="javascript:void(0)"
                                                                                           data-id="{{ $class['class_setting_id'] }}"
                                                                                           data-week="{{ $tabresult['order'] }}"
                                                                                           class="edit-color shadow-sm"
                                                                                           title="Class Color"
                                                                                           data-bs-toggle="modal"
                                                                                           data-bs-target="#kt_modal_edit_class_color">
                                                                                            <i class="fa-solid fa-palette" style="color: black;"></i>
                                                                                        </a>

                                                                                        <a href="javascript:void(0)"
                                                                                           data-id="{{ $class['class_setting_id'] }}"
                                                                                           data-week="{{ $tabresult['order'] }}"
                                                                                           class="edit-icon shadow-sm"
                                                                                           title="Upload Class Icons"
                                                                                           data-bs-toggle="modal"
                                                                                           data-bs-target="#kt_modal_edit_class_icon">
                                                                                            <i class="fa-solid fa-pencil text-dark"></i>
                                                                                        </a>
                                                                                    </div>

                                                                                    <div class="summarycamp-ui-card__icon">
                                                                                        @if (!empty($class['class_icon_wp']))
                                                                                            <img src="{{ $class['class_icon_wp'] }}"
                                                                                                 alt="{{ ucwords($class['class_title']) }}"
                                                                                                 class="img-fluid" />
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        @if(session('role') == 'SUPER-ADMIN')
                                            @if($showClassesToWP == session('enrollment_year'))
                                                <button type="button" class="btn btn-success summer-class-schedule-wp mb-10" data-session="0">
                                                    WP Summer {{ session('enrollment_year') }} Schedule (Inactive)
                                                </button>
                                            @else
                                                <button type="button" class="btn btn-danger summer-class-schedule-wp mb-10" data-session="{{ session('enrollment_year') }}">
                                                    WP Summer {{ session('enrollment_year') }} Schedule (Active)
                                                </button>
                                            @endif

                                            @php $year = 2024; @endphp
                                            <button type="button"
                                                    class="btn btn-danger is_draft mb-10"
                                                    data-session="{{ session('enrollment_year') }}"
                                                    data-flag="1"
                                                    {{ ($year == session('enrollment_year')) ? 'disabled' : '' }}>
                                                Update Billing Table
                                            </button>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        @endif
                    </section>
                </div>
            </div>
        </div>
    </div>

    <div class="modal_class_schedule_info"></div>
    <div class="modal_class_schedule_icon"></div>
    <div class="modal_class_schedule_color"></div>

    <!-- Add CSS for warning animations -->
    <style>
        @keyframes flash {
            0%, 50%, 100% { opacity: 1; }
            25%, 75% { opacity: 0.5; }
        }

        @keyframes blink {
            0%, 50%, 100% { opacity: 1; }
            25%, 75% { opacity: 0.3; }
        }

        @keyframes pulse-border {
            0%, 100% { border-color: #dc3545; }
            50% { border-color: #ff6b6b; }
        }

        .border-danger {
            box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
        }

        /* Multi-camp discount badge animation */
        @keyframes shine {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }

        .badge-success {
            animation: none;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        .badge-success:hover {
            transform: scale(1.05);
            transition: transform 0.2s ease;
        }
    </style>
@endsection

@section('js')
    <script type="text/javascript">
        // Function to reload tab content dynamically
        function reloadActiveTabContent() {
            let activeWeek = localStorage.getItem('activeWeek') || 1;
            let activeTabId = localStorage.getItem('activeTab') || '#weektab' + activeWeek;
            let scrollPosition = $(window).scrollTop();

            // Clear all modal containers to prevent duplicates
            $('.modal_class_schedule_info').empty();
            $('.modal_class_schedule_icon').empty();
            $('.modal_class_schedule_color').empty();

            // Remove any existing modal backdrops
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open').css('padding-right', '');

            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff',
                }
            });

            $.ajax({
                type: 'GET',
                url: '{{ url("wp/set-class-schedule") }}',
                success: function(response) {
                    let $response = $(response);
                    let $newTabContent = $response.find(activeTabId);

                    if ($newTabContent.length) {
                        $(activeTabId).html($newTabContent.html());
                    }

                    // Restore tab and scroll position
                    setTimeout(function() {
                        $('[data-bs-target="' + activeTabId + '"]').tab('show');
                        $(window).scrollTop(scrollPosition);
                    }, 100);

                    $.unblockUI();
                },
                error: function() {
                    $.unblockUI();
                    toastr.error('Error reloading content');
                }
            });
        }

        $(function() {
            $(document).on('change', '#class_create', function(e) {
                if ($(this).is(':checked')) {
                    $('.classID').hide();
                    $('.classTitle').show();
                } else {
                    $('.classID').show();
                    $('.classTitle').hide();
                }
            });

            // Store the active tab ID in localStorage when a tab is clicked
            $('.nav-tabs button').on('click', function() {
                localStorage.setItem('activeTab', $(this).attr('data-bs-target'));
                localStorage.setItem('activeWeek', $(this).attr('data-bs-week'));
            });

            // Retrieve the active tab ID from localStorage and activate the tab
            let activeTabId = localStorage.getItem('activeTab');
            if (activeTabId) {
                $('[data-bs-target="' + activeTabId + '"]').tab('show');
            }

            $(document).on('click', '.add-class-schedule', function(e) {
                e.preventDefault();
                let week = localStorage.getItem('activeWeek');
                if(week == undefined){
                    week = 1;
                }

                let group = $(this).attr('data-group');
                addClassScheduleInfo(week, group);
            });

            $(document).on('click', '.edit', function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let week = $(this).attr('data-week');
                let group = $(this).attr('data-group');
                editClassScheduleInfo(id, week, group);
            });

            $(document).on('click', '.delete-class-schedule', function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let week = $(this).attr('data-week');
                deleteConfirmation(id, week);
            });

            $(document).on('click', '.edit-icon', function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let week = $(this).attr('data-week');
                uploadClassScheduleIcon(id, week);
            });

            $(document).on('click', '.edit-color', function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let week = $(this).attr('data-week');
                uploadClassScheduleColor(id, week);
            });

            $(document).on('click', '.trash-icon', function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                deleteIconConfirmation(id);
            });

            $(document).on('click', '.summer-class-schedule-wp', function(e) {
                e.preventDefault();
                let session = $(this).attr('data-session');
                summerClassScheduleWP(session);
            });

            $(document).on('click', '.is_draft', function(e) {
                e.preventDefault();
                let session = $(this).attr('data-session');
                let flag = $(this).attr('data-flag');
                let message = 'Please confirm if you would like to move classes from Draft to Billing';
                let url = "{{ url('move-classes-draft-to-billing') }}";
                moveClassesDraftToBillingOrBilligToDraft(session, flag, message, url);
            });

            $(document).on('click', '.is_billing', function(e) {
                e.preventDefault();
                let session = $(this).attr('data-session');
                let flag = $(this).attr('data-flag');
                let message = 'Please confirm if you would like to move classes from Billing to Draft';
                let url = "{{ url('move-classes-billing-to-draft') }}";
                moveClassesDraftToBillingOrBilligToDraft(session, flag, message, url);
            });
        });

        // Clean up modals when they're closed (including Cancel/Close button)
        $(document).on('hidden.bs.modal', '#kt_modal_add_class_info, #kt_modal_edit_class_info, #kt_modal_edit_class_icon, #kt_modal_edit_class_color', function () {
            $('.modal_class_schedule_info').empty();
            $('.modal_class_schedule_icon').empty();
            $('.modal_class_schedule_color').empty();

            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open').css('padding-right', '');

            let activeTabId = localStorage.getItem('activeTab');
            if (activeTabId) {
                $('[data-bs-target="' + activeTabId + '"]').tab('show');
            }
        });

        function addClassScheduleInfo(week, group){
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff'
                }
            });
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax ({
                type : 'POST',
                url : '{{ url("set-class-schedule/edit") }}',
                data: {
                    _token: CSRF_TOKEN,
                    week_no: week,
                    group: group
                },

                success: function (data) {
                    $.unblockUI();
                    $('.modal_class_schedule_info').empty().html(data);
                    $('#kt_modal_add_class_info').modal('show');

                    $('.classTitle').hide();

                    setTimeout(function () {
                        if ($('.grades').hasClass('select2-hidden-accessible')) {
                            $('.grades').select2('destroy');
                        }
                        $('.grades').select2({
                            dropdownParent: $('#kt_modal_add_class_info')
                        });
                    }, 500);

                    setTimeout(function () {
                        if ($('.class_id').hasClass('select2-hidden-accessible')) {
                            $('.class_id').select2('destroy');
                        }
                        $('.class_id').select2({
                            dropdownParent: $('#kt_modal_add_class_info')
                        });
                    }, 500);
                }
            });
        }

        function editClassScheduleInfo(id, week, group){
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff',
                }
            });
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax ({
                type : 'POST',
                url : '{{ url("set-class-schedule/edit") }}',
                data: {
                    _token: CSRF_TOKEN,
                    class_setting_id: id,
                    week_no: week,
                    group: group
                },

                success: function (data) {
                    $.unblockUI();
                    $('.modal_class_schedule_info').empty().html(data);
                    $('#kt_modal_edit_class_info').modal('show');

                    setTimeout(function () {
                        if ($('.grades').hasClass('select2-hidden-accessible')) {
                            $('.grades').select2('destroy');
                        }
                        $('.grades').select2({
                            dropdownParent: $('#kt_modal_edit_class_info')
                        });
                    }, 500);

                    setTimeout(function () {
                        if ($('.class_id').hasClass('select2-hidden-accessible')) {
                            $('.class_id').select2('destroy');
                        }
                        $('.class_id').select2({
                            dropdownParent: $('#kt_modal_edit_class_info')
                        });
                    }, 500);
                }
            });
        }

        function deleteConfirmation(id, week){
            Swal.fire({
                icon: 'warning',
                title: 'Are you certain you want to delete this class scheduled for Week '+week+'?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: "{{ url('set-class-schedule/delete') }}",
                        data: {
                            _token: CSRF_TOKEN,
                            id: id
                        },
                        success: function (results) {
                            if (results.status == 'Success'){
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Done!',
                                    text: results.status,
                                    confirmButtonText: 'Okay'
                                }).then(function() {
                                    reloadActiveTabContent();
                                });
                            } else {
                                swal("Error!", results.status, "error");
                            }
                        }
                    });
                }
            });
        }

        function deleteIconConfirmation(id){
            Swal.fire({
                icon: 'warning',
                title: 'Are you certain you want to delete class icon',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: "{{ url('set-class-schedule-icon/update') }}",
                        data: {
                            _token: CSRF_TOKEN,
                            class_id: id
                        },
                        success: function (results) {
                            if (results.status == 'Success'){
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Done!',
                                    text: results.status,
                                    confirmButtonText: 'Okay'
                                }).then(function() {
                                    reloadActiveTabContent();
                                });
                            } else {
                                swal("Error!", results.status, "error");
                            }
                        }
                    });
                }
            });
        }

        function uploadClassScheduleIcon(id, week){
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff',
                }
            });
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax ({
                type : 'POST',
                url : '{{ url("set-class-schedule-icon/upload") }}',
                data: {
                    _token: CSRF_TOKEN,
                    class_setting_id: id,
                    week_no: week,
                    platform: 'wp',
                },

                success: function (data) {
                    $.unblockUI();
                    $('.modal_class_schedule_icon').empty().html(data);
                    $('#kt_modal_edit_class_icon').modal('show');
                }
            });
        }

        function summerClassScheduleWP(session){
            Swal.fire({
                icon: 'warning',
                title: (session != 0)
                        ? 'Please confirm if you would like to activate the summer classes for the WP app for the enrollment year {{ session('enrollment_year') }}'
                        : 'Please confirm if you would like to deactivate the summer classes for the WP app for the enrollment year {{ session('enrollment_year') }}',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: "{{ url('update-wp-summer-class-schedule') }}",
                        data: {
                            _token: CSRF_TOKEN,
                            year: session
                        },
                        success: function (results) {
                            if (results.status == 'Success'){
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Done!',
                                    text: results.status,
                                    confirmButtonText: 'Okay'
                                }).then(function() {
                                    reloadActiveTabContent();
                                });
                            } else {
                                swal("Error!", results.status, "error");
                            }
                        }
                    });
                }
            });
        }

        function moveClassesDraftToBillingOrBilligToDraft(session, flag, message, url){
            Swal.fire({
                icon: 'warning',
                title: message,
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: {
                            _token: CSRF_TOKEN,
                            year: session,
                            flag: flag
                        },
                        success: function (results) {
                            if (results.status == 'Success'){
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Done!',
                                    text: results.status,
                                    confirmButtonText: 'Okay'
                                }).then(function() {
                                    reloadActiveTabContent();
                                });
                            } else {
                                swal("Error!", results.status, "error");
                            }
                        }
                    });
                }
            });
        }

        function uploadClassScheduleColor(id, week){
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff',
                }
            });
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax ({
                type : 'POST',
                url : '{{ url("set-class-schedule-color/upload") }}',
                data: {
                    _token: CSRF_TOKEN,
                    class_setting_id: id,
                    week_no: week,
                    platform: 'wp',
                },

                success: function (data) {
                    $.unblockUI();
                    $('.modal_class_schedule_color').empty().html(data);
                    $('#kt_modal_edit_class_color').modal('show');
                }
            });
        }

        // Validation function to check for missing time settings
        function validateClassSettings(formId) {
            let warnings = [];
            let $form = $(formId);

            let daysSelected = false;
            ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'].forEach(function(day) {
                if ($form.find('input[name="' + day + '"]').is(':checked')) {
                    daysSelected = true;
                    let startTime = $form.find('input[name="' + day + '_start"]').val();
                    let endTime = $form.find('input[name="' + day + '_end"]').val();
                    if (!startTime || !endTime) {
                        warnings.push(day.charAt(0).toUpperCase() + day.slice(1) + ' is checked but has no time set');
                    }
                }
            });

            if (!daysSelected) {
                warnings.push('No days selected for this class');
            }

            let fee = $form.find('input[name="class_fee"]').val();
            if (!fee || parseFloat(fee) <= 0) {
                warnings.push('Class fee is missing or zero');
            }

            let capacity = $form.find('input[name="capacity"]').val();
            if (!capacity || parseInt(capacity) <= 0) {
                warnings.push('Class capacity is missing or zero');
            }

            let grades = $form.find('select[name="grades[]"]').val();
            if (!grades || grades.length === 0) {
                warnings.push('No grades selected');
            }

            return warnings;
        }

        $(document).on('click', '#SubmitModalAddForm', function(e) {
            e.preventDefault();

            let warnings = validateClassSettings('#ClassScheduleAddForm');

            if (warnings.length > 0) {
                let warningHtml = '<ul style="text-align: left;">';
                warnings.forEach(function(warning) {
                    warningHtml += '<li>' + warning + '</li>';
                });
                warningHtml += '</ul><br><strong style="color: #dc3545;">⚠️ Classes with missing settings will NOT be available for parent enrollment!</strong>';

                Swal.fire({
                    icon: 'warning',
                    title: 'Incomplete Class Settings Detected',
                    html: warningHtml,
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Save Anyway',
                    cancelButtonText: 'Go Back to Fix',
                    confirmButtonColor: '#dc3545'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        submitAddForm();
                    }
                });
                return;
            }

            submitAddForm();
        });

        function submitAddForm() {
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff'
                }
            });
            $.ajax ({
                type : 'POST',
                url : '{{ url("set-class-schedule/store") }}',
                processData : false,
                contentType : false,
                data : new FormData($('#ClassScheduleAddForm')[0]),
                dataType : 'json',

                success: function (data) {
                    $.unblockUI();
                    if(data.success) {
                        toastr.success(data.success);
                        let $modal = $('#kt_modal_add_class_info');
                        $modal.modal('hide');

                        $modal.on('hidden.bs.modal', function () {
                            $('.modal_class_schedule_info').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal');
                        });

                        setTimeout(function () {
                            reloadActiveTabContent();
                        }, 500);

                    } else if (data.failure) {
                        let htmlError = '';
                        $.each(data.failure, function(index, value) {
                            htmlError += '<li>'+value+'</li>';
                        });

                        toastr.error(htmlError);
                    }
                }
            });
        }

        $(document).on('click', '#SubmitModalForm', function(e) {
            e.preventDefault();

            let warnings = validateClassSettings('#ClassScheduleForm');

            if (warnings.length > 0) {
                let warningHtml = '<ul style="text-align: left;">';
                warnings.forEach(function(warning) {
                    warningHtml += '<li>' + warning + '</li>';
                });
                warningHtml += '</ul><br><strong style="color: #dc3545;">⚠️ Classes with missing settings will NOT be available for parent enrollment!</strong>';

                Swal.fire({
                    icon: 'warning',
                    title: 'Incomplete Class Settings Detected',
                    html: warningHtml,
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Save Anyway',
                    cancelButtonText: 'Go Back to Fix',
                    confirmButtonColor: '#dc3545'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        submitEditForm();
                    }
                });
                return;
            }

            submitEditForm();
        });

        function submitEditForm() {
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff',
                }
            });
            $.ajax ({
                type : 'POST',
                url : '{{ url("set-class-schedule/update") }}',
                processData : false,
                contentType : false,
                data : new FormData($('#ClassScheduleForm')[0]),
                dataType : 'json',

                success: function (data) {
                    $.unblockUI();
                    if(data.success) {
                        toastr.success(data.success);
                        let $modal = $('#kt_modal_edit_class_info');
                        $modal.modal('hide');

                        $modal.on('hidden.bs.modal', function () {
                            $('.modal_class_schedule_info').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal');
                        });

                        setTimeout(function () {
                            reloadActiveTabContent();
                        }, 500);

                    } else if (data.failure) {
                        let htmlError = '';
                        $.each(data.failure, function(index, value) {
                            htmlError += '<li>'+value+'</li>';
                        });

                        toastr.error(htmlError);
                    }
                }
            });
        }

        $(document).on('click', '#SubmitModalIconForm', function(e) {
            e.preventDefault();

            let fileInput = $('#ClassScheduleIconForm input[type="file"]')[0];
            if (fileInput && fileInput.files.length === 0) {
                toastr.error('Please select a file before submitting.');
                return;
            }

            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff'
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ url("set-class-schedule-icon/update") }}',
                processData: false,
                contentType: false,
                data: new FormData($('#ClassScheduleIconForm')[0]),
                dataType: 'json',
                success: function (data) {
                    $.unblockUI();
                    if (data.status == 'Success'){
                        toastr.success('Class icon has been updated successfully');
                        let $modal = $('#kt_modal_edit_class_icon');
                        $modal.modal('hide');

                        $modal.on('hidden.bs.modal', function () {
                            $('.modal_class_schedule_icon').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal');
                        });

                        setTimeout(function () {
                            reloadActiveTabContent();
                        }, 500);

                    } else if (data.failure) {
                        let htmlError = '';
                        $.each(data.failure, function(index, value) {
                            htmlError += '<li>'+value+'</li>';
                        });

                        toastr.error(htmlError);
                    }
                },
                error: function (xhr, status, error) {
                    $.unblockUI();
                    toastr.error('Something went wrong: ' + error);
                },
            });
        });

        $(document).on('click', '#SubmitModalColorForm', function(e) {
            e.preventDefault();
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '20px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: 0.6,
                    color: '#fff'
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ url("set-class-schedule-color/update") }}',
                processData: false,
                contentType: false,
                data: new FormData($('#ClassScheduleColorForm')[0]),
                dataType: 'json',
                success: function (data) {
                    $.unblockUI();
                    if (data.status == 'Success'){
                        toastr.success('Class color has been updated successfully');
                        let $modal = $('#kt_modal_edit_class_color');
                        $modal.modal('hide');

                        $modal.on('hidden.bs.modal', function () {
                            $('.modal_class_schedule_color').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal');
                        });

                        setTimeout(function () {
                            reloadActiveTabContent();
                        }, 500);

                    } else if (data.failure) {
                        let htmlError = '';
                        $.each(data.failure, function(index, value) {
                            htmlError += '<li>'+value+'</li>';
                        });

                        toastr.error(htmlError);
                    }
                },
                error: function (xhr, status, error) {
                    $.unblockUI();
                    toastr.error('Something went wrong: ' + error);
                },
            });
        });

        // Show summary of incomplete classes on page load
        $(document).ready(function() {
            let incompleteCount = $('.alert-danger').length;
            if (incompleteCount > 0) {
                toastr.warning(
                        incompleteCount + ' class(es) have incomplete settings and are NOT available for parent enrollment. Please review and fix!',
                        'Action Required',
                        {
                            timeOut: 10000,
                            closeButton: true,
                            progressBar: true,
                            positionClass: 'toast-top-right'
                        }
                );
            }
        });
    </script>
@endsection