@extends('shopify-app::layouts.default')
@section('content')

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">

<link
    rel="stylesheet"
    href="https://unpkg.com/@shopify/polaris@4.0.0/styles.min.css"/>

<style>
    .list-body {
        max-height: 300px;
        overflow-Y: scroll;
    }

    .list-pro {
        padding: 4px 15px;
        cursor: pointer;
    }

    .list-pro.active {
        background-color: #007bff;
        color: #ffffff;
    }
    .table-align {
        text-align:right;
    }
    .Polaris-ButtonGroup{ }
    .Polaris-ButtonGroup__Item {
        margin: 0 auto; flex:1 !important;
    }
    .Polaris-ButtonGroup__Item .add-line-item{ width:100% !important;}

    .Polaris-Card__Footer {
        
    }

    .Total-td {
        float: right;
        
    }
    .Total-td span {
        padding-left: 30px;
    }
    .quantity-field {
        text-align: center;
        width: 55px;
    }
    .invalid {
        border-color: #dc3545;
    }

    .Polaris-Frame-ToastManager {
        top: 116px;
    }
    .Polaris-Frame-Toast {
        display:inline-block !important; padding-top:.8rem !important; padding-bottom:32px !important;
        }
    .Polaris-Frame-Toast__CloseButton {
        float:right;
    }
    .bill-checkbox {
        text-align: right;
        padding-inline-end: 26px;
        margin-top:-24px;
    }
    #line-item-property td{
        text-align:left !important;
    }
    /* del-img-mt */
    .delete-button{
        margin-top: -7px;
        cursor: pointer;
    }
    .spinner{
        position: absolute;
        left:0;
        top: 0;
        bottom: 0;
        height: 100%;
        width: 100%; z-index: 10000;
        background-color: rgba(68, 66, 66, 0.32);

    }
    .spinner img{ position: fixed;
        left: 50%;
        height: auto;
        margin-left: -25px;
        width: 50px;
        top: 50%; 
    }
    .validateForm {
        position: relative;
    }

    .table-head{ margin-right:-2rem;}
</style>
    
    <!--<input type="hidden" id="productDetailsJson" value = "">-->
    <div class="container">
    
