@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;
    }
</style>
    
    <!--<input type="hidden" id="productDetailsJson" value = "">-->
    <div class="container">
    <h2>Order Creation</h2>
    <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 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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Polaris-FormLayout__Item">
                    <div class="">
                        <div class="Polaris-Labelled__LabelWrapper">
                            <div class="Polaris-Label">
                                <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField15Label"
                                        aria-invalid="false" aria-multiline="false" value="">
                                    <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                    <div class="Polaris-TextField__Backdrop"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="Polaris-Card">
    <div class="Polaris-Card__Header">
        <h2 class="Polaris-Heading">Billing</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">
                <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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" class="Polaris-Label__Text">
                                            Province
                                        </label>
                                    </div>
                                </div>
                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                            <input id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </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="PolarisTextField11" class="Polaris-Label__Text">
                                            Country
                                        </label>
                                    </div>
                                </div>

                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                            <input id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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


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

<div class="Polaris-Card">
    <div class="Polaris-Card__Header">
        <h2 class="Polaris-Heading">Shipping</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">
                <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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </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="PolarisTextField11" 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 id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" class="Polaris-Label__Text">
                                            Province
                                        </label>
                                    </div>
                                </div>
                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                            <input id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </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="PolarisTextField11" class="Polaris-Label__Text">
                                            Country
                                        </label>
                                    </div>
                                </div>

                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                            <input id="PolarisTextField11" class="Polaris-TextField__Input" type="number"
                                                aria-labelledby="PolarisTextField11Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="Polaris-FormLayout__Item">
                            <div class="">
                                <div class="Polaris-Labelled__LabelWrapper">
                                    <div class="Polaris-Label">
                                        <label id="PolarisTextField12Label" for="PolarisTextField12" 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 id="PolarisTextField15" class="Polaris-TextField__Input"
                                                aria-labelledby="PolarisTextField15Label" aria-invalid="false"
                                                aria-multiline="false" value="">
                                            <div class="Polaris-TextField__Spinner" aria-hidden="true"></div>
                                            <div class="Polaris-TextField__Backdrop"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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


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


<div class="Polaris-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">
                <div class="col-xl-12 list-item">
                    <table  class="w-100" id="line-item-property">
                    </table>
                    <table  class="table" style="width:86%">
                        <tr>
                            <td class="text-right"><label  id="total">Total&nbsp;&nbsp;&nbsp;&nbsp; <span id="total-p"></span><label></td>
                        </tr>
                    </table>
                        
                </div>
            </div>
        </div>
    </div>
    <div class="Polaris-Card__Footer">
        <div class="Polaris-ButtonGroup">
            <div class="Polaris-ButtonGroup__Item"><button type="button" id="add-list-items" class="Polaris-Button Polaris-Button--primary"><span
                        class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add Line Item</span></span></button></div>
        </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-form" 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">
                                <ul class="text-left list-unstyled">
                                                                    </ul>
                            </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:left">
                                
                                <div class="form-group">

                                        <div class="Polaris-Label">
                                            <label id="PolarisTextField11Label" for="PolarisTextField11" class="Polaris-Label__Text">
                                                Quantity
                                            </label>
                                        </div>
                                    <input type="number" class="form-control" id="qty" value="1" min="1">
                                </div>
                            </div>
                            
                            <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>

@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);
    </script>

@endsection