@extends('layouts/contentNavbarLayout')

@section('title', 'products')




@section('content')

  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">products </span>
  </h4>
  <div class="row">
    <div class="col">
      <a class="btn btn-primary" href="{{route('admin.product.create')}}">Add product</a>
    </div>
  </div>
  <br>

  <div class="card">
    <h5 class="card-header"></h5>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table text-md-nowrap" id="example1">
          <thead>
          <tr class="text-nowrap ">
            <th class="text-primary">#</th>

            <th class="text-primary">name </th>
            <th class="text-primary">category</th>
            <th class="text-primary">image</th>

            <th class="text-primary">action</th>
          </tr>
          </thead>
          <tbody>
                    @foreach($products as $product)
                          <tr data-id="{{$product->id}}">
              <th>{{$i}}</th>
              <th>{{$product->getTranslation('name',env('DEFAULT_LANG'))}}</th>
              <th>{{$product->category->getTranslation('name',env('DEFAULT_LANG'))}}</th>
              <th><img src="{{asset($product->image)}}" width="75"></th>
              <th>
                <a href="{{url('product/'.$product->getTranslation('slug',env('DEFAULT_LANG')))}}" target="_blank" class="btn btn-dark">
                  <i class='bx bx-show-alt'></i>
                </a>
                <a href="{{route('admin.product.edit',['id'=>$product->id])}}" class="btn btn-info  ">
                  <i class='bx bxs-message-square-edit'></i>
                </a>
              </th>

            </tr>
          @endforeach

          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection

@section('page-script')
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>

    $('table').on('click', '.btn-danger', function () {
      var row = $(this).closest('tr');
      var id = row.attr('data-id');
      $.ajax({
        type: 'POST',
        url: '{{route('admin.product.delete')}}',
        data: {id: id, "_token": "{{ csrf_token() }}",},
        dataType: "json",
        success: function (response) {
          row.remove();
          Swal.fire({
            icon: 'success',
            title: 'Success...',
          })
        },
        error: function (response) {
          window.onload = function () {
            notif({
              msg: response,
              type: "error"
            })
          }
        }
      });
    });


    $('table').on('change', '.status', function () {
      var row = $(this).closest('tr');
      var id = row.attr('data-id');
      var type =$(this).data('type')
      $.ajax({
        type: 'POST',
        url: '{{route('admin.product.status')}}',
        data: {id: id,type:type, "_token": "{{ csrf_token() }}",},
        dataType: "json",
        success: function (response) {

          Swal.fire({
            icon: 'success',
            title: 'Success...',
          })
        },
        error: function (response) {
          window.onload = function () {
            Swal.fire({
              icon: 'error',
              title: 'Error...',
            })
          }
        }
      });
    });
  </script>
@endsection