<div>
    <form action="{{ route('order.save') }}" method="POST" class="validateForm" id="order-form">
        @csrf

        <div class ="spinner" style="display:none;--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
        <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI
        +PHBhdGggZD0iTTE1LjU0MiAxLjQ4N0EyMS41MDcgMjEuNTA3IDAgMDAuNSAyMmMwIDExLjg3NCA5LjYyNiAyMS41IDIxLjUgMjEuNSA5Ljg0NyAwIDE4L
        jM2NC02LjY3NSAyMC44MDktMTYuMDcyYTEuNSAxLjUgMCAwMC0yLjkwNC0uNzU2QzM3LjgwMyAzNC43NTUgMzAuNDczIDQwLjUgMjIgNDAuNSAxMS43ODM
        gNDAuNSAzLjUgMzIuMjE3IDMuNSAyMmMwLTguMTM3IDUuMy0xNS4yNDcgMTIuOTQyLTE3LjY1YTEuNSAxLjUgMCAxMC0uOS0yLjg2M3oiIGZpbGw9IiM5MTl
        FQUIiLz48L3N2Zz4K" alt="" class="Polaris-Spinner Polaris-Spinner--colorTeal Polaris-Spinner--sizeLarge" draggable="false">
        <span role="status"><span class="Polaris-VisuallyHidden">Spinner example</span></span></div>
        <div class="Polaris-Card initial-card">
            <div class="Polaris-Card__Section">
                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                    <div class="Polaris-FormLayout ">
                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="email-add" class="Polaris-Label__Text">
                                            Email Address
                                        </label>
                                    </div>
                                </div>
                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                        <input type="hidden" id="hiddenId" value="">
                                            <input id="email-add" type="email" class="Polaris-TextField__Input form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                                id="email-add" name='email' value="{{old('email')}}" aria-labelledby="PolarisTextField15Label"
                                                aria-invalid="false" aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>

                                <!--polaris email validation -->
                                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                    <div id="myFieldIDError" class="Polaris-InlineError emailError" style="display:none;">
                                        <div class="Polaris-InlineError__Icon" >
                                            <span class="Polaris-Icon">
                                                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                    <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                </svg>
                                            </span>
                                        </div>Please enter a valid email address.
                                    </div>
                                </div>
                                <!--polaris validation end-->

                                <!-- <div class="invalid-feedback" id="Email-error">Please enter a valid email address.</div>
                                @if ($errors->has('email'))
                                <span class="invalid-feedback" style="display:block">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                                @endif -->
                            </div>
                        </div>
                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="firstname-add" class="Polaris-Label__Text">
                                                    First Name
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('firstName') ? ' is-invalid' : '' }}"
                                                        id="firstname-add" name='firstName' value="{{old('firstName')}}"
                                                        type="text" aria-labelledby="PolarisTextField11Label"
                                                        aria-invalid="false" aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                                <!--polaris first name validation -->
                                                
                                                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                                    <div id="myFieldIDError" class="Polaris-InlineError firstNameError" style="display:none;">
                                                        <div class="Polaris-InlineError__Icon" >
                                                            <span class="Polaris-Icon">
                                                                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                                    <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                                </svg>
                                                            </span>
                                                        </div>Please enter a valid first name.
                                                    </div>
                                                </div>

                                                <!--polaris validation end-->

                                                <div class="invalid-feedback" id="first-name-error"></div>
                                                @if ($errors->has('firstName'))
                                                <span class="invalid-feedback" style="display:block">
                                                    <strong>{{ $errors->first('firstName') }}</strong>
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="lastname-add" class="Polaris-Label__Text">
                                                    Last Name
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('lastName') ? ' is-invalid' : '' }}"
                                                        id="lastname-add" name='lastName' value="{{old('lastName')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                                <!--polaris last name validation -->
                                                
                                                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                                    <div id="myFieldIDError" class="Polaris-InlineError lastNameError" style="display:none;">
                                                        <div class="Polaris-InlineError__Icon" >
                                                            <span class="Polaris-Icon">
                                                                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                                    <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                                </svg>
                                                            </span>
                                                        </div>Please enter a valid last name.
                                                    </div>
                                                </div>

                                                <!--polaris validation end-->

                                                <!-- <div class="invalid-feedback" id="last-name-error"></div>
                                                @if ($errors->has('lastName'))
                                                <span class="invalid-feedback" style="display:block">
                                                    <strong>{{ $errors->first('lastName') }}</strong>
                                                </span>
                                                @endif -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        

        <div class="Polaris-Card">
            <div class="Polaris-Card__Header">
                <h2 class="Polaris-Heading">Shipping Address</h2>
            </div>
            <div class="Polaris-Card__Section" id="shipping-div">
                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                    <div class="Polaris-FormLayout">
                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="firstname-ship" class="Polaris-Label__Text">
                                                    First Name
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('shipFirstname') ? ' is-invalid' : '' }}"
                                                        id="firstname-ship" name="shipFirstname" value="{{old('shipFirstname')}}"
                                                        type="text" aria-labelledby="PolarisTextField11Label"
                                                        aria-invalid="false" aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris first name validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError firstError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid first name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="lastname-ship" class="Polaris-Label__Text">
                                                    Last Name
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('shipLastname') ? ' is-invalid' : '' }}"
                                                        id="lastname-ship" name="shipLastname" value="{{old('shipLastname')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris last name validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError lastError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid last name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tets -->
                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="address1-ship" class="Polaris-Label__Text">
                                                    Address 1
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    
                                                    <input class="Polaris-TextField__Input form-control"
                                                        id="address1-ship" name="shipAddress1" value="{{old('shipAddress1')}}"
                                                        type="text" aria-labelledby="PolarisTextField11Label"
                                                        aria-invalid="false" aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris address validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError addressError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid address.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="address2-ship" class="Polaris-Label__Text">
                                                    Address 2
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('shipAddress2') ? ' is-invalid' : '' }}"
                                                        id="address2-ship" name="shipAddress2" value="{{old('shipAddress2')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris address validation -->
                                                
                                        <!-- <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError address2Error" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid address.
                                            </div>
                                        </div> -->

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <!-- tets -->
                            </div>
                        </div>

                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="city-ship" class="Polaris-Label__Text">
                                                    City
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('shipCity') ? ' is-invalid' : '' }}"
                                                        id="city-ship" name="shipCity" value="{{old('shipCity')}}" type="text"
                                                        aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris city validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError cityError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid city name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <!-- <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="country-ship" class="Polaris-Label__Text">
                                                    Country
                                                </label>
                                            </div>
                                        </div> -->
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisSelect2Label" for="PolarisSelect2" class="Polaris-Label__Text">Country</label>
                                            </div>
                                        </div>
                                        <!-- <div class="Polaris-Select">
                                            <select id="PolarisSelect2" class="Polaris-Select__Input" aria-invalid="false">
                                                <option value="United State">United State</option>
                                                <option value="india">India</option>
                                            </select>
                                            <div class="Polaris-Select__Content" aria-hidden="true">
                                                <span class="Polaris-Select__SelectedOption shipContent">United State</span>
                                                <span class="Polaris-Select__Icon">
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="Polaris-Select__Backdrop"></div>
                                        </div> -->
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control"
                                                        id="country-ship" name="shipCountry" value="{{old('shipCountry')}}" type="text"
                                                        aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris country validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError countryError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid country name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <!-- tets -->
                            </div>
                        </div>

                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="province-ship" class="Polaris-Label__Text">
                                                    State
                                                </label>
                                            </div>
                                        </div>
                                        <!-- <div class="Polaris-Select">
                                            <select id="PolarisSelect21" class="Polaris-Select__Input" aria-invalid="false">
                                                
                                                
                                            </select>
                                            <div class="Polaris-Select__Content" aria-hidden="true">
                                                <span class="Polaris-Select__SelectedOption shipState"></span>
                                                <span class="Polaris-Select__Icon">
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="Polaris-Select__Backdrop"></div>
                                        </div> -->
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control"
                                                        id="province-ship" name="shipProvince" value="{{old('shipProvince')}}" type="text"
                                                        aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris state validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError provinceError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid state.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="zip-ship" class="Polaris-Label__Text">
                                                    Zip
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input form-control{{ $errors->has('shipZip') ? ' is-invalid' : '' }}"
                                                        id="zip-ship" name="shipZip" value="{{old('shipZip')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                         <!--polaris zip validation -->
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="myFieldIDError" class="Polaris-InlineError zipError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid zip.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <!-- tets -->
                            </div>
                        </div>


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

        <div class="Polaris-Card">
        
            <div class="Polaris-Card__Header">
                <h2 class="Polaris-Heading">Billing Address</h2>
               
            </div>
             <!--checkbox-->
            <div class="bill-checkbox" style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; text-align:right; padding-inline-end:25px;">
                    <label class="Polaris-Choice" for="PolarisCheckbox2">
                        <span class="Polaris-Choice__Control">
                            <span class="Polaris-Checkbox">
                                <input id="PolarisCheckbox2" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="">
                                <span class="Polaris-Checkbox__Backdrop"></span>
                                <span class="Polaris-Checkbox__Icon">
                                    <span class="Polaris-Icon">
                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                            <path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                        </svg>
                                    </span>
                                </span>
                            </span>
                        </span>
                        <span class="Polaris-Choice__Label">Same as Shipping Address</span>
                    </label>
                </div>

                <!--checkbox end-->
            <div class="Polaris-Card__Section" id="billing-div">
            
                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                    <div class="Polaris-FormLayout">
                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="firstname-bill" class="Polaris-Label__Text">
                                                    First Name
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control"
                                                        id="firstname-bill" name="billFirstname" value="{{old('billFirstname')}}"
                                                        type="text" aria-labelledby="PolarisTextField11Label"
                                                        aria-invalid="false" aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris first name validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billFirstNameError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid first name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="lastname-bill" class="Polaris-Label__Text">
                                                    Last Name
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control{{ $errors->has('billLastname') ? ' is-invalid' : '' }}"
                                                        id="lastname-bill" name="billLastname" value="{{old('billLastname')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris last name validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billLastNameError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid last name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- tets -->
                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="address1-bill" class="Polaris-Label__Text">
                                                    Address 1
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control"
                                                        id="address1-bill" name="billAddress1" value="{{old('billAddress1')}}"
                                                        type="text" aria-labelledby="PolarisTextField11Label"
                                                        aria-invalid="false" aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris address1 validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billAddressError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid address.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="address2-bill" class="Polaris-Label__Text">
                                                    Address 2
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control{{ $errors->has('billAddress2') ? ' is-invalid' : '' }}"
                                                        id="address2-bill" name="billAddress2" value="{{old('billAddress2')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="city-bill" class="Polaris-Label__Text">
                                                    City
                                                </label>
                                            </div>
                                        </div>

                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control"
                                                        id="city-bill" name="billCity" value="{{old('billCity')}}"
                                                        type="text" aria-labelledby="PolarisTextField11Label"
                                                        aria-invalid="false" aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                         <!--polaris city validation -->
                                                
                                         <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billCityError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid city name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField11Label" for="country-bill" class="Polaris-Label__Text">
                                                    Country
                                                </label>
                                            </div>
                                        </div>
                                        <!-- <div class="Polaris-Select">
                                            <select id="PolarisSelect3" class="Polaris-Select__Input" aria-invalid="false">
                                                <option value="United State">United State</option>
                                                <option value="Canada">Canada</option>
                                                <option value="England">England</option>
                                            </select>
                                            <div class="Polaris-Select__Content" aria-hidden="true">
                                                <span class="Polaris-Select__SelectedOption billContent">United State</span>
                                                <span class="Polaris-Select__Icon">
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="Polaris-Select__Backdrop"></div>
                                        </div> -->
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control"
                                                        id="country-bill" name="billCountry" value="{{old('billCountry')}}" type="text"
                                                        aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris country validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billCountryError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid country name.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <!-- tets -->
                            </div>
                        </div>

                        <div role="group" class="Polaris-FormLayout--grouped">
                            <div class="Polaris-FormLayout__Items">
                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="province-bill" class="Polaris-Label__Text">
                                                    State
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <!-- <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control{{ $errors->has('billProvince') ? ' is-invalid' : '' }}"
                                                        id="province-bill" name="billProvince" value="{{old('billProvince')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                    @if ($errors->has('billProvince'))
                                                    <span class="invalid-feedback">
                                                        <strong>{{ $errors->first('billProvince') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div> -->
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control"
                                                        id="province-bill" name="billState" value="{{old('billProvince')}}" type="text"
                                                        aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris state validation -->
                                                
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billProvinceError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid state.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>

                                <div class="Polaris-FormLayout__Item">
                                    <div class="">
                                        <div class="Polaris-Labelled__LabelWrapper">
                                            <div class="Polaris-Label">
                                                <label id="PolarisTextField12Label" for="zip-bill" class="Polaris-Label__Text">
                                                    Zip
                                                </label>
                                            </div>
                                        </div>
                                        <div class="Polaris-Connected">
                                            <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                                <div class="Polaris-TextField">
                                                    <input class="Polaris-TextField__Input emptyAddress form-control{{ $errors->has('billZip') ? ' is-invalid' : '' }}"
                                                        id="zip-bill" name="billZip" value="{{old('billZip')}}"
                                                        aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                        aria-multiline="false" value="">
                                                    <div class="Polaris-TextField__Backdrop"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--polaris zip validation -->
                                        <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                                            <div id="" class="Polaris-InlineError billZipError" style="display:none;">
                                                <div class="Polaris-InlineError__Icon" >
                                                    <span class="Polaris-Icon">
                                                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                                            <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                                        </svg>
                                                    </span>
                                                </div>Please enter a valid zip.
                                            </div>
                                        </div>

                                    <!--polaris validation end-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Polaris-Card lineItem-card">
            <div class="Polaris-Card__Header">
                <h2 class="Polaris-Heading">Line Item Properties</h2>
            </div>
            <div class="Polaris-Card__Section">
                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                    <div class="Polaris-FormLayout table-head">
                        <div class="col-xl-12 list-item">
                            <table class="Polaris-DataTable__Table w-100" id="table-line-item">
                                <thead style=" background-color:#ccc;">
                                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">Vitamin Name</th>
                                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">Properties</th>
                                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">Price</th>
                                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">Qty</th>
                                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col">Total</th>
                                    <th data-polaris-header-cell="true" class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--header" scope="col"></th>
                                </thead>
                                <tbody id="line-item-property">

                                </tbody>
                            </table>
                           

                        </div>
                    </div>
                </div>
            </div>
            <div class="Polaris-Card__Footer">
                <div class="Polaris-ButtonGroup w-100">
                    <div class="Polaris-ButtonGroup__Item">
                        <button type="button" id="add-list-items" class="Polaris-Button Polaris-Button add-line-item">
                            <span class="Polaris-Button__Content">
                                <span class="Polaris-Button__Text ">Add Line Item Properties
                                </span>
                            </span>
                        </button>
                    </div>
                </div>

            </div>

            <table class="Polaris-DataTable__Table table" id="total">
                                <tfoot>
                                    <tr>
                                        <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn Polaris-DataTable__Cell--total Polaris-DataTable--cellTotalFooter Total-td"
                                            scope="row" style="margin-right:21px">
                                            Subtotal <span id="total-p"></span>
                                        </td>
                                    </tr>

                                </tfoot>
                            </table>

            <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; margin-left:12px; padding-bottom:20px;">
                    <div id="myFieldIDError" class="Polaris-InlineError lineItemError" style="display:none;">
                        <div class="Polaris-InlineError__Icon" >
                            <span class="Polaris-Icon">
                                <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                    <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z" fill-rule="evenodd"></path>
                                </svg>
                            </span>
                        </div>Please add line item properties
                    </div>
            </div>


        </div>
        <div>
            <div id="list-items" style="display:none;" class="Polaris-Modal-Dialog__Container undefined modal"
                data-polaris-layer="true" data-polaris-overlay="true">
                <div>
                    <div class="Polaris-Modal-Dialog__Modal" role="dialog" aria-labelledby="modal-header10" tabindex="-1">
                        <div class="Polaris-Modal-Header">
                            <div id="modal-header10" class="Polaris-Modal-Header__Title">
                                <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Line Items</h2>
                            </div>
                            <button class="Polaris-Modal-CloseButton close close-modal" aria-label="Close">
                                <span class="Polaris-Icon Polaris-Icon--colorInkLighter Polaris-Icon--isColored">
                                    <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                        <path d="M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"
                                            fill-rule="evenodd"></path>
                                    </svg>
                                </span>
                            </button>
                        </div>
                        <!-- <div class="Polaris-Modal__BodyWrapper"> -->
                        <!-- <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" -->
                        <!-- data-polaris-scrollable="true"> -->
                        <!-- <section class="Polaris-Modal-Section"> -->
                        <!-- <div class="Polaris-TextContainer"> -->
                        <select class="list-select" multiple size=10>
                                                    </select>
                        <!-- </div> -->
                        <!-- </section> -->
                        <!-- </div> -->
                        <!-- </div> -->
                        <div class="Polaris-Modal-Footer">
                            <div class="Polaris-Modal-Footer__FooterContent">
                                <div class="Polaris-Stack--alignmentCenter">
                                    <div class="Polaris-Stack__Item" style="float:right; padding-top:15px">
                                        <div class="Polaris-ButtonGroup">
                                            <div class="Polaris-ButtonGroup__Item">
                                                <button attr_meta_id="" type="button" class="close-form Polaris-Button Polaris-Button--outline">
                                                    <span class="Polaris-Button__Content">
                                                        <span class="Polaris-Button__Text">Cancel</span>
                                                    </span>
                                                </button>
                                            </div>
                                            <div class="Polaris-ButtonGroup__Item">
                                                <button attr_meta_id="" type="button" class="save-meta-edit Polaris-Button Polaris-Button--primary add-property">
                                                    <span class="Polaris-Button__Content">
                                                        <span class="Polaris-Button__Text">Add</span>
                                                    </span>
                                                </button>
                                            </div>

                                        </div>
                                    </div>
                                    <div style="clear:both"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Polaris-Card">
            <div class="Polaris-Card__Section">
                <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
                    <div class="Polaris-FormLayout">
                        <div class="Polaris-FormLayout__Item">
                            <div class="Polaris-ButtonGroup">
                                <div class="Polaris-ButtonGroup__Item" align="center"> 
                                    <button type="button" id="form-submit-button" class="Polaris-Button Polaris-Button--primary">
                                        <span class="Polaris-Button__Content">
                                            <span class="Polaris-Button__Text">Create Order</span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    </div>
@endsection

@section('scripts')
    @parent

    <script src="{{ URL::asset('js/jquery.min.js') }}"></script>
    <script src="{{ URL::asset('js/bootstrap.min.js') }}"></script>
    <script src="{{ URL::asset('js/custom.js') }}"></script>

    <script type="text/javascript">
        var AppBridge = window['app-bridge'];
        var actions = AppBridge.actions;
        var TitleBar = actions.TitleBar;
        var Button = actions.Button;
        var Redirect = actions.Redirect;
        var titleBarOptions = {
            title: 'Order Creation',
        };
        var myTitleBar = TitleBar.create(app, titleBarOptions);
    </script>

    <script>
        var productDetailsJson = ;
        // var productJson = JSON.parse(productDetailsJson);
        //fetch customer address detail when email enter
        // $("#email-add").keyup(function(){

        //     checkCustomer();

        // });
        // function checkCustomer() {

        //     var emailId = $("#email-add").val();
        //     $.ajax({
        //         url: "{{ route('get.AllData')}}",
        //         type: 'GET',
        //         dataType: 'json',
        //         data: {
        //             'email':emailId
        //         }
        //     }).always(function(Details){
        //         console.log("Details are --- ", Details);
        //         var customerId = (typeof Details["body"] !== "undefined" && typeof Details["body"]["customers"] !== "undefined" && typeof Details["body"]["customers"][0] !== "undefined" && typeof Details["body"]["customers"][0]["id"] !== "undefined" && Details["body"]["customers"][0]["id"] !== null && Details["body"]["customers"][0]["id"] != "") ? Details["body"]["customers"][0]["id"] :0;
        //         $('#hiddenId').val(customerId);
        //     });
        // }
        // //Dropdown for shipping address country
        // $('#PolarisSelect2').change(function(){
        //     $('#PolarisSelect21').find('#a').remove();
        //     var selectString = '';
        //     var country = $(this).val();
        //     $('.shipContent').text(country);
        //     $.ajax ({
        //         type : "POST",
        //         url : "{{ route('get.state')}}",
        //         data : {"country" : country,
        //             "_token": "{{ csrf_token() }}",
        //         },
        //         success : function(data) {
        //             var first = data[0];
        //             $('.shipState').text(first);
                    
        //                 $.each( data, function( key, value ) {
                            
        //                     selectString = '<option id="a" value="'+ value +'">'+value+'</option>';
        //                     $('#PolarisSelect21').append(selectString);
        //                 });
        //                 data = [];
                    
                        
        //         }
        //     })
        // })
        // //Dropdown for billing address country
        // $('#PolarisSelect3').change(function(){
        //     var country = $(this).val();
        //     $('.billContent').text(country);
        // });

    </script>
@endsection