@extends('admin.layout.layout')

@section('page-level-css')
@endsection

@section('content')
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
  <!-- START HEADER -->
  @include('admin.partials.header')
  <!-- END HEADER -->
  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper">
    <!-- START PAGE CONTENT -->
    <div class="content ">

      <div class="container-fluid  bg-white">
        {{-- flash message starts here --}}
        <div class="col-md-12">
          @if ($errors->any())
          <div class="alert alert-danger">
            <ul>
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
          @endif
          @if(Session::has('success'))
          <div class="alert alert-success">
            {{Session::get('success')}}
          </div>
          @endif
        </div>
        {{-- flash message ends here --}}
        <!-- START card -->
        <div class="card card-transparent">
          {{-- filters starts --}}
          <div class="card-header ">
            <div class="card-title">
              {{-- Filters --}}
            </div>

            <div class="clearfix"></div>
          </div>
          {{-- filters --}}
          {{-- @include('admin.partials.filters.locationFilter') --}}
          {{-- filters ends --}}
          <div class="col-md-6">
            <label>Upload Excel Sheet</label>
            <form method="POST" action="{{route('product.excel.upload')}}" enctype="multipart/form-data">
              @csrf
              <input type="file" name="file" class="form-control">
              <button class="btn btn-info">Upload</button>
            </form>
          </div>
          <div class="card-header ">
            <div class="card-title">
              Products
            </div>

            <div class="pull-right">
              <div class="col-xs-12">
                <input type="text" id="search-table" class="form-control pull-right" placeholder="Search">
              </div>
            </div>
            <div class="clearfix"></div>
          </div>

          <div class="card-body">
            @if( count($products) != 0 )
            <table class="table table-hover demo-table-search table-responsive-block" id="tableWithSearch">
              <thead>
                <tr>
                  <th style="width:1%">#</th>
                  <th style="width:15%">Image</th>
                  <th style="width:15%">Title</th>
                  <th style="width:10%">Slug</th>
                  <th style="width:10%">SKU</th>
                  <th style="width:10%">SKU Variant</th>
                  <th style="width:15%">Quantity</th>
                  <th style="width:10%">Price</th>
                  <th style="width:5%">In Sale</th>
                  <th style="width:5%">In Week Sale</th>
                  <th style="width:5%">Status</th>
                  <th style="width:30%">Action</th>
                </tr>
              </thead>
              <tbody>
                @php
                $sr = 1;
                @endphp
                @foreach( $products as $product )
                <tr>
                  <td class="v-align-middle ">
                    <p>
                      {{$sr}}
                    </p>
                  </td>
                  <td class="v-align-middle ">
                    @php
                    $imageArray = json_decode($product->images);
                    if(!empty($imageArray)){
                    foreach($imageArray as $imageData){
                    $image = $imageData;
                    break;
                    }
                    }else{
                    $image = null;
                    }
                    @endphp
                    @if(!empty($image) && !empty($image->url))
                    <img src="{{$image->url}}" width="100">
                    @endif
                  </td>
                  <td class="v-align-middle ">
                    <p>
                      {{$product->title}}
                    </p>
                  </td>
                  <td class="v-align-middle">
                    <p>{{$product->slug}}</p>
                  </td>
                  <td class="v-align-middle">
                    <p>{{$product->sku}}</p>
                  </td>
                  <td class="v-align-middle">
                    @php
                    $variants = json_decode($product->sizes_data);
                    @endphp
                    @if($product->sizes_data && count($variants) > 0)
                    @foreach ($variants as $variant)
                    @if(isset($variant->sku))
                    <p>{{$variant->sku}}</p>
                    @endif
                    @endforeach
                    @endif
                  </td>
                  <td class="v-align-middle">
                    <p>{{$product->quantity}}</p>
                  </td>
                  <td class="v-align-middle">
                    <p>{{$product->price}}</p>
                  </td>
                  <td class="v-align-middle">
                    <p>
                      <button class="btn @if($product->is_in_sale == 1) btn-complete @else btn-danger @endif btn-sm
                        btn-rounded m-r-20">
                        @if($product->is_in_sale == 1)
                        Yes
                        @else
                        No
                        @endif
                      </button>
                    </p>
                  </td>
                  <td class="v-align-middle">
                    <p>
                      <button class="btn @if($product->is_in_week_sale == 1) btn-complete @else btn-danger @endif
                        btn-sm btn-rounded m-r-20">
                        @if($product->is_in_week_sale == 1)
                        Yes
                        @else
                        No
                        @endif
                      </button>
                    </p>
                  </td>
                  <td class="v-align-middle">
                    <p>
                      <button
                        class="btn @if($product->status == 1) btn-complete @else btn-danger @endif btn-sm  btn-rounded m-r-20">
                        @if($product->status == 1)
                        Active
                        @elseif($product->status == 2)
                        Inactive

                        @endif
                      </button>
                    </p>
                  </td>

                  <td class="v-align-middle">
                    <a href="{{route('get.product.reviews',['productId' => $product->id])}}"
                      class="btn btn-warning btn-sm">Reviews</a>
                    <a href="{{route('products.edit',['product' => $product->id])}}"
                      class="btn btn-success btn-sm">Edit</a>
                    <a href="#" data-toggle="modal" data-target="#modalSlideUp"
                      class="btn btn-danger btn-sm trashEntity" data-id="{{$product->id}}"
                      data-url="{{route('products.destroy',['product' => $product->id ])}}">Delete</a>
                  </td>
                </tr>
                @php
                $sr++;
                @endphp
                @endforeach

              </tbody>
            </table>
            @else
            @endif
          </div>
          {{-- {{$products->links()}} --}}
        </div>
        <!-- END card -->
      </div>
    </div>
    {{-- Delete Modal Starts here --}}
    @include('admin.partials.trashModal')
    {{-- Delete Modal ends here --}}
    <!-- END PAGE CONTENT -->
    @include('admin.partials.footer')
    <!-- END COPYRIGHT -->
  </div>
  <!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
