@extends('web.home.layout.master')

@section('content')
    <div id="page-content">


        <div class="container-fluid" style="padding-top: 10px;padding-right:5%;padding-left:5%;">
            <div class="row">
                @php
                    $user = Auth::user();
                @endphp
                @if ($user == null)
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3">
                        <div class="customer-box returning-customer" style="padding-top: 10%;">
                            <h3><i class="icon anm anm-user-al"></i> Returning customer? <a href="#customer-login"
                                    id="customer" class="text-white" data-toggle="collapse">Please Login</a></h3>
                        </div>

                    </div>
                @endif

            </div>
            @php
                $productdata = App\Models\Product::where('id', $productid)->first();
                $total = $productprice * $quantity;
            @endphp
            @php
                try {
                    $user = Auth::user();
                    $totalPrice = 0;
                    $totalWeightInGrams = 0;
                    $productdata = App\Models\Product::where('id', $productid)->first();

                    $totalWeightInGrams = $productdata->weight * $quantity;

                    $totalWeightInKg = $totalWeightInGrams / 1000;

                    // Calculate shipping price based on total weight in kilograms

                    if ($totalWeightInKg > 1) {
                        $shippingPrice = $totalWeightInKg * 80;
                    } else {
                        $shippingPrice = 0;
                    } // LKR 80 per kg
                    $totalPriceWithShipping = $totalPrice + $shippingPrice;
                } catch (\Throwable $th) {
                    DB::table('error_logs')->insert([
                        'message' => $th->getMessage(),
                        'file' => $th->getFile(),
                        'line' => $th->getLine(),
                        'trace' => $th->getTraceAsString(),
                        'created_at' => now(),
                    ]);
                }
            @endphp
            <div class="row billing-fields" style="padding-top: 4%">
                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 sm-margin-30px-bottom modern-billing-form">

                    <form id="billing-form" class="checkout-form">
                        @csrf
                        <fieldset>
                            <h2 class="form-title">Shipping details</h2>
                            <div class="form-row">
                                <input type="hidden" name="product_id" value="{{ $productid }}">
                                <input type="hidden" name="size" value="{{ $size }}">
                                <input type="hidden" name="color" value="{{ $setcolor }}">
                                <input type="hidden" name="quantity" value="{{ $quantity }}">
                                <input type="hidden" name="price" value="{{ $productprice }}">
                                @if (Auth::check())
                                    @php
                                        $user = Auth::user();
                                    @endphp
                                    <div class="form-group col-half" hidden>
                                        <label for="input-firstname">Name <span class="required">*</span></label>
                                        <input name="firstname" value="{{ $user->name ?? ($userdata->first_name ?? '') }}"
                                            id="input-firstname" type="text" maxlength="20">
                                    </div>
                                    <div class="form-group col-half" hidden>
                                        <label for="input-lastname">Last Name <span class="required">*</span></label>
                                        <input name="lastname" value="null" id="input-lastname" type="text"
                                            maxlength="20">
                                        <input type="text" id="totalamount" hidden>
                                    </div>
                                @else
                                    <div class="form-group col-half" hidden>
                                        <label for="input-firstname">First Name <span class="required">*</span></label>
                                        <input name="firstname" value="" id="input-firstname" type="text"
                                            maxlength="20" required>
                                    </div>
                                    <div class="form-group col-half" hidden>
                                        <label for="input-lastname">Last Name <span class="required">*</span></label>
                                        <input name="lastname" value="" id="input-lastname" type="text"
                                            maxlength="20" required>
                                        <input type="text" id="totalamount" hidden>
                                    </div>
                                @endif
                            </div>
                            <div class="form-row">
                                @if (Auth::check())
                                    <div class="form-group col-half" hidden>
                                        <label for="input-email">E-Mail <span class="required">*</span></label>
                                        <input name="email" value="{{ auth()->user()->email }}" id="input-email"
                                            type="email" readonly class="readonly-input">
                                    </div>
                                @else
                                    <div class="form-group col-half">
                                        <label for="input-email">E-Mail <span class="required">*</span></label>
                                        <input name="email" id="input-email" type="email" maxlength="35" required>
                                    </div>
                                @endif
                                <div class="form-group col-half">
                                    <label for="input-fullname">Full Name <span class="required">*</span></label>
                                    <input id="input-fullname" name="fullname" type="text" required>
                                </div>
                                <div class="form-group col-half">
                                    <label for="input-telephone">Telephone <span class="required">*</span></label>
                                    <input id="input-telephone" name="telephone" type="tel" maxlength="10" required>
                                </div>
                                <script>
                                    const input = document.querySelector("#input-telephone");

                                    const iti = window.intlTelInput(input, {
                                        initialCountry: "auto",
                                        separateDialCode: true,
                                        nationalMode: false,
                                        geoIpLookup: function(callback) {
                                            fetch("https://ipapi.co/json")
                                                .then(res => res.json())
                                                .then(data => callback(data.country_code))
                                                .catch(() => callback("us"));
                                        },
                                        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
                                    });
                                </script>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-half">
                                    <label for="input-company">Company</label>
                                    <input name="company" value="" id="input-company" type="text"
                                        maxlength="20">
                                </div>
                                <div class="form-group col-half">
                                    <label for="input-address-1">Address 1<span class="required">*</span></label>
                                    <input name="address_1" value="{{ $userdataset ?? ($userdata->address ?? '') }}"
                                        id="input-address-1" type="text" maxlength="30" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-half">
                                    <label for="input-address-2">Address 2</label>
                                    <input name="address_2" value="{{ $userdataset ?? ($userData->address_two ?? '') }}"
                                        id="input-address-2" type="text" maxlength="30">
                                </div>
                                <div class="form-group col-half">
                                    <label for="input-postcode">Postal Code</label>
                                    <input name="postcode" value="{{ $userdataset ?? ($userdata->zipcode ?? '') }}"
                                        id="input-postcode" type="text" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-half">
                                    <label for="inputdistrict">District <span class="required">*</span></label>
                                    <select id="inputdistrict" name="district" required
                                        style="border-radius: 20px; border: 1px solid #ccc; padding: 8px 12px;">
                                        <option value="">-- Select District --</option>
                                        <option value="Ampara">Ampara</option>
                                        <option value="Anuradhapura">Anuradhapura</option>
                                        <option value="Badulla">Badulla</option>
                                        <option value="Batticaloa">Batticaloa</option>
                                        <option value="Colombo">Colombo</option>
                                        <option value="Galle">Galle</option>
                                        <option value="Gampaha">Gampaha</option>
                                        <option value="Hambantota">Hambantota</option>
                                        <option value="Jaffna">Jaffna</option>
                                        <option value="Kalutara">Kalutara</option>
                                        <option value="Kandy">Kandy</option>
                                        <option value="Kegalle">Kegalle</option>
                                        <option value="Kilinochchi">Kilinochchi</option>
                                        <option value="Kurunegala">Kurunegala</option>
                                        <option value="Mannar">Mannar</option>
                                        <option value="Matale">Matale</option>
                                        <option value="Matara">Matara</option>
                                        <option value="Moneragala">Moneragala</option>
                                        <option value="Mullaitivu">Mullaitivu</option>
                                        <option value="Nuwara Eliya">Nuwara Eliya</option>
                                        <option value="Polonnaruwa">Polonnaruwa</option>
                                        <option value="Puttalam">Puttalam</option>
                                        <option value="Ratnapura">Ratnapura</option>
                                        <option value="Trincomalee">Trincomalee</option>
                                        <option value="Vavuniya">Vavuniya</option>
                                    </select>
                                </div>
                                <div class="form-group col-half">
                                    <label for="inputState">City<span class="required">*</span></label>
                                    <input name="city" value="{{ $userdataset ?? ($userdata->city ?? '') }}"
                                        id="inputCity" type="text" required>
                                    <span id="area-error" class="error-message"></span>
                                </div>
                                {{-- <div class="form-group col-half">
                                    <label for="inputState">Area<span class="required">*</span></label>
                                    @php
                                        $areas = App\Models\Area::where('status', 1)->get();
                                        $selectedArea = isset($userdata) ? $userdata->area : null;
                                        $sortedAreas = $areas->sortBy('area_name');
                                    @endphp
                                    <select id="inputState" class="form-select" name="area" required>
                                        <option selected disabled>Choose...</option>
                                        @foreach ($sortedAreas as $item)
                                            <option value="{{ $item->area_name }}">
                                                {{ $item->area_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span id="area-error" class="error-message"></span>
                                </div> --}}
                                <script>
                                    $.ajaxSetup({
                                        headers: {
                                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                        }
                                    });
                                    // Get the select element


                                    function anotherFunction(grandTotal) {
                                        // Do something with the grand total
                                        console.log("Grand Total passed to another function: ", grandTotal);
                                        // You can perform further actions here
                                    }
                                </script>
                            </div>
                            <div class="form-row">
                                <div class="form-group full-width">
                                    <label for="ordernte">Order Notes</label>
                                    <textarea class="form-textarea" rows="3" name="ordernote" id="ordernte"></textarea>
                                </div>
                            </div>
                        </fieldset>
                    </form>


                    <style>
                        .modern-billing-form {
                            background: #ffffff;
                            border-radius: 8px;
                            padding: 30px;
                            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
                            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
                        }

                        .checkout-form {
                            max-width: 800px;
                            margin: 0 auto;
                        }

                        .form-title {
                            font-size: 1.5rem;
                            color: #2d3748;
                            margin-bottom: 1.5rem;
                            padding-bottom: 0.75rem;
                            border-bottom: 1px solid #e2e8f0;
                        }

                        .form-row {
                            display: flex;
                            flex-wrap: wrap;
                            margin: 0 -15px 20px;
                        }

                        .col-half {
                            flex: 0 0 50%;
                            padding: 0 15px;
                            box-sizing: border-box;
                        }

                        .full-width {
                            flex: 0 0 100%;
                        }

                        .form-group {
                            margin-bottom: 1.25rem;
                        }

                        label {
                            display: block;
                            margin-bottom: 8px;
                            font-size: 0.875rem;
                            font-weight: 500;
                            color: #4a5568;
                        }

                        .required {
                            color: #e53e3e;
                        }

                        input[type="text"],
                        input[type="email"],
                        input[type="tel"],
                        input[type="number"],
                        select,
                        textarea {
                            width: 100%;
                            padding: 12px 15px;
                            border: 1px solid #e2e8f0;
                            border-radius: 6px;
                            font-size: 0.9375rem;
                            transition: all 0.3s ease;
                            background-color: #f8fafc;
                        }

                        input:focus,
                        select:focus,
                        textarea:focus {
                            outline: none;
                            border-color: #4299e1;
                            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
                            background-color: #fff;
                        }

                        .readonly-input {
                            background-color: #edf2f7;
                            color: #718096;
                            cursor: not-allowed;
                        }

                        .form-select {
                            appearance: none;
                            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
                            background-repeat: no-repeat;
                            background-position: right 15px center;
                            background-size: 16px 12px;
                        }

                        .form-textarea {
                            min-height: 100px;
                            resize: vertical;
                        }

                        .error-message {
                            color: #e53e3e;
                            font-size: 0.75rem;
                            margin-top: 5px;
                        }

                        @media (max-width: 768px) {
                            .col-half {
                                flex: 0 0 100%;
                            }

                            .form-row {
                                margin-bottom: 10px;
                            }

                            .modern-billing-form {
                                padding: 20px;
                            }
                        }
                    </style>
                </div>

                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                    <div class="your-order-payment">
                        <div class="order-summary-container">
                            <div class="order-header">
                                <h3>Order Summary</h3>
                            </div>

                            <div class="order-table">
                                <table class="modern-order-table">
                                    <thead>
                                        <tr>
                                            <th class="product-col">Product</th>
                                            <th class="price-col">Price</th>
                                            <th class="color-col">Color</th>
                                            <th class="qty-col">Qty</th>
                                            <th class="subtotal-col">Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="product-name">{{ $productdata->product_name }}</td>
                                            <td class="price">LKR {{ number_format($productprice, 2) }}</td>
                                            <td class="color">
                                                <span class="color-badge"
                                                    style="background-color: {{ $setcolor }}"></span>

                                            </td>
                                            <td class="quantity">{{ $quantity }}</td>
                                            <td class="subtotal">LKR {{ number_format($total, 2) }}</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr class="summary-row">
                                            <td colspan="4" class="summary-label">
                                                Shipping (Included Weight*)
                                            </td>
                                            <td class="summary-value shipping-price">LKR 0.00</td>
                                        </tr>
                                        <tr class="total-row">
                                            <td colspan="4" class="total-label">Total</td>
                                            <td class="total-price">LKR&nbsp;0.00</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <style>
                            .order-summary-container {
                                font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
                                border-radius: 8px;
                                overflow: hidden;
                                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
                            }

                            .order-header {
                                background: linear-gradient(135deg, #ffffff, #fafafa);
                                color: white;
                                padding: 16px 20px;
                            }

                            .order-header h3 {
                                margin: 0;
                                font-weight: 600;
                                font-size: 1.2rem;
                            }

                            .modern-order-table {
                                width: 100%;
                                border-collapse: collapse;
                                background: white;
                            }

                            .modern-order-table th {
                                padding: 14px 12px;
                                text-align: left;
                                font-weight: 500;
                                color: #555;
                                font-size: 0.9rem;
                                border-bottom: 2px solid #f0f0f0;
                            }

                            .modern-order-table td {
                                padding: 16px 12px;
                                border-bottom: 1px solid #f5f5f5;
                                vertical-align: middle;
                            }

                            .product-name {
                                font-weight: 500;
                                color: #333;
                            }

                            .price,
                            .subtotal,
                            .summary-value {
                                font-weight: 500;
                                color: #444;
                            }

                            .color-badge {
                                display: inline-block;
                                width: 16px;
                                height: 16px;
                                border-radius: 50%;
                                margin-right: 8px;
                                vertical-align: middle;
                                border: 1px solid #e0e0e0;
                            }

                            .summary-row td {
                                padding-top: 20px;
                                border-bottom: none;
                            }

                            .summary-label {
                                text-align: right;
                                color: #666;
                                font-size: 0.95rem;
                            }

                            .total-row {
                                background-color: #f9f9f9;
                            }

                            .total-row td {
                                padding: 18px 12px;
                                border-bottom: none;
                            }

                            .total-label {
                                text-align: right;
                                font-weight: 600;
                                color: #333;
                                font-size: 1rem;
                            }

                            .total-value {
                                font-weight: 600;
                                color: #2c7be5;
                                font-size: 1.1rem;
                            }

                            /* Responsive adjustments */
                            @media (max-width: 768px) {

                                .modern-order-table th,
                                .modern-order-table td {
                                    padding: 12px 8px;
                                    font-size: 0.85rem;
                                }

                                .order-header h3 {
                                    font-size: 1.1rem;
                                }
                            }
                        </style>

                        <hr />

                        <div class="your-payment">

                            <div class="payment-method">
                                <div class="payment-accordion" hidden>
                                    <div id="accordion" class="payment-section">
                                        <div class="card mb-2" hidden>
                                            <div class="card-header">
                                                <a class="card-link" data-toggle="collapse" href="#collapseOne">Direct
                                                    Bank Transfer </a>
                                            </div>
                                            <div id="collapseOne" class="collapse" data-parent="#accordion">
                                                <div class="card-body">
                                                    <p class="no-margin font-15">Make your payment directly into our bank
                                                        account. Please use your Order ID as the payment reference. Your
                                                        order won't be shipped until the funds have cleared in our account.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="card mb-2">
                                            <div class="card-header">
                                                <a class="collapsed card-link" data-toggle="collapse"
                                                    href="#collapseFour"> Payment Information </a>
                                            </div>
                                            <div id="collapseFour" class="collapse" data-parent="#accordion">
                                                <div class="card-body">
                                                    <fieldset>
                                                        <div class="row">
                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                <label for="input-cardname">Name on Card <span
                                                                        class="required-f">*</span></label>
                                                                <input type="text" id="cardholder-name"
                                                                    class="input-field"
                                                                    title="cardholder
                                                                name"
                                                                    aria-label="enter name on card" value=""
                                                                    tabindex="5">
                                                            </div>
                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                <label for="input-country">Credit Card Type <span
                                                                        class="required-f">*</span></label>
                                                                <select name="country_id" class="form-control">
                                                                    <option value=""> --- Please Select --- </option>
                                                                    <option value="1">American Express</option>
                                                                    <option value="2">Visa Card</option>
                                                                    <option value="3">Master Card</option>
                                                                    <option value="4">Discover Card</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                <label for="input-cardno">Credit Card Number <span
                                                                        class="required-f">*</span></label>
                                                                <input type="text" id="card-number"
                                                                    class="input-field" title="card number"
                                                                    arialabel="enter your card number" value=""
                                                                    tabindex="1">
                                                            </div>
                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                <label for="input-cvv">CVV Code <span
                                                                        class="required-f">*</span></label>
                                                                <input type="text" id="security-code"
                                                                    class="input-field" title="security code"
                                                                    arialabel="three digit CCV security code"
                                                                    value="" tabindex="4">
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                <label for="exdatecard">Expiration Month <span
                                                                        class="required-f">*</span></label>
                                                                <input type="text" id="expiry-month"
                                                                    class="input-field" title="expiry month"
                                                                    arialabel="two digit expiry month" value=""
                                                                    tabindex="2" required>

                                                            </div>

                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required">
                                                                <label for="exdatecard">Expiration Year <span
                                                                        class="required-f">*</span></label>
                                                                <input type="text" id="expiry-year"
                                                                    class="input-field" title="expiry year"
                                                                    arialabel="two digit expiry year" value=""
                                                                    tabindex="3" required>

                                                            </div>
                                                            <div class="form-group col-md-6 col-lg-6 col-xl-6 required"
                                                                hidden>
                                                                <img class="padding-25px-top xs-padding-5px-top"
                                                                    src="assets/images/payment-img.jpg" alt="card"
                                                                    title="card" />
                                                            </div>
                                                        </div>
                                                    </fieldset>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="cart_tearm">
                                    <label>
                                        <input type="checkbox" name="tearm" id="cartTearm" class="checkbox"
                                            value="tearm" required="">
                                        I agree with the <a
                                            href="{{ route('american.plastic.web.terms.conditions') }}">terms and
                                            conditions</a></label>

                                </p>
                                <div class="order-button-payment">
                                    <button class="btn" id="checkout-button" value="Place order" type="button"
                                        disabled>Place
                                        order</button>

                                </div>
                                <div class="col">
                                    <img src="{{ asset('assets/images/paymentgatewaysolution.jpg') }}" class="img-fluid">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        window.onload = cal();
        document.addEventListener("DOMContentLoaded", function() {
            var checkbox = document.getElementById("cartTearm");
            var checkoutButton = document.getElementById("checkout-button");

            // Ensure the button is disabled on page load
            checkoutButton.disabled = true;
            checkoutButton.classList.add("btn--disabled");

            checkbox.addEventListener("change", function() {
                if (checkbox.checked) {
                    checkoutButton.disabled = false;
                    checkoutButton.classList.remove("btn--disabled");

                } else {
                    checkoutButton.disabled = true;
                    checkoutButton.classList.add("btn--disabled");
                }
            });

        });

        function cal() {
            // Get the selected value
            var selectedvalue = 'Pagoda';
            let csrfToken = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: "GET", // or "GET" depending on your route configuration
                url: "{{ route('zone.check', ':selectedvalue') }}".replace(':selectedvalue',
                    selectedvalue),
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }, // replace with the actual route URL
                success: function(response) {
                    let additionalShippingPrice = parseFloat(response);
                    let initialShippingPrice = parseFloat("{{ $shippingPrice }}");

                    // Calculate the new total shipping price
                    let totalShippingPrice = additionalShippingPrice + initialShippingPrice;

                    // Update the grand total
                    var existingTotal = parseFloat("{{ $total }}");
                    var grandTotal = totalShippingPrice + existingTotal;
                    $('td.shipping-price').text('LKR ' + totalShippingPrice.toFixed(2));
                    $('td.total-price').text('LKR ' + grandTotal.toFixed(2));
                    document.getElementById('totalamount').value = grandTotal;
                    anotherFunction(grandTotal);


                },
                error: function(error) {
                    Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                        displayDuration: 3000
                    });
                }
            });
        }

        $('body').on('click', '#checkout-button', function() {
            const fullNumber = iti.getNumber();
            // Set the value of the input to full number
            input.value = fullNumber;
            var firstname = document.getElementById('input-firstname');
            var lastname = document.getElementById('input-lastname');
            var email = document.getElementById('input-email');
            var telephone = document.getElementById('input-telephone');
            var addressone = document.getElementById('input-address-1');
            var fullname = document.getElementById('input-fullname');

            var district = document.getElementById('inputdistrict');
            var city = document.getElementById('inputCity');
            var postalcode = document.getElementById('input-postcode');


            var errorSpan = document.getElementById("area-error");



            if (fullname.value === "") {
                document.getElementById('input-fullname').focus();
                event.preventDefault();

                // Create notification element
                const notification = document.createElement('div');
                notification.textContent = 'Please fill in your full name';
                notification.style.position = 'fixed';
                notification.style.bottom = '20px';
                notification.style.right = '20px';
                notification.style.padding = '15px 20px';
                notification.style.backgroundColor = '#f8f9fa';
                notification.style.color = '#212529';
                notification.style.border = '1px solid #dee2e6';
                notification.style.borderRadius = '5px';
                notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                notification.style.zIndex = '1000';
                notification.style.fontFamily = 'Arial, sans-serif';
                notification.style.fontSize = '14px';
                notification.style.transition = 'all 0.3s ease';

                // Add to document
                document.body.appendChild(notification);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);;
                return false;
            } else if (!/^\S+@\S+\.\S+$/.test(email.value)) {
                document.getElementById('input-email').focus();
                event.preventDefault();

                // Create notification element
                const notification = document.createElement('div');
                notification.textContent = 'Please fill in your email address';
                notification.style.position = 'fixed';
                notification.style.bottom = '20px';
                notification.style.right = '20px';
                notification.style.padding = '15px 20px';
                notification.style.backgroundColor = '#f8f9fa';
                notification.style.color = '#212529';
                notification.style.border = '1px solid #dee2e6';
                notification.style.borderRadius = '5px';
                notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                notification.style.zIndex = '1000';
                notification.style.fontFamily = 'Arial, sans-serif';
                notification.style.fontSize = '14px';
                notification.style.transition = 'all 0.3s ease';

                // Add to document
                document.body.appendChild(notification);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);;
                return false;
            } else if (telephone.value === "" || !/^\+?\d+$/.test(telephone.value)) {
                document.getElementById('input-telephone').focus();
                event.preventDefault();

                // Create notification element
                const notification = document.createElement('div');
                notification.textContent = 'Please fill in your telephone number';
                notification.style.position = 'fixed';
                notification.style.bottom = '20px';
                notification.style.right = '20px';
                notification.style.padding = '15px 20px';
                notification.style.backgroundColor = '#f8f9fa';
                notification.style.color = '#212529';
                notification.style.border = '1px solid #dee2e6';
                notification.style.borderRadius = '5px';
                notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                notification.style.zIndex = '1000';
                notification.style.fontFamily = 'Arial, sans-serif';
                notification.style.fontSize = '14px';
                notification.style.transition = 'all 0.3s ease';

                // Add to document
                document.body.appendChild(notification);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);;
                return false;
            } else if (district.value === "") {
                document.getElementById('inputdistrict').focus();
                event.preventDefault();

                // Create notification element
                const notification = document.createElement('div');
                notification.textContent = 'Please select district';
                notification.style.position = 'fixed';
                notification.style.bottom = '20px';
                notification.style.right = '20px';
                notification.style.padding = '15px 20px';
                notification.style.backgroundColor = '#f8f9fa';
                notification.style.color = '#212529';
                notification.style.border = '1px solid #dee2e6';
                notification.style.borderRadius = '5px';
                notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                notification.style.zIndex = '1000';
                notification.style.fontFamily = 'Arial, sans-serif';
                notification.style.fontSize = '14px';
                notification.style.transition = 'all 0.3s ease';

                // Add to document
                document.body.appendChild(notification);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);;
                return false;
            } else if (addressone.value === "") {
                document.getElementById('input-address-1').focus();
                event.preventDefault();

                // Create notification element
                const notification = document.createElement('div');
                notification.textContent = 'Please fill in your address';
                notification.style.position = 'fixed';
                notification.style.bottom = '20px';
                notification.style.right = '20px';
                notification.style.padding = '15px 20px';
                notification.style.backgroundColor = '#f8f9fa';
                notification.style.color = '#212529';
                notification.style.border = '1px solid #dee2e6';
                notification.style.borderRadius = '5px';
                notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                notification.style.zIndex = '1000';
                notification.style.fontFamily = 'Arial, sans-serif';
                notification.style.fontSize = '14px';
                notification.style.transition = 'all 0.3s ease';

                // Add to document
                document.body.appendChild(notification);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);;
                return false;
            } else if (city.value === "") {
                document.getElementById('inputCity').focus();
                event.preventDefault();

                // Create notification element
                const notification = document.createElement('div');
                notification.textContent = 'Please fill your city';
                notification.style.position = 'fixed';
                notification.style.bottom = '20px';
                notification.style.right = '20px';
                notification.style.padding = '15px 20px';
                notification.style.backgroundColor = '#f8f9fa';
                notification.style.color = '#212529';
                notification.style.border = '1px solid #dee2e6';
                notification.style.borderRadius = '5px';
                notification.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
                notification.style.zIndex = '1000';
                notification.style.fontFamily = 'Arial, sans-serif';
                notification.style.fontSize = '14px';
                notification.style.transition = 'all 0.3s ease';

                // Add to document
                document.body.appendChild(notification);

                // Auto-remove after 5 seconds
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 5000);;
                return false;
            } else {

                var grandTotal = parseFloat(document.getElementById('totalamount').value);
                var firstname = document.getElementById('input-firstname').value;
                var lastname = document.getElementById('input-lastname').value;
                var telephone = document.getElementById('input-telephone').value;
                var emailaddress = document.getElementById('input-email').value;
                var companyname = document.getElementById('input-company').value;
                var address_one = document.getElementById('input-address-1').value;
                var address_two = document.getElementById('input-address-2').value;
                var city = document.getElementById('inputCity').value;
                var district = document.getElementById('inputdistrict').value;
                var postal_code = document.getElementById('input-postcode').value;
                var order_note = document.getElementById('ordernte').value;
                var fullname = document.getElementById('input-fullname').value;

                var description = "{{ $productdata->product_name }}";
                var product_id = "{{ $productdata->id }}";
                var first_name = firstname;
                var last_name = lastname;
                var color = "{{ $setcolor }}";
                var qty = "{{ $quantity }}";
                var phone = telephone;
                var fullname = fullname;
                var email = emailaddress;
                var company = companyname;
                var addressone = address_one;
                var addresstwo = address_two;
                var city = city;
                var district = district;

                var postcode = postal_code;
                var ordernote = order_note;
                var shippingprice = "{{ $shippingPrice }}";
                var weight = "{{ $totalWeightInKg }}";

                fetch('/create-session', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            amount: grandTotal,
                            desc: description,
                            productid: product_id,
                            cus_firstname: fullname,
                            cus_lastname: last_name,
                            order_color: color,
                            order_qty: qty,
                            cus_phone: phone,
                            cus_email: email,
                            cus_company: company,
                            cus_address_one: addressone,
                            cus_address_two: addresstwo,
                            cus_city: city,
                            cus_district: district,

                            cus_postcode: postcode,
                            order_note: ordernote,
                            shipping_price: shippingprice,
                            totalweight: weight
                        }),
                    })
                    .then(response => response.json())
                    .then(session => {
                        console.log("session created", session.session['session.id']);
                        var sessionid = session.session['session.id'];
                        window.location.href = '{{ route('next.page') }}?session_id=' + encodeURIComponent(
                            sessionid);
                    })
                    .catch(error => {
                        console.error('Error:', error);

                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }
        });


        function orderconfirmed() {
            window.location.href = "{{ route('american.plastic.web.order.confirmed') }}";
        }
    </script>
@endsection