@extends('layouts.app')
@section('css')
    <style>



        #kt_content .week-button.btn.btn-outline-primary {
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0px 6px 18px rgba(78, 122, 87, 0.08) !important;
            backdrop-filter: blur(18px);
            color: #7A7A7A;
            font-size: 12px;
            border: 2px solid #21A33C !important;
            border-radius: 6px;
        }

        #kt_content .week-button.btn.btn-outline-primary.active {
            background: #21A33C !important;
            box-shadow: 0px 6px 18px rgba(78, 122, 87, 0.3) !important;
            color: #fff;
        }

        .btn.btn-outline-primary:hover, .btn.btn-outline-primary:active, .btn.btn-outline-primary:focus {
            background-color: #21A33C !important;
            color: #fff !important;
        }

        .week-btns button {
            margin-right: 3px;
        }

        .week-btns button:last-child {
            margin-right: 0px;
        }

        .week-inner {
            border: 1px solid #21A33C
        }

        .form-check-input {
            background-color: #fff;
            border-color: #21A33C;
        }

        .form-check-input:checked {
            background-color: #21A33C;
            border-color: #21A33C;
        }

        #kt_content .form-check-input:checked + span, .form-check-input:checked + label {
            color: #3B3B3B;
        }

        #kt_content .form-check-custom.form-check-solid .form-check-input:active, #kt_content .form-check-custom.form-check-solid .form-check-input:focus {
            filter: none;
            background-color: #fff;
        }

        #kt_content .form-check-custom.form-check-solid .form-check-input {
            border: 0;
            background-color: #fff;
            border-color: #B3DDBC !important;
        }

        #kt_content .form-check-custom.form-check-solid .form-check-input:checked {
            background-color: #21A33C;
        }

        .sport-camp-card {
            background: #F9FBFA;
            box-shadow: 0px 6px 18px rgba(78, 122, 87, 0.08);
            backdrop-filter: blur(18px);
            border: 4px solid #F9FBFA;
            border-radius: 10px;
            position: relative;
        }

        .sport-camp-card.selected-card {
            border: 3px solid #21A33C;
        }

        .sport-camp-card.card.green-card .card-header {
            background: #D6F5DC;
        }

        .sport-camp-card.card.blue-card .card-header {
            background: #D6E9FF;
        }

        .sport-camp-card.card.red-card .card-header {
            background: #F7E1DA;
        }

        .sport-camp-card.card.yellow-card .card-header {
            background: #FDF6C4;
        }

        .sport-camp-card.card.lightorg-card .card-header {
            background: #FBEBCE;
        }

        .sport-camp-card.card.pink-card .card-header {
            background: #F9E5F8;
        }

        .sport-camp-card.card.pink-card .card-header {
            background: #dcf5f6;
        }

        .sport-camp-card.card.skyblue-card .card-header {
            background: #F9E5F8;
        }

        .sport-camp-card.card.lightja-card .card-header {
            background: #e7e7f7;
        }

        .sport-camp-card .availability .success {
            color: #3B3B3B;
            border: none;
        }

        #kt_content .btn {
            font-size: 16px;
            border-width: 2px;
        }

        .choose-attending-day .btn-check:checked + .btn {
            color: #fff;
            background-color: #21A33C;
            border-color: #21A33C;
        }

        .choose-attending-day .btn.btn-outline-primary {
            font-size: 16px;
            color: #3B3B3B;
            min-width: 80px;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            margin-right: 10px;
        }

        .btn.btn-outline-primary {
            font-size: 18px;
            background-color: transparent;
            color: #21A33C;
            border: 2px solid #21A33C !important;
        }

        .btn.btn-outline-primary:hover, .btn.btn-outline-primary:active, .btn.btn-outline-primary:focus {
            background-color: #21A33C !important;
            color: #fff !important;
        }

        .multi-camp-badge{
            position:absolute;
            top:-9px;
            right:12px;
            background-color: #ffd9cf;
            color:#e65100;
            padding:4px 12px;
            font-size:12px;
            font-weight:700;
            border-radius:999px;
            box-shadow:0 2px 8px rgba(0,0,0,.15);
            z-index:20;
            white-space:nowrap;
        }
    </style>