@endsection

@section('page-level-js')
<script src="{{asset('admin/assets/plugins/jquery-datatable/media/js/jquery.dataTables.min.js')}}"
  type="text/javascript">
</script>
<script src="{{asset('admin/assets/plugins/jquery-datatable/extensions/TableTools/js/dataTables.tableTools.min.js')}}"
  type="text/javascript"></script>
<script src="{{asset('admin/assets/plugins/jquery-datatable/media/js/dataTables.bootstrap.js')}}"
  type="text/javascript">
</script>
<script src="{{asset('admin/assets/plugins/jquery-datatable/extensions/Bootstrap/jquery-datatable-bootstrap.js')}}"
  type="text/javascript"></script>
<script type="text/javascript"
  src="{{asset('admin/assets/plugins/datatables-responsive/js/datatables.responsive.js')}}">
</script>
<script type="text/javascript" src="{{asset('admin/assets/plugins/datatables-responsive/js/lodash.min.js')}}"></script>
<script src="{{asset('admin/assets/js/datatables.js')}}" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function($) {
     $('#filterForm').attr('action', '{{route('products.index')}}');
     $('#resetFilter').attr('href', '{{route('products.index')}}');
  });

  $(document).on('click', '.trashEntity', function(event) {
    var entityId = $(this).attr('data-id');
    var entityUrl = $(this).attr('data-url');
    // need to import delete modal (double check)
    console.log(entityId);
    $('#entity_id').val(entityId);
    $('#trashEntityForm').attr('action', entityUrl);
    $('#confirmationMessage').html('<h5>Are you sure, <span class="semi-bold">you want to delete it.?</span></h5><p class="p-b-10">Once deleted it can be recovered</p>');
  }); 
</script>
@endsection