@extends('frontend.layouts.split')
@section('title', 'Rx Order' . ' '.html_entity_decode("—", ENT_QUOTES, 'UTF-8').' ' . app_name())
@section('content')
<style>
    .select2-container {
        width: 100% !important;
    }
</style>
{{ html()->form('POST', route('frontend.store-rx'))->attribute('id','rx-order_form')->open() }}
    <input type="hidden" name="submit_type" id="submit_type" value="submitted">
    <input type="hidden" name="data[price]" id="price" value="0">
    <input type="hidden" name="data[prices][total_price]" id="hidden_total_price" value="">
    <input type="hidden" name="data[package_label]" id="package_label" value="">
    <input type="hidden" name="data[package_price]" id="package_price" value="">
    <input type="hidden" name="data[frame_price]" id="frame_price" value="">
    <div class="chide hidden-prices-container">
        <input type="hidden" name="data[prices][right_lens_type]" id="price_right_lens_type" value="0.00">
        <input type="hidden" name="data[prices][left_lens_type]" id="price_left_lens_type" value="0.00">
        <input type="hidden" name="data[prices][custom_clip_on]" id="price_custom_clip_on" value="0.00">
    </div>
    @if(isset($editData) && !empty($editData))
        @if($editData['type'] == 'reuse')
            <div class="row">
                <div class="col-md-12 text-center" style="margin-top: -28px;">
                    <h2 class="badge bg-danger"><i class="fa fa-redo"></i> Reuse of {{ $editData['order']->getOfflineOrderNumber() }}</h2>
                </div>
            </div>
        @elseif($editData['type'] == 'edit')
            <div class="row">
                <div class="col-md-12 text-center" style="margin-top: -28px;">
                    <h2 class="badge bg-info"><i class="fa fa-pencil"></i> Editing Saved Order {{ $editData['order']->getOfflineOrderNumber() }}</h2>
                </div>
            </div>
            <input type="hidden" name="data[order_id]" value="{{ $editData['order']->id }}">
        @else
            <div id="reason-container">
                <div class="row">
                    <div class="col-md-12 text-center" style="margin-top: -28px;">
                        <h2 class="badge bg-danger"><i class="fa fa-redo"></i> Redo of {{ $editData['order']->getOfflineOrderNumber() }}</h2>
                    </div>
                </div>
                <input type="hidden" name="reason[id]" value="{{ $editData['id'] }}" id="order-reason-id">
                <input type="hidden" name="reason[reason]" value="{{ $editData['reason'] }}" id="order-reason">
                <input type="hidden" name="reason[notes]" value="{{ $editData['notes'] }}" id="order-reason-notes">
            </div>
        @endif
    @endif
    <div class="row" style="margin-top: -5px;">
        <div class="col-md-7 col-rx-form-container nscroller" style="overflow-x: hidden;">
            <div class="portlet light bordered">
                <!-- <div class="portlet-title">
                    <div class="caption">
                        <i class=" icon-layers font-green"></i>
                        <span class="caption-subject font-green sbold uppercase">New Order</span>
                    </div>
                </div> -->
                <div class="portlet-body form rx-form-content">
                    @include('frontend.auth.orders.create.rx-form',$combinationArray)
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="portlet light bordered rx-summary-container" style="padding:5px;padding-bottom: 0px;margin-bottom: 0;">
                <!-- <div class="portlet-title">
                    <h4 class="form-section bold">Summary</h4>
                </div> -->
                <div class="portlet-body">
                    @include('frontend.auth.orders.show.includes.rx-form-summary',['rxOrderArray'=>$combinationArray])                        
                    <div class="row stock-btn-container mt-5" style="border-top: 1px solid #e7ecf1;padding-top: 10px;padding-left: 10px;padding-right: 10px;">
                        <div class="row m-0 w-100">
                            <div class="col-md-12">
                                <div id="warningMsg">
                                    <div id="warningMsgSP" class=""></div>
                                    <div class="secondD " id="warningMsgCY"></div>
                                    <div id="warningMsgAD" class="secondD "></div>
                                    <div id="warningMsgSG" class="secondD "></div>
                                    <div id="warningCutOut" class="secondD "></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-12 zero-col-padding display-inline-flex">
                            <div class="col-md-4 nopadding">
                                <div class="form-actions btn-custom-focus">
                                    <button type="button" class="btn red btn-cancel">Cancel</button>
                                    {{ form_cancel('javascript:void(0);','Reset','btn yellow mt-ladda-btn ladda-button btn-outline btn-reset') }}
                                </div>
                            </div>
                            <div class="col-md-3 nopadding">
                                <div class="form-actions text-center">
                                </div>
                            </div>
                            <div class="col-md-5 nopadding">
                                <div class="form-actions aligned-stock-btn btn-custom-focus">
                                    <button class="btn green mt-ladda-btn ladda-button btn-outline" id="save_order-btn" type="button" disabled>Save For Later</button>
                                    <button class="btn blue" id="submit-btn" type="submit" disabled>Order Now</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="draggable-wrapper" id="generic_price_table">
        <div class="position-relative">
            <i class="glyphicon glyphicon-move" style="position: absolute;top: 5px;right: 1px;z-index: 1;font-size: 17px;color: #f4f5f7;"></i>
        </div>
        <div class="generic_content active clearfix blue">
            <div class="generic_head_price clearfix">
                <div class="generic_head_content clearfix">
                    <div class="head_bg"></div>
                    <div class="head">
                        <span>Expected Price</span>
                    </div>

                </div>
                <div class="generic_price_tag clearfix">
                    <span class="price">
                        <span class="sign">$</span>
                        <span class="currency">0</span>
                        <span class="cent">.00</span>
                    </span>
                </div>

            </div>
        </div>
    </div> -->
{{ html()->form()->close() }}
<div class="form-error-toaster" style="display:none;">
</div>
@push('after-scripts')
<script>
    // const wrapper = document.querySelector(".draggable-wrapper"),
    // header = wrapper.querySelector(".generic_head_price");

    // function onDrag({movementX, movementY}){
    //   let getStyle = window.getComputedStyle(wrapper);
    //   let leftVal = parseInt(getStyle.left);
    //   let topVal = parseInt(getStyle.top);
    //   wrapper.style.left = `${leftVal + movementX}px`;
    //   wrapper.style.top = `${topVal + movementY}px`;
    // }

    // header.addEventListener("mousedown", ()=>{
    //   header.classList.add("active");
    //   header.addEventListener("mousemove", onDrag);
    // });

    // document.addEventListener("mouseup", ()=>{
    //   header.classList.remove("active");
    //   header.removeEventListener("mousemove", onDrag);
    // });
  </script>
<script>
    window.isLoaderFStop = true;
    var combinationHideArray = 'null';
    var validationUrl = "