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

    <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 5px 43px rgba(153, 159, 154, 0.3);
            backdrop-filter: blur(18px);
            border: 2px solid rgb(33 163 60 / 15%);
            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;
        }

        .next-prev-btns .btn.btn-outline-primary {
            font-size: 18px;
            background-color: transparent;
            color: #21A33C;
            border: 2px solid #21A33C !important;
        }
        .next-prev-btns .btn.btn-outline-primary:hover {
            color: #21A33C !important;
            background-color: rgba(33, 163, 60, 0.04) !important;
            box-shadow: 0px 20px 43px rgba(78, 122, 87, 0.08);
            backdrop-filter: blur(18px);
        }
        .next-prev-btns .btn.btn-outline-primary:active, .backweek-btn .btn.btn-outline-primary:focus {
            color: #21A33C !important;
            background-color: rgba(33, 163, 60, 0.1) !important;
            box-shadow: 0px 20px 43px rgba(78, 122, 87, 0.08);
            backdrop-filter: blur(18px);
        }
    </style>

    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl" style="padding: 0px;">
        <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>
                    <p class="mb-10">The activities are not available for you if you are not enrolled in the onsite camp during the time activities are taking place. Email us at <span style="color: #0a6aa1;">{{ config('mail.from.address') }}</span> if you want to change your enrollment.</p>
                    <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="active-week btn btn-outline-primary bg-white week-button mb-5 {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" data-bs-target="{{ '#weektab'.$week['order'] }}" data-current-tab="{{ $week['order'] }}" role="tab" aria-selected="true">
                                        <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() }}

                        <div class="tab-content">
                            <input type="hidden" name="student_id" value="{{$enrollment->student_id}}">
                            <input type="hidden" name="enrollment_id" value="{{isset($studentSummerEnrollment->id) ? $studentSummerEnrollment->id : null}}">

                            @foreach($weeks as $weekKey => $week)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ 'weektab'.$week['order'] }}" role="tabpanel" >
                                    @php
                                        $enrollmentSchedule = $enrollmentSchedules->where('week_no',$week['order'])->first();
                                        $currentSchedule = isset($studentSummerEnrollment->enrollmentWeekSchedules)? $studentSummerEnrollment->enrollmentWeekSchedules->where('week_no',$week['order'])->first() : null;
                                    @endphp

                                    <input type="hidden" name="record_id[{{$week['order']}}]" value="{{isset($currentSchedule->id) ? $currentSchedule->id : NULL}}">
                                    <input type="hidden" name="week_id[{{$week['order']}}]" value="{{$week['order']}}">
                                    <input type="hidden" name="week_no[{{$week['order']}}]" value="{{$week['order']}}">
                                    <input type="hidden" name="schedule_id[{{$week['order']}}]" id="schedule_id_{{$week['order']}}" value="{{isset($enrollmentSchedule->schedule_id) ? $enrollmentSchedule->schedule_id : ''}}">
                                    <input type="hidden" name="days_count_per_week[{{$week['order']}}]" id="days_count_per_week_{{$week['order']}}" value="{{isset($enrollmentSchedule->days_count_per_week) ? $enrollmentSchedule->days_count_per_week : ''}}">
                                    <input type="hidden" name="days_attending[{{$week['order']}}]" id="days_attending_{{$week['order']}}" value="{{isset($enrollmentSchedule->days_attending) ? $enrollmentSchedule->days_attending : ''}}">
                                    <input type="hidden" name="is_lunch[{{$week['order']}}]" id="is_lunch" value="{{isset($enrollmentSchedule->is_lunch) ? $enrollmentSchedule->is_lunch : ''}}">

                                    <div class="week-inner p-0 rounded">
                                        <div class="row">
                                            @php $activitiesByWeek = isset($activities[$week['order']]) ? $activities[$week['order']] : collect([]); @endphp
                                            @if(isset($activitiesByWeek) && $activitiesByWeek->count())
                                                @foreach($activitiesByWeek as $key => $activity)
                                                    @php $activityCats = collect($activity)->groupBy('cat_name'); @endphp
                                                    @foreach($activityCats as $cat => $values)
                                                        @foreach($values as $key => $item)
                                                            <div class="col-sm-6 col-md-4 mb-10">
                                                                {{--selected-card--}}
                                                                <div class="card sport-camp-card h-100 green-card p-2">
                                                                    <div class="card-header border-0 d-flex justify-content-between align-items-center rounded flex-nowrap px-3">
                                                                        <h5 class="mb-0">{{ ucwords($item['class_title']) }} </h5>
                                                                    </div>

                                                                    <div class="card-body p-5">
                                                                        <div class="d-flex mb-5 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">Day/Time:</span>
                                                                                </p>
                                                                            </div>
                                                                            <div class="flex-grow-1 ms-3">
                                                                                {{isset($item['monday']) ? weekTimeFormat("Mon",$item['monday']) : ''}}
                                                                                {{isset($item['tuesday']) ? weekTimeFormat("Tue",$item['tuesday']) : ''}}
                                                                                {{isset($item['wednesday']) ? weekTimeFormat("Wed",$item['wednesday']) : ''}}
                                                                                {{isset($item['thursday']) ? weekTimeFormat("Thu",$item['thursday']) : ''}}
                                                                                {{isset($item['friday']) ? weekTimeFormat("Fri",$item['friday']) : ''}}
                                                                            </div>
                                                                        </div>

                                                                        <div class="d-flex mb-5">
                                                                            <div class="flex-shrink-0">
                                                                                <img src="{{asset('assets/field-trip-images/location_icon.png')}}" alt="location_icon" class="img-fluid">
                                                                                <span class="fw-bold">Where:</span>
                                                                            </div>
                                                                            <div class="flex-grow-1 ms-3 whereat">
                                                                                @php $gradeTypeFieldTrip = getClassGradeFieldTrip($item['grades']); @endphp
                                                                                {{$gradeTypeFieldTrip}}
                                                                            </div>
                                                                        </div>

                                                                        @if ($item['fieldtrip_type'])
                                                                            <div class="d-flex mb-5">
                                                                                <div class="flex-shrink-0">
                                                                                    <img src="{{asset('assets/field-trip-images/location_icon.png')}}" alt="location_icon" class="img-fluid">
                                                                                    <span class="fw-bold">Field Trip:</span>
                                                                                </div>
                                                                                <div class="flex-grow-1 ms-3 whereat">
                                                                                    {{ ($item['fieldtrip_type'] == 'onsite') ? 'On-site' : 'Off-site' }}
                                                                                </div>
                                                                            </div>
                                                                        @endif

                                                                        <div class="d-flex mb-5">
                                                                            <div class="flex-shrink-0">
                                                                                <img src="{{asset('assets/field-trip-images/days_enroll.png')}}" alt="days_enroll" class="img-fluid">
                                                                                <span class="fw-bold">Days enroll:</span>
                                                                                <span>{{isset($enrollmentSchedule->days_attending) ? implode(', ', json_decode($enrollmentSchedule->days_attending)) : ''}}<br>
                                                                                    <span style="margin-left: 24px;">{{(isset($enrollmentSchedule->schedule->schedule_name) && isset($enrollmentSchedule->schedule->session_time)) ? $enrollmentSchedule->schedule->session_time .' - '. $enrollmentSchedule->schedule->schedule_name : ''}}
                                                                                    {{(isset($enrollmentSchedule->schedule->start_time) && isset($enrollmentSchedule->schedule->end_time)) ? '('.time_format($enrollmentSchedule->schedule->start_time) .' - '. time_format($enrollmentSchedule->schedule->end_time).')' : ''}}</span></span>
                                                                            </div>
                                                                        </div>

                                                                        <div class="d-flex mb-5 align-items-center">
                                                                            <div class="flex-shrink-0">
                                                                                <img src="{{asset('assets/field-trip-images/price_icon.png')}}" alt="price_icon" class="img-fluid">
                                                                                <span class="fw-bold">Price/per week:</span>
                                                                            </div>
                                                                            <div class="flex-grow-1 ms-5 availability">
                                                                                <div class="d-flex justify-content-between">
                                                                                    <p class="mb-0">{{int_to_money($item['class_fee'],'$',true)}}</p>

                                                                                    @if(isset($enrollmentSchedule->schedule_id) && !empty($enrollmentSchedule->schedule_id))
                                                                                        <label class="form-check form-check-custom form-check-solid form-check-inline">
                                                                                            <input type="checkbox" name="class_codes[{{$week['order']}}][]" id="class_codes_{{$item['class_setting_id']}}"
                                                                                                class="form-check-input border border-gray-300 class_codes class_codes_{{$week['order']}}" value="{{$item['class_setting_id']}}"
                                                                                                onchange="return check_time_exist('{{$item['class_setting_id']}}','{{$week['order']}}','{{$item['cat_session']}}','{{$week['classes']}}')"
                                                                                                {{(isset($currentSchedule) && isset($currentSchedule->class_codes) && in_array($item['class_setting_id'],json_decode($currentSchedule->class_codes))) ? 'checked' : ''}}
                                                                                            >
                                                                                            <span></span>
                                                                                        </label>
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endforeach
                                                @endforeach
                                            @else
                                                <span style="text-align: center;"><strong>No Field Trip This Week</strong></span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="next-prev-btns d-flex justify-content-between align-items-center mb-5">
                            <div class="backweek-btn">
                                <a href="{{ url('summer-enrollment/'.encryptedId($studentId).'/list') }}" 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"> Save <i class="fa-solid fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script type="text/javascript">
        $(function () {
            $('#SubmitForm').click(function () {
                //$('#SubmitForm').prop('disabled', true);
                $('.indicator-label').hide();
                $('.indicator-progress').show();
                let backUrl = "{{ url('field-trip-enrollment/'.encryptedId($studentId).'/onsite-summary/') }}";
                let checked_class_id = [];
                let selectedWeeks = [];
                $.each($(".class_codes:checked"), function () {
                    checked_class_id.push(parseInt($(this).val()));
                    let week = $(this).closest('tr').find('.min-w-100px').text().trim();
                    if (!selectedWeeks.includes(week)) {
                        selectedWeeks.push(week);
                    }
                });

                submitForm(backUrl);
            });
        });
    </script>

    <script type="text/javascript">
        function check_time_exist(class_id, week, schedule_session,classes) {
            let checked_class_id = [];
            let classesAll = JSON.parse(classes);
            $.each($('.class_codes_' + week + ':checked'), function () {
                checked_class_id.push(parseInt($(this).val()));
            });
            if (classesAll.length > 0){
                $.each(classesAll, function (index, classId) {
                    checked_class_id.push(parseInt(classId));
                });
            }
            let days_attending = $('#days_attending_'+week).val();
            let schedule_id = $("#schedule_id_"+week).val();

            let v_token = "{{csrf_token()}}";

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

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

                    } else if (data.failure) {
                        $('#class_codes_' + class_id).prop('checked', false);
                        toastr.error(data.failure);
                    }
                }
            });

            return true;
        }

        function addCheckForm(backUrl){
            $.ajax({
                type: 'POST',
                url: '{{ url("field-trip-enrollment/add-field-trip-visit-check") }}',
                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);

                    } else if (data.notEnrolledInOnsiteEnrollment == 'not-enrolled') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Currently, you are unable to enroll this week because you are not enrolled in Onsite enrollment for this week.',
                            showCancelButton: false,
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                            window.location.reload();
                        }
                    });
                    }
                },
                error: function () {
                    $('#SubmitForm').show();
                }
            });
        }

        function submitForm(backUrl) {
            $.ajax({
                type: 'POST',
                url: '{{ url("field-trip-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);

                    } else if (data.notEnrolledInOnsiteEnrollment == 'not-enrolled') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Currently, you are unable to enroll this week because you are not enrolled in Onsite enrollment for this week.',
                            showCancelButton: false,
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.reload();
                            }
                        });
                    }
                },
                error: function () {
                    $('#SubmitForm').show();
                }
            });
        }

    </script>
@endsection