@push('modal-script')
<script src="{{asset('assets/vendor/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/cleavejs/cleave-phone.js')}}"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="{{asset('assets/js/modal/modal-stripe-order.js')}}"></script>
@endpush

<div class="modal fade" id="stripe_order_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-center fw-bold" id="m_stripe_form_title">
                    CREATE ACCOUNT
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body fs-16">

                <div class="text-center text-danger fs-14 mb-5 d-none" id="m_error_msg"></div>
                <input id="m_stripe_item" type="hidden" value="">
                <input id="m_total_price" type="hidden" value="">
                <input id="m_due_today_price" type="hidden" value="{{config('variables.due_today_price')}}">

                <form id="stripe_payment_form" data-stripe-publishable-key="{{ env('STRIPE_API_KEY') }}">
                    <div class="create-account-form-wrapper">
                        <label class="mb-3">Contact information</label>
                        <input type="text" class="form-control mb-3" placeholder="Name*" id="m_account_name" required>
                        <input type="email" class="form-control mb-3" placeholder="Email*" id="m_account_email" required>
                        <p class="mb-0">We won't spam you in any way.</p>
                        <hr class="my-5">
                    </div>                   

                    <div class="payment-detail-form-wrapper">
                        <label class="mb-3">Payment Details</label>
                        <div class="input-group input-group-merge">
                            <input type="text" id="m_stripe_number" name="stripe_number" class="form-control credit-card-mask mb-3" placeholder="Card number*" required> 
                            <span class="input-group-text" id="stripe_number2">
                                <span class="card-type"></span>
                            </span>
                        </div>
                        <input id="m_card_type" type="hidden">

                        <input type="text" id="m_stripe_name" name="stripe_name" class="form-control mb-3" placeholder="Name on card*" required>
                        
                        <input type="text" id="m_stripe_exp" name="stripe_exp" class="form-control expiry-date-mask mb-3" placeholder="Expiration Date: MM/YY*" required>

                        <div class="d-flex gap-3">
                            <input type="text" id="m_stripe_cvv" name="stripe_cvv" class="form-control cvv-code-mask mb-3" maxlength="3"  placeholder="Security Code*" required>
                            <input type="text" class="form-control mb-3" placeholder="Zip code*" required>
                        </div>
                    </div>

                    <hr class="my-5">

                    <div class="mb-5">
                        <div class="d-flex justify-content-between mb-3">
                            <label>Total</label>
                            <label><span class="m-total-price me-1">$250</span>$<span class="m-real-price">150</span></label>
                        </div> 
                        <div class="d-flex justify-content-between mb-3">
                            <label>Due Today</label>
                            <label>$<span class="m-due-today-price">100</span></label>
                        </div> 
                        <div class="text-end">
                            Fully refundable
                        </div>
                    </div>

                    <div class="my-5">
                        By placing this order, I agree to the  <a href="{{route('agrement-page')}}" target="_blank">Quintessence Biologics Pre-Order Agreement</a>,  <a href="{{route('terms-of-service-page')}}" target="_blank">Terms and Conditions</a>, and <a href="privacy-page" target="_blank">Privacy Notice</a>.
                    </div>

                    <button class="btn btn-primary btn-lg w-100" type="submit" id="stripe_submit_btn">
                        Place Order<i class="fas fa-spinner fa-spin ms-2 d-none"></i>
                    </button>
                </form>

                <hr class="my-5">

                <div>
                    <h4 class="fw-bold mb-24 text-center">SHIPPING</h4>
                    <p class="mb-0">We understand your eagerness to start your regenerative skincare journey. That's why we strive to process and ship your orders promptly after products availability. Preorders are shipped on first come first serve basis.</p>
                </div>

                <hr class="my-5">

                <div>
                    <h4 class="fw-bold mb-24 text-center">RETURNS</h4>
                    <p class="mb-24">At Quintessence Biologics, we are confident that you will be thrilled with our regenerative beauty products. Our commitment is to deliver excellence, not only in the innovative formulations we provide but also in the transformative experiences they create. We understand, however, that sometimes a product may not align with your unique expectations.</p>
                    <p class="mb-0"> Due to the unique nature of our products, we are unable to accept returns. Nevertheless, your satisfaction remains our utmost priority. In the event that our product does not meet your expectations, we are committed to working closely with you to find a satisfactory resolution. Our customer service team is dedicated to ensuring your experience with us is nothing short of exceptional, and we will endeavor to address any concerns you may have in a manner that reflects the premium quality and service our brand stands for.</p>
                </div>
            </div>
        </div>
    </div>
</div>