@extends('layouts.app')
@section('css')
    <style>
        /* Variables */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 20px;
            -webkit-font-smoothing: antialiased;
            display: flex;
            width: 100vw;
        }

        form {
            width: 30vw;
            min-width: 100%;
            align-self: center;
            box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
            0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
            border-radius: 7px;
            padding: 40px;
        }

        .StripeElement {
            border-bottom: 1px solid rgba(50, 50, 93, 0.1);
            box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
            border-radius: 7px;
            padding: 10px;
        }

        .hidden {
            display: none;
        }

        button {
            background: #5469d4;
            font-family: Arial, sans-serif;
            color: #ffffff;
            border-radius: 4px;
            border: 0;
            padding: 12px 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: block;
            transition: all 0.2s ease;
            box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
        }

        button:hover {
            filter: contrast(115%);
        }

        button:disabled {
            opacity: 0.5;
            cursor: default;
        }

        .spinner,
        .spinner:before,
        .spinner:after {
            border-radius: 50%;
        }

        .spinner {
            color: #ffffff;
            font-size: 22px;
            text-indent: -99999px;
            margin: 0px auto;
            position: relative;
            width: 20px;
            height: 20px;
            box-shadow: inset 0 0 0 2px;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
        }

        .spinner:before,
        .spinner:after {
            position: absolute;
            content: "";
        }

        .spinner:before {
            width: 10.4px;
            height: 20.4px;
            background: #5469d4;
            border-radius: 20.4px 0 0 20.4px;
            top: -0.2px;
            left: -0.2px;
            -webkit-transform-origin: 10.4px 10.2px;
            transform-origin: 10.4px 10.2px;
            -webkit-animation: loading 2s infinite ease 1.5s;
            animation: loading 2s infinite ease 1.5s;
        }

        .spinner:after {
            width: 10.4px;
            height: 10.2px;
            background: #5469d4;
            border-radius: 0 10.2px 10.2px 0;
            top: -0.1px;
            left: 10.2px;
            -webkit-transform-origin: 0px 10.2px;
            transform-origin: 0px 10.2px;
            -webkit-animation: loading 2s infinite ease;
            animation: loading 2s infinite ease;
        }
    </style>
