@extends('layouts.userdashboard')
@section('content')

<div class="container-fluid">

  <div class="row">

        <div class="col-xl-12 col-lg-12">
             <div class="card shadow mb-4">
                                <!-- Card Header - Dropdown -->

                                <div class="card-body">
                                    <div class=" pb-2">
                                     <div class="inner-bg table-responsive">
                    <div class="element-title mb-2">
                      <h4 class="mb-4">Favorite Products</h4>
                    </div>
                    <table class="cart-table table table-hover table-bordered" width="100%" id="example">
                      <thead  class="table-dark">
                        <tr>
                          <th>Item Image</th>
                          <th>Item Name</th>
                          <th>Item Price</th>
                          <th>Details</th>
                          <th>Cart</th>
                          <th>Action</th>

                        </tr>
                      </thead>
                      <tbody>
                        @if(count($final_out) > 0)
                          @foreach($final_out as $favorite)

                            <tr>
                              <td><img class="img-fluid my-auto align-self-center mr-2 mr-md-4 pl-0 p-0 m-0" src="{{ asset('storage/'.$favorite['item']['image']) }}" width="50" height="50" /></td>
                              <td>{{ $favorite['item']['name'] }}</a></td>
                              <td>Rs.{{ $favorite['item']['price'] }}</td>
                              <td><a href="{{ route('item.show', $favorite['item']) }}" class="hedlogbtn border-0">View Details</a></td>
                               <td>
                                  @if(auth()->check())
                                    @if(!\Cart::session(auth()->user()->id)->get($favorite['item']['id']))

                                      <button id="add-{{ $favorite['item']['id'] }}" class="bttn" type="button" style=" border: 0; background: transparent;" onclick="add_cart({{ $favorite['item']['id'] }})"><i class="fas fa-cart-arrow-down" style=" color: #110f02; font-size: 20px; "></i></button>

                                           <button id="added-{{ $favorite['item']['id'] }}" type="button" disabled class="bttn d-none" style=" border: 0; background: transparent;" ><i class="fas fa-cart-arrow-down" style=" color: #ccc; font-size: 20px; "></i></button>

                                       @else
                                      <button type="button" disabled class="bttn" style=" border: 0; background: transparent;" ><i class="fas fa-cart-arrow-down" style=" color: #ccc; font-size: 20px; "></i></button>
                                    @endif
                                  @else
                                    <a href="{{ route('login') }}" class="bttn"><i class="fas fa-cart-arrow-down" style=" color: #110f02; font-size: 20px; "></i></a>
                                  @endif
                               </td>
                                <td>
                                    <a href="/delete-wishlist/{{ $favorite['id'] }}" class="border-0"><i class="fa fa-trash green-text" style="font-size: 16px;" aria-hidden="true"></i></a>
                                </td>

                            </tr>
                          @endforeach
                        @endif
                      </tbody>
                    </table>
                                     </div>

                                    </div>
                        </div>
                        <!-- Area -->

             </div>
</div>

  </div>

                    <!-- Content Row -->
                </div>

@endsection

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script>

<script>

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        "order": [[1, "desc"]], //or asc
       "columnDefs" : [{"targets":3, "type":"date-eu"}],
        buttons: [
             'excel',
        ]
    } );
  });

</script>

<script>

function add_cart(id){

     var cart_no = document.getElementById('cart_no').textContent;

            $.ajax({
                    type: "Post",
                    url: '{{route('add.to.cart')}}',
                    datatype: 'json',
                    data: {
                      "_token": "{{ csrf_token() }}",
                        'item_id' : id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);

                        document.getElementById('add-'+id).classList.add('d-none');
                           document.getElementById('added-'+id).classList.remove('d-none');
                           document.getElementById('cart_no').textContent = parseInt(cart_no) + 1;
                        setCartCountBadge(parseInt(cart_no) + 1)
                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });

    }

</script>