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

    @include('layouts.toolbar')

    <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" style="background: #F1F5F2">
                <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>

                            <style>
                                .multi-camp-badge {
                                    position: absolute;
                                    top: -12px;
                                    right: 20px;
                                    background-color: #ffd9cf;
                                    color: #e65100;
                                    padding: 4px 12px;
                                    font-size: 12px;
                                    font-weight: 600;
                                    border-radius: 20px;
                                    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
                                    z-index: 10;
                                    white-space: nowrap;
                                }
                            </style>


                            <div class="container">
                                <div class="summer-tabs-content-area mt-10">
                                    <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" aria-labelledby="home-tab" tabindex="0">
                                                <div class="summer-specialty-area">
                                                    @if(!empty($tabresult['activities']))
                                                        @foreach($tabresult['activities'] as $group => $classes)
                                                            <div class="summer-sp-item mb-5">
                                                                <div class="summer-specialty-heading mb-8">
                                                                    <div class="info-heading fw-semibold p-5 position-relative ps-8 rounded">
                                                                        {{ ucwords($group) }}
                                                                        <button type="button" class="btn btn-info btn-sm add-class-schedule" data-group="{{ $classes[0]['group_id'] }}" style="float: right;" data-bs-toggle="modal" data-bs-target="#kt_modal_add_class_info">Add New Class</button>
                                                                    </div>
                                                                </div>
                                                                <div class="summer-content-area">
                                                                    <div class="row">
                                                                        @if(!empty($classes))
                                                                            @foreach($classes as $class)
                                                                                @php
                                                                                    $color = isset($class['class_color'])?$class['class_color']:'#D6E9FF';
                                                                                    // Check for missing critical data
                                                                                    $hasWarning = false;
                                                                                    $warningMessages = [];

                                                                                    if (empty($class['days']) || count($class['days']) == 0) {
                                                                                        $hasWarning = true;
                                                                                        $warningMessages[] = 'No days selected';
                                                                                    }
                                                                                    if (empty($class['time_range'])) {
                                                                                        $hasWarning = true;
                                                                                        $warningMessages[] = 'No time settings';
                                                                                    }
                                                                                    if (empty($class['class_fee']) || $class['class_fee'] == 0) {
                                                                                        $hasWarning = true;
                                                                                        $warningMessages[] = 'Missing fee';
                                                                                    }
                                                                                    if (empty($class['grades'])) {
                                                                                        $hasWarning = true;
                                                                                        $warningMessages[] = 'No grades assigned';
                                                                                    }
                                                                                @endphp
                                                                                <div class="col-md-6 col-12">
                                                                                    <div class="card p-2 mb-8 {{ $hasWarning ? 'border-danger' : '' }}" style="border: 2px solid {{ $hasWarning ? '#dc3545' : $color }}; {{ $hasWarning ? 'animation: pulse-border 2s infinite;' : '' }}; position: relative;">
                                                                                        @if(isset($class['is_multiple_speciality_camp_discount']) && !empty($class['is_multiple_speciality_camp_discount']) && strtoupper(trim($class['is_multiple_speciality_camp_discount'])) === 'YES')
                                                                                            <div class="multi-camp-badge">
                                                                                                Eligible For Multi-Camp Discount
                                                                                            </div>

                                                                                        @endif

                                                                                        @if($hasWarning)
                                                                                            <div class="position-absolute top-0 start-0 w-100" style="z-index: 1; pointer-events: none;">
                                                                                                <div class="badge bg-danger text-white p-2 w-100" style="animation: flash 2s infinite; border-radius: 0; font-size: 10px;">
                                                                                                    <i class="fa fa-exclamation-triangle"></i>
                                                                                                    <strong>WARNING:</strong> {{ implode(', ', $warningMessages) }} - Parents CANNOT enroll!
                                                                                                </div>
                                                                                            </div>
                                                                                        @endif
                                                                                        <div class="card-header border-0 d-flex justify-content-between align-items-center" style="background: {{ $hasWarning ? '#fff3cd' : $color }}; {{ $hasWarning ? 'margin-top: 30px;' : '' }}">
                                                                                            <a href="javascript:void(0)" data-id="{{ $class['class_setting_id'] }}" data-week="{{ $tabresult['order'] }}" data-group="{{ $class['group_id'] }}" class="m-1 edit" title="Edit Class Info" data-bs-toggle="modal" data-bs-target="#kt_modal_edit_class_info" style="z-index: 2; position: relative;">
                                                                                                <h5 class="mb-0">
                                                                                                    {{ ucwords($class['class_title']) }}
                                                                                                    @if($hasWarning)
                                                                                                        <i class="fa fa-exclamation-triangle text-danger ms-2" style="animation: blink 1.5s infinite;" title="Incomplete settings"></i>
                                                                                                    @endif
                                                                                                </h5>
                                                                                            </a>

                                                                                            <div class="icon" style="z-index: 2; 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>
                                                                                                <a href="javascript:void(0)" data-id="{{ $class['class_setting_id'] }}" data-week="{{ $tabresult['order'] }}" class="delete-class-schedule shadow-sm" title="Delete Class Schedule" data-bs-toggle="modal" data-bs-target="#kt_modal_delete_class_schedule"><i class="fa fa-trash" aria-hidden="true" style="color: black;"></i></a>
                                                                                                @if(!empty($class['class_icon']))
                                                                                                    <img src="{{ $class['class_icon'] }}" alt="{{ ucwords($class['class_title']) }}" class="img-fluid" />
                                                                                                @endif
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="card-body">
                                                                                            <div class="content">
                                                                                                <p class="mb-2">
                                                                                                    <img src="{{asset('assets/summer-class-schedule/icon1.png')}}" class="img-fluid" />
                                                                                                    <span class="fw-medium">Price/per week:</span> ${{ $class['class_fee'] }}
                                                                                                </p>

                                                                                                <p class="mb-2">
                                                                                                    <img src="{{asset('assets/summer-class-schedule/icon2.png')}}" class="img-fluid" />
                                                                                                    <span class="fw-medium">Class Grades:</span> {{ $class['grades'] }}
                                                                                                </p>

                                                                                                <p class="mb-2">
                                                                                                    <img src="{{asset('assets/summer-class-schedule/icon2.png')}}" class="img-fluid" />
                                                                                                    <span class="fw-medium">Class Size on WP:</span> {{ $class['class_capacity_min'] }}
                                                                                                </p>

                                                                                                <p class="mb-2">
                                                                                                    <img src="{{asset('assets/summer-class-schedule/icon2.png')}}" class="img-fluid" />
                                                                                                    <span class="fw-medium">Class Size:</span> {{ $class['class_capacity'] }}
                                                                                                </p>

                                                                                                @if (!empty($class['fieldtrip_type']))
                                                                                                    <p class="mb-2">
                                                                                                        <img src="{{asset('assets/summer-class-schedule/icon2.png')}}" class="img-fluid" />
                                                                                                        <span class="fw-medium">Field Trip:</span> {{ ($class['fieldtrip_type'] == 'onsite')?'On-site':'Off-site' }}
                                                                                                    </p>
                                                                                                @endif

                                                                                                <p class="mb-2">
                                                                                                    <i class="fa-solid fa-calendar-days" style="color: #50CD89; font-size: 18px; margin-left: 2px;"></i>
                                                                                                    <span class="fw-medium" style="margin-left: 2px;">Days:</span> {{ !empty($class['days'])?implode(', ', $class['days']):'' }}
                                                                                                </p>

                                                                                                <p class="mb-2">
                                                                                                    <i class="fa-solid fa-clock" style="color: #50CD89; font-size: 18px; margin-left: 2px;"></i>
                                                                                                    <span class="fw-medium" style="margin-left: 2px;">Time:</span> {{ !empty($class['time_range'])?$class['time_range']:'' }}
                                                                                                </p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </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--}}

                                            {{--@if($isDraftCount == 0)
                                                <button type="button" class="btn btn-success is_billing mb-10" data-session="{{ session('enrollment_year') }}" data-flag="0"> Move Classes From Billing to Draft</button>
                                            @endif--}}

                                            {{--@if($isDraftCount == 0)--}}
                                            @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--}}
                                        @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("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 () {
            // Clean up modal containers
            $('.modal_class_schedule_info').empty();
            $('.modal_class_schedule_icon').empty();
            $('.modal_class_schedule_color').empty();

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

            // Restore active tab
            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();
                    // Clear modal container first to prevent duplicates
                    $('.modal_class_schedule_info').empty().html(data);
                    $('#kt_modal_add_class_info').modal('show');

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

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

                    setTimeout(function () {
                        // Destroy existing select2 instances if any
                        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();
                    // Clear modal container first to prevent duplicates
                    $('.modal_class_schedule_info').empty().html(data);
                    $('#kt_modal_edit_class_info').modal('show');

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

                    setTimeout(function () {
                        // Destroy existing select2 instances if any
                        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");
                            }
                        }
                    });
                } else {
                    return false;
                }
            });
        }

        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");
                            }
                        }
                    });
                } else {
                    return false;
                }
            });
        }

        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: 'laravel'
                },

                success: function (data) {
                    $.unblockUI();
                    // Clear modal container first to prevent duplicates
                    $('.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");
                            }
                        }
                    });
                } else {
                    return false;
                }
            });
        }

        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");
                            }
                        }
                    });
                } else {
                    return false;
                }
            });
        }

        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: 'laravel'
                },

                success: function (data) {
                    $.unblockUI();
                    // Clear modal container first to prevent duplicates
                    $('.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);

            // Check if any day is selected
            let daysSelected = false;
            ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'].forEach(function(day) {
                if ($form.find('input[name="' + day + '"]').is(':checked')) {
                    daysSelected = true;
                    // Check if time is set for selected day
                    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');
            }

            // Check other required fields
            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();

            // Validate before submitting
            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);
                        // Properly close and cleanup modal
                        let $modal = $('#kt_modal_add_class_info');
                        $modal.modal('hide');

                        // Clean up after modal is hidden
                        $modal.on('hidden.bs.modal', function (e) {
                            $('.modal_class_schedule_info').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal'); // Remove this specific handler
                        });

                        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();

            // Validate before submitting
            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);
                        // Properly close and cleanup modal
                        let $modal = $('#kt_modal_edit_class_info');
                        $modal.modal('hide');

                        // Clean up after modal is hidden
                        $modal.on('hidden.bs.modal', function (e) {
                            $('.modal_class_schedule_info').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal'); // Remove this specific handler
                        });

                        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');
                        // Properly close and cleanup modal
                        let $modal = $('#kt_modal_edit_class_icon');
                        $modal.modal('hide');

                        // Clean up after modal is hidden
                        $modal.on('hidden.bs.modal', function (e) {
                            $('.modal_class_schedule_icon').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal'); // Remove this specific handler
                        });

                        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');
                        // Properly close and cleanup modal
                        let $modal = $('#kt_modal_edit_class_color');
                        $modal.modal('hide');

                        // Clean up after modal is hidden
                        $modal.on('hidden.bs.modal', function (e) {
                            $('.modal_class_schedule_color').empty();
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open').css('padding-right', '');
                            $(this).off('hidden.bs.modal'); // Remove this specific handler
                        });

                        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