@endsection
@section('content')

    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl p-0">
        <div class="content" id="kt_content">
            <div class="card card-style">
                <div class="card-body">
                    <h3 class="mb-5">{{isset($enrollment->student) ? ucwords($enrollment->student->first_name) .' '. ucwords($enrollment->student->last_name) : ''}}
                        - {{isset($enrollment->currentGrade) ? $enrollment->currentGrade->name : ''}}</h3>
                    <div class="week-btns">
                        <ul class="nav nav-tabs justify-content-between border-0 mb-5" id="myTab" role="tablist">
                            @foreach($weeks as $week)
                                <li class="nav-item position-relative" role="presentation">
                                    <button type="button"
                                            class="btn btn-outline-primary bg-white week-button mb-5 {{($week['order'] == 1) ? 'active-week active' : ''}}"
                                            onclick="showTab('{{$week['order']}}')" id="week_no_{{$week['order']}}">
                                        <span class="font-900"> Week {{$week['order']}} :</span><br>
                                        {{dateFormat($week['start_date'])}}
                                        <br> {{dateFormat($week['end_date'])}}
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <form id="StudentSummerEnrollmentForm" name="StudentSummerEnrollmentForm" class="pt-1">
                        {{ csrf_field() }}
                        <input type="hidden" name="program" value="{{session('program')}}">
                        <input type="hidden" name="enrollment_year" value="{{session('enrollment_year')}}">
                        <input type="hidden" name="student_id" value="{{$enrollment->student->id}}">
                        <input type="hidden" name="record_id" value="{{$enrollment->id}}">
                        <div class="tab-content">
                            @foreach($weeks as $week)
                                <div class="tab-pane fade {{($week['order'] == 1) ? 'show active' : ''}}"
                                     id="weektab{{$week['order']}}" role="tabpanel">
                                    @if($week['order'] == 1)
                                        @foreach($weeksInformations as $weekInfo)
                                            @php
                                                $enrollmentSchedule = $enrollment->enrollmentWeekSchedules->where('week_no',$weekInfo['order'])->first();;
                                            @endphp
                                            <div class="week-inner p-5 rounded">
                                                <h4 class="mb-5 fw-semibold week-title">
                                                    Choose Your Week of Attendance
                                                </h4>
                                                <div class="row">
                                                    <div class="col-md-6 mb-5">
                                                        <div class="radio-inline attendance-radio">
                                                            <label class="form-check form-check-custom form-check-solid">
                                                                <input checked="" class="form-check-input border"
                                                                       type="radio"
                                                                       id="scheduleid{{$weekInfo['order']}}"
                                                                       name="weeks[{{$weekInfo['order']}}][schedule_id]"
                                                                       value="0"
                                                                       onchange="return days_per_weeks( this.value, '{{$weekInfo['order']}}', '','0' )">
                                                                <span></span>
                                                                &nbsp; None (Per Week)
                                                            </label>
                                                        </div>
                                                    </div>
                                                    @if(isset($weekInfo['schedules']) && count($weekInfo['schedules']))
                                                        @foreach($weekInfo['schedules'] as $schedule)
                                                            @if((empty($scheduleDaysAccordingToDistrict)) || ($scheduleDaysAccordingToDistrict == 0) || (($scheduleDaysAccordingToDistrict != 0) && ($scheduleDaysAccordingToDistrict >= $schedule['days'])))
                                                                <div class="col-md-6 mb-5">
                                                                    <div class="radio-inline">
                                                                        <label class="form-check form-check-custom form-check-solid">
                                                                            <input class="form-check-input border"
                                                                                   type="radio"
                                                                                   {{(isset($enrollmentSchedule) && $enrollmentSchedule->schedule_id == $schedule['id'])? 'checked' : '' }}
                                                                                   id="scheduleid{{$schedule['id']}}"
                                                                                   name="weeks[{{$weekInfo['order']}}][schedule_id]"
                                                                                   value="{{$schedule['id']}}"
                                                                                   onchange="return days_per_weeks( this.value, '{{$weekInfo['order']}}', '{{$schedule['session_time']}}' , {{$schedule['days']}})">
                                                                            <span></span>
                                                                            &nbsp; {{$schedule['name']}}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                    @if(isset($weekInfo['days']) && count($weekInfo['days']))
                                                        <div class="col-lg-12 mb-5">
                                                            <h4 class="fw-semibold mb-5">Please Choose days attending
                                                                for
                                                                Week <span class="text-danger">*</span> <span
                                                                        class="no_summer_camp"
                                                                        style="color: red;"></span>
                                                            </h4>
                                                            <div class="checkbox-inline choose-attending-day">
                                                                @foreach($weekInfo['days'] as $day)
                                                                    @php
                                                                        $inputName = ($day['is_no_camp'] == 'No')
                                                                            ? 'weeks['.$weekInfo['order'].'][days_attending][]'
                                                                            : 'weeks['.$weekInfo['order'].'][no_camp_days][]';
                                                                    @endphp
                                                                    <input type="checkbox"
                                                                           name="{{ $inputName }}"
                                                                           {{(isset($enrollmentSchedule->days_attending) && in_array($day['day'],json_decode($enrollmentSchedule->days_attending)) && $day['is_no_camp'] == 'No') ? 'checked' : '' }}
                                                                           {{ $day['is_no_camp'] == 'Yes' ? 'disabled' : '' }}
                                                                           class="{{ $day['is_no_camp'] == 'Yes' ? '' : 'days_attending'.$weekInfo['order'].' week_'.$weekInfo['order'].'_'.$day['day'] }} btn-check"
                                                                           value="{{ $day['day'] }}"
                                                                           id="week_{{ $weekInfo['order'] }}_{{ $day['day'] }}"
                                                                           onchange="return days_attending('{{ $day['day'] }}', '{{ $weekInfo['order'] }}');">
                                                                    <label class="btn btn-outline-primary mb-5"
                                                                           for="week_{{ $weekInfo['order'] }}_{{ $day['day'] }}">
                                                                        {{ $day['day_show'] }}
                                                                    </label>
                                                                @endforeach

                                                            </div>

                                                        </div>
                                                    @endif
                                                    <input type="hidden"
                                                           name="weeks[{{$weekInfo['order']}}][days_count_per_week]"
                                                           id="days_week{{$weekInfo['order']}}" value="0">
                                                    <input type="hidden"
                                                           name="weeks[{{$weekInfo['order']}}][week_id]"
                                                           value="{{$weekInfo['order']}}">
                                                    <input type="hidden"
                                                           name="weeks[{{$weekInfo['order']}}][week_no]"
                                                           value="{{$weekInfo['order']}}">
                                                    <input type="hidden"
                                                           name="weeks[{{$weekInfo['order']}}][schedule_session]"
                                                           id="schedule_session{{$weekInfo['order']}}"
                                                           value="">

                                                    <div class="col-md-12 mb-5" id="lunch-dev{{$weekInfo['order']}}">
                                                        <hr>
                                                        <div class="col-sm-12 col-md-12 col-lg-12">
                                                            <div class="radio-inline">
                                                                <h6>
                                                                    <label class="form-check form-check-custom form-check-solid text-hover-primary">
                                                                        <input {{(isset($enrollmentSchedule) && $enrollmentSchedule->is_lunch == 'YES') ? "checked" : ""}} class="form-check-input border border-gray-300"
                                                                               type="checkbox"
                                                                               id="lunch{{$weekInfo['order']}}"
                                                                               name="weeks[{{$weekInfo['order']}}][lunch]">
                                                                        &ensp; I would like to order lunch package.
                                                                    </label>
                                                                </h6>

                                                                <p style="margin-left: 32px;"> @php echo '$'.number_format($lunchFee, 2); @endphp per day for each day
                                                                    enrolled</p>
                                                                <p style="margin-left: 32px;">You need to order lunch if
                                                                    needed.
                                                                    You
                                                                    will not be billed for Lunch if you are eligible for
                                                                    Early
                                                                    Bird
                                                                    Specials</p>
                                                            </div>
                                                        </div>
                                                        <hr>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    @php
                                                        $colors = ['green-card', 'blue-card', 'red-card', 'yellow-card', 'lightorg-card', 'lightja-card'];
                                                        $totalColors = count($colors);
                                                    @endphp
                                                    @if(isset($weekInfo['activities']) && count($weekInfo['activities']))
                                                        @foreach($weekInfo['activities'] as $activities)
                                                            <div class="summer-specialty-heading mb-8">
                                                                <div class="info-heading fw-semibold p-5 position-relative ps-8 rounded">{{$activities['activity_type']}}</div>
                                                            </div>
                                                            @if(isset($activities['activity_data']) && count($activities['activity_data']))
                                                                @foreach($activities['activity_data'] as $keyActivity => $activityData)
                                                                    @php
                                                                        $color = $colors[$keyActivity % $totalColors];
                                                                        $checkClass = (isset($enrollmentSchedule) && isset($enrollmentSchedule->class_codes) && in_array($activityData['class_setting_id'],json_decode($enrollmentSchedule->class_codes))) ? true : false
                                                                    @endphp
                                                                    <div class="col-sm-6 col-md-4 mb-10">
                                                                        <div class="card sport-camp-card h-100 class_card{{$weekInfo['order']}} {{$color}} p-2" id="class_card_{{$weekInfo['order']}}_{{$activityData['class_setting_id']}}" style="position: relative; overflow: visible;">

                                                                            @if(isset($activityData['is_multiple_speciality_camp_discount']) && !empty($activityData['is_multiple_speciality_camp_discount']) && strtoupper(trim($activityData['is_multiple_speciality_camp_discount'])) === 'YES')
                                                                                <div class="multi-camp-badge">
                                                                                    Eligible For Multi-Camp Discount
                                                                                </div>
                                                                            @endif

                                                                            <div class="card-header border-0 d-flex justify-content-between align-items-center rounded flex-nowrap px-3">
                                                                                <h5 class="mb-0">{{$activityData['class_title']}} </h5>
                                                                                @if(isset($activityData['class_icon']))
                                                                                    <div class="icon">
                                                                                        <img src="{{$activityData['class_icon']}}"
                                                                                             alt="icon1"
                                                                                             class="img-fluid">
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                            <div class="card-body p-5">
                                                                                @if(isset($activityData['grades']) && $activityData['grades'] != '')
                                                                                    <div class="d-flex pt-5">
                                                                                        <div class="flex-shrink-0">
                                                                                            <p class=" mb-0">
                                                                                                <img src="{{asset('assets/field-trip-images/days_enroll.png')}}"
                                                                                                     alt="time_icon"
                                                                                                     class="img-fluid">
                                                                                                <span class="fw-bold">Grades:</span>
                                                                                            </p>
                                                                                        </div>
                                                                                        <div class="flex-grow-1 ms-3">
                                                                                            {{$activityData['grades']}}
                                                                                        </div>
                                                                                    </div>
                                                                                @endif
                                                                                <div class="d-flex mb-3 {{(strpos($activityData['group_title'], 'Summer Academics') === false) ? 'pt-5' : ''}}">
                                                                                    <div class="flex-shrink-0">
                                                                                        <p class=" mb-0">
                                                                                            <img src="{{asset('assets/field-trip-images/time_icon.png')}}"
                                                                                                 alt="time_icon"
                                                                                                 class="img-fluid">
                                                                                            <span class="fw-bold">Time:</span>
                                                                                        </p>
                                                                                    </div>
                                                                                    <div class="flex-grow-1 ms-3">
                                                                                        {{$activityData['class_schedule']}}
                                                                                    </div>
                                                                                </div>
                                                                                <div class="d-flex mb-3">
                                                                                    <div class="flex-shrink-0">
                                                                                        <img src="{{asset('assets/field-trip-images/price_icon.png')}}"
                                                                                             alt="location_icon"
                                                                                             class="img-fluid">
                                                                                        <span class="fw-bold">Price/per week:</span>
                                                                                    </div>
                                                                                    <div class="flex-grow-1 ms-3 whereat">
                                                                                        {{int_to_money($activityData['class_fee'], '$', true)}}
                                                                                    </div>
                                                                                </div>
                                                                                <div class="d-flex mb-3 align-items-center">
                                                                                    <div class="flex-shrink-0">
                                                                                        <img src="{{asset('assets/field-trip-images/days_enroll.png')}}"
                                                                                             alt="price_icon"
                                                                                             class="img-fluid">
                                                                                        <span class="fw-bold">Availability:</span>
                                                                                    </div>
                                                                                    <div class="flex-grow-1 ms-5 availability">
                                                                                        <div class="d-flex justify-content-between">
                                                                                            <p class="mb-0">{{$activityData['class_availability']}}</p>

                                                                                            @if($activityData['class_availability'] == "OPEN" || $checkClass)
                                                                                                <label class="form-check form-check-custom form-check-solid form-check-inline">
                                                                                                    <input type="checkbox"
                                                                                                           {{(isset($enrollmentSchedule) && isset($enrollmentSchedule->class_codes) && in_array($activityData['class_setting_id'],json_decode($enrollmentSchedule->class_codes))) ? 'checked' : ''}}
                                                                                                           name="weeks[{{$weekInfo['order']}}][class_codes][]"
                                                                                                           class="form-check-input border class_codes{{$weekInfo['order']}}"
                                                                                                           id="class_codes_{{$weekInfo['order']}}_{{$activityData['class_setting_id']}}"
                                                                                                           value="{{$activityData['class_setting_id']}}"
                                                                                                           onchange="return check_time_exist('{{$activityData['class_setting_id']}}','{{$weekInfo['order']}}','{{$activityData['cat_session']}}')">
                                                                                                </label>
                                                                                            @else
                                                                                                <label class="form-check form-check-custom form-check-solid form-check-inline class_codes_full_check">
                                                                                                    <input disabled
                                                                                                           type="checkbox"
                                                                                                           {{(isset($enrollmentSchedule) && isset($enrollmentSchedule->class_codes) && in_array($activityData['class_setting_id'],json_decode($enrollmentSchedule->class_codes))) ? 'checked' : ''}}
                                                                                                           name="weeks[{{$weekInfo['order']}}][class_codes_full][]"
                                                                                                           class="form-check-input border class_codes_full{{$weekInfo['order']}}"
                                                                                                           id="class_codes_{{$weekInfo['order']}}_{{$activityData['class_setting_id']}}"
                                                                                                           value="{{$activityData['class_setting_id']}}">
                                                                                                </label>
                                                                                            @endif

                                                                                                <span></span>

                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                
                                                                                {{-- Show Multi-Camp Discount --}}
                                                                                {{--@if(isset($activityData['is_multiple_speciality_camp_discount']) &&
                                                                                    !empty($activityData['is_multiple_speciality_camp_discount']) && 
                                                                                    strtoupper(trim($activityData['is_multiple_speciality_camp_discount'])) === 'YES')
                                                                                    <div class="d-flex mb-3">
                                                                                        <div class="flex-shrink-0">
                                                                                            <p class="mb-0">
                                                                                                <i class="fa-solid fa-tag" style="color: #667eea; font-size: 18px;"></i>
                                                                                                <span class="fw-bold">Eligible for Multi-Camp Discount</span>
                                                                                            </p>
                                                                                        </div>
                                                                                    </div>
                                                                                @endif--}}
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach

                                                            @endif
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            @endforeach

                        </div>

                        <div class="next-prev-btns d-flex justify-content-between align-items-center mt-5 mb-5">
                            <div class="backweek-btn">
                                <a href="{{ url('summer-enrollment/'.encryptedId($enrollment->student->id).'/policy') }}"
                                   class="btn btn-outline-primary btnPrevious"> <i class="fa-solid fa-chevron-left"></i>
                                    Previous </a>
                            </div>
                            <div class="nextweek-btn">
                                <button type="button" class="btn btn-outline-primary btnNext" id="SubmitForm"> <span
                                            class="indicator-label">
                                    Save/Next
                                    <span class="svg-icon svg-icon-3 ms-2 me-0"><svg width="24" height="24"
                                                                                     viewBox="0 0 24 24" fill="none"
                                                                                     xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1"
                                          transform="rotate(-180 18 13)"
                                          fill="currentColor"></rect>
                                    <path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z"
                                          fill="currentColor"></path>
                                    </svg>
                                    </span>
                                </span>
                                    <span class="indicator-progress">
                                    Please wait... <span
                                                class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span></button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script>
        var weekInfoArray = @json($studentSummerEnrollmentSchedules);


        var tabsArray = ['1'];
        function showTab(weekOrder) {
            var currentButton = document.querySelector(".week-button.active-week");
            var currentWeekOrder;
            if (currentButton) {
                let match = currentButton.id.match(/week_no_(\d+)/);
                if (match && match[1]) {
                    currentWeekOrder = match[1];
                } else {
                    currentWeekOrder = null;
                }
            } else {
                currentWeekOrder = null;
            }


            let no_of_days = $("#days_week" + currentWeekOrder).val();
            let schedule_id = $(`input[name="weeks[${currentWeekOrder}][schedule_id]"]:checked`).val();

            let days_attending = [];
            $.each($(`.days_attending${currentWeekOrder}:checked`), function () {
                days_attending.push($(this).val());
            });

            days_attending = days_attending.filter(function (el) {
                return el != '';
            });


            if (no_of_days == 1 || no_of_days == 2 || no_of_days == 3 || no_of_days == 4 || no_of_days == 5) {
                if (no_of_days == 1 && days_attending.length < 1) {
                    let schedule_name = checkSchedule(schedule_id, currentWeekOrder);
                    let errorMessageForDays = 'You have selected ' + schedule_name + '. Please select ' + no_of_days + ' weekdays.'
                    toastr.error(errorMessageForDays);
                    return;
                }
                if (no_of_days == 2 && days_attending.length < 2) {
                    let schedule_name = checkSchedule(schedule_id, currentWeekOrder);
                    let errorMessageForDays = 'You have selected ' + schedule_name + '. Please select ' + no_of_days + ' weekdays.'
                    toastr.error(errorMessageForDays);
                    return;
                }
                if (no_of_days == 4 && days_attending.length < 4) {
                    let schedule_name = checkSchedule(schedule_id, currentWeekOrder);
                    let errorMessageForDays = 'You have selected ' + schedule_name + '. Please select ' + no_of_days + ' weekdays.'
                    toastr.error(errorMessageForDays);
                    return;
                }
                if (no_of_days == 5 && days_attending.length < 5) {
                    let schedule_name = checkSchedule(schedule_id, currentWeekOrder);
                    let errorMessageForDays = 'You have selected ' + schedule_name + '. Please select ' + no_of_days + ' weekdays.'
                    toastr.error(errorMessageForDays);
                    return;
                }
            }



            let buttons = document.querySelectorAll(".week-button");
            let tabPanes = document.querySelectorAll(".tab-pane");
            buttons.forEach(button => button.classList.remove("active-week", "active"));
            tabPanes.forEach(tab => tab.classList.remove("show", "active"));

            if (!tabsArray.includes(weekOrder)){
                tabsArray.push(weekOrder);
                console.log('tabsArray',tabsArray)
                $.blockUI({
                    css: {
                        border: 'none',
                        padding: '20px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity:         0.6,
                        color: '#fff',
                    }
                });
                var v_token_week = "{{csrf_token()}}";
                $.ajax({
                    type: 'POST',
                    url: '{{ url("summer-enrollment/fetch-week-data") }}',
                    data: {
                        _token: v_token_week,
                        studentId: '{{$studentId}}',
                        week: weekOrder,
                    },
                    dataType: 'json',

                    success: function (data) {
                        if (data.success) {
                            changeTabData(weekOrder,data.view,data.scheduleData)
                        } else if (data.failure) {
                            $.unblockUI();
                            toastr.error('Error: to load week '+weekOrder+' information ');
                        }
                    }
                });
            }else{
                $('#week_no_' + weekOrder).addClass("active-week active");
                $('#weektab' + weekOrder).addClass("show active");
            }

        }

        function changeTabData(weekOrder,view,scheduleData){
            $('#week_no_' + weekOrder).addClass("active-week active");
            $('#weektab' + weekOrder).addClass("show active");

            $('#weektab'+weekOrder).append(view);

            let schedule_id_next = $(`input[name='weeks[${weekOrder}][schedule_id]']:checked`).val();
            let schedule = getSchedule(schedule_id_next,weekOrder);
            if (schedule && (schedule.session_time == 'FULL DAY')) {
                $('#lunch-dev' + weekOrder).show();
            } else {
                $('#lunch-dev' + weekOrder).hide();
                $('#lunch' + weekOrder).prop('checked', false);
            }

            if(schedule_id_next == '0'){
                days_per_weeks('0', weekOrder, '', '0',true);
            }else {
                days_per_weeks(schedule_id_next, weekOrder, schedule.session_time , schedule.days,false)
            }
            $.unblockUI();
        }

        @if(!isset($enrollmentSchedule))
        days_per_weeks('0', '1', '', '0');
        @else
        var schedule_id = $(`input[name='weeks[1][schedule_id]']:checked`).val();
        if (schedule_id == '0') {
            days_per_weeks('0', '1', '', '0', true);
        } else if (schedule_id) {
            var schedule = getSchedule(schedule_id,'1');
            if(schedule){
                days_per_weeks(schedule_id, '1', schedule.session_time, schedule.days, false)
            }
        }
        @endif

        function checkSchedule(scheduleId, currentWeekOrder) {
            const weekSchedule = weekInfoArray.filter(item => item.order == currentWeekOrder);
            if (scheduleId && weekSchedule.length > 0) {
                let schedule = weekSchedule.find(obj => {
                    return obj.id === parseInt(scheduleId)
                });
                if (typeof schedule === 'object' && !Array.isArray(schedule) && schedule !== null) {
                    return schedule.name;
                }
                return null;
            }
            return null;
        }

        function getSchedule(scheduleId,currentWeekOrder) {
            const weekSchedule = weekInfoArray.filter(item => item.order == currentWeekOrder);
            if (weekSchedule){
                if (scheduleId && weekSchedule.length > 0) {
                    let schedule = weekSchedule.find(obj => {
                        return obj.id === parseInt(scheduleId)
                    });
                    if (typeof schedule === 'object' && !Array.isArray(schedule) && schedule !== null) {
                        return schedule;
                    }
                    return null;
                }
            }
            return null;
        }



        function days_per_weeks(value, weekOrder, schedule_session, no_of_days, onloadCheck = true) {
            if (value == '0') {
                $('.days_attending' + weekOrder).attr("disabled", true).prop('checked', false);
                $('.class_codes' + weekOrder).prop('checked', false).attr("disabled", true);
                $("#days_week" + weekOrder).val(no_of_days);
                $("#schedule_session" + weekOrder).val(schedule_session);
                $('#lunch-dev' + weekOrder).hide();
                $(".class_card" + weekOrder).removeClass("selected-card");
            } else {
                $("#days_week" + weekOrder).val(no_of_days);
                $("#schedule_session" + weekOrder).val(schedule_session);

                if (schedule_session === 'FULL DAY') {
                    $('#lunch-dev' + weekOrder).show();
                } else {
                    $('#lunch-dev' + weekOrder).hide();
                    $('#lunch' + weekOrder).prop('checked', false);
                }

                if (onloadCheck) {
                    $(".days_attending" + weekOrder).prop('checked', false).removeAttr("disabled");
                    $('.class_codes' + weekOrder).prop('checked', false).removeAttr("disabled");
                    $(".class_card" + weekOrder).removeClass("selected-card");
                }

                if (no_of_days == 5) {
                    var inputs = document.querySelectorAll('.days_attending' + weekOrder);
                    inputs.forEach((input, index) => {
                        if (index < 5) input.checked = true;
                    });
                }
            }
        }


        function days_attending(id = '', weekOrder = '') {
            var no_of_days = $('#days_week' + weekOrder).val();
            $('.class_codes' + weekOrder).prop('checked', false);
            $(".class_codes" + weekOrder).removeAttr("disabled");
            let selectedCheckboxes = $(`:checkbox[name="weeks[${weekOrder}][days_attending][]"]:checked`);

            let checkboxId = `week_${weekOrder}_${id}`;
            let checkbox = document.getElementById(checkboxId);

            if (checkbox) {
                if (checkbox.checked) {
                    $('#week_' + weekOrder + '_' + id).prop('checked', true);
                } else {
                    $('#week_' + weekOrder + '_' + id).prop('checked', false);
                }
            } else {
                $('#week_' + weekOrder + '_' + id).prop('checked', false);
            }


            if (selectedCheckboxes.length == no_of_days) {
                $(`:checkbox[name="weeks[${weekOrder}][days_attending][]"]:not(:checked)`).prop('disabled', true);
                console.log('Maximum days selected');
            } else {
                $(`:checkbox[name="weeks[${weekOrder}][days_attending][]"]`).prop('disabled', false);
                console.log('Selection reset');
            }

            if (selectedCheckboxes.length > no_of_days) {
                console.log('Exceeded max days, unchecking current box');
                $('#week_' + weekOrder + '_' + id).prop('checked', false);
            }
        }


        function check_time_exist(class_id, week, schedule_session) {
            var currentClassCheckBox = document.getElementById('class_codes_' + week + '_' + class_id);
            var currentClass = document.getElementById('class_card_' + week + '_' + class_id);
            if (currentClassCheckBox.checked) {
                currentClass.classList.add("selected-card");
            } else {
                currentClass.classList.remove("selected-card");
            }

            var checked_class_id = [];
            $.each($(".class_codes" + week + ":checked"), function () {
                checked_class_id.push(parseInt($(this).val()));
            });
            $.each($(".class_codes_full" + week + ":checked"), function () {
                checked_class_id.push(parseInt($(this).val()));
            });

            var days_attending = [];
            $.each($(".days_attending" + week + ":checked"), function () {
                days_attending.push($(this).val());
            });

            days_attending = days_attending.filter(function (el) {
                return el != '';
            });
            if (checked_class_id.includes(parseInt(class_id))) {
                checked_class_id = checked_class_id.filter(function (e) {
                    return e !== parseInt(class_id)
                })
            }

            var day_week = $("#schedule_session" + week).val();
            if (days_attending.length == 0) {
                $('#class_codes_' + week + '_' + class_id).prop('checked', false);
                currentClass.classList.remove("selected-card");
                toastr.error('Please select the attending days first');
                return true;
            }
            var schedule_id = $(`input[name='weeks[${week}][schedule_id]']:checked`).val();
            var is_no_camp = "{{isset($no_camp) ? true : false}}";
            var v_token = "{{csrf_token()}}";

            $.ajax({
                type: 'POST',
                url: '{{ url("summer-enrollment/check-time-exist") }}',
                data: {
                    _token: v_token,
                    class_id: class_id,
                    week: week,
                    checked_class_id: checked_class_id,
                    days_attending: days_attending,
                    schedule_id: schedule_id,
                    is_no_camp: is_no_camp
                },
                dataType: 'json',

                success: function (data) {
                    if (data.success) {

                    } else if (data.failure) {
                        $('#class_codes_' + week + '_' + class_id).prop('checked', false);
                        currentClass.classList.remove("selected-card");
                        toastr.error(data.failure);
                    }
                }
            });

            return true;
        }


        $(function () {
            $(document).on('click', '#SubmitForm', function (e) {
                $('#SubmitForm').prop('disabled', true);
                $('.indicator-label').hide();
                $('.indicator-progress').show();
                let backUrl = @json(session('enrollment_year') > 2024 && user()->assignedRole->name != 'PARENT'
            ? url('summer-enrollment/'.encryptedId($studentId).'/onsite-summary/')
            : url('summer-enrollment/agreement-after-week/'.encryptedId($studentId))
        );
                submitForm(backUrl)

            });
        });

        function submitForm(backUrl){
            $.ajax({
                type: 'POST',
                url: '{{ url("summer-enrollment/week-store") }}',
                processData: false,
                contentType: false,
                data: new FormData($('#StudentSummerEnrollmentForm')[0]),
                dataType: 'json',
                beforeSend: function() {
                    $('#SubmitForm').hide();
                },
                success: function (data) {

                    if (data.success) {
                        toastr.success(data.success);
                        setTimeout(function () {
                            window.location.href = backUrl
                        }, 1500);

                    } else if (data.failure) {
                        $('#SubmitForm').show();
                        $('#SubmitForm').prop('disabled',false);
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        let htmlError = '';
                        $.each(data.failure, function (index, value) {
                            htmlError += '<li>' + value + '</li>';
                        });

                        toastr.error(htmlError);
                    }
                },
                error: function() {
                    $('#SubmitForm').show();
                    $('#SubmitForm').prop('disabled',false);
                    $('.indicator-label').show();
                    $('.indicator-progress').hide();
                }
            });
        }

        $(document).on('click', '.class_codes_full_check', function (e) {
            e.preventDefault();
            Swal.fire({
                icon: 'warning',
                title: "This class/camp is full. We will notify you when we open up another class. Meanwhile, feel free to enroll another class/camp.",
                showDenyButton: false,
                showCancelButton: false,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {

                }
            });
        });
    </script>
@endsection