@extends('layouts.front_master')

@section('content')

@php
$months = 0;
$MonthCal = 0;
$total_amount=$packageDetail->price;
$ini_upfront=$total_amount*30/100;
if(isset($_GET['type']) AND $_GET['type'] == 1){
$ini_upfront = $total_amount;
$months = 0;
$MonthCal = 0;
}else if(isset($_GET['type']) AND $_GET['type'] == 2){
$ini_upfront = $total_amount/2;
$months = 1;
$MonthCal = $total_amount/2;
}else if(isset($_GET['type']) AND $_GET['type'] == 3){
$months = 6;
$Remain = $total_amount-$ini_upfront;
$MinimumEmi = 100;
$total_installment = $months;
$total_installment_min_check = $Remain / $MinimumEmi;
if($Remain <= 100){ $total_installment=1; }else if ($total_installment_min_check < $total_installment) { $total_installment=floor($total_installment_min_check); } $MonthCal=number_format((float)$Remain / $total_installment, 2, '.' , '' ); $months=$total_installment; } @endphp <div id="container" class="container mt-5">
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        div#card-element {

            margin: 20px 0px;

            padding: 20px 2px;

            border: 1px solid #FFA132;

            border-radius: 11px;

        }

        .toast.toast-error {

            background: #bd0808;

        }

        .choose-paying a.active {

            background: var(--Pink, #E5057F);

            color: #fff;

        }

        div#card-errors {

            color: red;

        }

        .btn.btn-pay {

            border: 1px solid;

            margin: 0px 10px;

            width: 100%;

            background: var(--Pink, #E5057F);

            color: #fff;

            font-size: 20px;

        }

        .btn.btn-pay.active {

            background: #fff;

            color: var(--Pink, #E5057F);

            border: 1px solid var(--Pink, #E5057F);

        }

        .progress-bar {

            display: flex;

            flex-direction: column;

            justify-content: center;

            overflow: hidden;

            color: var(--bs-progress-bar-color);

            text-align: center;

            white-space: nowrap;

            background-color: #e5057f;

            transition: var(--bs-progress-bar-transition);

        }

        .price-range {

            margin-top: 28px;

        }



        #toast-container>.toast-info {

            background-color: red;
        }

        .toast.toast-success {
            background-color: green;
        }

        .StripeElement--webkit-autofill {
            background-color: transparent !important;
        }


        input:-webkit-autofill {
            background: #0F0F0F !important;

            color: #FFFFFF !important;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            -webkit-text-fill-color: #F1F1F1;
            -webkit-box-shadow: 0 0 0px 1000px #1B1B1C inset;
            transition: background-color 5000s ease-in-out 0s;
            background: #0F0F0F !important;

            color: #FFFFFF !important;
        }
    </style>
    <div class="enroll-now-multistep-form">
        <h2 class="multistep-form-heading">Your enrolment with the Online Business College</h2>
        <div class="progress px-1" style="height: 3px;">
            <div class="progress-bar progress-bar1" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>


        <div class="step-container d-flex justify-content-between">

            <div class="step-circle" onclick="displayStep(1)">1</div>
            <div class="step-circle">2</div>
            <div class="step-circle">3</div>
        </div>

        <form id="payment-form" data-parsley-validate action="{{ url('payment') }}" method="POST">
            @csrf
            <div class="step step-1" style="display:none">
                <!-- Step 1 form fields here -->

                <div class="summary-product-detail">
                    <div class="container">
                        <div class="row cart-page__row">
                            <div class="table-responsive">
                                <table class="table multistep-from-summary">
                                    <thead>
                                        <tr>
                                            <th>Enrolment summary</th>

                                            <th>Price</th>

                                            <th>Subtotal</th>


                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td class="table-product">
                                                <div class="product-box">
                                                    <img src="{{asset('courses/'.$detail->image)}}" alt="">

                                                    <h3><a href="#">{{$detail->name}} ({{$packageDetail->title.' - '.$packageDetail->subtitle}})</a></h3>
                                                </div>
                                            </td>

                                            <td>
                                                <p class="price-txt">£{{$packageDetail->price}}</p>
                                            </td>

                                            <td>
                                                <p class="price-txt">£{{$packageDetail->price}}</p>
                                            </td>

                                        </tr>
                                        <tr class="total-price">
                                            <td></td>
                                            <td>Total</td>
                                            <td>£{{$packageDetail->price}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="multistep-btn-end multistep-btn-end-first">
                    <button type="button" class="btn theme-blue-btn next-step">Next</button>
                    <p class="summary-detail">Upon completing the 4-step enrolment process you will receive a welcome email which includes your log in details.
                        Your online dashboard is where you can view all of your course material, monitor your progress, interact with other students and course tutors.
                </div>
            </div>

            <div class="step step-2" style="display:none">
                <!-- Step 2 form fields here -->
                <table class="checkoutTables">
                    <thead>
                        <tr>
                            <th class="pb-2">
                                <h4 class="heading-border">Entry requirements</h4>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="pt-3 pb-3 text-center">
                                <div class="mt-3 d-inline-block text-left">
                                    @if($detail->entry_criteria_1)
                                    <div class="form-check mb-3">
                                        <input id="16_check_box" type="checkbox" class="form-check-input">
                                        <label for="16_check_box" class="form-check-label">{{$detail->entry_criteria_1}}</label>
                                    </div>
                                    @endif
                                    @if($detail->entry_criteria_2)
                                    <div class="form-check mb-3">
                                        <input id="conf_check_box" type="checkbox" class="form-check-input">
                                        <label for="conf_check_box" class="form-check-label">{{$detail->entry_criteria_2}}</label>
                                    </div>
                                    @endif
                                    @if(!$detail->entry_criteria_2 && !$detail->entry_criteria_1)
                                    <div class="form-check mb-3">

                                        <label class="form-check-label">No Requirements!</label>
                                    </div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="multistep-btn-end">
                    <button type="button" class="btn theme-blue-btn prev-step">Previous</button>
                    @if(!$detail->entry_criteria_2 && !$detail->entry_criteria_1)
                    <button type="button" id="2_step_btn" class="btn theme-blue-btn next-step">Next</button>
                    @else
                    <button type="button" id="2_step_btn" class="btn theme-blue-btn next-step" disabled>Next</button>
                    @endif
                </div>

            </div>

            <div class="step step-3" style="display:none">
                <!-- Step 3 form fields here -->

                <div class="row">

                    <div class="col-lg-6">
                        <h4 class="heading-border">Details</h4>
                        <div class="message-now-form step-form">

                            <div class="mb-3">
                                <input type="text" id="name" name="name" class="form-control" required placeholder="First Name">
                            </div>
                            <div class="mb-3">
                                <input type="email" id="email" name="email" class="form-control" required placeholder="Email Address">
                            </div>
                            <div class="mb-3">
                                <input type="text" name="phone" id="phone" class="form-control" required placeholder="Phone">
                            </div>
                            <div class="mb-3">
                                <div class="contact__input">
                                    <select class="js-example-basic-single" name="country" required>

                                        <option value="Select Country">Select Country</option>

                                        <option value="Afghanistan">Afghanistan</option>

                                        <option value="Albania">Albania</option>

                                        <option value="Algeria">Algeria</option>

                                        <option value="Andorra">Andorra</option>

                                        <option value="Angola">Angola</option>

                                        <option value="Antigua and Barbuda">Antigua and Barbuda</option>

                                        <option value="Argentina">Argentina</option>

                                        <option value="Armenia">Armenia</option>

                                        <option value="Australia">Australia</option>

                                        <option value="Austria">Austria</option>

                                        <option value="Azerbaijan">Azerbaijan</option>

                                        <option value="Bahamas">Bahamas</option>

                                        <option value="Bahrain">Bahrain</option>

                                        <option value="Bangladesh">Bangladesh</option>

                                        <option value="Barbados">Barbados</option>

                                        <option value="Belarus">Belarus</option>

                                        <option value="Belgium">Belgium</option>

                                        <option value="Belize">Belize</option>

                                        <option value="Benin">Benin</option>

                                        <option value="Bhutan">Bhutan</option>

                                        <option value="Bolivia">Bolivia</option>

                                        <option value="Bosnia and Herzegovina">Bosnia and Herzegovina

                                        </option>

                                        <option value="Botswana">Botswana</option>

                                        <option value="Brazil">Brazil</option>

                                        <option value="Brunei">Brunei</option>

                                        <option value="Bulgaria">Bulgaria</option>

                                        <option value="Burkina Faso">Burkina Faso</option>

                                        <option value="Burundi">Burundi</option>

                                        <option value="Cabo Verde">Cabo Verde</option>

                                        <option value="Cambodia">Cambodia</option>

                                        <option value="Cameroon">Cameroon</option>

                                        <option value="Canada">Canada</option>

                                        <option value="Central African Republic">Central African Republic

                                        </option>

                                        <option value="Chad">Chad</option>

                                        <option value="Chile">Chile</option>

                                        <option value="China">China</option>

                                        <option value="Colombia">Colombia</option>

                                        <option value="Comoros">Comoros</option>

                                        <option value="Congo, Democratic Republic of the">Congo, Democratic

                                            Republic of the</option>

                                        <option value="Congo, Republic of the">Congo, Republic of the

                                        </option>

                                        <option value="Costa Rica">Costa Rica</option>

                                        <option value="Croatia">Croatia</option>

                                        <option value="Cuba">Cuba</option>

                                        <option value="Cyprus">Cyprus</option>

                                        <option value="Czech Republic">Czech Republic</option>

                                        <option value="Denmark">Denmark</option>

                                        <option value="Djibouti">Djibouti</option>

                                        <option value="Dominica">Dominica</option>

                                        <option value="Dominican Republic">Dominican Republic</option>

                                        <option value="Ecuador">Ecuador</option>

                                        <option value="Egypt">Egypt</option>

                                        <option value="El Salvador">El Salvador</option>

                                        <option value="Equatorial Guinea">Equatorial Guinea</option>

                                        <option value="Eritrea">Eritrea</option>

                                        <option value="Estonia">Estonia</option>

                                        <option value="Eswatini">Eswatini</option>

                                        <option value="Ethiopia">Ethiopia</option>

                                        <option value="Fiji">Fiji</option>

                                        <option value="Finland">Finland</option>

                                        <option value="France">France</option>

                                        <option value="Gabon">Gabon</option>

                                        <option value="Gambia">Gambia</option>

                                        <option value="Georgia">Georgia</option>

                                        <option value="Germany">Germany</option>

                                        <option value="Ghana">Ghana</option>

                                        <option value="Greece">Greece</option>

                                        <option value="Grenada">Grenada</option>

                                        <option value="Guatemala">Guatemala</option>

                                        <option value="Guinea">Guinea</option>

                                        <option value="Guinea-Bissau">Guinea-Bissau</option>

                                        <option value="Guyana">Guyana</option>

                                        <option value="Haiti">Haiti</option>

                                        <option value="Honduras">Honduras</option>

                                        <option value="Hungary">Hungary</option>

                                        <option value="Iceland">Iceland</option>

                                        <option value="India">India</option>

                                        <option value="Indonesia">Indonesia</option>

                                        <option value="Iran">Iran</option>

                                        <option value="Iraq">Iraq</option>

                                        <option value="Ireland">Ireland</option>

                                        <option value="Israel">Israel</option>

                                        <option value="Italy">Italy</option>

                                        <option value="Jamaica">Jamaica</option>

                                        <option value="Japan">Japan</option>

                                        <option value="Jordan">Jordan</option>

                                        <option value="Kazakhstan">Kazakhstan</option>

                                        <option value="Kenya">Kenya</option>

                                        <option value="Kiribati">Kiribati</option>

                                        <option value="Korea, North">Korea, North</option>

                                        <option value="Korea, South">Korea, South</option>

                                        <option value="Kosovo">Kosovo</option>

                                        <option value="Kuwait">Kuwait</option>

                                        <option value="Kyrgyzstan">Kyrgyzstan</option>

                                        <option value="Laos">Laos</option>

                                        <option value="Latvia">Latvia</option>

                                        <option value="Lebanon">Lebanon</option>

                                        <option value="Lesotho">Lesotho</option>

                                        <option value="Liberia">Liberia</option>

                                        <option value="Libya">Libya</option>

                                        <option value="Liechtenstein">Liechtenstein</option>

                                        <option value="Lithuania">Lithuania</option>

                                        <option value="Luxembourg">Luxembourg</option>

                                        <option value="Madagascar">Madagascar</option>

                                        <option value="Malawi">Malawi</option>

                                        <option value="Malaysia">Malaysia</option>

                                        <option value="Maldives">Maldives</option>

                                        <option value="Mali">Mali</option>

                                        <option value="Malta">Malta</option>

                                        <option value="Marshall Islands">Marshall Islands</option>

                                        <option value="Mauritania">Mauritania</option>

                                        <option value="Mauritius">Mauritius</option>

                                        <option value="Mexico">Mexico</option>

                                        <option value="Micronesia">Micronesia</option>

                                        <option value="Moldova">Moldova</option>

                                        <option value="Monaco">Monaco</option>

                                        <option value="Mongolia">Mongolia</option>

                                        <option value="Montenegro">Montenegro</option>

                                        <option value="Morocco">Morocco</option>

                                        <option value="Mozambique">Mozambique</option>

                                        <option value="Myanmar">Myanmar</option>

                                        <option value="Namibia">Namibia</option>

                                        <option value="Nauru">Nauru</option>

                                        <option value="Nepal">Nepal</option>

                                        <option value="Netherlands">Netherlands</option>

                                        <option value="New Zealand">New Zealand</option>

                                        <option value="Nicaragua">Nicaragua</option>

                                        <option value="Niger">Niger</option>

                                        <option value="Nigeria">Nigeria</option>

                                        <option value="North Macedonia">North Macedonia</option>

                                        <option value="Norway">Norway</option>

                                        <option value="Oman">Oman</option>

                                        <option value="Pakistan">Pakistan</option>

                                        <option value="Palau">Palau</option>

                                        <option value="Palestine">Palestine</option>

                                        <option value="Panama">Panama</option>

                                        <option value="Papua New Guinea">Papua New Guinea</option>

                                        <option value="Paraguay">Paraguay</option>

                                        <option value="Peru">Peru</option>

                                        <option value="Philippines">Philippines</option>

                                        <option value="Poland">Poland</option>

                                        <option value="Portugal">Portugal</option>

                                        <option value="Qatar">Qatar</option>

                                        <option value="Romania">Romania</option>

                                        <option value="Russia">Russia</option>

                                        <option value="Rwanda">Rwanda</option>

                                        <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>

                                        <option value="Saint Lucia">Saint Lucia</option>

                                        <option value="Saint Vincent and the Grenadines">Saint Vincent and

                                            the Grenadines</option>

                                        <option value="Samoa">Samoa</option>

                                        <option value="San Marino">San Marino</option>

                                        <option value="Sao Tome and Principe">Sao Tome and Principe</option>

                                        <option value="Saudi Arabia">Saudi Arabia</option>

                                        <option value="Senegal">Senegal</option>

                                        <option value="Serbia">Serbia</option>

                                        <option value="Seychelles">Seychelles</option>

                                        <option value="Sierra Leone">Sierra Leone</option>

                                        <option value="Singapore">Singapore</option>

                                        <option value="Slovakia">Slovakia</option>

                                        <option value="Slovenia">Slovenia</option>

                                        <option value="Solomon Islands">Solomon Islands</option>

                                        <option value="Somalia">Somalia</option>

                                        <option value="South Africa">South Africa</option>

                                        <option value="Spain">Spain</option>

                                        <option value="Sri Lanka">Sri Lanka</option>

                                        <option value="Sudan">Sudan</option>

                                        <option value="Suriname">Suriname</option>

                                        <option value="Sweden">Sweden</option>

                                        <option value="Switzerland">Switzerland</option>

                                        <option value="Syria">Syria</option>

                                        <option value="Taiwan">Taiwan</option>

                                        <option value="Tajikistan">Tajikistan</option>

                                        <option value="Tanzania">Tanzania</option>

                                        <option value="Thailand">Thailand</option>

                                        <option value="Timor-Leste">Timor-Leste</option>

                                        <option value="Togo">Togo</option>

                                        <option value="Tonga">Tonga</option>

                                        <option value="Trinidad and Tobago">Trinidad and Tobago</option>

                                        <option value="Tunisia">Tunisia</option>

                                        <option value="Turkey">Turkey</option>

                                        <option value="Turkmenistan">Turkmenistan</option>

                                        <option value="Tuvalu">Tuvalu</option>

                                        <option value="Uganda">Uganda</option>

                                        <option value="Ukraine">Ukraine</option>

                                        <option value="United Arab Emirates">United Arab Emirates</option>

                                        <option value="United Kingdom">United Kingdom</option>

                                        <option value="United States">United States</option>

                                        <option value="Uruguay">Uruguay</option>

                                        <option value="Uzbekistan">Uzbekistan</option>

                                        <option value="Vanuatu">Vanuatu</option>

                                        <option value="Vatican City">Vatican City</option>

                                        <option value="Venezuela">Venezuela</option>

                                        <option value="Vietnam">Vietnam</option>

                                        <option value="Yemen">Yemen</option>

                                        <option value="Zambia">Zambia</option>

                                        <option value="Zimbabwe">Zimbabwe</option>

                                    </select>
                                </div>
                            </div>
                            <h4 class="heading-border mb-20">Create a new password*</h4>
                            <div class="mb-3">
                                <input type="text" class="form-control" name="password" placeholder="Password">
                            </div>
                            <div class="mb-3">
                                <input type="text" class="form-control" placeholder="Confirm Password">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="enroll-summary">
                            <h4 class="heading-border mb-20">Enrolment summary</h4>
                            <div class="product-box">
                                <div class="summary-box">
                                    <h3><a href="#">{{$detail->name}} ({{$packageDetail->title.' - '.$packageDetail->subtitle}})</a></h3>
                                    <h3><b>£{{$packageDetail->price}}</b></h3>
                                </div>
                            </div>
                        </div>
                        <div class="progressbar-step-form-sec">
                            <ul class="payment_select">
                                <li><button type="button" id="fullPayment" onclick="window.location = '{{url('enrol-course/'.$detail->url.'/'.$packageDetail->id)}}?type=1&method=full'" data-type="1" class="theme-blue-btn  btn-pay {{(isset($_GET['type']) AND $_GET['type'] == 1) ? 'active' : '' }}">Full Payment</button></li>
                                <li><button type="button" id="halfPayment" onclick="window.location = '{{url('enrol-course/'.$detail->url.'/'.$packageDetail->id)}}?type=2'" data-type="2" class="theme-blue-btn  btn-pay {{(isset($_GET['type']) AND $_GET['type'] == 2) ? 'active' : '' }}">Half Payment</button></li>
                                <li><button type="button" id="InstallmentPayment" onclick="window.location = '{{url('enrol-course/'.$detail->url.'/'.$packageDetail->id)}}?type=3#payment-form-id'" data-type="3" class="theme-blue-btn  btn-pay  {{(isset($_GET['type']) AND $_GET['type'] == 3) ? 'active' : '' }}">Installment</button></li>
                            </ul>
                            @if(isset($_GET['type']) AND $_GET['type'] == 1)
                            <div class="progress" style="margin-bottom: 11px;height: 25px;">
                                <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
                            </div>
                            <div class="price-range2">
                                <p>Calculator: £{{$total_amount}} Upfront, No Installment </p>
                            </div>
                            @elseif(isset($_GET['type']) AND $_GET['type'] == 2)
                            <div class="progress" style="margin-bottom: 11px;height: 25px;">
                                <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                            </div>
                            <div class="price-range2">
                                <p>Calculator: £{{($total_amount/2)}} Upfront, No Installment
                                </p>
                            </div>
                            @else
                            <div class="range-slider">
                                <span class="rangeValues"></span>
                                <input value="{{$ini_upfront}}" min="{{$ini_upfront}}" max="{{$total_amount}}" step="10" type="range">
                                <p>Calculator: £<label id="upFrontData">{{$ini_upfront}}</label> Upfront, £<label id="installmentPlan">{{$MonthCal}}</label> Per Month till {{date('F',strtotime(date('Y-m-d').' +'.($months*30).' days'))}} </p>
                            </div>
                            <div class="price-range">

                                <div class="price-slider"></div>
                                <button class="slider-button"></button>
                                <p>Calculator: £<span id="selected-amount" data-max="{{$total_amount}}"></span><label id="labelPayment2">{{$ini_upfront}}</label> Upfront, £<label id="changePlan">{{$MonthCal}}</label> Per Month till {{date('F',strtotime(date('Y-m-d').' +'.($months*30).' days'))}} </p>

                            </div>
                            @endif

                            <div class="payment-form pkg_frm" style="width: 100%;">

                                <input type="hidden" id="clientSecret" name="clientSecret">
                                <input type="hidden" id="customerId" name="customerId">
                                <input type="hidden" id="paymentId" name="paymentId">
                                <input type="hidden" id="paymentStatus" name="paymentStatus">
                                <div class="card-details CardData input-container" style="width: 100%;">
                                    <h4>Enter Card Details</h4>
                                    <div class="input-sec">
                                        <label for="cardholder-name">Cardholder Name</label>
                                        <input type="text" id="cardholder-name" name="cardholder-name" required>
                                    </div>
                                    <div id="card-element">
                                        <!-- A Stripe Element will be inserted here. -->
                                    </div>

                                    <div id="card-errors" role="alert"></div>


                                    <button class="btn theme-blue-btn btn-success" id="labelPayment3">Pay £{{$ini_upfront}}</button>
                                </div>
                                <input type="hidden" id="MonthData" name="installment_month" value="{{$months}}">

                                <input type="hidden" id="MonthlyPayment" name="installment_payment" value="{{$MonthCal}}">

                                <input type="hidden" id="totalpayment" name="intenet_payment" value="{{$ini_upfront}}">
                                <input type="hidden" name="type" id="type" value="{{$_GET['type']}}">
                                <input type="hidden" name="description" id="description" value="{{$detail->name}} ({{$packageDetail->title.' - '.$packageDetail->subtitle}})">
                                <input type="hidden" name="courseName" id="courseName" value="{{$detail->name}}">
                                <input type="hidden" name="packageName" id="packageName" value="{{$packageDetail->title.' - '.$packageDetail->subtitle}}">
                                <input type="hidden" name="courseId" id="courseId" value="{{$detail->id}}">
                                <input type="hidden" name="packageId" id="packageId" value="{{$packageDetail->id}}">
                                <input type="hidden" name="packagePrice" id="packagePrice" value="{{$packageDetail->price}}">
                                @if(session('success_message'))
                                <div style="color: green;">
                                    {{ session('success_message') }}
                                </div>
                                @endif

                                @if(session('error_message'))
                                <div style="color: red;">
                                    {{ session('error_message') }}
                                </div>
                                @endif
                            </div>


                        </div>
                    </div>
                </div>
                <div class="multistep-btn">
                    <button type="button" class="btn theme-blue-btn prev-step">Previous</button>

                </div>
            </div>
        </form>
    </div>
    </div>
    @endsection

    @section('scripts') @parent



    @endsection

    @section('scripts')
    <script src="{{asset('front_assets/js/progressBar.js')}}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var stripe = Stripe("{{ env('STRIPE_KEY') }}");
            var elements = stripe.elements();
            var style = {
                base: {
                    color: '#fff',
                    lineHeight: '18px',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    '::placeholder': {
                        color: '#fff'
                    },
                    ':-webkit-autofill': {
                        color: '#fff',
                    },
                },
                invalid: {
                    color: '#fa755a',
                    iconColor: '#fa755a'
                }
            };
            var card = elements.create("card", {
                hidePostalCode: true,
                style: style
            });
            card.mount("#card-element");

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

            var form = document.getElementById('payment-form');
            form.addEventListener('submit', function(event) {
                event.preventDefault();

                fetch("{{ route('payment.intent') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        amount: document.getElementById('totalpayment').value,
                        email: document.getElementById('email').value,
                        name: document.getElementById('name').value,
                        description: document.getElementById('description').value,
                    })
                }).then(function(response) {
                    return response.json();
                }).then(function(data) {
                    var clientSecret = data.clientSecret;
                    var customerId = data.customerId;

                    document.getElementById('clientSecret').value = clientSecret;
                    document.getElementById('customerId').value = customerId;

                    stripe.confirmCardPayment(clientSecret, {
                        payment_method: {
                            card: card,
                            billing_details: {
                                name: document.getElementById('cardholder-name').value
                            }
                        }
                    }).then(function(result) {
                        document.getElementById('paymentId').value = result.paymentIntent.id;
                        document.getElementById('paymentStatus').value = result.paymentIntent.status;
                        if (result.error) {
                            document.getElementById('errorMessage').value = result.error.message;
                            form.submit();
                        } else {
                            form.submit();
                        }
                    });
                });
            });
        });
    </script>
    <script>
        setTimeout(() => {
            @if(isset($_GET['method']) AND $_GET['method'] == 'full')
            displayStep(3)
            $(".step-2").hide();
            $(".step-1").hide();
            $(".step-3").show();
            @elseif(isset($_GET['type']) AND $_GET['type'] == 2)
            displayStep(3)
            $(".step-1").hide();
            $(".step-2").hide();
            $(".step-3").show();
            @elseif(isset($_GET['type']) AND $_GET['type'] == 3)
            displayStep(3)
            $(".step-1").hide();
            $(".step-2").hide();
            $(".step-3").show();
            @else(isset($_GET['type']) AND!isset($_GET['method']))
            displayStep(1)
            $(".step-2").hide();
            $(".step-3").hide();
            $(".step-1").show();
            @endif
        }, 1000);


        function getVals() {
            // Get slider values
            let parent = this.parentNode;
            let slides = parent.getElementsByTagName("input");

            let slide1 = parseFloat(slides[0].value);
            const maxval = document.getElementById('selected-amount').getAttribute("data-max");

            const totalMonth = document.getElementById('MonthData').value;

            var sasd = maxval - slide1;

            sasd = sasd / totalMonth;
            // if (sasd < 100) {
            //     alert("Minimum installment amount £100")
            //     return false;
            // }


            let displayElement = parent.getElementsByClassName("rangeValues")[0];
            displayElement.innerHTML = "£" + slide1;
            document.getElementById('upFrontData').textContent = `${slide1}`;
            // document.getElementById('labelPayment').textContent = "£" + `${slide1}`;
            document.getElementById('labelPayment3').textContent = `Pay £${slide1}`;


            document.getElementById('totalpayment').value = `${slide1}`;
            document.getElementById('installmentPlan').textContent = sasd.toFixed(2);
            document.getElementById('MonthlyPayment').value = sasd.toFixed(2);



        }

        window.onload = function() {
            // Initialize Sliders
            let sliderSections = document.getElementsByClassName("range-slider");
            for (let x = 0; x < sliderSections.length; x++) {
                let sliders = sliderSections[x].getElementsByTagName("input");

                for (let y = 0; y < sliders.length; y++) {
                    console.log(y)
                    if (sliders[y].type === "range") {
                        sliders[y].oninput = getVals;
                        // Manually trigger event first time to display values
                        sliders[y].oninput();
                    }
                }
            }

        }
        // In your Javascript (external .js resource or <script> tag)

        $(document).ready(function() {

            $('.js-example-basic-single').select2();

        });
        @if($detail->entry_criteria_1)
        $("#16_check_box").change(function() {
            @if($detail->entry_criteria_1 && $detail->entry_criteria_2)
                if (this.checked && $('#conf_check_box').is(':checked')) {
                    $("#2_step_btn").attr("disabled", false);
                } else {
                    $("#2_step_btn").attr("disabled", true);
                }
            @elseif (!$detail->entry_criteria_2)
                if (this.checked) {
                    $("#2_step_btn").attr("disabled", false);
                } else {
                    $("#2_step_btn").attr("disabled", true);
                }
            @endif

        });
        @endif

        @if($detail->entry_criteria_2)
        $("#conf_check_box").change(function() {
            @if($detail->entry_criteria_1 && $detail->entry_criteria_2)
                if (this.checked && $('#16_check_box').is(':checked')) {
                    $("#2_step_btn").attr("disabled", false);
                } else {
                    $("#2_step_btn").attr("disabled", true);
                }
            @elseif (!$detail->entry_criteria_1)
                if (this.checked) {
                    $("#2_step_btn").attr("disabled", false);
                } else {
                    $("#2_step_btn").attr("disabled", true);
                }
            @endif
        });
        @endif
    </script>

    @endsection