@extends('layouts.app')
@section('page-title', 'Home')
@section('body-content')


        <!-- Shoping Cart Section -->
        <section id="wizard-form" class="pageNo-5">
            <div class="wizard-form-wrapper g_in_spacing_block">

                <div class="container">
                    <div class="row">

                        <div class="col-md-12 cartSideBarArea">


                            <div class="cartSideBarArea_container">

                                <div class="wizard-leftSideBar">

                                    <ul class="wizard-leftSideBar-itemsList no-marker gray-lighter-bg clear-fix">

                                        <li class="wizard-leftSideBar-item">

                                            <a href="#" class="wizard-leftSideBar-link cart-item-icon  active">

                                                <div class="wizardForm-stepContent">

                                                    <span class="wizardForm-stepIcon"><i class="fa-solid fa-cart-shopping"></i></span>
                                                    <span class="wizardForm-stepText">Cart</span>

                                                </div>


                                            </a>

                                        </li>
                                        <li class="wizard-leftSideBar-item">

                                            <a href="#" class="wizard-leftSideBar-link cart-shipping-icon">


                                                <div class="wizardForm-stepContent">

                                                    <span class="wizardForm-stepIcon"><i class="fas fa-truck"></i></span>
                                                    <span class="wizardForm-stepText">Shipping</span>

                                                </div>

                                            </a>

                                        </li>
                                        <li class="wizard-leftSideBar-item">

                                            <a href="#" class="wizard-leftSideBar-link cart-payment-details-icon">


                                                <div class="wizardForm-stepContent">

                                                    <span class="wizardForm-stepIcon"><i class="fa-solid fa-money-check"></i></span>
                                                    <span class="wizardForm-stepText">Payment</span>

                                                </div>

                                            </a>

                                        </li>



                                    </ul>



                                </div>
                            </div>





                        </div>

                        <div class="col-md-9 col-lg-9 cartProductDetailsArea">

                            <div class="wizard-shoppingCart">

                                <div class="shopping-cart-top">

                                    <table class="cartTable">
                                        <thead class="cartTableHeading font-size-large text-mid-dark">

                                            <tr class="cartTableRow">

                                                <th class="cartTableHead productNamehead">Product Name</th>
                                                <th class="cartTableHead quantityhead">Quantity</th>
                                                <th class="cartTableHead pricehead">Price</th>
                                                <th class="cartTableHead amountHead">Total</th>

                                            </tr>

                                        </thead>
                                        <tbody class="cartTableBody">
                                            @php
                                                $sub_total = 0;
                                                $total_amount = 0;
                                                $cart_count = 0;
                                                $weight = 0;
                                            @endphp
                                            <!-- first cart item -->
                                            @if(session('cart'))
                                                @foreach(session('cart') as $id => $details)
                                                    @php $cart_count++ @endphp
                                                    @php $sub_total += $details['price'] * $details['quantity'] @endphp
                                                    @php $weight += $details['weight'] * $details['quantity'] @endphp
                                                    @php $total_amount += $details['price'] * $details['quantity'] @endphp
                                                    <tr class="cartTableRow" data-id="{{ $id }}">
                                                        <td class="cartTableCell">
                                                                    <div class="product-item">
                                                                        <a href="javascript:void(0);" class="product-thumb tosetpointer linkColor">

                                                                            <img src="{{ config('constants.IMAGES_PATH') . '/' . $details['image'] }}" alt="Network &amp; Communication">

                                                                            <div class="removeFromCart_container" title="Remove This Item">
                                                                                <i class="fa fa-times" aria-hidden="true"></i>

                                                                            </div>


                                                                        </a>
                                                                        <div class="product-info">
                                                                            <h4 class="product-title">
                                                                                <a href="#">
                                                                                    <span title="{{ $details['name'] }}">
                                                                                        {{ $details['name'] }}
                                                                                    </span>
                                                                                </a>
                                                                            </h4>
                                                                            <span><b>MFR: </b>{{ $details['brand'] }}</span>

                                                                            <div class="product-partsInfo">
                                                                                <span style="display: inline-block;"><b>Part #:</b> {{ $details['part_no'] }}</span>
                                                                                {{-- <span class="skuText"><b>SKU:</b> 8PL072</span> --}}
                                                                            </div>



                                                                            <div class="form-group row" id="priceaddonsarea"></div>
                                                                        </div>
                                                                    </div>


                                                        </td>
                                                        <td class="cartTableCell">
                                                            <div id="quantity">
                                                                {{-- <button type="button" id="sub" class="sub disablenotallow" data-type="minus" disabled="" style="cursor: pointer;">-</button> --}}
                                                                <input type="number" id="quantity" name="quantity" min="1" max="99999" autocomplete="false" class="quantityInput update-cart" value="{{ $details['quantity'] }}">
                                                                {{-- <button type="button" id="add" class="add " data-type="plus" style="cursor: pointer;">+</button> --}}
                                                            </div>

                                                        </td>
                                                        <td class="cartTableCell price">
                                                            <span class="labelforMobile">Price: </span> ${{ $details['price'] }}
                                                            <small>/each</small>
                                                        </td>
                                                        <td class="cartTableCell price">
                                                            <span class="labelforMobile">Amount: </span> ${{ $details['price'] * $details['quantity'] }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @endif

                                            <!-- second cart item -->





                                        </tbody>
                                    </table>


                                </div>

                                <div class="shopping-cart-bottom">

                                    <div class="form-group">
                                        <label for="checkout-zip" class="">Enter Comment:</label>
                                        <textarea class="form-control" name="comments" id="comments" rows="5" maxlength="250" style="resize: none;"></textarea>
                                    </div>




                                </div>



                            </div>

                        </div>

                        <div class="col-md-3 col-lg-3 cartOrderSummaryArea">
                            <div class="CartPaymentSummary CartPaymentSummary-sticky">
                                <div>
                                    <div class="widget cart_icon d-flex justify-content-between"></div>
                                    <div class="pd-tp-bt-cart-no">
                                        <p class="stdFntMid clear-fix">
                                            <span><strong>Date:</strong> {{ date('m/d/Y') }}</span>
                                            <span class="crtnum"> <strong>Cart #:</strong> {{ session()->get('cart_no')['cart_no'] }}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="widget widget-order-summary text-mid-dark">
                                    <h3 class="widget-title font-size-large">Order Summary</h3>
                                    <table class="table mb-0 stdFntMid">
                                        <tbody>
                                            <tr>
                                                <td>Number of Item(s):</td>
                                                <td>{{ $cart_count }}</td>
                                            </tr>
                                            <tr>
                                                <td>Subtotal:</td>
                                                <td class="priceColur">${{ $sub_total }}</td>
                                            </tr>
                                            <tr>
                                                <td>Tax<span>:</span></td>
                                                <td><span id="shipping_tax">As Applicable</span></td>
                                            </tr>
                                            <tr>
                                                <td>Freight<span>:</span></td>
                                                <td><span id="shipping_amount">As Applicable</span></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Amount:</strong></td>
                                                <td><strong><span id="total_amount">${{ $total_amount }}</span></strong></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="coupon-form"></div>
                                <button class="cartitemsContinueCheckoutBtn pySummaryBtn">Continue Checkout</button>
                                <button class="cartitemsubmitReqaQuoteBtn pySummaryBtn" onclick="location.href='/request-for-quote.html'">Request Quote</button>
                                <button class="cartitemsContinueShoppingBtn pySummaryBtn" onclick="location.href='{{ route('index') }}'">Continue Shopping</button>

                                <div class="widget cart_icon summarySaveOptions">
                                    <a href="javascript:void()" id="lnk_carttoolprint" title="Print" class="cartIcon print cartIconGuest"></a>
                                    <a href="javascript:void()" id="lnk_carttoolpdf" title="Download PDF" class="cartIcon pdfdownload cartIconGuest"></a>
                                    <a href="javascript:void()" id="lnk_carttoolmail" title="Mail" class="cartIcon emailIcon cartIconGuest"></a>
                                </div>

                            </div>
                            @if(session("failureMsg"))
                            <div class="alert alert-danger fade show mt-1" id="paymentErrorAlert" role="alert">
                                <strong>{{ session("failureMsg") }}</strong>
                            </div>
                            @endif
                            <div class="alert alert-danger fade show mt-1" id="validationErrorAlert" role="alert" style="display:none;">
                                <strong id="validationErrorText"></strong>
                            </div>

                            <div class="d-flex justify-content-center">
                                <div class="spinner-border text-info" style="width: 3rem; height: 3rem; display: none;" id="payStartSpinner" role="status">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 col-lg-9 cartLoginArea" style="margin: auto;">
                            <section id="cart-login">

                                <div class="cart-login-wrapper g_in_spacing_inline">

                                    <div class="container">

                                        <div class="row">

                                            <div class="col-md-12">


                                                <div id="stepTwo-Delivery">

                                                    <div class="stepTwo-Delivery_container">
                                                        <div id="cart-login_process">
                                                            <div class="cartLogin-LayoutWrapper">


                                                                <div class="verticalBorder"><span class="stdFntMid">Or</span></div>

                                                                <div class="row">

                                                                    <div class="col-md-5 col-12">
                                                                        <h2 class="loginTitle font-size-large text-mid-dark">Login</h2>
                                                                        <div>
                                                                            <div>
                                                                                <div class="row">
                                                                                    <div class="col-sm-12">
                                                                                        <div class="form-group"><input class="input-text logininput form-control" type="text" name="email" id="email" placeholder="Username / Email *" value=""></div>
                                                                                    </div>

                                                                                    <div class="col-sm-12">
                                                                                        <div class="form-group"><input class="input-text logininput form-control" type="password" name="password" id="password" placeholder="Password *" value=""></div>
                                                                                    </div>

                                                                                    <div class="col-sm-12">

                                                                                        <div class="checkout-footer shopping-cart-footer-buttons clear-fix">
                                                                                            <div class="column lnk_forgotpassword_container"><a href="javascript:void(0)" id="lnk_forgotpassword" class="stdFntMid prm-link"> Forgot Password?</a></div>
                                                                                            <div class="column loginThenContinue_container"><button class="loginThenContinueBtn" id="loginThenContinueBtn">Login &amp; Continue</button></div>
                                                                                        </div>


                                                                                    </div>


                                                                                    <div class="col-sm-12">
                                                                                        <div class="regNow_container">
                                                                                            <span class="stdFntMid ">Not a member yet?</span>
                                                                                            <a class="stdFntMid regNowBtn prm-link">Register Now</a>
                                                                                            <p class="stdFntMid orForTablets"><span>OR</span></p>


                                                                                        </div>
                                                                                    </div>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-2"></div>
                                                                    <div class="col-md-5 col-12">
                                                                        <div class="registerBlock">
                                                                            <h2 class="loginTitle font-size-large text-mid-dark">Don't have an account?</h2>
                                                                            <p class="stdFntMid">Don't have an account with HNS Technology Inc? No problem.<br>You can continue placing your order as a guest.</p>
                                                                            <button class="contAsGuestBtn" id="contAsGuestBtn">Continue as Guest</button></div>
                                                                    </div>




                                                                </div>


                                                            </div>
                                                            <div class="cartback guestcartlogin-backtocart">
                                                                <a class="cartbackBtn" id="loginBackBtn" href="javascript:void();">Back To Cart</a>
                                                            </div>
                                                        </div>

                                                        <div id="shipping_process">

                                                            <div class="shipping_process_container">

                                                                <div class="shipping_process_accordian">

                                                                    <div class="shipping_process_accordian_container">

                                                                        {{-- first accordian --}}



                                                                        <div class="accordion" id="accordionExample">
                                                                            <div class="accordion-item">
                                                                              <h2 class="accordion-header"  id="panelsStayOpen-headingOne">
                                                                                <button class="accordion-button font-size-large text-mid-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                                                 Shipping Address
                                                                                </button>
                                                                              </h2>
                                                                              <div id="collapseOne" class="accordion-collapse collapse show" data-bs-target="#panelsStayOpen-collapseOne" aria-controls="panelsStayOpen-collapseOne">
                                                                                <div class="accordion-body">

                                                                                    <!-- 1st Form is here -->
                                                                                    <div class="row">
                                                                                        <div class="col-md-6 form-group"><label for="shipping_company_name">Company Name</label><input class="form-control" type="text" name="shipping_company_name" id="shipping_company_name" maxlength="50"
                                                                                                value=""></div>
                                                                                        <div class="col-md-6 form-group"></div>
                                                                                        <div class="col-md-6 form-group"><label for="shipping_firstname" class="requiredField">First Name</label><input class="form-control" type="text" name="shipping_firstname" id="shipping_firstname"
                                                                                                maxlength="50" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="shipping_lastname" class="requiredField">Last Name</label><input class="form-control" type="text" name="shipping_lastname" id="shipping_lastname"
                                                                                                maxlength="50" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="shipping_phone_number" class="requiredField">Phone</label><input class="form-control no-spinners" type="text" name="shipping_phone_number" id="shipping_phone_number"
                                                                                                maxlength="30" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="shipping_email" class="requiredField">E-mail Address</label><input class="form-control" type="email" name="shipping_email" id="shipping_email" maxlength="40"
                                                                                                required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="Billing Details:
                                                                                            " class="requiredField">Address 1</label><input class="form-control" type="text" name="shipping_address_line_1" id="shipping_address_line_1"
                                                                                                maxlength="50" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="shipping_address_line_2">Address 2</label><input class="form-control" type="text" name="shipping_address_line_2" id="shipping_address_line_2" maxlength="50"
                                                                                                value=""></div>
                                                                                        <div class="col-md-6 form-group">
                                                                                            <label for="shipping_country" class="requiredField">Country</label>
                                                                                            <select class="form-control" id="shipping_country" name="shipping_country" required="">
                                                                                                <option value="">Select Country</option>
                                                                                                @foreach ($countries as $country)
                                                                                                    <option value="{{ $country['code'] }}">{{ $country['name'] }}</option>
                                                                                                @endforeach
                                                                                            </select>
                                                                                        </div>
                                                                                        <div class="col-md-6 form-group">
                                                                                            <label for="shipping_state" class="requiredField">State</label>
                                                                                            <select class="form-control" id="shipping_state" name="shipping_state" required="">
                                                                                                <option value="">Select State</option>
                                                                                            </select>
                                                                                            <span id="error_shipping_State" class="errormsgcolor" style="display: none;">Please select state.</span>
                                                                                        </div>
                                                                                        <div class="col-md-6 form-group">
                                                                                            <label for="shipping_city" class="requiredField">City</label>
                                                                                            <input class="form-control" type="text" id="shipping_city" name="shipping_city" maxlength="50" required="" value="">
                                                                                        </div>

                                                                                        <div class="col-md-6 form-group"><label for="shipping_zip" class="requiredField">Zip</label><input class="form-control" type="text" id="shipping_zip" name="shipping_zip" maxlength="10" required=""
                                                                                                autocomplete="false" value="">
                                                                                        </div>

                                                                                        <div class="col-md-6 form-group">
                                                                                            <div class="check-box">
                                                                                                <input type="checkbox" name="same_billing_address" id="same-billing-address" checked>
                                                                                                <label for="same-billing-address">Billing Address is same </label>
                                                                                            </div>
                                                                                        </div>


                                                                                    </div>

                                                                                </div>
                                                                              </div>
                                                                            </div>
                                                                            <div class="accordion-item" id="billing-address-section" style="display: none">
                                                                              <h2 class="accordion-header" id="headingTwo">
                                                                                <button class="accordion-button collapsed font-size-large text-mid-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                                                  Billing Address
                                                                                </button>
                                                                              </h2>
                                                                              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                                                <div class="accordion-body">

                                                                                    <!-- 2nd Form is here -->
                                                                                    <div class="row">
                                                                                        <div class="col-md-6 form-group"><label for="billing_company_name">Company Name</label><input class="form-control" type="text" name="billing_company_name" id="billing_company_name" maxlength="50"
                                                                                                value=""></div>
                                                                                        <div class="col-md-6 form-group"></div>
                                                                                        <div class="col-md-6 form-group"><label for="billing_firstname" class="requiredField">First Name</label><input class="form-control" type="text" name="billing_firstname" id="billing_firstname"
                                                                                                maxlength="50" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="billing_lastname" class="requiredField">Last Name</label><input class="form-control" type="text" name="billing_lastname" id="billing_lastname"
                                                                                                maxlength="50" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="billing_phone_number" class="requiredField">Phone</label><input class="form-control no-spinners" type="text" name="billing_phone_number" id="billing_phone_number"
                                                                                                maxlength="30" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="billing_email" class="requiredField">E-mail Address</label><input class="form-control" type="email" name="billing_email" id="billing_email" maxlength="40"
                                                                                                required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="billing_address_line_1" class="requiredField">Address 1</label><input class="form-control" type="text" name="billing_address_line_1" id="billing_address_line_1"
                                                                                                maxlength="50" required="" value=""></div>
                                                                                        <div class="col-md-6 form-group"><label for="billing_address_line_2">Address 2</label><input class="form-control" type="text" name="billing_address_line_2" id="billing_address_line_2" maxlength="50"
                                                                                                value=""></div>
                                                                                        <div class="col-md-6 form-group">
                                                                                            <label for="billing_country" class="requiredField">Country</label>
                                                                                            <select class="form-control" id="billing_country" name="billing_country" required="">
                                                                                                <option value="">Select Country</option>
                                                                                                @foreach ($countries as $country)
                                                                                                    <option value="{{ $country['code'] }}">{{ $country['name'] }}</option>
                                                                                                @endforeach
                                                                                            </select>
                                                                                        </div>
                                                                                        <div class="col-md-6 form-group">
                                                                                            <label for="billing_state" class="requiredField">State</label>
                                                                                            <select class="form-control" id="billing_state" name="billing_state" required="">
                                                                                                <option value="">Select State</option>
                                                                                            </select>
                                                                                            <span id="error_billing_State" class="errormsgcolor" style="display: none;">Please select state.</span>
                                                                                        </div>
                                                                                        <div class="col-md-6 form-group">
                                                                                            <label for="billing_city" class="requiredField">City</label>
                                                                                            <input class="form-control" type="text" id="billing_city" name="billing_city" maxlength="50" required="" value="">
                                                                                        </div>

                                                                                        <div class="col-md-6 form-group"><label for="billing_zip" class="requiredField">Zip</label><input class="form-control" type="text" id="billing_zip" name="billing_zip" maxlength="10" required=""
                                                                                                autocomplete="false" value=""></div>
                                                                                    </div>

                                                                                </div>
                                                                              </div>
                                                                            </div>
                                                                            <div class="accordion-item">
                                                                              <h2 class="accordion-header"  id="panelsStayOpen-headingThree">
                                                                                <button class="accordion-button font-size-large text-mid-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                                                                  Shipping Method
                                                                                </button>
                                                                              </h2>
                                                                              <div id="collapseThree" class="accordion-collapse collapse show"  data-bs-target="#panelsStayOpen-collapseThree" aria-controls="panelsStayOpen-collapseThree">
                                                                                <div class="accordion-body">

                                                                                    <div class="row">
                                                                                        <div class="col-md-7 checkout-shipping-box">
                                                                                            <div class="form-group">
                                                                                                <label for="shipping_method">Select Shipping Method</label>
                                                                                                <select class="form-control" id="shipping_method" name="shipping_method">
                                                                                                    <option value="">Select Shipping Method</option>
                                                                                                    <option value="FEDEX_GROUND">FEDEX Ground</option>
                                                                                                    <option value="FIRST_OVERNIGHT">FEDEX First Overnight</option>
                                                                                                    <option value="PRIORITY_OVERNIGHT">FEDEX Priority Overnight</option>
                                                                                                    <option value="STANDARD_OVERNIGHT">FEDEX Standard Overnight</option>
                                                                                                    <option value="FEDEX_2_DAY">FEDEX 2 Day</option>
                                                                                                    <option value="FEDEX_2_DAY_AM">FEDEX 2 Day AM</option>
                                                                                                    <option value="EXPRESS_SAVER">FEDEX Saver</option>
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-5 checkout-shipping-box">
                                                                                            <p class="stdFntMid">Freight for
                                                                                                <span id="spnGetItemCount">{{ $cart_count }}</span>
                                                                                                line item(s):
                                                                                                <strong>
                                                                                                    <b> $<span id="shipping_amount_2">0.00</span></b>
                                                                                                </strong>
                                                                                            </p>
                                                                                        </div>
                                                                                    </div>

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


                                                                    </div>

                                                                </div>



                                                            </div>

                                                            <div class="cartback guestcartlogin-backtocart">
                                                                <a class="cartbackBtn" id="shippingBackBtn" href="javascript:void();">Back To Cart</a>
                                                            </div>



                                                        </div>


                                                    </div>


                                                </div>









                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </section>

                        </div>
                        <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                        <div class="col-md-9 col-lg-9 cartPaymentArea">
                            <div class="row">
                                <div class="col-sm-6" style="min-height: 140px;">
                                    <h5 class="cartPreviewTitle font-size-large text-mid-dark">Billing Details:</h5>
                                    <div id="tab" class="acitemx">
                                        <div><i class="fa fa-building-o mr-10" aria-hidden="true"></i> <span id="billing_company_details"></span></div>
                                        <div><i class="fa fa-user mr-10" aria-hidden="true"></i> <span id="billing_customer_name_details"></span></div>
                                        <div class="shipAddressIcon"><i class="fa fa-map-marker" aria-hidden="true"></i>
                                            <span id="billing_address_details"></span></div>
                                        <div><i class="fa fa-phone mr-10" aria-hidden="true"></i> <span id="billing_phone_details"></span></div>
                                        <div><i class="fa fa-envelope-o mr-10" aria-hidden="true"></i> <span id="billing_email_details"></span></div>
                                    </div>
                                </div>
                                <div class="col-sm-6" style="min-height: 140px;">
                                    <h5 class="cartPreviewTitle font-size-large text-mid-dark">Shipping Details:</h5>
                                    <div id="tab" class="acitemx">
                                        <div><i class="fa fa-building-o mr-10" aria-hidden="true"></i> <span id="shipping_company_details"></span></div>
                                        <div><i class="fa fa-user mr-10" aria-hidden="true"></i> <span id="shipping_customer_name_details"></span></div>
                                        <div class="shipAddressIcon"><i class="fa fa-map-marker" aria-hidden="true"></i>
                                            <span id="shipping_address_details"></span></div>
                                        <div><i class="fa fa-phone mr-10" aria-hidden="true"></i> <span id="shipping_phone_details"></span></div>
                                        <div><i class="fa fa-envelope-o mr-10" aria-hidden="true"></i> <span id="shipping_email_details"></span></div>
                                    </div>
                                </div>
                            </div>

                            <div class="payment_process_accordian">

                                <div class="payment_process_accordian_container">

                                    <div class="accordion" id="accordionPanelsStayOpenExample">

                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                                <button class="accordion-button font-size-large text-mid-dark collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
                                                    Choose Payment Method
                                        </button>
                                            </h2>
                                            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
                                                <div class="accordion-body">
                                                    <!-- 1st Form is here -->
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <select class="form-control" id="pmethod" name="selectedPaymentMethod">
                                                                    <option value="company_po">Company PO</option>
                                                                    <option value="credit_card">Credit Card</option>
                                                                </select>
                                                            </div>

                                                            <div id="credit-card-block">

                                                                <div class="card">
                                                                    {{-- <div id="tm-braintree-div" class="collapse" aria-labelledby="headingOne" data-parent="#all-payment-methods"> --}}
                                                                        <div class="card-body">
                                                                            <div class="wrapper">
                                                                                <div class="checkout container">
                                                                                    <section> <div class="bt-drop-in-wrapper">
                                                                                        <div id="bt-dropin"></div>
                                                                                    </div>
                                                                                </section>
                                                                                <form action="{{ route('braintree.payment') }}" id="payment-form-bt" method="POST">
                                                                                    @csrf
                                                                                    <input type="hidden" id="nonce_bt" name="nonce" />
                                                                                    <input type="hidden" id="first_name_bt" name="first_name" />
                                                                                    <input type="hidden" id="last_name_bt" name="last_name" />
                                                                                    <input type="hidden" id="phone_bt" name="phone" />
                                                                                    <input type="hidden" id="street_bt" name="street" />
                                                                                    <input type="hidden" id="apartment_bt" name="apartment" />
                                                                                    <input type="hidden" id="city_bt" name="city" />
                                                                                    <input type="hidden" id="country_bt" name="country" />
                                                                                    <input type="hidden" id="state_bt" name="state" />
                                                                                    <input type="hidden" id="zip_bt" name="zip" />
                                                                                    <input type="hidden" id="course_bt" name="course" />
                                                                                    <input type="hidden" id="total_bt" name="total" />
                                                                                    <button class="button btn btn-payment btn-block" id="btPayStartBtn" form="payment-form-bt" type="submit">
                                                                                        <span>Click to complete purchase</span>
                                                                                    </button>
                                                                                </form>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    {{-- </div> --}}

                                                            </div>

                                                            <div id="company-po-block">
                                                                <div class="form-group">
                                                                    <label for="peymentterm">Payment Term</label><br>
                                                                    <input type="text" class="form-control payment-term-width" id="peymentterm" disabled="" value="Due upon Receipt">
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-sm-6 col-xs-12">
                                                                        <div class="form-group"><label class="">Customer PO Number</label><input class="form-control" type="text" name="poDetailViewModel.poDetailsDto.customerPoNumber" id="poDetailViewModel.poDetailsDto.customerPoNumber"
                                                                                maxlength="20" value=""></div>
                                                                    </div>
                                                                    <div class="col-sm-6 col-xs-12">
                                                                        <div class="form-group"><label class="">PO Date</label>
                                                                            <div class="input-group date form_date" data-date="" data-date-format="MM dd yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"><input class="form-control" size="16" type="date" name="poDate" id="poDate" max="2023-03-24" value=""></div><input type="hidden" id="dtp_input2" value=""></div>
                                                                    </div>
                                                                    <div class="col-sm-6 col-xs-12">
                                                                        <div class="form-group"><label>Expires on</label><br>
                                                                            <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"><input class="form-control" size="16" type="date" name="expireOn" id="expireon" min="2023-03-24" value=""></div><input type="hidden" id="dtp_input2" value=""></div>
                                                                    </div>
                                                                </div>
                                                            </div>


                                                        </div>

                                                        <div class="col-md-12">

                                                        </div>



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


                                        </div>

                                    </div>

                                    <!-- Processing Modal begins -->
                                    <div class="modal fade" id="processingModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-body">
                                                    <p>Your request is being processed. This may take a little time. Thank you for your patience!</p>
                                                    <div class="d-flex justify-content-center">
                                                        <div class="spinner-border text-success" style="width: 3rem; height: 3rem;" role="status">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Processing Modal ends -->

                                </div>

                            </div>





                            {{-- <div class="mt-4 mb-4">
                                <div>
                                    <div>
                                        <div style="width: 304px; height: 78px;">
                                            <div><iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LeZxJMfAAAAACfFvrAcRPJobtwJ-UMYTXx5nxU5&amp;co=aHR0cHM6Ly93d3cuaG5zdGVjaGluYy5jb206NDQz&amp;hl=en&amp;type=image&amp;v=vpEprwpCoBMgy-fvZET0Mz6L&amp;theme=light&amp;size=normal&amp;badge=bottomright&amp;cb=675kx7xwdzr5"
                                                    width="304" height="78" role="presentation" name="a-lrmvlfiejati" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div>
                                            <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
                                        </div><iframe style="display: none;"></iframe></div>
                                </div>
                            </div> --}}
                            <div class="checkout-footer margin-top-1x shopping-cart-footer-buttons">
                                <div class="column col"><a class="paymentBacktoCartBtn" href="javascript:void();"><span>Back</span></a></div>
                                <div class="column col"><button class="btn btn-primary primaryButton" id="paymentsubmitorder" onclick="location.href='/thank-you'">Complete Order</button></div>
                                <a href=""></a>
                            </div>
                        </div>

                    </div>


        </section>
        <!-- End Shoping Cart Section -->


@endsection

@section('end-scripts')
    @include('checkout.js-for-views.checkout-js')
    @include('checkout.js-for-views.payment-gateway-js.braintree-js')
    <script>
        var shipping_amount = 0;
        var tax_amount = 0;
        var same_billing = true;

        $(".update-cart").change(function (e) {
            e.preventDefault();

            var ele = $(this);

            $.ajax({
                url: '/update-cart',
                method: "patch",
                data: {
                    _token: '{{ csrf_token() }}',
                    product_id: ele.parents("tr").attr("data-id"),
                    quantity: ele.parents("tr").find(".quantityInput").val()
                },
                success: function (response) {
                window.location.reload();
                }
            });
        });

        $(".removeFromCart_container").click(function (e) {
            e.preventDefault();

            var ele = $(this);

            if(confirm("Are you sure want to remove?")) {
                $.ajax({
                    url: '/remove-from-cart',
                    method: "DELETE",
                    data: {
                        _token: '{{ csrf_token() }}',
                        product_id: ele.parents("tr").attr("data-id")
                    },
                    success: function (response) {
                        window.location.reload();
                    }
                });
            }
        });

        $(document).ready(function() {

        $("#same-billing-address").on("change", function() {
            if ($(this).prop("checked")) {
                // Checkbox is checked
                $('#billing-address-section').hide();
                same_billing = true;
                // console.log("Checkbox is checked.");
            } else {
                // Checkbox is unchecked
                same_billing = false;
                $('#billing-address-section').show();
                // console.log("Checkbox is unchecked.");
            }
        });
        // Country Dropdown change event
        $('#shipping_country').on('change', function() {
            var country_code = $(this).val();
            if (country_code) {
                $.ajax({
                    url: '/get-states?country_code=' + country_code,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#shipping_state').empty();
                        $('#shipping_state').append('<option value="">Select State</option>');
                        $.each(data, function(key, value) {
                            $('#shipping_state').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    }
                });
            } else {
                $('#shipping_state').empty();
                $('#shipping_state').append('<option value="">Select State</option>');
            }
        });

        $('#billing_country').on('change', function() {
            var country_code = $(this).val();
            if (country_code) {
                $.ajax({
                    url: '/get-states?country_code=' + country_code,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#billing_state').empty();
                        $('#billing_state').append('<option value="">Select State</option>');
                        $.each(data, function(key, value) {
                            $('#billing_state').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    }
                });
            } else {
                $('#billing_state').empty();
                $('#billing_state').append('<option value="">Select State</option>');
            }
        });

        $('#shipping_method').on('change', function() {
            var sub_total = {{ $sub_total }};
            var shipping_method = $(this).val();
            var shipping_zip = $('#shipping_zip').val();
            if (shipping_method) {
                $.ajax({
                    url: '/api/fetch-fedex-rates',
                    type: 'POST',
                    data: {
                        'service_type': shipping_method,
                        'weight': {{ $weight }},
                        'zipcode': shipping_zip
                    },
                    dataType: 'json',
                    success: function(data) {
                        console.log(data);
                        $('#shipping_amount').empty();
                        $('#shipping_amount_2').empty();

                        $('#shipping_amount').text(data.rate);
                        $('#shipping_amount_2').text(data.rate);
                        shipping_amount = data.rate;
                        $('#total_amount').text((parseFloat(shipping_amount) + parseFloat(tax_amount) + parseFloat(sub_total)).toFixed(2));

                    }
                });
            } else {
                $('#shipping_amount').empty();
                $('#shipping_amount_2').empty();
            }
        });

        $('#card_country').on('change', function() {
            var country_code = $(this).val();
            if (country_code) {
                $.ajax({
                    url: '/get-states?country_code=' + country_code,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#card_state').empty();
                        $('#card_state').append('<option value="">Select State</option>');
                        $.each(data, function(key, value) {
                            $('#card_state').append('<option value="' + value.code + '">' + value.name + '</option>');
                        });
                    }
                });
            } else {
                $('#card_state').empty();
                $('#card_state').append('<option value="">Select State</option>');
            }
        });

        $('#shipping_zip').on('focusout', function() {
            // Fetch the selected state code from the #shipping_state select element
            var state_code = $('#shipping_state').val();
            // alert(state_code);
            var country_code = $('#shipping_country').val();
            var zipcode = $(this).val(); // Get the value entered in the #shipping_zip input field
            var sub_total = {{ $sub_total }};
            if (state_code && country_code && zipcode) {
                $.ajax({
                    url: '/get-tax-rate?state_code=' + state_code + "&country_code=" + country_code + '&zipcode=' + zipcode,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#shipping_tax').empty();
                        var tax_amount = (sub_total * (data.rate / 100)).toFixed(2);
                        $('#shipping_tax').text(parseFloat(tax_amount));
                        console.log(sub_total);
                        $('#total_amount').text((parseFloat(shipping_amount) + parseFloat(tax_amount) + parseFloat(sub_total)).toFixed(2));
                    }
                });
            } else {
                $('#shipping_tax').empty();
            }
        });

        });

    </script>
@endsection