@extends('layouts.dashboard')

@section('title', 'Edit Product')

@section('myJS')
  <script src="{{url('/')}}/js/admin/admin.js"></script>
  <script src="{{url('/')}}/js/admin/output.js"></script>
@endsection

@section('content')

<div class="padding-top40"></div>

  <div class="bs-example">


<div class="container-fluid">
  <div class="row">
      <div id="exTab1" class="panel panel-default">
          <ul class="nav nav-pills nav-catalog nav-justified">
            <li class="active">
                <a  href="#editProduct" data-toggle="tab">Edit {{$productDetails->ProductCode}} </a>
            </li>
            @if($productBlobsList)
            <li class="">
                <a  href="#0a" data-toggle="tab">Preview Blob</a>
            </li>
            @endif
            <li class="">
                <a  href="#1a" data-toggle="tab">Product List</a>
            </li>
            <li>
              <a id="allAttHistoryTab" href="#allAttHistory" data-toggle="tab">Product Attribute History</a>
            </li>
        </ul>

        <div class="tab-content clearfix">
              <div class="tab-pane" id="0a">
                <div class="row" style="margin: 10px; padding-top: 15px;">
                    <form method="post" action="#" id="previewBlobForm">
                        @csrf
                        <div class="test">
                            <div class="export-padding">
                                <b>Select Blob</b>
                                <br>
                                <select class="form-control products" name="blobID">
                                    @foreach($productBlobsList as $blob)
                                        <option value="{{$blob->ProductBlobID}}">{{$blob->ProductBlobName}}</option>
                                    @endforeach
                                </select>
                                <br>
                                <br>
                            </div>
                            <div class="export-padding">
                                <b>Select Option:</b>
                                <br>
                                <label class="radio-inline">
                                    <input type="radio" value="html" name="outputType" checked style="width: 18px;height: 18px;margin-bottom: 0px !important;">&nbsp;&nbsp;HTML (Preview)
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="htmlcode" name="outputType" checked style="width: 18px;height: 18px;margin-bottom: 0px !important;">&nbsp;&nbsp;HTML (Code)
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="raw" name="outputType"  style="width: 18px;height: 18px;margin-bottom: 0px !important;">&nbsp;&nbsp;Raw
                                </label>
                                <div class="exportType_error text-danger"></div>
                                <br>
                            </div>
                            <div>
                                <input type="hidden" name="productID" value="{{$productDetails->ProductID}}" />
                                <button type="submit" class="btn btn-primary previewBlob" value="previewBlob" name="previewBlob" onclick="return false;">Submit</button>
                            </div>
                        </div>
                    </form>
                    <div id="result"></div>
                </div>
              </div>
              <div class="tab-pane active" id="editProduct">
                <div class="epd">
                {{--<div class="row">
                    <div class="col-md-12">
                      <h4><strong>{{$productDetails->ProductCode}}</strong></h4>
                    </div>
                  </div>--}}

                  <div id="exTab2" class="panel panel-default epd">
                    <ul class="nav nav-pills nav-catalog nav-justified">
                        <li class="active">
                            <a  href="#manageAttribute" data-toggle="tab">Manage Attributes</a>
                        </li>
                        <li>
                          <a href="#attHistory" data-toggle="tab">Product Attribute History</a>
                        </li>
                        <li>
                          <a href="#productCollection" data-toggle="tab">Product Collections</a>
                        </li>
                    </ul>

                    <div class="tab-content clearfix">
                      <div class="tab-pane active" id="manageAttribute">
                        <div class="row epd">
                          <div class="col-md-12">
                            @php
                              $checkPreferred = '';
                              $checkAll       = '';

                              $checkAll       = 'checked';
                            @endphp
                            <form>
                            @csrf
                          <label class="radio-inline">
                              <input type="radio" name="attributeChoice" value="All" {{ $checkAll }}> &nbsp;All
                          </label>
                          <label class="radio-inline">
                              <input type="radio" name="attributeChoice" value="Preferred" {{ $checkPreferred }}> &nbsp;Preferred
                          </label>
                          <label for="" class="radio-inline">Display empty values</label>
                          <label class="radio-inline switch toggleEmptyVals">
                            <input type="checkbox">
                            <span class="slider round"></span>
                          </label>

                          <input type="hidden" name="productID" id="productID" value="{{$productDetails->ProductID}}">

                          <div id="editBtn" class="index-save-cancel">

                            <button type="button" id="editProductBtn" class="btn btn-default">Edit</button>

                            <div id="divSaveCancel">
                              <button id="saveProductBtn" type="button" class="btn index-sucess">Save</button>
                              <button id="cancelProductBtn" type="button" class="btn btn-danger">Cancel</button>
                            </div>

                          </div>
                            </form>
                          </div>
                          <div class="updateEditProductAttribteResult col-md-2 col-md-offset-5"></div>
                        </div>
                        <br>
                        <form class="" method="post">
                            @csrf
                        <div id="results">
                          <table class="table table-striped epd editProductTable">
                            <thead>
                              <tr>
                                <th>Attribute Name</th>
                                <th>Value</th>
                              </tr>
                            </thead>
                            <tbody>

                              <!-- Displaying instance attributes -->
                              @if(!empty($allInstAttributes))

                                @foreach($allInstAttributes as $key=>$value)
                                  <tr class="valBoxTrInstTr">
                                    <td>
                                      @php
                                        $myKey = explode("+", $key);
                                        $mk = $myKey[0];
                                        $AttributeName = $myKey[1];
                                        $AttributeID = $myKey[2];
                                      @endphp
                                      {{ $AttributeName }}
                                      <div class="blueBg" style="display: inline-block; margin-left: 20px; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Instance attribute"></div>
                                    </td>
                                    <td>
                                      <table class="col-md-12">
                                        <tr>
                                          <th class="col-md-6">
                                            Collection Name
                                          </th>
                                          <th class="col-md-6">
                                            Value
                                          </th>
                                        </tr>
                                        @foreach($value as $attribute)
                                          <tr>
                                            <td class="col-md-6">
                                              {!! $attribute['path'] !!}
                                            </td>
                                            <td class="col-md-6">
                                              @if($attribute['path'] != '')
                                                @if($attribute['AllowHTML'] == "1")
                                                  <textarea class="form-control formField tinyTextArea" id="{{$attribute['ProductInstanceID']}}_{{$AttributeID}}" readonly="" cols="75" rows="5" name="{{$attribute['ProductInstanceID']}}_{{$AttributeID}}" data-value="{{$attribute['Value']}}" style="width:100%; border:none;background:none;">{{$attribute['Value']}}1</textarea>
                                                  <!-- <input type="hidden"  id="{{$attribute->ProductAttributeID}}" name="" value="{{$attribute->$mk}}"> -->
                                                @elseif($attribute['isTextArea'] == "1")
                                                  <textarea class="form-control formField myTextArea" id="{{$attribute['ProductInstanceID']}}_{{$AttributeID}}" readonly="" cols="75" rows="5" name="{{$attribute['ProductInstanceID']}}_{{$AttributeID}}" data-value="{{$attribute['Value']}}" style="width:100%; border:none;background:none;">{{$attribute['Value']}}</textarea>
                                                  <!-- <input type="hidden"  id="{{$attribute->ProductAttributeID}}" name="" value="{{$attribute->$mk}}"> -->
                                                @else
                                                  <input type="text" class="formField editedAttributedValue" id="{{$attribute['ProductInstanceID']}}_{{$AttributeID}}" name="{{$attribute['ProductInstanceID']}}_{{$AttributeID}}" data-value="{{$attribute['Value']}}" value="{{$attribute['Value']}}" disabled="" style="width:100%; border:none;background:none;">
                                                @endif
                                              @endif
                                            </td>
                                          </tr>
                                        @endforeach
                                      </table>
                                    </td>
                                  </tr>
                                  @endforeach   
                              @endif

                              <!-- Displaying Not instance attributes -->
                @if(!empty($allAttributes))

                @foreach($allAttributes as $preAtt)
                  <tr>
                    <td>
                      {{$preAtt->AttributeName}}
                      @if($preAtt->isVirtualAttribute == "1" && $preAtt->isCatalogAttribute != "1")
                          <div class="grayBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual attribute"></div>
                      @elseif($preAtt->isCatalogAttribute == "1")
                          @if($preAtt->isVirtualAttribute == "1")
                              <div class="cyanBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual attribute"></div>
                          @else
                              <div class="tealBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Virtual attribute"></div>
                          @endif
                      @elseif($preAtt->InstanceAttribute == "1")
                          <div class="blueBg" style="display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;" data-toggle="tooltip" data-placement="top" title="Instance attribute"></div>
                      @else
                          <div style="background-color: none transparent; display: inline-block; float: right; width: 20px; height: 20px; vertical-align: middle;"></div>
                      @endif
                    </td>
                    <td>
                        @if($preAtt->isVirtualAttribute == "1")
                            <p class="form-control formField" id="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" readonly="true" cols="75" rows="5" data-value="{{$preAtt->Value}}" style="border:none;background:none;">{{$preAtt->Value}}</p>
                        @elseif($preAtt->AllowHTML == "1")
                            <textarea class="form-control formField tinyTextArea" id="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" readonly="true" cols="75" rows="5" name="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" data-value="{{$preAtt->Value}}" style="border:none;background:none;">{{$preAtt->Value}}</textarea>
                        @elseif($preAtt->isTextArea == "1")
                          <textarea class="form-control formField myTextArea" id="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" readonly="true" cols="75" rows="5" name="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" data-value="{{$preAtt->Value}}" style="border:none;background:none;">{{$preAtt->Value}}</textarea>
                        @else
                        <input type="text" class="formField editedAttributedValue"  id="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" name="{{$productDetails->ProductID}}_{{$preAtt->AttributeID}}" data-value="{{$preAtt->Value}}" value="{{$preAtt->Value}}" disabled="" style="width: 100%; border:none;background:none;">
                      @endif
                    </td>
                  </tr>
                @endforeach
              @endif
              </tbody>
            </table>
          </div>
                      </form>
                    </div>

                      <div class="tab-pane" id="attHistory">
                        <div class="epd">
                          <table class="table table-striped attHistory">
                            <thead>
                              <tr>
                                <th>ProductCode</th>
                                <th>Operations</th>
                                <th>Attribute Name</th>
                                <th>Old Value</th>
                                <th>New Value</th>
                                <th>Date / Time</th>
                                <th>User Name</th>
                              </tr>
                            </thead>
                            <tbody>

                              @if(!empty($productHistory))
                                @foreach($productHistory as $prodHistory)
                                  <tr>
                                    <td>{{$prodHistory->ProductCode}}</td>
                                    <td>
                                      <form action="{{url('/editProduct')}}" method="post" target="_blank">
                                          @csrf
                                              <input type="hidden" name="ProductID" value="{{$prodHistory->ProductID}}">
                                              <button type="submit" class="EditProduct btn btn-default">Edit Product</button>
                                                        <button type="button" data-id="{{$prodHistory->columnName}}" data-productID="{{$prodHistory->ProductAttributeID}}" data-OldValue="{{$prodHistory->OldValue}}" data-NewValue="{{$prodHistory->NewValue}}" class="btn btn-default restoreValue">Restore</button>
                                        </form>
                                    </td>
                                    <td>
                                                    @foreach($orgAttributes as $attribute)
                                                      @if("a_".$attribute->AttributeColumnName == $prodHistory->columnName)
                                                          {{$attribute->AttributeName}}
                                                      @endif
                                                    @endforeach
                                                </td>
                                <td title="{{$prodHistory->OldValue}}">
                                  {{substr($prodHistory->OldValue,0,20)}}
                                          {{strlen($prodHistory->OldValue) > 20 ? "..." : ""}}
                                        </td>
                                        <td title="{{$prodHistory->NewValue}}">
                                    {{substr($prodHistory->NewValue,0,20)}}
                                          {{strlen($prodHistory->NewValue) > 20 ? "..." : ""}}
                                        </td>
                                    <td>{{$prodHistory->DateTime}}</td>
                                    <td>{{$prodHistory->FirstName}} {{$prodHistory->LastName}}</td>
                                  </tr>
                                @endforeach
                              @endif

                            </tbody>

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

                      <div class="tab-pane" id="productCollection">
                        <div class="epd">
                          <table class="table table-striped productCollection">
                            <thead>
                              <tr>
                                <th>Category Name</th>
                                <th>Path</th>
                              </tr>
                            </thead>
                            <tbody>
                              @if(!empty($productCollections))
                                @foreach($productCollections as $prodCollection)
                                  <tr>
                                    <td>{{$prodCollection->CategoryName}}</td>
                                    <td>
                                      <ol class="breadcrumb header-breadcrumb">
                                        {!! $prodCollection->path !!}
                                      </ol>
                                    </td>
                                  </tr>
                                @endforeach
                              @endif
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tab-pane" id="1a">
                <div class="row" style="margin: 0px; padding-top: 15px;">
                  <div class="col-md-2 manage-text">
                    <input type="text" id="inputProductCode" class="form-control" placeholder="Product Code">
                    <span class="prodNameErr" style="padding-left: 3%;color: red"></span>
                  </div>

                  <div class="col-md-2">
                    <button type="button" id="btnAddProduct" class="btn btn-default" style="">Add Product</button>
                  </div>
                  <div class="col-md-6">
                    @if($productCount >= $userSubscription->PackageIncludedProducts)
                    <span class="text-danger">Total added products are <strong> {{ $productCount }} </strong></span> <br>
                    <span class="text-danger">Product limit as per your package is <strong> {{ $userSubscription->PackageIncludedProducts }} </strong></span>
                    @else
                      <span class="text-success">Total added products are <strong> {{ $productCount }} </strong></span> <br>
                      <span class="text-success">Product limit as per your package is <strong> {{ $userSubscription->PackageIncludedProducts }} </strong></span>
                    @endif

                  </div>
                  <div class="col-md-2">
                    <form class="" action="{{url('/exportProducts')}}" method="post">
                      @csrf
                      <button type="submit" id="exportProducts" name="exportProducts" class="btn btn-default" style="">Export to file</button>
                    </form>
                  </div>
                </div>

                <div id="div_table" class="row table-catalog" style="margin: 0px;">
                  <table id="example" data-page-length='50' class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                      <tr>
                        <th scope="col" class="col3">Product Code</th>
                        <th scope="col" class="col3">Operations</th>
                        <th scope="col" class="col4">Create Date/Time</th>
                        <!-- <th scope="col" class="col5">Update Date/Time</th> -->
                        <th scope="col" class="col6">End of Life Date</th>
                        <th scope="col" class="col7">Created By</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>

              <div class="tab-pane" id="allAttHistory">

              </div>
            </div>
      </div>
  </div>
