@extends('adminLayouts.app')
@section('title') {{'ALL'}} @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 {
  background: #EEE;
}

.carousel-cell {
  width: 80%;
  height: 700px;
  margin: 0 auto;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel img {
  display: block;
max-height: 100%;
max-width: 100%;
}
.text-block {
    background-color: #d5d5d5;
    padding: 10px;
}
/* END SLIDER */

#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;
}

.show{display:none}
</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,
    /*  "columnDefs": [{ width: 200, targets: 0 }],
      "fixedColumns": true,
      "scrollCollapse": true,
      "scrollX": true,
      "scrollY": false,*/
      "responsive":true,
    /*  "buttons": [
        {
                extend: 'csv',
                title: filename
        },
        {
                extend: 'excel',
                title: filename
        },
        {
                extend: 'print',
                title: filename
        }

      ]*/
    }).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> All 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">ALL</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_all') }}">
                <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>

            <div class="action">
            <select id="choose_action" style="float:left;margin-right:10px;">
             <option value="">Actions</option>
            <!-- -- <option value="save_feedback">Save Feedback</option>-->
             <option value="edit_category">Edit Category</option>
             <option value="delete">Delete</option>
            </select>
            <button class="btn-primary delete_all show" data-url="{{ url('myproductsDeleteAll') }}">Delete All Selected</button>
            <!--<button class="btn-primary save_feedback_all show" data-url="{{ url('myproductsSaveFeedbackAll') }}">Save All Selected Feedback</button>-->
            <div class="edit_category show">
            <select class="edit_category_id">
                <option value="">Choose</option>
                @foreach($all_cat as $c_data)
                @if($c_data->id != 1)
                <option value="{{$c_data->id}}">{{$c_data->name}}</option>
                @endif
                @endforeach
            </select>
            <button class="btn-primary category_save">Save</button>
           </div>
           <i class="spinner-border fa fa-circle-o-notch fa-spin"></i>
            </div>
              <table id="ximilarTable" class="table table-bordered">
                <thead>
                <tr>
                    <th width="50px"><input type="checkbox" id="master"></th>
                    <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><input type="checkbox" class="sub_chk" data-id="{{$d->id}}"></td>
                  <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>
                      <!--<img src="{{asset('img/placeholder_image.jpeg')}}" class="user_upload_img1" style="width: 100px;">-->
                    </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 class="type_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}}"
                                    data-url="{{$api->product_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 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 != 1)
                    <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
                    @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>
              <!-- Pagination Links (Retain perPage selection) -->
              <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