@extends('admin.layouts.master')


@section('head-tag')
<title>لیست کتاب های سایت</title>
<style>
  #loader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
  }
  .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
      position: absolute;
      left: 48%
  }
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
</style>
@endsection

@section('content')

<div class="row">
  <div id="loader" style="display: none;">
    <div class="spinner"></div>
</div>
    <div class="col-12">
      <div class="card-header">
        <div class="d-flex flex-column align-items-center justify-content-center">
          <div>
            {{ $books->links() }}
        </div>
      </div>
      </div>
      <div class="card">
        <div class="card-body table-responsive p-0">
          <div class="d-flex align-items-center m-3">
            <form action="{{ route('admin.books.api') }}" method="GET" id="apiForm">
              @csrf
              <button type="submit" class="btn btn-primary" id="submitButton">بروزرسانی api</button>
            </form>
            <a href="{{ route('admin.books.index') }}" class="btn btn-primary mx-3">
             همه کتاب ها
          </a>
            <a href="{{ route('books.filterStuff') }}" class="btn btn-primary">
              کتاب های ققنوس
          </a>
          </div>
          <table class="table table-hover">
            <tbody>
              <tr>
                <th>ردیف</th>
                <th>sku</th>
                <th>نام کتاب</th>
                <th class="text-daner">قیمت</th>
                <th class="text-daner">موجودی</th>
                <th>stuff_id</th>
                {{-- <th>وضعیت</th> --}}
                {{-- <th>تنظیمات</th> --}}
            </tr>

            @if (empty($books))
            <p>محصولی موجود نیست</p>
            @else
            @foreach ($books as $key => $book)      
            <tr>
              <td>{{ $key+=1 }}</td>
              <td>{{$book->sku}}</td>
              <td>{{ $book->name }}</td>
              <td class="text-danger"> {{ number_format($book['price']) }} تومان</td>
              <td class="text-danger">{{$book->quantity === 0 ? 'ناموجود' : $book->quantity}}</td>
              <td>{{$book->stuff_id}}</td>
              {{-- <td class="text-center">
                <span class="badge badge-{{ $book->status === 1 ? 'success' : 'primary' }}">
                  {{ $book->status === 1 ? 'آماده ارسال' : 'تایید شده' }}
                </span>
              </td> --}}
            {{-- <td>
              <a href="{{route('admin.books.edit',$book->id)}}" class="btn">
                <i class="fa fa-edit"></i>
              </a>
            </td> --}}
            </tr>
            @endforeach

            @endif

          </tbody></table>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->

    </div>
  </div>
@endsection

@section('script')

@include('alerts.sweetalert.delete-confirm', ['className' => 'delete'])

<script>
  document.getElementById('apiForm').addEventListener('submit', function () {
      document.getElementById('submitButton').style.display = 'none';
      document.getElementById('loader').style.display = 'flex';
  });
</script>
@endsection