@extends('layouts.backend')
@section('extraCss')
<style type="text/css">
.table-responsive{
  overflow-x: auto !important;
}

.fieldset{
    padding: 1rem !important;
    border : 2px dashed #d0d7dd !important;  

}

</style>
@endsection
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Website Articles
        </h4>
    </div>
    
    <div class="alert alert-default " >  
        <form action="{{ route('website-articles') }}" id="articlereport" >
        @csrf
            <fieldset class="fieldset">
            <legend  style="width:auto !important;color:#97b5d3;">Filter</legend>       
                <div style= "padding:5px;">                                                            
                </div>
                <div class="col-sm-12 "> </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-3 col-lg-3">
                        <label class="d-block"><b>Article No.</b></label>
                        <input name="name" id="codes" class="form-control" value="{{ request('name') }}">
                    </div>
                    <div class="col-12 col-sm-12 col-md-3 col-lg-3">
                        <label class="d-block"><b>SECTION</b></label>
                        <select name="category" id="sections" class="form-control select2">
                            <option value="">Any</option>
                            @foreach($sections as $section)
                            @php $dash=''; @endphp
                            <option value="{{ $section->id }}">{{ $section->name }}</option>
                            @foreach ($section->childrenCategories as $childCategory)
                                @include('backend.subsections.child_category', ['child_category' => $childCategory])
                            @endforeach
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-sm-12 col-md-2 col-lg-2">
                        <label class="d-block" ><b>Visibility Status</b></label>
                        <select name="is_website" id="is_website" class="form-control select2">
                            <option value="">Any</option>
                            <option value="2" {{ (request()->has('is_website') && (request('is_website') == 2)) ? 'selected' : '' }}>Hidden</option>
                            <option value="1" {{ (request()->has('is_website') && (request('is_website') == 1)) ? 'selected' : '' }}>Visible</option>
                        </select>
                    </div>
                    <div class="col-12 col-sm-12 col-md-2 col-lg-2">
                        <label class="d-block"><b> Sort By </b></label>
                        <select name="sortby" id="sortby" class="form-control select2">
                            <option value="">Sort By</option>
                            <option value="1" {{ (request()->has('sortby') && (request('sortby') == 1)) ? 'selected' : '' }}>Visible</option>
                            <option value="2" {{ (request()->has('sortby') && (request('sortby') == 2)) ? 'selected' : '' }}>Hidden</option>
                            <option value="3" {{ (request()->has('sortby') && ((request('sortby') == 3) || (request('sortby') == 4))) ? 'selected' : '' }}>Pending for Approval</option>
                        </select>
                    </div>
                    <div class="col-12 col-sm-12 col-md-2 col-lg-2">
                        <label class="d-block"><b> ACTION </b></label>
                        <button class="btn  btn-success  btn-sm d-inline" id="submit" ><i class="fa fas fa-search"> Search </i></button>
                        <button class="btn btn-primary  btn-sm d-inline" type="button" onclick="window.location.href='{{ route('articles.index') }}';"><i class="fa fas fa-refresh"> Reset </i></button>
                    </div>
                </div>
            </fieldset>  
        </form>
    </div>
    
    <div class="card-body">
        <div class="table-responsive" >
            <table class="table table-bordered ">
                <thead>
                    <tr>
                        <th width="130"></th>
                        <th>Name</th>
                        <th>Code</th>
                        <th>Category</th>
                        <th>Brand</th>
                        <th>Current Visibility</th>
                    </tr>
                </thead>
                <tbody>
                    @if($articles->count() > 0)
                    @foreach($articles as $article)
                    @php
                        $articleimg = \App\ArticleImg::where('code',preg_replace('#[^\w()/.%\-&]#',"",$article->code))->first(); 

                        $images = empty($articleimg->imgname) || $articleimg->imgname == 'NULL' ? 'https://via.placeholder.com/100x100.png?text=No Photo' : asset('/uploads/articles/photos/full/'.$articleimg->imgname);

                    @endphp
                    <tr>
                        <td><img src="{{ $images }}" style="width:100px;" class="img-fluid center-block img-rounded"></td>
                        <td>{{ $article->name }}</td>
                        <td>{{ $article->code }}</td>
                        <td>{{ empty($article->category->name) ? 'N/A' : $article->category->name }}</td>
                        <td>{{ empty($article->brand->name) ? 'N/A' : $article->brand->name }}</td>
                        <td>@php if($article->is_website == 1) { @endphp
                            <a href="javascript:;" class="badge badge-success" data-id="{{ $article->id }}" data-status="3" onclick="updateStatus(this)">Visible</a>
                            @php } elseif($article->is_website == 3) { @endphp
                                @php if(\Auth::user()->id != 1) { @endphp
                                <label class="badge badge-dark">Pending for Approval</label>
                                @php } else { @endphp
                                <a href="javascript:;" class="badge badge-dark" data-id="{{ $article->id }}" data-status="4" onclick="updateStatus(this)">Pending for Approval</a>
                                @php } @endphp
                            @php } elseif($article->is_website == 4) { @endphp
                                @php if(\Auth::user()->id != 1) { @endphp
                                <label class="badge badge-dark">Pending for Approval</label>
                                @php } else { @endphp
                                <a href="javascript:;" class="badge badge-dark" data-id="{{ $article->id }}" data-status="3" onclick="updateStatus(this)">Pending for Approval</a>
                                @php } @endphp
                            @php } else { @endphp
                            <a href="javascript:;" class="badge badge-warning" data-id="{{ $article->id }}" data-status="4" onclick="updateStatus(this)">Hidden</a>
                            @php } @endphp
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8"><div class="alert alert-danger">No product found!</div></td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
        <div class="text-right">
            {!! $articles->render() !!}
        </div>
    </div>
</div>
@endsection
@section('extraJs')
<script type="text/javascript">
function updateStatus(elem) {
  event.preventDefault();
  $(elem).replaceWith("<span id='spinner'><img src='{{ asset(BACKEND_THEME_IMAGES_PATH . 'input-spinner.gif') }}'></span>");
  var _token   = '{{ csrf_token() }}';
  var s   = $(elem).attr('data-status');
  var id   = $(elem).attr('data-id');
  $.ajax({
      type: "post",
      url: "{{ route('website-articles-update') }}",
      data: {
        a: id,
        status: s,              
        _token: _token
      },
      success: function(response) {
        if (response.status == true) {
          toastr.success(response.data);
        } else {
          toastr.success(response.data);   
        }
        $('#spinner').replaceWith(response.text);
      }
  });
}
</script>
@endsection