@if($products->count() > 0)
    @php
    $serial_no = (($products->currentpage()-1)*$products->perpage()+1);
    @endphp
    @foreach($products as $index => $p)
    <tr>
        <td class="number">{{ $p->id }}</td>
        <td class="product-name">
            <ul class="m-0 p-0">
                <li class="d-flex align-items-center product_name">
                    <figure class="mr-3 mb-0">
                        @if($p->photos->count() > 0)
                            <img src="/storage/{{ $p->photos->first()->images }}" alt="cart prod">
                        @else
                            <img src="{{ asset('frontend/img/no-image.png') }}" alt="" width="" height="">
                        @endif
                    </figure>
                    <div class="prod-info">
                        <h3 class="h6">{{ $p->name }}</h3>
                    </div>
                </li>
                <div class="product_overview" id="product_overview{{ $p->id }}" style="display: none;">
                    <div class="overview-popup">
                        <span class="close-product-overview">&#x2715;</span>
                        <div class="row" id="editProfile{{ $p->id }}">
                            <div class="col-4">
                                <figure>
                                    @if($p->photos->count() > 0)
                                        <img src="/storage/{{ $p->photos->first()->images }}" alt="cart prod">
                                    @else
                                        <img src="{{ asset('frontend/img/no-image.png') }}" alt="" width="" height="">
                                    @endif
                                </figure>
                            </div>
                            <div class="col-8">
                                <div class="prod-info">
                                    <h3 class="h6">{{ $p->name }}</h3>
                                    <h3 class="h4"><a href="{{ route('products.edit', $p->slug) }}" class="action-product"> Edit</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ul>
        </td>
        <td class="category">
            <span class="category-update" id="category{{ $p->id }}">{{ $p->category->name }}</span>
            <div class="category_update" id="update_category_form{{ $p->id }}" style="display: none;">
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <form class="form-horizontal position-relative category-form marketplace popup-form" id="editProfile{{ $p->id }}">
                    <h2 class="h3 mb-3">Update Category</h2>
                    <div class="d-flex mb-3 product-title">
                        <figure class="mb-0 mr-3">
                            @if($p->photos->count() > 0)
                                <img src="/storage/{{ $p->photos->first()->images }}" alt="cart prod">
                            @else
                                <img src="{{ asset('frontend/img/no-image.png') }}" alt="" width="" height="">
                            @endif
                        </figure>
                        <a href="{{ route('products.edit', $p->slug) }}" class="action-product">{{ Str::limit($p->name, $limit = 50, $end = '...') }}</a>
                    </div>
                    <span id="close{{ $p->id }}" class="close-category-form">&#x2715;</span>
                    @method('PUT')
                    <input type="hidden" name="id" id="id{{ $p->id }}" value="{{ $p->id }}">
                    <div class="d-flex">
                        <div class="input-group">
                            <select class="input " name="category_id" id="update_category{{ $p->id }}" required>
                                @foreach($categories as $cat)
                                    <option @if($p->category->id == $cat->id ) selected @endif value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                              </select>

                            <label for="input">Category</label>
                        </div>
                        <div class="input-group submit ml-3">
                            <button type="submit" id="submit" value="submit" class="btn btn-primary custom-button primary-color submit-category">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </td>
        <td class="quantity-class">
            <span class="quantity" id="quantity{{ $p->id }}">{{ $p->quantity }}</span>
            <div class="quantity_update" id="update_quantity_form{{ $p->id }}" style="display: none;">
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <form class="form-horizontal position-relative quantity-form marketplace popup-form" id="editProfile{{ $p->id }}">
                    <h2 class="h3 mb-3">Update Quantity</h2>
                    <div class="d-flex mb-3 product-title">
                        <figure class="mb-0 mr-3">
                            @if($p->photos->count() > 0)
                                <img src="/storage/{{ $p->photos->first()->images }}" alt="cart prod">
                            @else
                                <img src="{{ asset('frontend/img/no-image.png') }}" alt="" width="" height="">
                            @endif
                        </figure>
                        <a href="{{ route('products.edit', $p->slug) }}" class="action-product">{{ Str::limit($p->name, $limit = 50, $end = '...') }}</a>
                    </div>
                    <span id="close{{ $p->id }}" class="close-quantity-form">&#x2715;</span>
                    @method('PUT')
                    <input type="hidden" name="id" id="id{{ $p->id }}" value="{{ $p->id }}">
                    <div class="d-flex">
                        <div class="input-group">
                            <input type="number" min="0" class="quantity-input" id="update_quantity{{ $p->id }}" name="quantity" value="{{ $p->quantity }}">
                            <label for="input">Quantity</label>
                        </div>
                        <div class="input-group submit ml-3">
                            <button type="submit" id="submit" value="submit" class="btn btn-primary custom-button primary-color submit-quantity">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </td>
        <td class="price">
            <h3 class="h4 price-value" id="price{{ $p->id }}">${{ $p->price }}</h3>
            <div class="price_update" id="update_price_form{{ $p->id }}" style="display: none;">
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <form class="form-horizontal position-relative price-form marketplace popup-form" id="editProfile{{ $p->id }}">
                    <h2 class="h3 mb-3">Update Price</h2>
                    <div class="d-flex mb-3 product-title">
                        <figure class="mb-0 mr-3">
                            @if($p->photos->count() > 0)
                                <img src="/storage/{{ $p->photos->first()->images }}" alt="cart prod">
                            @else
                                <img src="{{ asset('frontend/img/no-image.png') }}" alt="" width="" height="">
                            @endif
                        </figure>
                        <a href="{{ route('products.edit', $p->slug) }}" class="action-product">{{ Str::limit($p->name, $limit = 50, $end = '...') }}</a>
                    </div>
                    <span id="close{{ $p->id }}" class="close-price-form">&#x2715;</span>
                    @method('PUT')
                    <input type="hidden" name="id" id="id{{ $p->id }}" value="{{ $p->id }}">
                    <div class="d-flex">
                        <div class="input-group">
                            <input type="number" min="0" class="price-input" id="update_price{{ $p->id }}" name="price" value="{{ $p->price }}" step="any">
                            <label for="input">Price</label>
                        </div>
                        <div class="input-group submit ml-3">
                            <button type="submit" id="submit-price" value="submit" class="btn btn-primary custom-button primary-color submit-price">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </td>
        <!-- <td class="status-class">
            <span class="status" id="status{{ $p->id }}">
                @if($p->quantity > 0)
                In Stock
                @else
                Out Of Stock
                @endif
            </span>
        </td> -->
        <td class="action-class">
            <!-- <div class="d-flex">
                <a href="{{ route('products.edit', $p->slug) }}" class="mr-3"><i class="fa-solid fa-pencil"></i></a>
                <form action="{{ route('products.destroy', $p->slug) }}" method="post">
                    @csrf
                   0 @method('DELETE')
                    <button class="delete-product"><i class="fa-regular fa-trash-can"></i></button>
                </form>
            </div> -->
            <div class="action-dots">
                <ul class="status-dot">
                    <li class="position-relative"><a href="javascript:void(0)"><i class="fa-solid fa-ellipsis-vertical"></i></a>
                        <ul class="submenu">
                        
                            <li><a href="{{ route('products.edit', $p->slug) }}" class="action-product"> Edit</a></li>
                            @if(auth()->user()->role->role_name == "admin")
                            <li>
                                <form action="{{ route('products.archive',['id' => $p->id, 'status' => $p->status])}}" method="post">
                                    @csrf
                                    @if($p->status == 'ACTIVE')
                                    <button class="action-product">Archive</button>
                                    @else
                                    <button class="action-product">Active</button>
                                    @endif
                                </form>
                            </li>
                            <li>
                                <form action="{{ route('products.destroy', $p->slug) }}" method="post">
                                    @csrf
                                    @method('DELETE')
                                    <button class="action-product">Delete</button>
                                </form>
                            </li>
                            @endif
                        </ul>
                    </li>
                    <li class="link-update"><a href="javascript:void(0)"><i class="fa fa-link" aria-hidden="true"></i></a></li>
                    <div class="link_update" id="update_link_form{{ $p->id }}" style="display: none;">
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <form class="form-horizontal position-relative link-form marketplace popup-form" id="editlink{{ $p->id }}">
                            <h2 class="h3 mb-3">Add Link</h2>
                            <span id="close{{ $p->id }}" class="close-link-form">&#x2715;</span>
                            @method('POST')
                            <input type="hidden" name="product_id" id="id{{ $p->id }}" value="{{ $p->id }}">
                            
                                <div class="input-group mb-3">
                                    <input type="text" min="0" class="link-input" id="update_title{{ $p->id }}" name="title" value="" placeholder="Enter Title">
                                    <label for="input">Title</label>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="text" min="0" class="link-input" id="update_link{{ $p->id }}" name="link" value="" placeholder="Enter Link">
                                    <label for="input">Link</label>
                                </div>
                                <div class="input-group submit m-0">
                                    <button type="submit" id="submit" value="submit" class="btn btn-primary custom-button primary-color submit-link">Save</button>
                                </div>
                            
                            <hr>
                            <div class="product-link-list">
                                @foreach($p->productlinks as $index => $link)
                                    <div>Title: {{ $link->title }}</div>
                                    <div>URL: <a href="{{ $link->link }}" target="_blank">{{ $link->link }}</a></div>
                                    <hr>
                                @endforeach
                            </div>
                        </form>
                    </div>
                    <li class="update-history"><a href="{{ route('admin.products.history',['id' => $p->id])}}" target="_blank"><i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </td>
    </tr>
@php
$serial_no++;
@endphp
@endforeach
<tr id="count-message">
    <td colspan="7">
        Showing {{($products->currentpage()-1)*$products->perpage()+1}} to 
        @php
        $productsCount = $products->currentpage()*$products->perpage();
        @endphp
        @if($productsCount > $products->total())
        {{$products->total()}}
        @else
        {{$products->currentpage()*$products->perpage()}}
        @endif
         of {{$products->total()}} entries
    </td>
</tr>
@endif