@endsection
@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)}} Onsite Enrollment</h3>
                        </div>
                    </div>
                </div>

                <div class="card-body py-4">
{{--                    <form id="StudentElectiveEnrollmentForm" name="StudentElectiveEnrollmentForm" class="pt-1">--}}
{{--                        {{ csrf_field() }}--}}
                        <div class="col-lg-12 col-sm-12 col-md-12 mb-1">
                            <h4 class="fw-semibold text-dark">Preview of After School Enrollment </h4>
                            <h6 class="mb-4 badge badge-success text-red"><span>Onsite Details</span>
                            </h6>

                        </div>

                        <div class="col-lg-12 col-sm-12 col-md-12 mb-1">
                            <div class="card notice rounded border-gray-300 border">
                                <div class="card-body">
                                    <table cellpadding="1" cellspacing="1" class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>Student Name</th>
                                            <th>Grade</th>
                                            <th>Days Attending</th>
                                            <th>School District</th>
                                            <th>Day School</th>
                                            <th>Transportation?(Y/N) </th>
                                            <th> {{ (session('tmpProgram') == 'PTK')?'Potty Training':'Language ' }} </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @php

                                            $checkedSourceId = 0;
                                            if (isset($enrollment->paymentSources) && $enrollment->paymentSources()->exists()) {
                                                $checkedSource = $enrollment->paymentSources()->first();
                                                $checkedSourceId = $checkedSource->pivot->payment_source_id;
                                            }

                                            if(session('tmpProgram') == 'PTK'){
                                                $enrollmentDataExtra = [
                                                    "long_term_leave" => isset($enrollment->preSchoolTk->long_term_leave) ? $enrollment->preSchoolTk->long_term_leave : '',
                                                    "weekly_attendance" => isset($enrollment->preSchoolTk->weekly_attendance) ? json_decode($enrollment->preSchoolTk->weekly_attendance) : '',
                                                    "school_districts" => isset($enrollment->preSchoolTk->school_districts) ? $enrollment->preSchoolTk->school_districts : '',
                                                    "day_school" => isset($enrollment->preSchoolTk->day_school) ? $enrollment->preSchoolTk->day_school : '',
                                                    "transportation_service_from_yf" => isset($enrollment->preSchoolTk->transportation_service_from_yf) ? $enrollment->preSchoolTk->transportation_service_from_yf : '',
                                                    "lunch_fee" => isset($enrollment->preSchoolTk->lunch_fee) ? $enrollment->preSchoolTk->lunch_fee : '',
                                                    "potty_training" => isset($enrollment->preSchoolTk->potty_training) ? $enrollment->preSchoolTk->potty_training : '',
                                                    "flat_fee" => isset($enrollment->preSchoolTk->flat_fee) ? $enrollment->preSchoolTk->flat_fee : '',
                                                    "student_id" => isset($enrollment->student_id) ? $enrollment->student_id : '',
                                                    "enrollment_id" => isset($enrollment->id) ? $enrollment->id : "",
                                                    "parent_id" => isset($enrollment->student->parent_id) ? $enrollment->student->parent_id : '',
                                                    "payment_source_id" => $checkedSourceId,
                                                    "payment_check" => isset($enrollment->payment_check) ? $enrollment->payment_check : '',
                                                ];

                                            } else {
                                                $enrollmentDataExtra = [
                                                    "long_term_leave" => isset($enrollment->afterSchoolOnsite->long_term_leave) ? $enrollment->afterSchoolOnsite->long_term_leave : '',
                                                    "weekly_attendance" => isset($enrollment->afterSchoolOnsite->weekly_attendance) ? json_decode($enrollment->afterSchoolOnsite->weekly_attendance) : '',
                                                    "school_districts" => isset($enrollment->afterSchoolOnsite->school_districts) ? $enrollment->afterSchoolOnsite->school_districts : '',
                                                    "day_school" => isset($enrollment->afterSchoolOnsite->day_school) ? $enrollment->afterSchoolOnsite->day_school : '',
                                                    "transportation_service_from_yf" => isset($enrollment->afterSchoolOnsite->transportation_service_from_yf) ? $enrollment->afterSchoolOnsite->transportation_service_from_yf : '',
                                                    "lunch_fee" => isset($enrollment->afterSchoolOnsite->lunch_fee) ? $enrollment->afterSchoolOnsite->lunch_fee : '',
                                                    "foreign_language" => isset($enrollment->afterSchoolOnsite->foreign_language) ? $enrollment->afterSchoolOnsite->foreign_language : '',
                                                    "flat_fee" => isset($enrollment->afterSchoolOnsite->flat_fee) ? $enrollment->afterSchoolOnsite->flat_fee : '',
                                                    "student_id" => isset($enrollment->student_id) ? $enrollment->student_id : '',
                                                    "enrollment_id" => isset($enrollment->id) ? $enrollment->id : "",
                                                    "parent_id" => isset($enrollment->student->parent_id) ? $enrollment->student->parent_id : '',
                                                    "payment_source_id" => $checkedSourceId,
                                                    "payment_check" => isset($enrollment->payment_check) ? $enrollment->payment_check : '',
                                                ];
                                            }

                                            $enrollmentData = [
                                                "default_enrollment" => isset($enrollment->default_enrollment) ? $enrollment->default_enrollment : '',
                                                "enrollment_start_date" => isset($enrollment->enrollment_start_date) ? $enrollment->enrollment_start_date : '',
                                                "enrollment_end_date" => isset($enrollment->enrollment_end_date) ? $enrollment->enrollment_end_date : '',
                                                "previous_grade" => isset($enrollment->previous_grade) ? $enrollment->previous_grade : '',
                                                "current_grade" => isset($enrollment->current_grade) ? $enrollment->current_grade : "",
                                                "addon_grades" => isset($enrollment->addon_grades) ? $enrollment->addon_grades : '',
                                                "student_id" => isset($enrollment->student_id) ? $enrollment->student_id : '',
                                                "record_id" => isset($enrollment->id) ? $enrollment->id : '',
                                            ];

                                            $days = array();
                                            if (isset($enrollmentDataExtra)){
                                                if (isset($enrollmentDataExtra['long_term_leave']) && $enrollmentDataExtra['long_term_leave'] == "YES"){
                                                    $days = ['Mon','Tue','Wed','Thu','Fri'];
                                                }else{
                                                    if ((isset($enrollmentDataExtra['weekly_attendance']))){
                                                        if ($enrollmentDataExtra['weekly_attendance']){
                                                            $days = $enrollmentDataExtra['weekly_attendance'];
                                                        }
                                                    }
                                                }
                                            }

                                            if ((isset($enrollmentData['current_grade']))){
                                                $selectedGrade = getCurrentGradeAfterSchool($enrollmentData['current_grade']);
                                            }
                                            if ((isset($enrollmentDataExtra['day_school']))){
                                                $selectedDaySchool = getSchoolDayAfterSchool($enrollmentDataExtra['day_school']);
                                            }
                                            if ((isset($enrollmentDataExtra['school_districts']))){
                                                $selectedSchoolDistrict = getSchoolDistrictAfterSchool($enrollmentDataExtra['school_districts']);
                                            }
                                            $isEdit = false;
                                            if(session()->has('isEditAfterSchoolOnsite') && session()->get('isEditAfterSchoolOnsite') == true){
                                               $isEdit = true;
                                            }
                                        @endphp
                                        <tr>
                                            <td><div class="m_table_label">Student Name</div> <div class="table_value">{{ucwords($student->first_name).' '.ucwords($student->last_name)}}</div></td>
                                            <td><div class="m_table_label">Grade</div> <div class="table_value">{{isset($selectedGrade->name) ? $selectedGrade->name : NULL}}</div></td>
                                            <td><div class="m_table_label">Days Attending</div> <div class="table_value">{{implode(',',$days)}}</div></td>
                                            <td><div class="m_table_label">School District</div> <div class="table_value">{{isset($selectedSchoolDistrict->school_district_name) ? $selectedSchoolDistrict->school_district_name : NULL }} </div></td>
                                            <td><div class="m_table_label">Day School</div> <div class="table_value">{{isset($selectedDaySchool->school_name) ? $selectedDaySchool->school_name : NULL }}</div></td>
                                            <td><div class="m_table_label">item1</div> <div class="table_value">{{isset($enrollmentDataExtra['transportation_service_from_yf']) ? $enrollmentDataExtra['transportation_service_from_yf'] : NULL }}</div></td>
                                            <td>
                                                <div class="m_table_label">{{ (session('tmpProgram') == 'PTK')?'Potty Training':'Language' }}</div>
                                                <div class="table_value">
                                                    {{ (session('tmpProgram') == 'PTK')?(isset($enrollmentDataExtra['potty_training'])?$enrollmentDataExtra['potty_training']:NULL) : (isset($enrollmentDataExtra['foreign_language'])?$enrollmentDataExtra['foreign_language']:NULL) }}
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <br>
                        </div>
{{--                        <input type="hidden" name="student_id" value="{{$studentId}}">--}}
{{--                        <input type="hidden" name="record_id" value="{{(isset($enrollmentDataExtra['enrollment_id'])) ? $enrollmentDataExtra['enrollment_id'] : NULL}}">--}}
{{--                    --}}