</div>
</div>
<script type="text/javascript">
  $(document).ready(function(){

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $(document).ajaxStart(function () {
          // $('#ajaxloader').show();
      })
      .ajaxStop(function () {
          $('#ajaxloader').hide();
      });

      var table = $('#example').DataTable({
                    //processing: true,
                    serverSide: true,
                    dataType:'json',
                    ajax: '{{ route("getProducts") }}',
                    columns: [
                            { data: 'ProductCode', name: 'ProductCode' },
                            { data: 'Operations', name: 'Operations' },
                            { data: 'CreatedAt', name: 'CreatedAt' },
                            /*{ data: '', name: '' },*/
                            { data: 'EndOfLifeDate', name: 'EndOfLifeDate' },
                            { data: 'createdBy' }
                          ]
                });

        var inputProductCode = $('#inputProductCode').val();

        if(inputProductCode.length>0)
        {
          table.search( inputProductCode ).draw();
        }

        $('#inputProductCode').on( 'keyup', function () {
          table.search( this.value ).draw();
        });

        $('#btnAddProduct').click(function(){
          var inputProductCode = $('#inputProductCode').val();
          if(inputProductCode != '' && (inputProductCode.replace(/\s/g, '').length)){
            $.ajax({
              type: "POST",
              url: base_url + 'addProduct',
              data: {"productCode": inputProductCode},
              success: function(response){
                if (response == 'limit exceeded') {
                  $(".prodNameErr").text('Product limit exceeded.');
                }
                if(response == "true")
                {
                  location.reload();
                }
                if(response == "false")
                {
                  $(".prodNameErr").text('Product code exists');
                }
              }
            });
          }
          else
          {
            $(".prodNameErr").text("Please enter product code");
            return  false;
          }
        });

        $("#exTab1").show();

  });
</script>
@endsection