@extends('adminLayouts.app')
@section('title') {{'Status'}} @endsection

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('auth/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('auth/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('auth/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('auth/plugins/flickity/flickity.min.css')}}">

<style>
.hide{display:none;}
.ai-icon{color: #000;
    font-size: 16px;
    font-weight: bold;}
.pagination{    justify-content: flex-end;}
    #carousel_slide{
        position: relative;
    }
    .text-block {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: #fff;
      color: #000;
      width:100%;
    }
    .info{
        padding:0 5%;
    }

    .carousel {
      background: #FAFAFA;
    }

    .carousel-cell {
      width: 30%;
      height: 500px;
      margin-right: 10px;
      background: #fff;
    }

    .carousel-cell-image {
      display: block;
      max-height: 100%;
      margin: 0 auto;
      max-width: 100%;
      opacity: 1;
      -webkit-transition: opacity 0.4s;
              transition: opacity 0.4s;
    }

    /* fade in lazy loaded image */
    .carousel-cell-image.flickity-lazyloaded,
    .carousel-cell-image.flickity-lazyerror {
      opacity: 1;
    }

</style>
@append

@section('js')
<!-- DataTables  & Plugins -->
<script src="{{asset('auth/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('auth/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('auth/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('auth/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('auth/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script>
  $(function () {
    var d = new Date();
    var newDate = d.getDate()+ "-" + (d.getMonth()+1) + "-" +d.getFullYear();
    var filename='calik_'+newDate;

    $("#ximilarTable").DataTable({
      "bPaginate": false, "info": false, "responsive": true, "lengthChange": false, "autoWidth": false,
     /* "buttons": [
        {
                extend: 'csv',
                title: filename
        },
        {
                extend: 'excel',
                title: filename
        },
        {
                extend: 'print',
                title: filename
        },
        {
            extend: 'colvis',
            text: 'Show/hide columns'
        }

      ]*/
    }).buttons().container().appendTo('#ximilarTable_wrapper .col-md-6:eq(0)');

    $('.pagination li [rel=prev]').html('Previous');
    $('.pagination li [rel=next]').html('Next');
    $('.pagination [aria-label="« Previous"]').find('span').html('Previous');
    $('.pagination [aria-label="Next »"]').find('span').html('Next');
 });
</script>
@append

@section('content')

  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1> {{$cat->name}} Records</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url('/admin/dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">{{$cat->name}}</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">

           <div class="card">
            <div class="card-header">
              <h3 class="card-title"></h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
            @if (isset($list))
            <form method="GET" action="{{ route('ximilar_status',$cat->id) }}">
                <label for="perPage">Records per page:</label>
                <select name="perPage" id="perPage" onchange="this.form.submit()">
                    <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
                    <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20</option>
                    <option value="40" {{ request('perPage') == 40 ? 'selected' : '' }}>40</option>
                    <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                </select>
            </form>

              <table id="ximilarTable" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th> Url1 </th>
                    <th> Type </th>
                    <th> Url2 </th>
                    <th> Type </th>
                    <th> Results </th>
                    <th> Result Image </th>
                    <th> Note </th>
                    <th> Action </th>
                </tr>
                </thead>
                <tbody>
                    @foreach($list as $d)
                 <tr id="row_{{ $d->id }}">
                   <td>
                     <a href="{{asset('uploads/thumbnails_500/'.$d->url1)}}">
                      <img src="{{asset('uploads/thumbnails_150/'.$d->url1)}}" class="user_upload_img1" style="width: 100px;">
                    </a>
                    </td>
                  <td>
                       <select class="type1">
                              <option value="{{ $d->type1 }}" data-id="{{ $d->type1_id }}"> {{ $d->type1 }}</option>
                        </select>
                  </td>
                  <td>
                    <a href="{{asset('uploads/thumbnails_500/'.$d->url2)}}">
                      <img src="{{asset('uploads/thumbnails_150/'.$d->url2)}}" class="user_upload_img2" style="width: 100px;">
                    </a>
                      <!--<img src="{{asset('img/placeholder_image.jpeg')}}" class="user_upload_img2" style="width: 100px;">-->
                  </td>
                  <td>
                        <select class="type2">
                              <option value="{{ $d->type2 }}" data-id="{{ $d->type2_id }}"> {{ $d->type2 }}</option>
                        </select>
                  </td>
                  <td>

                      <select name="productid" class="productid">
                        <option value="None">choose option</option>
                          @foreach($d->api as $api)

                            <option value="{{$api->productid}}"
                                    data-api_id="{{$api->api_id}}" data-img="{{$api->image_url}}"
                                    @if($api->productid == $d->f_productid) selected="selected" @endif>
                                    {{$api->productid}}
                            </option>
                         @endforeach
                      </select>
                      <button type="button" class="btn btn-info add_productmeta" data-id="{{ $d->id }}">Add Meta</button>
                     <i class="spinner-border fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
                    </td>
                  <td>
                      <img src="{{$d->f_image_url}}" class="product_img" style="width: 100px;">
                  </td>
                  <td>
                    <div class="feedback_input">
                      <textarea name="feedback" class="input_feedback" rows="2" cols="20">{{ $d->note }}</textarea>
                      <a href="javaScript:" class="feedback_submit" data-id="{{ $d->id }}">Save</a>
                      <i class="spinner-border fa fa-circle-o-notch fa-spin"></i>
                    </div>
                  </td>
                 <td>
                     <input type="hidden" name="key_id" class="key_id" value="{{ $d->id }}"/>
                    <!-- <a href="javascript:void(0)" class="btn btn-sm btn-primary restoreTodatabase" data-id="row_{{ $d->id }}">
                        Restore
                    </a>
                    <a type="button" class="btn btn-sm btn-danger deleteTodatabase" data-id="row_{{ $d->id }}">
                        Delete
                    </a>
                    <a type="button" class="btn btn-default" style="pointer-events: none;">
                        @if($d->ximilar_status == 'success')
                            <i class="fa fa-check" aria-hidden="true"></i>
                        @else
                            <i class="fa fa-window-close" aria-hidden="true"></i>
                        @endif
                        saved to Ai
                    </a>
                    <span><i class="spinner-border fa fa-circle-o-notch fa-spin" style="font-size:24px"></i></span>
-->
                <a class="btn btn-app saveTodatabase" data-id="row_{{ $d->id }}">
                    <i class="fas fa-save"></i> Save
                </a>
                <a class="btn btn-app deleteTodatabase" data-id="row_{{ $d->id }}">
                    <i class="fa fa-trash"></i>Delete
                </a>
                @foreach($all_cat as $c_data)
                  @if($c_data->id != $cat->id)
                    @if($c_data->id == 1)
                      <a class="btn btn-app categoryTodatabase" data-id="row_{{ $d->id }}" data-catid="{{$c_data->id}}">
                          <i class="fa fa-archive"></i>ALL
                      </a>
                    @else
                      <a class="btn btn-app categoryTodatabase" data-id="row_{{ $d->id }}" data-catid="{{$c_data->id}}">
                          <i class="fa fa-archive"></i>{{$c_data->name}}
                      </a>
                    @endif
                  @endif
                @endforeach
                <a class="btn btn-app search_product" data-id="{{ $d->id }}">
                  <i class="fa fa-search" aria-hidden="true"></i>Product
                </a>
                <a class="btn btn-app rerun_ai" data-id="row_{{ $d->id }}"><span class="ai-icon">Run</span>
                </a>
                <a class="btn btn-app saveToximilar" data-id="row_{{ $d->id }}"><span class="ai-icon">Ai</span>
                    <!--<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="#fff" height="16" rx="1.5" width="16"/><g fill="#000"><path d="m12.7378767 1.9047619c-.6207695 0-1.241179.40681023-1.241179 1.2206095 0 1.62754744 2.4832835 1.62754744 2.4832835 0 0-.81379927-.621335-1.2206095-1.2421045-1.2206095z"/><path d="m9.025138 3.70383583-2.75771272 4.66360442-1.67267096-2.86095437h-2.51758074v.06907038l2.79380965 4.09410586-2.96622133 4.23130148v.0520327h2.51758074l1.84508264-2.8268534 1.84510834 2.8268534h2.51758078v-.0520327l-2.96622137-4.23130148 2.56722687-3.76226663c-.64529686-.57447959-1.07144115-1.35315616-1.2059819-2.20355966z"/><path d="m11.686258 6.71184574v7.24115056h2.1041629v-7.24115056c-.3418667.09979954-.6962542.15081047-1.0525442.15157678-.3559815-.00084294-.7100605-.05187941-1.0516187-.15157678z"/></g></g></svg>-->
                    <span class="check_icon">
                        @if($d->ximilar_status == 'success')
                            <i class="fa fa-check" aria-hidden="true"></i>
                        @endif
                    </span>
                </a>
                    <i class="spinner-border fa fa-circle-o-notch fa-spin"></i>


                 </td>
                </tr>
                  @endforeach
               </tbody>
              </table>

              <div class="row">
                <div class="col-sm-12 col-md-5">
                  <div class="dataTables_info" id="ximilarTable_info" role="status" aria-live="polite">
                    Showing {{ $data->firstItem() }} to {{$data->lastItem()}} of {{$data->total()}} entries</div>
                </div>
              <div class="col-sm-12 col-md-7">{{ $data->appends(['perPage' => $perPage])->links("pagination::bootstrap-4") }}</div>
            </div>





            @endif
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->

          <div class="card">
           <div class="card-header">
             <h3 class="card-title">Result of Rerun</h3>
           </div>
           <!-- /.card-header -->
           <div class="card-body">
             <div class="carousel" id="carousel_slide" data-flickity='{  "lazyLoad": true ,"groupCells": true }'>
             </div>
           </div>
           <!-- /.card-body -->
         </div>
         <!-- /.card -->


        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
  <!-- /.content -->

@endsection