{{--                        <hr>--}}
{{--                        <div class="d-flex flex-stack">--}}
{{--                            <div class="mr-2">--}}
{{--                                <a href="{{ url('/after-school/'.encryptedId($studentId).'/onsite-info-afterschool') }}"--}}
{{--                                   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">--}}
{{--                                Confirm--}}
{{--                                <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 class="card-body py-4">
                    <div class="row">
                        <div class="col-lg-6 col-sm-12 col-md-12 mb-5">
                            <form action="{{url('after-school/payment-source-store')}}" id="AddCardForm" method="POST"
                                  class="pt-1">
                                {{ csrf_field() }}
                                @php
                                    $isEdit = false;
                                    if(session()->has('isEditAfterSchoolOnsite') && session()->get('isEditAfterSchoolOnsite') == true){
                                       $isEdit = true;
                                    }
                                @endphp
                                <div class="row">
                                    <div class="col-12 mb-5">
                                        <div class="form-row">
                                            <label for="card-element " style="width: 100% !important;">
                                                <div class="form-label fs-6 fw-semibold"
                                                     style="margin-bottom: 10px !important; margin-top: 15px !important;">
                                                    Credit or Debit Card Info
                                                </div>
                                                <div id="card-element"></div>
                                            </label>

                                            <div id="card-errors" role="alert"></div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="student_id" value="{{$studentId}}">
                                <input type="hidden" name="parent_id" value="{{$student->parent_id}}">
                                <input type="hidden" name="record_id" value="{{(isset($enrollmentData['record_id'])) ? $enrollmentData['record_id'] : NULL}}">
                                <button class="btn btn-sm btn-lg btn-success me-3 d-inline-block" id="finalButton">
                                    <span class="hidden" id="spinner"><i class="fas fa-2x fa-spinner fa-spin"></i></span>
                                    <span id="button-text">Add Card</span>
                                </button>
                            </form>

                        </div>
                        <div class="col-lg-6 col-sm-12 col-md-12 mb-5 align-content-center">
                            <div class="border-1 border-dashed border-primary p-8 mt-sm-5 mt-lg-15 mt-md-15 text-center text-black-50">
                                Your card will not be charged until your invoice is due and
                                payment has not been received through other methods
                                after one or more requests for payment
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body py-2">
                    <form id="StudentElectiveEnrollmentForm" name="StudentElectiveEnrollmentForm" class="pt-1">
                        {{ csrf_field() }}
                        <div class="card card-xxl-stretch ">
                            <div class="card-header border-0 align-content-center">
                                <h3 class="card-title text-center fw-bold text-gray-800 fs-2">Select One Card </h3>
                            </div>

                            <input type="hidden" name="student_id" value="{{$studentId}}">
                            <input type="hidden" name="parent_id" value="{{$student->parent_id}}">
                            <input type="hidden" name="record_id"
                                   value="{{(isset($enrollmentData['record_id'])) ? $enrollmentData['record_id'] : NULL}}">

                            <div class="card-body py-0">
                                <div class="table-responsive">

                                    <table class="table align-middle table-row-dashed fs-6 gy-5"
                                           id="kt_table_parent_cards">
                                        <thead>
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                            <th class="min-w-30px"></th>
                                            <th class="min-w-150px">Card</th>
                                            <th class="min-w-100px">Expire Month</th>
                                            <th class="min-w-100px">Expire Year</th>
                                            <th class="min-w-125px">Status</th>
                                            <th class="min-w-80px">Action</th>
                                        </tr>
                                        </thead>
                                        @php
                                            $checkedSourceId = 0;
                                            if (isset($enrollmentDataExtra['payment_source_id'])){
                                                $checkedSourceId = $enrollmentDataExtra['payment_source_id'];
                                            }
                                        @endphp
                                        <tbody class="fw-semibold text-gray-600">
                                        @foreach($paymentSources as $index => $source)
                                            <tr>
                                                <th class="min-w-30px">
                                                    <div class="m_table_label"></div>
                                                    <div class="table_value"><input type="radio"
                                                                                    name="payment_source_id"
                                                                                    class="check_card form-check-input border border-primary"
                                                                                    @if (!$index && !$checkedSourceId)
                                                                                        {!! "checked" !!}
                                                                                    @elseif($checkedSourceId == $source->id || $source->is_primary == 1)
                                                                                        {!! "checked" !!}
                                                                                    @endif value="{{$source->id}}" {{($isEdit == true) ? 'disabled' : ''}}>
                                                    </div>
                                                </th>
                                                <th class="min-w-150px">
                                                    <div class="m_table_label">CARD</div>
                                                    <div class="table_value">{!! getCardIcon($source->brand) !!} {{$source->last_four}}</div>
                                                </th>
                                                <th class="min-w-100px">
                                                    <div class="m_table_label">EXPIRE MONTH</div>
                                                    <div class="table_value">{{$source->exp_month}}</div>
                                                </th>
                                                <th class="min-w-100px">
                                                    <div class="m_table_label">EXPIRE YEAR</div>
                                                    <div class="table_value">{{$source->exp_year}}</div>
                                                </th>
                                                <th class="min-w-125px">
                                                    <div class="m_table_label">STATUS</div>
                                                    <div class="table_value">{!! getStatusIcon($source->status) !!}</div>
                                                </th>
                                                <th class="min-w-125px">
                                                    <div class="m_table_label">ACTION</div>
                                                    <div class="table_value"><a href="javascript:void(0)"
                                                                                class="btn btn-sm btn-secondary p-3 text-center  m-1 trash"
                                                                                data-id="{{$source->id}}"
                                                                                title="Delete"> <i
                                                                    class="fa-solid fa-xl fa-trash text-danger"></i></a>
                                                    </div>
                                                </th>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="row py-8">
                            <div class="col-sm-12 col-md-12 col-lg-12 mb-5">
                                <label class="required form-label fs-6 fw-semibold">How will you pay?</label>
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 mb-3">
                                <div class="radio-inline">
                                    <label class="form-check form-check-custom form-check-solid text-hover-primary justify-content text-gray-900">
                                        <input class="form-check-input border border-gray-600 mr-4"
                                               type="radio"
                                               {{(isset($enrollmentDataExtra['payment_check']) &&  $enrollmentDataExtra['payment_check'] === 'ZELLE_CHECK') ? 'checked' : ''}}
                                               {{($isEdit == true) ? 'disabled' : ''}}
                                               id="payment_check" name="payment_check"
                                               value="ZELLE_CHECK">
                                        <span class="px-4 text-gray-900">
                                    I will pay by Zelle or check. <br> Your card will not be charged until after your invoice is due, and you will have sufficient opportunity to address your billing concerns.  <br>You agree for you credit card to charged after each invoice is due, and agree t pay an additional 3% credit card fees.
                                </span>
                                    </label>
                                </div>
                            </div>
                            <br>
                            <div class="col-sm-12 col-md-12 col-lg-12 mb-5 mt-6">
                                <div class="radio-inline">
                                    <label class="form-check form-check-custom form-check-solid text-hover-primary justify-content text-gray-900">
                                        <input class="form-check-input border border-gray-600 mr-4"
                                               type="radio"
                                               {{(isset($enrollmentDataExtra['payment_check']) &&  $enrollmentDataExtra['payment_check'] === 'CREDIT_CARD') ? 'checked' : ''}}
                                               {{($isEdit == true) ? 'disabled' : ''}}
                                               id="payment_check" name="payment_check"
                                               value="CREDIT_CARD">
                                        <span class="px-4 text-gray-900">
                                    I authorize Yang Fan to charge my card when each invoice is due and agree to pay an additional 3% credit card fees.<br> Your invoice (including an additional 3% credit card fees) will be paid automatically against your credit card on file when due.<br>  You still will be sent invoices, and still can address billing concerns and correct billing errors after the payment by credit crad.
                                </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="d-flex flex-stack py-8">
                        <div class="mr-2">
                            <a href="{{ url('/after-school/'.encryptedId($studentId).'/onsite-info-afterschool?record_id='.((isset($enrollmentData['record_id'])) ? $enrollmentData['record_id'] : NULL)) }}"
                               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>
                            @if(session('role') != 'PARENT')
                                <button type="button" onclick="storeConfirmEnrollment()"
                                   class="btn btn-lg btn-info me-3" id="confirm-button">
                                    <span class="indicator-label">
                                        Skip Credit Card Info & Confirm
                                    </span>
                                    <span class="indicator-progress">
                                                Please wait... <span
                                                class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            @endif
                            <button type="button" class="btn btn-lg btn-success me-3 d-inline-block"
                                    id="SubmitForm">
                                            <span class="indicator-label">
                                                Confirm
                                                <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>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        @if(session('error-stripe'))
        let messageErrorStripe = '{{ session('error-stripe') }}';
        toastr.error(messageErrorStripe);
        @endif
        $(document).on('click', '.trash', function(e) {
            e.preventDefault();
            deleteConfirmation($(this).attr('data-id'));
        });
        var stripePublicKey = '{{config('services.stripe.public_key')}}';
        var stripe = Stripe(stripePublicKey);

        var elements = stripe.elements();

        var style = {
            base: {
                iconColor: '#7e8299',
                color: '#000',
                fontWeight: '500',
                fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
                fontSize: '16px',
                fontSmoothing: 'antialiased',
                ':-webkit-autofill': {
                    color: '#fce883',
                },
                '::placeholder': {
                    color: '#7e8299',
                },
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

        var card = elements.create('card', {style: style});

        card.mount('#card-element');

        card.addEventListener('change', function (event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        var form = document.getElementById('AddCardForm');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            setLoading(true);
            stripe.createToken(card).then(function (result) {
                if (result.error) {
                    setLoading(false);
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            var form = document.getElementById('AddCardForm');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            form.submit();
        }

        function setLoading(isLoading) {
            if (isLoading) {
                document.querySelector("#finalButton").disabled = true;
                document.querySelector("#spinner").classList.remove("hidden");
                // document.querySelector("#button-text").classList.add("hidden");
            } else {
                document.querySelector("#finalButton").disabled = false;
                document.querySelector("#spinner").classList.add("hidden");
                // document.querySelector("#button-text").classList.remove("hidden");
            }
        }


        {{--$(document).on('click', '#SubmitForm', function (e) {--}}
        {{--    let sourceCount = '{{$paymentSources->count()}}'--}}
        {{--    if (sourceCount == 0){--}}
        {{--        toastr.error('Please add at least one card.');--}}
        {{--        return;--}}
        {{--    }--}}
        {{--    let student_id = $("input[name=student_id]").val();--}}
        {{--    let record_id = $("input[name=record_id]").val();--}}
        {{--    let parent_id = $("input[name=parent_id]").val();--}}
        {{--    let checkboxValue = $('input[name="payment_source_id"]:checked').val();--}}
        {{--    if(!checkboxValue){--}}
        {{--        toastr.error('Please select one card to use.');--}}
        {{--        return;--}}
        {{--    }--}}
        {{--    let v_token = "{{csrf_token()}}";--}}
        {{--    --}}{{--let backUrl = "{{ url('/after-school/'.encryptedId($studentId).'/onsite-form') }}";--}}
        {{--    let backUrl = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";--}}
        {{--    --}}{{--let backUrl = "{{ url('/after-school/'.encryptedId($studentId).'/onsite-info-afterschool') }}";--}}

        {{--    $('.indicator-label').hide();--}}
        {{--    $('.indicator-progress').show();--}}
        {{--    let isEdit = false;--}}
        {{--    @if(session()->has('isEditAfterSchoolOnsite') && session()->get('isEditAfterSchoolOnsite') == true)--}}
        {{--        isEdit = true;--}}
        {{--    @endif--}}
        {{--    if (isEdit) {--}}
        {{--        window.location.href = backUrl;--}}
        {{--        return;--}}
        {{--    }--}}
        {{--    $.ajax({--}}
        {{--        type: 'POST',--}}
        {{--        url: '{{ url("after-school/parent-primary-source-store") }}',--}}
        {{--        data: {--}}
        {{--            _token:v_token,--}}
        {{--            student_id: student_id,--}}
        {{--            record_id: record_id,--}}
        {{--            parent_id: parent_id,--}}
        {{--            payment_source_id: checkboxValue,--}}
        {{--        },--}}
        {{--        dataType: 'json',--}}

        {{--        success: function (data) {--}}
        {{--            $('.indicator-label').show();--}}
        {{--            $('.indicator-progress').hide();--}}
        {{--            if (data.success) {--}}
        {{--                toastr.success(data.success);--}}
        {{--                setTimeout(function () {--}}
        {{--                    window.location.href = backUrl--}}
        {{--                }, 1500);--}}

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

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

        function deleteConfirmation(id){
            Swal.fire({
                icon: 'warning',
                title: 'Are you sure you want to delete this record?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {

                    window.location.href = "{{ url('after-school',$studentId) }}/" + id + "/delete-source" ;
                } else {
                    return false;
                }
            });
        }

    </script>
    <script type="text/javascript">

        $(function() {
            $(document).on('click', '#SubmitForm', function(e) {
                let sourceCount = '{{$paymentSources->count()}}'
                if (sourceCount == 0){
                    toastr.error('Please add at least one card.');
                    return;
                }
                let checkboxValue = $('input[name="payment_source_id"]:checked').val();
                if(!checkboxValue){
                    toastr.error('Please select one card to use.');
                    return;
                }
                let checkboxValuePayment = $('input[name="payment_check"]:checked').val();
                if(!checkboxValuePayment){
                    toastr.error('Please select one payment check.');
                    return;
                }
                $('.indicator-label').hide();
                $('.indicator-progress').show();
                let isEdit = false;
                @if(session()->has('isEditAfterSchoolOnsite') && session()->get('isEditAfterSchoolOnsite') == true)
                    isEdit = true;
                @endif
                if (isEdit) {
                    window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";
                    return;
                }
                $.ajax ({
                    type : 'POST',
                    url : '{{ url("after-school/onsite-summary-store") }}',
                    processData : false,
                    contentType : false,
                    data : new FormData($('#StudentElectiveEnrollmentForm')[0]),
                    dataType : 'json',

                    success: function (data) {
                        $('.indicator-label').show();
                        $('.indicator-progress').hide();
                        if(data.success) {
                            storePaymentSource(data.record_id);
                            // toastr.success('Enrollment is confirmed.!');
                            {{--setTimeout(function () {--}}
                            {{--    --}}{{--window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";--}}
                            {{--    window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/payment-source') }}";--}}
                            {{--}, 1500);--}}

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

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

                            toastr.error(htmlError);
                            setTimeout(function () {
                                window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";
                            }, 1500);
                        }
                    }
                });

            });
        });

        function storeConfirmEnrollment(){
            $('#confirm-button').prop("disabled", true);
            $('.indicator-label').hide();
            $('.indicator-progress').show();
            let isEdit = false;
            @if(session()->has('isEditAfterSchoolOnsite') && session()->get('isEditAfterSchoolOnsite') == true)
                isEdit = true;
            @endif
            if (isEdit) {
                window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";
                return;
            }
            $.ajax ({
                type : 'POST',
                url : '{{ url("after-school/onsite-summary-store?skip=1") }}',
                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('Enrollment is confirmed.!');
                        setTimeout(function () {
                            window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";
                        }, 1500);
                        $('#confirm-button').prop("disabled", false);
                    } else if (data.failure) {
                        let htmlError = '';
                        $.each(data.failure, function(index, value) {
                            htmlError += '<li>'+value+'</li>';
                        });

                        toastr.error(htmlError);
                        $('#confirm-button').prop("disabled", false);
                    } else if (data.failure_enrollment) {
                        let htmlError = '';
                        $.each(data.failure, function(index, value) {
                            htmlError += '<li>'+value+'</li>';
                        });

                        toastr.error(htmlError);
                        setTimeout(function () {
                            window.location.href = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";
                        }, 1500);
                        $('#confirm-button').prop("disabled", false);
                    }
                }
            });
        }

        function storePaymentSource(record_id){
            let sourceCount = '{{$paymentSources->count()}}'
            if (sourceCount == 0){
                toastr.error('Please add at least one card.');
                return;
            }
            $("input[name=record_id]").val(record_id);
            let student_id = $("input[name=student_id]").val();
            // let record_id = $("input[name=record_id]").val();
            let parent_id = $("input[name=parent_id]").val();
            let payment_check = $('input[name="payment_check"]:checked').val();
            let checkboxValue = $('input[name="payment_source_id"]:checked').val();
            if(!checkboxValue){
                toastr.error('Please select one card to use.');
                return;
            }
            let v_token = "{{csrf_token()}}";
            {{--let backUrl = "{{ url('/after-school/'.encryptedId($studentId).'/onsite-form') }}";--}}
            let backUrl = "{{ url('/after-school/'.encryptedId($studentId).'/list') }}";
            {{--let backUrl = "{{ url('/after-school/'.encryptedId($studentId).'/onsite-info-afterschool') }}";--}}

            $('.indicator-label').hide();
            $('.indicator-progress').show();
            let isEdit = false;
            @if(session()->has('isEditAfterSchoolOnsite') && session()->get('isEditAfterSchoolOnsite') == true)
                isEdit = true;
            @endif
            if (isEdit) {
                window.location.href = backUrl;
                return;
            }
            $.ajax({
                type: 'POST',
                url: '{{ url("after-school/parent-primary-source-store") }}',
                data: {
                    _token:v_token,
                    student_id: student_id,
                    record_id: record_id,
                    parent_id: parent_id,
                    payment_check: payment_check,
                    payment_source_id: checkboxValue,
                },
                dataType: 'json',

                success: function (data) {
                    $('.indicator-label').show();
                    $('.indicator-progress').hide();
                    if (data.success) {
                        toastr.success('Enrollment is confirmed.!');
                        setTimeout(function () {
                            window.location.href = backUrl
                        }, 1500);

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

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

    </script>
@endsection