@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)}}
                                Elective Enrollment</h3>
                        </div>
                    </div>
                </div>

                <div class="card-body py-4">
                    <form id="StudentElectiveEnrollmentForm" name="StudentElectiveEnrollmentForm" class="pt-1 check_postion">
                        {{ csrf_field() }}
                        @php
                            $enrollmentData= array();
                            $isSession = session()->has('electiveElectiveClassStore');
                            if (session()->has('electiveElectiveClassStore')){
                                $enrollmentData = session()->get('electiveElectiveClassStore');
                            }
                            $isEdit = false;
                            if(session()->has('isEditAfterSchoolElective') && session()->get('isEditAfterSchoolElective') == true){
                               $isEdit = true;
                            }

                            $enrollmentDataForm = array();
                            if (session()->has('electiveFormStore')){
                                $enrollmentDataForm = session()->get('electiveFormStore');
                            }
                        @endphp
                        <input type="hidden" name="student_id" value="{{$studentId}}">
                        <br>
                        @if(isset($activities) && $activities->count())
                            @foreach($activities as $key => $activity)
                                @if(count($activity))

                                    <div class="col-sm-12 mt-4">
                                        <h2 class="mb-4 badge badge-success"
                                            style="background-color: #000 !important; font-weight: bolder !important;">
                                            <span> {{ $key }} </span>
                                        </h2>
                                    </div>
                                    <div class="col-sm-12 mb-2">
                                        <div class="card notice rounded border-gray-300 border">
                                            <div class="card-body">
                                                <table class="table table-row-bordered align-middle gy-3 gs-9">
                                                    <thead class="border-bottom border-gray-200 fs-6 text-gray-600 fw-bold bg-light bg-opacity-75">
                                                    <tr>
                                                        <th>Select</th>
                                                        <th>Activity</th>
                                                        <th>Timing</th>
                                                        <th>Price</th>
                                                        <th>Availability</th>
                                                    </tr>
                                                    </thead>

                                                    <tbody class="fw-semibold text-gray-600">
                                                    @foreach($activity as $cat => $item)
                                                        <tr>
                                                            <td>
                                                                <div class="col-lg-12">
                                                                    <label class="form-check form-check-custom form-check-solid form-check-inline">
                                                                        <input
                                                                                onchange="return check_time_exist('{{$item['id']}}')"
                                                                                type="checkbox"
                                                                                {{(isset($enrollmentData['class_codes']) && in_array($item['id'],$enrollmentData['class_codes'])) ? 'checked' : ''}}
                                                                                name="class_codes[]"
                                                                                class="form-check-input border border-gray-300 class_codes"
                                                                                value="{{$item['id']}}"
                                                                                {{($isEdit == true) ? 'disabled readonly' : ''}}
                                                                                id="class_codes_{{$item['id']}}">
                                                                    </label>


                                                                </div>
                                                            </td>

                                                            <td>{{$item['class_title']}}
                                                                @if($item['is_multiple_speciality_camp_discount'] == "YES")
                                                                    <div><b class="badge badge-info">Eligible
                                                                            for Multi-Camp
                                                                            Discount
                                                                        </b></div>
                                                                @endif
                                                            </td>

                                                            <td class="w-225px">
                                                                @if(isset($item['monday']))
                                                                    <br>
                                                                @endif
                                                                {{isset($item['monday']) ? weekTimeFormat("Mon",$item['monday']) : ''}}

                                                                @if(isset($item['tuesday']))
                                                                    <br>
                                                                @endif
                                                                {{isset($item['tuesday']) ? weekTimeFormat("Tue",$item['tuesday']) : ''}}

                                                                @if(isset($item['wednesday']))
                                                                    <br>
                                                                @endif
                                                                {{isset($item['wednesday']) ? weekTimeFormat("Wed",$item['wednesday']) : ''}}

                                                                @if(isset($item['thursday']))
                                                                    <br>
                                                                @endif
                                                                {{isset($item['thursday']) ? weekTimeFormat("Thu",$item['thursday']) : ''}}

                                                                @if(isset($item['friday']))
                                                                    <br>
                                                                @endif
                                                                {{isset($item['friday']) ? weekTimeFormat("Fri",$item['friday']) : ''}}

                                                            </td>
                                                            <td>
                                                                ${{isset($item['class_fee']) ? $item['class_fee'] : 0}}</td>
                                                            <td>
                                                                <h5 class="text-success">Open</h5>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                @endif
                            @endforeach
                        @else
                            <div class=" col-sm-12 mt-4">
                                <div class="card notice rounded border-gray-300 border">
                                    <div class="card-body fw-semibold text-dark text-uppercase text-center">
                                        No class record found.
                                    </div>
                                </div>
                            </div>
                        @endif

                        <hr>
                        <div class="d-flex flex-stack">
                            <div class="mr-2">
                                <a href="{{ url('after-school/'.encryptedId($studentId).'/elective-form') }}"
                                   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">
                                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>

    <div class="modal fade" id="firstModalErrorClass" data-backdrop="static" tabindex="-1" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Following classes have time conflict</h5>
                </div>
                <div class="modal-body" id="htmlErrorClass">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#firstModalErrorClass').modal('hide')">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script type="text/javascript">
        $(function () {
            $(document).on('click', '#SubmitForm', function (e) {
                $('.indicator-label').hide();
                $('.indicator-progress').show();
                $.ajax({
                    type: 'POST',
                    url: '{{ url("after-school/elective-classes") }}',
                    processData: false,
                    contentType: false,
                    data: new FormData($('#StudentElectiveEnrollmentForm')[0]),
                    dataType: 'json',

                    success: function (data) {
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        if (data.success) {
                            toastr.success(data.success);
                            setTimeout(function () {
                                window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/elective-info') }}";
                            }, 1500);

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

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

            });
        });

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

            if (checked_class_id.includes(parseInt(class_id))) {
                checked_class_id = checked_class_id.filter(function (e) {
                    return e !== parseInt(class_id)
                })
            }
            var v_token = "{{csrf_token()}}";

            $.ajax({
                type: 'POST',
                url: '{{ url("after-school/enrollment/check-time-exist") }}',
                data: {
                    _token:v_token,
                    class_id: class_id,
                    checked_class_id: checked_class_id
                },
                dataType: 'json',

                success: function (data) {
                    if (data.success) {
                        check_attending_days(class_id);
                    } else if (data.failure) {
                        $('#class_codes_'+class_id ).prop('checked', false);
                        $('#htmlErrorClass').html(data.html);
                       $('#firstModalErrorClass').modal('show')
                    }
                }
            });

            return true;
        }

        function check_attending_days(class_id) {
            let enrollment_start_date = '{{isset($enrollmentDataForm['enrollment_end_date']) ? $enrollmentDataForm['enrollment_start_date'] : getConfigurationValueByKey('ELECTIVE_CLASSES_START_DATE')}}';
            let enrollment_end_date = '{{isset($enrollmentDataForm['enrollment_end_date']) ? $enrollmentDataForm['enrollment_end_date'] : getConfigurationValueByKey('ELECTIVE_CLASSES_END_DATE')}}';
            let student_id = '{{$studentId}}';
            var v_token = "{{csrf_token()}}";

            $.ajax({
                type: 'POST',
                url: '{{ url("after-school/enrollment/check-attending-days") }}',
                data: {
                    _token:v_token,
                    class_id: class_id,
                    enrollment_start_date: enrollment_start_date,
                    enrollment_end_date: enrollment_end_date,
                    student_id: student_id
                },
                dataType: 'json',

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

                    } else if (data.failure) {
                        $('#class_codes_'+class_id ).prop('checked', false);
                        $('#staticBackdropLabel').text('Following classes have attending days conflict');
                        $('#htmlErrorClass').html(data.html);
                        $('#firstModalErrorClass').modal('show')
                    }
                }
            });

            return true;
        }
    </script>
@endsection