
<div class="col-sm-12">
<h4>@lang('product.add_variation'):* <button type="button" class="btn btn-primary" id="add_variation" data-action="add">+</button></h4>
</div>
<div class="col-sm-12">
    <div class="table-responsive">
    <table class="table table-bordered add-product-price-table table-condensed" id="product_variation_form_part">
        <thead>
          <tr>
            <th class="col-sm-2">@lang('lang_v1.variation')</th>
            <th class="col-sm-10">@lang('product.variation_values')</th>
          </tr>
        </thead>
        <tbody>
            @if($action == 'add')
                @include('product.partials.product_variation_row', ['row_index' => 0])
            @else

                @forelse ($product_variations as $index_variations => $product_variation)
                    @include('product.partials.edit_product_variation_row', ['row_index' => $action == 'edit' ? $product_variation->id : $loop->index, 'index_variation' => $index_variations])
                @empty
                    @include('product.partials.product_variation_row', ['row_index' => 0])
                @endforelse

            @endif
            
        </tbody>
    </table>
    </div>
    <div class="numpad_div col-xs-12 hide" id="add_product_div" style="
        display: block;
              align-items: center;
              justify-content: center;
              padding-right: 25px;
              overflow-x: hidden;
              overflow-y: auto;
              background: rgba(0,0,0,0);
              position: fixed;
              top: 19%;
              bottom: 0;
              left: 35%;
              right: 0;
              z-index: 1051;
              opacity: 1;
              width: 36%;
              outline: 0;">							
        <div class="form-group">									
            <div class="easy-numpad-number-container">
            <table id="add_product_variation">
                <thead>
                <tr>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="top"><a href="#"  style="padding: 10px;">5</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="top"><a href="#"  style="padding: 10px;">10</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="top"><a href="#"  style="padding: 10px;">20</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="top"><a href="#"  style="padding: 10px;">50</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="top"><a href="#"  style="padding: 10px;">100</a></td>
                </tr>
                <tr>
                    
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">1</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">2</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">3</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">4</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">5</a></td>
                </tr>
                <tr>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">6</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">7</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">8</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">9</a></td>
                    <td class="numPadCashVariation" style="padding: 10px;" data-type="middle"><a href="#"  style="padding: 10px;">0</a></td>
                </tr>
                <tr>
                    <!-- <td><a href="."  style="padding: 10px ;">.</a></td> -->
                    <td colspan="2"><a href="#" class="numPadCashVariation" style="padding: 10px ; width: calc(95% + -10px); margin-top:2px; margin-left: 10px;">00</a></td>
                    <td colspan="2"><a href="#" class="numPadCashVariationClear" id="numPadCashVariationClear" style="padding: 10px ; width: calc(100% + -10px); margin-top:2px;">Clear</a></td>
                    <td><a href="#" class="numPadCashVariationDel" id="numPadCashVariationDel" style="padding: 10px ; width: calc(100% + -10px); margin-top:2px;">DEL</a></td>									
                </tr>
                <tr>
                    <td colspan="5" style="padding: 10px;"><a href="#" class="numPadCashAddProductClose" id="numPadCashAddProductClose" onclick="event.preventDefault(); $('#add_product_div').addClass('hide')" style="padding: 10px ; width: calc(100% + -10px); margin-top:2px;">CLOSE</a></td>									
                  </tr>
                </thead>
            </table>
            </div>									
        </div>
    </div>
</div>