@extends('layouts.light.master')
@section('title', 'Shipping Quote Menu')

@section('css')
@endsection

@section('style')
    <style>
        .cart_checkout {
            border-collapse: collapse;
            /* Ensures borders are merged */
            width: 100%;
            /* Adjust as needed */
        }

        .asterisk {
            color: rgb(230, 20, 20);
        }

        .cart_checkout th,
        .cart_checkout td {
            font-size: 13px;
            border: 1px solid rgb(214, 200, 200);
            /* Adds border */
            padding: 3px;
            /* Adds space inside cells */
            /* text-align: center; */
            /* Centers content */
            vertical-align: middle;
            /* Ensures vertical centering */
        }

        .cart-border {
            border: 1px solid rgb(216, 210, 210);
        }

        .th-color {
            background-color: #cfe2ff;
        }

        .save-charge {
            color: rgb(54, 52, 209) !important;
            font-size: 13px !important;
        }
    </style>
@endsection

@section('breadcrumb-title')
    <h2>Cart<span>Checkout </span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item active">Cart</li>
    <li class="breadcrumb-item">Checkout</li>
@endsection

@section('content')
    <div class="container-fluid m-1">
        <input type="hidden" name="ach_pay_charge" id="ach_pay_charge" value="{{ number_format($ach_pay_charges, 2) }}">
        <input type="hidden" name="debit_card_charge" id="debit_card_charge" value="{{ number_format($debit_card_charges, 2) }}">
        <input type="hidden" name="credit_card_charge" id="credit_card_charge" value="{{ number_format($credit_card_charges, 2) }}">
        <input type="hidden" name="grandTotal" id="grandTotal" value="{{ number_format($grandTotal, 2) }}">
        <input type="hidden" name="credit_card_percent" id="credit_card_percent" value="{{ $credit_card_percent }}">
        <div class="row">
            <div class="col-sm-6 col-lg-6 col-md-6 col-12">
                <div class="row">
                    <div class="table-responsive">
                        <strong>Job Name: &nbsp;</strong><span>{{ $stock_check->job_name }}</span>
                        <table class="cart_checkout">
                            <thead>
                                <tr>
                                    <th class="th-color text-center">Double Check Work</th>
                                    <th class="th-color text-center">Cabinet Name</th>
                                    <th class="th-color text-center">Cabinet Description</th>
                                    <th class="th-color text-center">Weight</th>
                                    <th class="th-color text-center">Unit Price</th>
                                    <th class="th-color text-center">Total Price</th>
                                    <th class="th-color text-center">Quantity</th>
                                    {{-- <th class="th-color text-center">Assemble Cost</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rooms as $room)
                                    @foreach ($room['products'] as $product)
                                        @php
                                            $productDetails = $products->get($product['product_id']);
                                            $qty = $product['quantity'] ?? 1;
                                            $productWeight = $productDetails->weight * $qty;
                                            $productPrice = $productDetails->cost * $qty;
                                            $assembleCost = $productDetails->assemble_cost * $qty;
                                        @endphp
                                        <tr>
                                            <th style="padding-left: 15px !important;">
                                                <div class="mt-2">
                                                    <label class="container_chk_lbl">
                                                        <input disabled type="checkbox">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </div>
                                                <div>
                                                    <label class="container_chk_lbl_01">
                                                        <input disabled type="checkbox">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </div>
                                            </th>
                                            <td>{{ $productDetails->label }}</td>
                                            <td>{{ $productDetails->sku . ' - ' . $productDetails->doorColor->product_label ?? '' }}
                                            </td>
                                            <td>{{ $productWeight }}lbs</td>
                                            <td>${{ number_format($productDetails->cost, 2) }}</td>
                                            <td>${{ number_format($productPrice, 2) }}</td>
                                            <td>{{ $qty }}</td>
                                            {{-- <td>${{ number_format($assembleCost, 2) }}</td> --}}
                                        </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="2">Sub Total</th>
                                    <td></td>
                                    <td>{{ $totalWeight }} lbs</td>
                                    <td></td>
                                    <td class="all_cart_pro_total">${{ number_format($totalPrice, 2) }}</td>
                                    <td colspan="1"></td>
                                    {{-- <td>${{ number_format($miscellaneousCost, 2) }}</td> --}}
                                </tr>

                                <tr>
                                    <td colspan="2"><b>Fuel Charges <span
                                                class="fuel_charges">({{ $fuel_charge }}%)</span></b>
                                    </td>
                                    <td></td>
                                    <td>-</td>
                                    <td></td>
                                    <td class="full_cart_fuel_charges">${{ number_format($fuelCharges, 2) }}</td>
                                    <td colspan="1"></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr>
                                    <th colspan="2">Cabinetry Assembly Cost</th>
                                    <td></td>
                                    <td>-</td>
                                    <td></td>
                                    <td class="assemble_cost_cabinets">${{ number_format($assembleCost, 2) }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr>
                                    <th colspan="8">Shipping Charges</th>
                                </tr>

                                <tr>
                                    <th colspan="2">Pallets (Total Pallets =
                                        {{ $stock_check->total_pallets ?? 0 }})</th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>${{ number_format($stock_check->total_pallets * 30 ?? 0, 2) }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr>
                                    <th colspan="2">Liftgate Charges</th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>${{ number_format($liftgateCost, 2) }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr>
                                    @if ($stock_check->unload_type == 1)
                                        <th colspan="2">Unload Cost(By Hand)</th>
                                    @else
                                        <th colspan="2">Unload Cost(By Forklift)</th>
                                    @endif
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>${{ number_format($unloadCost, 2) }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>
                                @if ($stock_check->delivery_type == 1)
                                    <tr>
                                        <th colspan="2">Delivery Charges ( Commercial )</th>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>${{ number_format($deliveryCost, 2) }}</td>
                                        <td></td>
                                        {{-- <td></td> --}}
                                    </tr>
                                @else
                                    <tr>
                                        <th colspan="2">Delivery Charges ( Residential )</th>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>${{ number_format($deliveryCost, 2) }}</td>
                                        <td></td>
                                        {{-- <td></td> --}}
                                    </tr>
                                @endif

                                <tr>
                                    <td colspan="2"><b>Sales Tax <span
                                                class="tax_percent">({{ $tax_value }}%)</span></b>
                                        <p style="color:red;">NOTE: 'Sales Tax' will be calculated as per your Ship
                                            To 'County'.</p>
                                    </td>
                                    <td></td>
                                    <td>-</td>
                                    <td></td>
                                    <td class="full_cart_tax">${{ number_format($salesTax, 2) }}</td>
                                    <td colspan="1"></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr class="credit_card_charges_row" style="display: table-row;">
                                    <th colspan="2">Credit Card Charges(<span class="credit_card_percent_show_cls">{{ $credit_card_percent }}</span>%)</th>
                                    <td></td>
                                    <td>-</td>
                                    <td></td>
                                    <td class="credit_card_charges">${{ number_format($credit_card_charges, 2) }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr class="ach_charges_row" style="display: none;">
                                    <th colspan="2">ACH Charges</th>
                                    <td></td>
                                    <td>-</td>
                                    <td></td>
                                    <td class="ach_charges">${{ $ach_pay_charges }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr class="debit_card_charges_row" style="display: none;">
                                    <th colspan="2">Debit Card Charges</th>
                                    <td></td>
                                    <td>-</td>
                                    <td></td>
                                    <td class="debit_card_charges">${{ $debit_card_charges }}</td>
                                    <td></td>
                                    {{-- <td></td> --}}
                                </tr>

                                <tr>
                                    <th colspan="2">Grand Total</th>
                                    <td></td>
                                    <td>{{ $totalWeight }} lbs</td>
                                    <td></td>

                                    <td class="full_cart_tot_inc_all">
                                        ${{ number_format($grandTotal + $credit_card_charges, 2) }}</td>

                                    <td colspan="2"></td>
                                </tr>
                            </tfoot>
                        </table>
                        <input type="hidden" id="grandTotal_credit_card" value="{{ number_format($grandTotal + $credit_card_charges, 2)}}">
                        <input type="hidden" id="grandTotal_ach_pay" value="{{ number_format($grandTotal + $ach_pay_charges, 2)}}">
                        <input type="hidden" id="grandTotal_debit_card" value="{{ number_format($grandTotal + $debit_card_charges, 2)}}">

                        <div class="order_comment_cls" style="padding:6px;">
                            <b>Comment</b> : {{ $stock_check->comment }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="container-fluid">
                        <hr style="border: 2px solid #6489c0; width: 100%;">
                        <div class="row">
                            <div class="col-sm-12 col-lg-12 col-md-12 col-12">  
                                <div class="cart-border p-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="box-header">
                                                <h3 class="box-title"><b>Bill To:</b></h3>
                                            </div>
                                            <div class="box-body">
                                                <div class="form-group pt-3">
                                                    Name<span class="asterisk">*</span> : <input type="text"
                                                        class="form-control bill_to_name" name="bill_to_name"
                                                        value="{{ $user->username }}">
                                                    <div class="err_bill_to_name"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Address<span class="asterisk">*</span> :
                                                    <input class="form-control bill_to_address" placeholder="Enter ..." name="bill_to_address" type="text" value="{{ $user->address }}">
                                                    <div class="err_bill_to_address"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    City<span class="asterisk">*</span> : <input name="bill_to_city" id="bill_to_city"
                                                        type="text" class="form-control" value="{{ $user->city_name }}">
                                                    <div class="err_bill_to_city"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    State<span class="asterisk">*</span> :
                                                    <select class="form-control" name="bill_to_state" id="bill_to_state">
                                                        @foreach ($states as $state)
                                                            <option value="{{ $state->id }}"
                                                                {{ $user->state->name == $state->name ? 'selected' : '' }}>
                                                                {{ $state->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="err_bill_to_state"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    County<span class="asterisk">*</span> :
                                                    <div class="county_field_bill_to">
                                                        <input name="bill_to_county" id="bill_to_county" type="text"
                                                            class="form-control" value="{{ $user->county_name }}">
                                                    </div>
                                                    <div class="err_bill_to_county"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Country<span class="asterisk">*</span> :
                                                    <input name="bill_to_country" id="bill_to_country" type="text"
                                                        class="form-control" value="{{ $user->country_id }}">
                                                    <div class="err_bill_to_country"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Zip<span class="asterisk">*</span> : <input name="bill_to_zip" id="bill_to_zip"
                                                        type="text" class="form-control" value="{{ $user->zip_code }}">
                                                    <div class="err_bill_to_zip"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Email<span class="asterisk">*</span> : <input type="text"
                                                        class="form-control bill_to_email" name="bill_to_email"
                                                        value="{{ $user->email }}">
                                                    <div class="err_bill_to_email"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Phone<span class="asterisk">*</span> : <input type="text"
                                                        class="form-control bill_to_phone" name="bill_to_phone"
                                                        value="{{ $user->phone }}">
                                                    <div class="err_bill_to_phone"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 ship_to_div_con">
                                            <div class="box-header">
                                                <h3 class="box-title"><b>Ship To:</b></h3>
                                            </div>
                                            <div class="box-body">
                                                <div class="form-group pt-3">
                                                    Name<span class="asterisk">*</span> : <input type="text"
                                                        class="form-control bill_to_name" name="bill_to_name"
                                                        value="{{ $user->username }}">
                                                    <div class="err_bill_to_name"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Address<span class="asterisk">*</span> :
                                                    <input type="text" class="form-control bill_to_address" placeholder="Enter ..." name="bill_to_address" value="{{ $user->address }}">
                                                    <div class="err_bill_to_address"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    City<span class="asterisk">*</span> : <input name="bill_to_city" id="bill_to_city"
                                                        type="text" class="form-control" value="{{ $user->city_name }}">
                                                    <div class="err_bill_to_city"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    State<span class="asterisk">*</span> :
                                                    <select class="form-control" name="bill_to_state" id="bill_to_state">
                                                        @foreach ($states as $state)
                                                            <option value="{{ $state->id }}"
                                                                {{ $user->state->name == $state->name ? 'selected' : '' }}>
                                                                {{ $state->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="err_bill_to_state"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    County<span class="asterisk">*</span> :
                                                    <div class="county_field_bill_to">
                                                        <input name="bill_to_county" id="bill_to_county" type="text"
                                                            class="form-control" value="{{ $user->county_name }}">
                                                    </div>
                                                    <div class="err_bill_to_county"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Country<span class="asterisk">*</span> :
                                                    <input name="bill_to_country" id="bill_to_country" type="text"
                                                        class="form-control" value="{{ $user->country_id }}">
                                                    <div class="err_bill_to_country"></div>
                                                    <div class="err_bill_to_country"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Zip<span class="asterisk">*</span> : <input name="bill_to_zip" id="bill_to_zip"
                                                        type="text" class="form-control" value="{{ $user->zip_code }}">
                                                    <div class="err_bill_to_zip"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Email<span class="asterisk">*</span> : <input type="text"
                                                        class="form-control bill_to_email" name="bill_to_email"
                                                        value="{{ $user->email }}">
                                                    <div class="err_bill_to_email"></div>
                                                </div>
                                                <div class="form-group pt-3">
                                                    Phone<span class="asterisk">*</span> : <input type="text"
                                                        class="form-control bill_to_phone" name="bill_to_phone"
                                                        value="{{ $user->phone }}">
                                                    <div class="err_bill_to_phone"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-6 col-md-6 col-12 p-3">
                <div class="default-according" id="accordionclose">
                    <div class="card">
                        <div class="card-header" id="heading-credit-card" style="background-color:#cfe2ff; height: auto;">
                            {{-- <h6 class="mb-0"> --}}
                            <button class="btn btn-link credit_or_not_credit_card" data-bs-toggle="collapse" data-bs-target="#collapse-credit-card"
                                aria-expanded="true" aria-controls="collapse-credit-card" value="by_credit_card" id="by_cre_card">
                                I will Pay Using Credit Card
                            </button>
                            <span style="float:right;" class="save-charge">(You save nothing.)</span>
                            {{-- </h6> --}}
                        </div>

                        <div id="collapse-credit-card" class="collapse show" aria-labelledby="heading-credit-card"
                            data-bs-parent="#accordionclose" style="border: 1px solid #c0baba; border-top: none;">
                            <div class="box-body credit_card_div p-3">
                                <div class="row pt-3">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            First Name<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_fname" name="checkout_fname">
                                            <div class="err_checkout_fname"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            Last Name<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_lname" name="checkout_lname" value="">
                                            <div class="err_checkout_lname"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            Address<span class="asterisk">*</span> :
                                            <input class="form-control checkout_address" type="text"
                                                name="checkout_address">
                                            <div class="err_checkout_address"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            City<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_city" name="checkout_city" value="">
                                            <div class="err_checkout_city"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            State<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_state" name="checkout_state" value="">
                                            <div class="err_checkout_state"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            Zip Code<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_zipcode" name="checkout_zipcode"
                                                value="">
                                            <div class="err_checkout_zipcode"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            Card Number<span class="asterisk">*</span> : <input type="text"
                                                class="form-control pt-encrypt card_number" name="card_number"
                                                value="">
                                            <div class="err_card_number" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter card number.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            Expiration Date<span class="asterisk">*</span> :
                                            <input type="text" class="form-control expiry_date" name="expiry_date"
                                                value="">
                                            <span><strong>Format:</strong> MM/YY i.e 09/25</span>
                                            <div class="err_expiry_date" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter expiry date.</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            CVV Number<span class="asterisk">*</span> : <input type="text"
                                                class="form-control pt-encrypt cvv_number" name="cvv_number"
                                                value="">
                                            <div class="err_cvv_number" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter cvv number.</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <div class="">
                                                <label>
                                                    <input type="checkbox" class="mem_chk_cls">
                                                    As The Account Holder I Agree To The Membership Terms And Conditions.
                                                </label>
                                            </div>
                                            <div class="err_mem_chk_cls" style="display:none;"><span
                                                    style="color:red;font-size:12px;">Please read policy.</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div style="color:red;font-size:14px;">
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group" style="display: inline-block;width: 100%;">
                                            <input type="submit" onclick="checkvalidation_checkout(event,'credit_card')"
                                                id="final_frm_sub_btn" style="float: right;" name="payment_btn"
                                                class="btn btn-primary final_frm_sub_btn" value="Submit">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header" id="heading-debit-card" style="background-color:#cfe2ff; height: auto;">
                            {{-- <h6 class="mb-0"> --}}
                            <button class="btn btn-link credit_or_not_credit_card" data-bs-toggle="collapse" data-bs-target="#collapse-debit-card"
                                aria-expanded="false" aria-controls="collapse-debit-card" id="by_debit_card" value="by_debit_card">
                                I will Pay Using Debit Card
                            </button>
                            <span style="float:right;" class="debit_card_saving_amount save-charge">(You save ${{number_format(($credit_card_charges - $debit_card_charges), 2)}})</span>
                            {{-- </h6> --}}
                        </div>

                        <div id="collapse-debit-card" class="collapse" aria-labelledby="heading-debit-card"
                            data-bs-parent="#accordionclose" style="border: 1px solid #c0baba; border-top: none;">
                            <div class="box-body credit_card_div p-3">
                                <div class="row pt-3">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            First Name<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_fname" name="checkout_fname">
                                            <div class="err_checkout_fname"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            Last Name<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_lname" name="checkout_lname" value="">
                                            <div class="err_checkout_lname"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            Address<span class="asterisk">*</span> :
                                            <input class="form-control checkout_address" type="text"
                                                name="checkout_address">
                                            <div class="err_checkout_address"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            City<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_city" name="checkout_city" value="">
                                            <div class="err_checkout_city"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            State<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_state" name="checkout_state" value="">
                                            <div class="err_checkout_state"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            Zip Code<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_zipcode" name="checkout_zipcode"
                                                value="">
                                            <div class="err_checkout_zipcode"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            Card Number<span class="asterisk">*</span> : <input type="text"
                                                class="form-control pt-encrypt card_number" name="card_number"
                                                value="">
                                            <div class="err_card_number" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter card number.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            Expiration Date<span class="asterisk">*</span> :
                                            <input type="text" class="form-control expiry_date" name="expiry_date"
                                                value="">
                                            <span><strong>Format:</strong> MM/YY i.e 09/25</span>
                                            <div class="err_expiry_date" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter expiry date.</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            CVV Number<span class="asterisk">*</span> : <input type="text"
                                                class="form-control pt-encrypt cvv_number" name="cvv_number"
                                                value="">
                                            <div class="err_cvv_number" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter cvv number.</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <div class="">
                                                <label>
                                                    <input type="checkbox" class="mem_chk_cls">
                                                    As The Account Holder I Agree To The Membership Terms And Conditions.
                                                </label>
                                            </div>
                                            <div class="err_mem_chk_cls" style="display:none;"><span
                                                    style="color:red;font-size:12px;">Please read policy.</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div style="color:red;font-size:14px;">
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group" style="display: inline-block;width: 100%;">
                                            <input type="submit" onclick="checkvalidation_checkout(event,'credit_card')"
                                                id="final_frm_sub_btn" style="float: right;" name="payment_btn"
                                                class="btn btn-primary final_frm_sub_btn" value="Submit">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header" id="heading-ach" style="background-color:#cfe2ff; height: auto;">
                            {{-- <h6 class="mb-0"> --}}
                            <button class="btn btn-link credit_or_not_credit_card" data-bs-toggle="collapse" data-bs-target="#collapse-ach"
                                aria-expanded="false" aria-controls="collapse-ach" id="n_cre_card" value="pay_ach">
                                I will Pay Using ACH
                            </button>
                            <span style="float:right;" class="ach_saving_amount save-charge">(You save ${{number_format(($credit_card_charges - $ach_pay_charges), 2)}})</span>
                            {{-- </h6> --}}
                        </div>

                        <div id="collapse-ach" class="collapse" aria-labelledby="heading-ach"
                            data-bs-parent="#accordionclose" style="border: 1px solid #c0baba; border-top: none;">
                            <div class="box-body credit_card_div p-3">
                                <div class="row pt-3">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            First Name<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_fname" name="checkout_fname">
                                            <div class="err_checkout_fname"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            Last Name<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_lname" name="checkout_lname" value="">
                                            <div class="err_checkout_lname"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            Address<span class="asterisk">*</span> :
                                            <input class="form-control checkout_address" type="text"
                                                name="checkout_address">
                                            <div class="err_checkout_address"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            City<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_city" name="checkout_city" value="">
                                            <div class="err_checkout_city"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            State<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_state" name="checkout_state" value="">
                                            <div class="err_checkout_state"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            Zip Code<span class="asterisk">*</span> : <input type="text"
                                                class="form-control checkout_zipcode" name="checkout_zipcode"
                                                value="">
                                            <div class="err_checkout_zipcode"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            Card Number<span class="asterisk">*</span> : <input type="text"
                                                class="form-control pt-encrypt card_number" name="card_number"
                                                value="">
                                            <div class="err_card_number" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter card number.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            Expiration Date<span class="asterisk">*</span> :
                                            <input type="text" class="form-control expiry_date" name="expiry_date"
                                                value="">
                                            <span><strong>Format:</strong> MM/YY i.e 09/25</span>
                                            <div class="err_expiry_date" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter expiry date.</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            CVV Number<span class="asterisk">*</span> : <input type="text"
                                                class="form-control pt-encrypt cvv_number" name="cvv_number"
                                                value="">
                                            <div class="err_cvv_number" style="display: none;"><span
                                                    style="color:red;font-size:12px;">Please enter cvv number.</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <div class="">
                                                <label>
                                                    <input type="checkbox" class="mem_chk_cls">
                                                    As The Account Holder I Agree To The Membership Terms And Conditions.
                                                </label>
                                            </div>
                                            <div class="err_mem_chk_cls" style="display:none;"><span
                                                    style="color:red;font-size:12px;">Please read policy.</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div style="color:red;font-size:14px;">
                                </div>
                                <div class="row pt-3">
                                    <div class="col-lg-12">
                                        <div class="form-group" style="display: inline-block;width: 100%;">
                                            <input type="submit" onclick="checkvalidation_checkout(event,'credit_card')"
                                                id="final_frm_sub_btn" style="float: right;" name="payment_btn"
                                                class="btn btn-primary final_frm_sub_btn" value="Submit">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header" id="heading-cash-wire-transfer"
                            style="background-color:#cfe2ff; height: auto;">
                            {{-- <h6 class="mb-0"> --}}
                            <button class="btn btn-link credit_or_not_credit_card" data-bs-toggle="collapse"
                                data-bs-target="#collapse-cash-wire-transfer" aria-expanded="false"
                                aria-controls="collapse-cash-wire-transfer" id="n_cre_cardn_ach" value="not_credit_card_and_ach">
                                I Will Pay By Cash/Wire Transfer
                            </button>
                            <span style="float:right;" class="cash_saving_amount save-charge">(You save ${{number_format($credit_card_charges, 2)}})</span>
                            {{-- </h6> --}}
                        </div>

                        <div id="collapse-cash-wire-transfer" class="collapse"
                            aria-labelledby="heading-cash-wire-transfer" data-bs-parent="#accordionclose"
                            style="border: 1px solid #c0baba; border-top: none;">
                            <div class="p-3">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <input type="radio" id="by_cash" name="payment_method" checked=""
                                                value="cash">
                                            <label for="by_cash">Cash</label>
                                            <input type="radio" id="by_wire_transfer" name="payment_method"
                                                value="wire transfer">
                                            <label for="by_wire_transfer">Wire Transfer</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group" style="display: inline-block;width: 100%;">
                                            <input type="submit" onclick="checkvalidation_checkout(event,'cash')"
                                                id="final_frm_sub_btn" style="float: right;" name="payment_btn"
                                                class="btn btn-primary final_frm_sub_btn" value="Submit">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $('.credit_or_not_credit_card').click(function(e) {
            var selected_value = e.target.value;
            console.log(selected_value)

            // val(new_grand_total_cart.toFixed(2));
            var ach_pay_charge = $("#ach_pay_charge").val();
            var debit_card_charge = $("#debit_card_charge").val();
            var credit_card_charge = $("#credit_card_charge").val();
            var grandTotal = "$" + $("#grandTotal").val();
            var credit_card_percent = $("#credit_card_percent").val();

            var grandTotal_credit_card = "$" + $("#grandTotal_credit_card").val();
            var grandTotal_ach_pay = "$" + $("#grandTotal_ach_pay").val();
            var grandTotal_debit_card = "$" + $("#grandTotal_debit_card").val();

            $(".credit_card_percent_show_cls").html(credit_card_percent);
            $(".credit_card_charges").html(credit_card_charge);
            $(".full_cart_tot_inc_all").html(grandTotal_credit_card);

            if (selected_value == "not_credit_card_and_ach") {
                $(".full_cart_tot_inc_all").html(grandTotal);
                $('.credit_card_charges_row').hide();
                $('.ach_charges_row').hide();
                $('.debit_card_charges_row').hide();

            } else if (selected_value == "pay_ach") {
                $(".full_cart_tot_inc_all").html(grandTotal_ach_pay);
                $('.credit_card_charges_row').hide();
                $('.ach_charges_row').show();
                $('.debit_card_charges_row').hide();

            } else if (selected_value == "by_debit_card") {
                $(".full_cart_tot_inc_all").html(grandTotal_debit_card);
                $('.credit_card_charges_row').hide();
                $('.ach_charges_row').hide();
                $('.debit_card_charges_row').show();
            } else {
                $('.credit_card_charges_row').show();
                $('.ach_charges_row').hide();
                $('.debit_card_charges_row').hide();
            }
        });
    </script>
@endsection


{{-- sweet alert link start --}}

{{--
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"
    integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}

{{-- sweet alert link end --}}