@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">
                <div class="card-header border-0 pt-6">
                    <div class="card-title">
                        <div class="d-flex align-items-center position-relative my-1">
                            <h3 class="fw-semibold text-dark mb-7" style="font-weight: bolder !important;">{{ucwords($student->first_name).' '.ucwords($student->last_name)}} Preschool Enrollment</h3>
                        </div>
                    </div>
                </div>

                <div class="card-body py-4">
                    <form id="StudentEnrollmentForm" name="StudentEnrollmentForm" class="pt-1">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-lg-12 col-sm-12 col-md-12 mb-1">
                                <h3 class="text-hover-primary text-gray-900 mb-2">Choose Attending Pattern*</h3>
                                <div class="card notice rounded border-gray-300 border">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="row">

                                                    @foreach($schedules as $enrollmentSchedule)
                                                        <div class="col-sm-12 col-md-12 col-lg-12 mt-1">
                                                            <div class="radio-inline">
                                                                <label class="form-check form-check-custom form-check-solid text-hover-primary text-gray-600">
                                                                    <input class="form-check-input border border-gray-300"
                                                                           type="radio" id="basic_fee_id"
                                                                           {{(isset($enrollment) && ($enrollment->basic_fee_id == $enrollmentSchedule->id)) ? 'checked' : ''}}
                                                                           name="basic_fee_id"
                                                                           value="{{$enrollmentSchedule->id}}"
                                                                           onchange="return days_per_weeks( this.value, 'YES', '{{$enrollmentSchedule->duration}}' , '{{$enrollmentSchedule->days_per_week}}')">
                                                                    <span>
                                                                &ensp; {{$enrollmentSchedule->days_per_week}} {{ucwords(strtolower($enrollmentSchedule->duration))}} Days (Per Week)
                                                                    </span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>

                                            <div class="col-sm-6">
                                                <div class="row">
                                                    <input type="hidden" name="days_count_per_week" id="days_week"
                                                           value="{{isset($enrollment) ? $enrollment->days_count_per_week : ''}}">
                                                </div>
                                            </div>
                                        </div>

                                        <br>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <h4 class="fw-semibold text-dark">Please Choose days attending for
                                                    Week <span
                                                            class="text-danger">*</span> <span
                                                            class="no_summer_camp" style="color: red;"></span></h4>
                                                @php
                                                $days_array = ['Mon','Tue','Wed','Thu','Fri'];
                                                $no_camp   = '';
                                                @endphp
                                                <div class="checkbox-inline">
                                                    @foreach($days_array as $week_day)
                                                        @if( isset( $noCamp['date_interval_week'] ) && !empty( $noCamp['date_interval_week'] ) )
                                                            @foreach( $noCamp['date_interval_week'] as $end )

                                                                @php
                                                                    $day = date("D",strtotime($end));

                                                                    if( $day == $week_day ){
                                                                        $no_camp .= $week_day.',';
                                                                        $dayTextShow =  date("m/d",strtotime($end)) . " No Camp";
                                                                        $is_no_camp = true;

                                                                    } else{
                                                                        if( $loop->first ){
                                                                            $is_no_camp = false;
                                                                            $dayTextShow = $week_day;
                                                                        }
                                                                    }
                                                                    $inputName = ($is_no_camp == false) ? 'days_attending[]' : 'no_camp_days[]';
                                                                @endphp

                                                            @endforeach
                                                        @else
                                                            @php
                                                                $is_no_camp = false;
                                                                $dayTextShow = $week_day;
                                                                $inputName = ($is_no_camp == false) ? 'days_attending[]' : 'no_camp_days[]';
                                                            @endphp
                                                        @endif
                                                        <label class="form-check form-check-custom form-check-solid form-check-inline text-gray-600">
                                                            <input onchange="return days_attending( '{{$week_day}}' );"
                                                                   type="checkbox"
                                                                   {{ (!empty($enrollment) && !empty($enrollment->days_attending) && in_array($week_day,json_decode($enrollment->days_attending))) ? 'checked' : ''}}
                                                                   name="{{$inputName}}"
                                                                   class="days_attending form-check-input border border-gray-300"
                                                                   value="{{$week_day}}"
                                                                   id="week_{{$week_day}}">
                                                            <span></span>
                                                            {!! $dayTextShow !!}
                                                        </label>
                                                    @endforeach
                                                </div>
                                                <input type="hidden" name="no_camp" value="{{ $no_camp }}">

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

                            <div class="col-lg-12 col-sm-12 col-md-12 mb-1">
                                <h3 class="text-hover-primary text-gray-900 mb-2">Choose Pre School Billing Period*</h3>
                                <div class="card notice rounded border-gray-300 border">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class=" mb-5 col-12">
                                                <div class="form-group">
                                                    <label for="default_enrollment_date" class="required form-label fs-6 fw-semibold"> Default School Year Onsite Enrollment Date:</label>
                                                    <select class="form-control form-control-sm form-control-solid" data-control="select2" data-placeholder="Select " onchange="return default_enrollment_dates( this.value );" id="default_enrollment" name="default_enrollment">
                                                        <option value="YES" {{(isset($enrollment->default_enrollment) && $enrollment->default_enrollment == 'YES') ? 'Selected' : NULL}}> YES </option>
                                                        <option value="NO" {{(isset($enrollment->default_enrollment) && $enrollment->default_enrollment == 'NO') ? 'Selected' : NULL}}> NO </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-6 col-lg-6 enrollment_date">
                                                <div class="form-group">
                                                    <label class="required form-label fs-6 fw-semibold"> Enrollment Start Date </label>
                                                    <input type="date" class="form-control form-control-sm form-control-solid datepicker_date" readonly name="enrollment_start_date" id="enrollment_start_date" placeholder="Enter enrollment_start_date" value="{{(isset($enrollment) && isset($enrollment->enrollment_start_date)) ? $enrollment->enrollment_start_date : getPreSchoolOtherFeeByKey('enrollment_start_date')}}"/>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-6 col-lg-6 enrollment_date">
                                                <div class="form-group">
                                                    <label class="required form-label fs-6 fw-semibold"> Enrollment End Date
                                                    </label>
                                                    <input type="date" class="form-control form-control-sm form-control-solid datepicker_date" readonly name="enrollment_end_date" id="enrollment_end_date" placeholder="Enter enrollment_end_date" value="{{(isset($enrollment) && isset($enrollment->enrollment_end_date)) ? $enrollment->enrollment_end_date : getPreSchoolOtherFeeByKey('enrollment_end_date')}}"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                            </div>


                            <div class="col-lg-12 col-sm-12 col-md-12 mb-1">
                                <h3 class="text-hover-primary text-gray-900 mb-2">Other Services*</h3>
                                <div class="card notice rounded border-gray-300 border">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class=" mb-5 col-12">
                                                <div class="form-group">
                                                    <label for="default_enrollment_date" class="required form-label fs-6 fw-semibold"> Potty Training</label>
                                                    <select class="form-control form-control-sm form-control-solid" data-control="select2" data-placeholder="Select "  id="potty_training" name="potty_training">
                                                        <option value="NO" {{(isset($enrollment->potty_training) && $enrollment->potty_training == 'NO') ? 'Selected' : NULL}}> NO </option>
                                                        <option value="YES" {{(isset($enrollment->potty_training) && $enrollment->potty_training == 'YES') ? 'Selected' : NULL}}> YES </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class=" mb-5 col-12">
                                                <div class="form-group">
                                                    <label for="default_enrollment_date" class="required form-label fs-6 fw-semibold">Extended Care</label>
                                                    <select class="form-control form-control-sm form-control-solid" data-control="select2" data-placeholder="Select "  id="extented_care" name="extented_care">
                                                        <option value="NONE" {{(isset($enrollment->extented_care) && $enrollment->extented_care == 'NONE') ? 'Selected' : NULL}}> None </option>
                                                        <option value="FULL_DAY" {{(isset($enrollment->extented_care) && $enrollment->extented_care == 'FULL_DAY') ? 'Selected' : NULL}}> Full Day </option>
                                                        <option value="AM" {{(isset($enrollment->extented_care) && $enrollment->extented_care == 'AM') ? 'Selected' : NULL}}> AM </option>
                                                        <option value="PM" {{(isset($enrollment->extented_care) && $enrollment->extented_care == 'PM') ? 'Selected' : NULL}}> PM </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                        </div>
                        <input type="hidden" name="student_id" value="{{$studentId}}">
                        <input type="hidden" name="is_edit" value="{{$isEdit}}">
                        <input name="record_id" type="hidden" value="{{isset($enrollment) ? $enrollment->id : NULL}}">
                        <br>

                        <hr>
                        <div class="d-flex flex-stack">
                            <div class="mr-2">
                                <a href="{{ url('preschool/'.encryptedId($studentId).'/list') }}"
                                   class="btn btn-lg btn-light-primary me-3">
                                    <span class="svg-icon svg-icon-4 me-1"><svg width="24" height="24"
                                                                                viewBox="0 0 24 24" fill="none"
                                                                                xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1"
                                                  fill="currentColor"></rect>
                                            <path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z"
                                                  fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    Back
                                </a>
                            </div>

                            <div>
                                <button type="button" class="btn btn-lg btn-success me-3 d-inline-block"
                                        id="SubmitForm">
                            <span class="indicator-label">
                                Submit
                                <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>
        <input type="hidden" id="enrollmentSchedules" name="enrollmentSchedules" value="{{json_encode($schedules->toArray())}}">
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script type="text/javascript">
        flatpickr('.datepicker_date',{
            enableTime: false,
            dateFormat: "Y-m-d",
            allowInput: true,
        });

        @if(isset($enrollment->default_enrollment) && $enrollment->default_enrollment == 'YES')
        $(".enrollment_date").hide();
        var startDate = '{{ getPreSchoolOtherFeeByKey('enrollment_start_date') }}';
        $('#enrollment_start_date').val(startDate);
        var endDate = '{{ getPreSchoolOtherFeeByKey('enrollment_end_date') }}';
        $('#enrollment_end_date').val(endDate);
        @elseif(isset($enrollment->default_enrollment) && $enrollment->default_enrollment == 'NO')
        $(".enrollment_date").show();
        @else
        $(".enrollment_date").hide();
        @endif


        $(function() {
            $(document).on('click', '#SubmitForm', function(e) {

                $('#SubmitForm').prop('disabled',true);
                $('.indicator-label').hide();
                $('.indicator-progress').show();

                let addedWeekScheduleCount = true;
                var no_of_days = $("#days_week").val();
                var basic_fee_id = $("input[name='basic_fee_id']:checked").val();


                if(addedWeekScheduleCount === false){
                    $('#SubmitForm').prop('disabled',false);
                    $('.indicator-label').show();
                    $('.indicator-progress').hide();
                }

                var days_attending = [];
                $.each($(".days_attending:checked"), function () {
                    days_attending.push($(this).val());
                });
                {{--                @if($no_camp)--}}
                        {{--                    let noCampDays = '{{$no_camp}}';--}}
                        {{--                    let daysArrayNOCamp = noCampDays.split(',')--}}
                        {{--                    daysArrayNOCamp.forEach(function(item) {--}}
                        {{--                        days_attending.push(item);--}}
                        {{--                    });--}}
                        {{--                @endif--}}
                        {{--                    days_attending = days_attending.filter(function (el) {--}}
                        {{--                                        return el != '';--}}
                        {{--                                    });--}}

                if(no_of_days == 3 || no_of_days == 4 || no_of_days == 5) {
                    if(no_of_days == 3 && days_attending.length < 3){
                        let schedule_name = checkSchedule(basic_fee_id);
                        let errorMessageForDays = 'You have selected '+schedule_name+'. Please select '+no_of_days+' weekdays.'
                        toastr.error(errorMessageForDays);
                        $('#SubmitForm').prop('disabled',false);
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        return;
                    }
                    if(no_of_days == 4 && days_attending.length < 4){
                        let schedule_name = checkSchedule(basic_fee_id);
                        let errorMessageForDays = 'You have selected '+schedule_name+'. Please select '+no_of_days+' weekdays.'
                        toastr.error(errorMessageForDays);
                        $('#SubmitForm').prop('disabled',false);
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        return;
                    }
                    if(no_of_days == 5 && days_attending.length < 5){
                        let schedule_name = checkSchedule(schedule_id);
                        let errorMessageForDays = 'You have selected '+schedule_name+'. Please select '+no_of_days+' weekdays.'
                        toastr.error(errorMessageForDays);
                        $('#SubmitForm').prop('disabled',false);
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        return;
                    }
                }

                @if($isEdit == '1')
                    Swal.fire({
                    icon: 'warning',
                    title: 'Please make sure that you click on the Confirm button at the end of the enrollment process.Otherwise your changes will NOT take effect!',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Yes'
                }).then(function (result) {
                    if (result.isConfirmed) {
                        submitForm()
                    } else {
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        return false;
                    }
                });
                @else
                    submitForm()
                @endif


            });
        });

        function checkSchedule(scheduleId) {
            let schedules = $('#enrollmentSchedules').val();
            let schedulesJson = JSON.parse(schedules);
            if(scheduleId && schedulesJson.length > 0) {
                let schedule = schedulesJson.find(obj => {
                            return obj.id === parseInt(scheduleId)
                        });
                if(typeof schedule === 'object' && !Array.isArray(schedule) && schedule !== null){
                    return schedule.days_per_week+' '+ schedule.duration + ' Days (Per Week)';
                }
                return null;
            }
            return null;
        }

        function submitForm(){
            $.ajax ({
                type : 'POST',
                url : '{{ url("preschool/store") }}',
                processData : false,
                contentType : false,
                data : new FormData($('#StudentEnrollmentForm')[0]),
                dataType : 'json',

                success: function (data) {
                    $('.indicator-label').show();
                    $('.indicator-progress').hide();
                    $('#SubmitForm').prop('disabled',false);
                    if(data.success) {
                        toastr.success(data.success);
                        setTimeout(function () {
                            window.location.href = "{{ url('preschool/'.encryptedId($studentId).'/list/') }}";
                        }, 1500);

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

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

        function default_enrollment_dates( value ){
            if( value == 'NO' ){
                $(".enrollment_date").show();
            } else {
                $(".enrollment_date").hide();
            }
        }


        function days_per_weeks(value, package, schedule_session, no_of_days,onloadCheck = true) {
            $("#days_week").val(no_of_days);
            if(onloadCheck){
                $(".days_attending").prop('checked', false);
                $(".days_attending").removeAttr("disabled");
            }
            var inputs = document.querySelectorAll('.days_attending');
            if (no_of_days == 5) {
                var j = 0;
                for (var i = 0; i < no_of_days; i++) {
                    inputs[j].checked = true;
                    j++;
                }
            }
        }

        function days_attending(id = '') {
            var no_of_days = $('#days_week').val();
            if ($(":checkbox[name='days_attending[]']:checked").length == no_of_days) {
                $(':checkbox[name="days_attending[]"]:not(:checked)').prop('disabled', true);
            } else {
                $(':checkbox[name="days_attending[]"]:not(:checked)').prop('disabled', false);
            }

        }
    </script>
@endsection