@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>
    .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;}
    .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__Item{
        margin: 0 auto;
    }

    .Polaris-Card__Footer{
        justify-content: flex-start;
    }

    .Total-td{
        float: right;
        padding-right: 77px !important;
    }
    .Total-td span{
        padding-left: 30px;
    }
    .quantity-field{
        text-align: center;
        width: 100px;
    }
    .hidden {
        display: none !important;
    }
    .del-btn {
        cursor:pointer;
    }
</style>
    
    <!--<input type="hidden" id="productDetailsJson" value = "">-->
    <div class="container">
    
<div id="validate-error" class="hidden Polaris-Frame-ToastManager message" aria-live="polite">
  <div class="Polaris-Frame-ToastManager__ToastWrapper Polaris-Frame-ToastManager--toastWrapperEnterDone" style="--toast-translate-y-in:-80px; --toast-translate-y-out:70px;">
    <div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb;">
      <div class="Polaris-Frame-Toast">Please add atleast one line item<button type="button" class="close-message Polaris-Frame-Toast__CloseButton"><span class="Polaris-Icon"><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>
  </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 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">
                                            Order Name :
                                        </label>
                                    </div>
                                </div>

                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                              {{$order['name']}}                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <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">
                                            Customer Name :
                                        </label>
                                    </div>
                                </div>

                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                        {{$order['customer_name']}}                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <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">
                                            Customer Email:
                                        </label>
                                    </div>
                                </div>

                                <div class="Polaris-Connected">
                                    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                        <div class="Polaris-TextField">
                                        {{$order['email']}}                                          
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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


<form action="{{ route('subscription.save') }}" method="POST" class="validateForm" onsubmit="return validateForm()"> 
    @csrf   
<input type="hidden" class="subscriptionId" value="{{$subscriptionId}}" name="subscriptionId">
<input type="hidden" class="orderId" value="{{$order['id']}}" name="orderId">
<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="Polaris-DataTable__Table w-100" >
			<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">
                                                        @if(!empty($lineitems))
                            @foreach($lineitems as $item)
                            @if(strpos($item->name , "Vitamin") !== false)
                            @php
                            
                                $splitItems = explode(" | ",$item->value);
                                $title = $splitItems[0];
                                $dose= $splitItems[1];
                                $qty = $splitItems[2];
                                $variantId = $splitItems[3];
                                array_push($selectedVariants, $variantId);
                                $price = 0;
                                $productPrice = 0;
                                if(isset($products[$variantId])) {
                                    $productPrice = $products[$variantId]['price'];
                                    $price = $products[$variantId]['price'] * $qty;
                                }
                                $totalPrice += $price; 
                            @endphp
						   <tr class="Polaris-DataTable__TableRow">
						      <input type="hidden" class="prod-variant-id" value="{{$variantId}}" name="prod-variant-id[]"><input type="hidden" class="prod-qty prod-qty-{{$variantId}}" value="{{$qty}}" name="prod-qty[]">
						      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn list-key" id="01" scope="row">{{ $item->name }}</td>
						      <td class="lineItem-{{$variantId}} jsonString-td Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--firstColumn" scope="row">{{ $item->value }}</td>
                              <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric" id="price-{{$variantId}}">${{number_format($productPrice,2)}}</td>
                              <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric" data-price="{{number_format($productPrice,2)}}"> <input type="number" value="{{$qty}}" min="1" class="quantity-field qtyVariant-{{$variantId}}" data-variantid="{{$variantId}}" onkeypress="return !(event.charCode == 46)"> </td>
						      <td class="Polaris-DataTable__Cell Polaris-DataTable__Cell--verticalAlignTop Polaris-DataTable__Cell--numeric totalprice tot-price-{{$variantId}}" id="tot-price" data-variantid="{{$variantId}}" data-total="8">${{number_format($price,2)}}</td>
						      <td><img attr_variant_id="{{$variantId}}" class="del-btn delete-button" src="//cdn.shopify.com/s/files/1/0263/1293/3458/files/icon-trash.svg?4818" title="Delete" alt="icon delete"></td>
                           </tr>
                           @endif
                           @endforeach
                           @endif
						</tbody>	
                    </table>
                    <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">                                    
                                    Subtotal <span id="total-p"></span>
                                </td>
                            </tr>

                        </tfoot>
                    </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-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">
                            <button type="submit" id="submit-button" class="Polaris-Button Polaris-Button--primary">
                                <span class="Polaris-Button__Content">
                                    <span class="Polaris-Button__Text">Submit</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/subscription-edit.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: 'Edit Subscription',
        };
        var myTitleBar = TitleBar.create(app, titleBarOptions);
    </script>

    <script>
        var productDetailsJson = ;
        // var productJson = JSON.parse(productDetailsJson);
    </script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
@endsection