@extends('layouts.admin')

@section('content')
<div class="card-header">
    <h4>Product Page</h4>
</div>
<div class="card-body table-responsive">

<div class="mb-3">
    <label for="shopFilter" class="form-label">Filter by Shop:</label>
    <select id="shopFilter" class="form-select" onchange="filterProductsByShop(this.value)">
        <option value="">All Shops</option>
        @foreach ($shops as $shop)
            <option value="{{ $shop->id }}" style="color: black;">{{ $shop->shop_name }}</option>
        @endforeach
    </select>
</div>


    <div class="mb-3">
        <label for="categoryFilter" class="form-label">Filter by Category:</label>
        <select id="categoryFilter" class="form-select" onchange="filterProductsByCategory(this.value)">
            <option value="">All Categories</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach
        </select>
    </div>
 

    <table class="table table-striped table-fixed table-hover align-middle text-center">
        <thead class="table-dark">
            <tr>
                <th>Category</th>
                <th>Shop Name</th>

                <th>Name</th>
                <th>Price</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $item)    
            <tr>
                <td>{{$item->category->name ?? ''}}</td>
                <td>{{$item->user->shop->shop_name ?? ''}}</td>
                <td class="text-ellipsis" style="max-width: 150px; overflow: hidden; text-overflow: ellipsis;">
                    {{$item->name}}
                </td>
                <td>
    @foreach ($productPrices[$item->id]->sortByDesc('created_at') as $productPrice)
        @if ($productPrice->is_active == 1)
            ₱{{ number_format($productPrice->price, 2, '.', ',') }}
            @break <!-- Stop the loop after finding the active price -->
        @endif
    @endforeach
</td>                <td>
                    <form method="POST" action="{{ route('update.status', $item->id) }}">
                        @csrf
                        @method('PUT')
                    </form>

                    <span class="status-indicator">
    @if ($item->status == 1)
        <span class="badge bg-success text-light">
            <i class="fas fa-check-circle"></i> 
        </span>
    @elseif ($item->status == 0)
        <span class="badge bg-secondary text-light">
            <i class="fas fa-times-circle"></i> 
        </span>
    @elseif ($item->status == 2)
        <span class="badge bg-danger text-light">
            <i class="fas fa-ban"></i>
        </span>
    @else
        <span class="badge bg-info text-light">
            <i class="fas fa-question-circle"></i> 
        </span>
    @endif
</span>

<td>
    <!-- <form id="deleteForm_{{ $item->id }}" method="POST" action="{{ route('products.destroy', $item->id) }}">
        @csrf
        @method('DELETE')

        <button type="button" class="btn btn-danger" onclick="confirmDelete({{ $item->id }})">
            <i class="fas fa-trash"></i>
        </button> -->

<!-- 
                    <a class="btn btn-primary" href="{{ url('edit-product/'.$item->id) }}">
                        <i class="fas fa-edit"></i>
                    </a> -->

                    <a class="btn btn-secondary" href="{{ url('admin/products/view/'.$item->id) }}">
                        <i class="fas fa-eye"></i>
                    </a>

                </td>
            </tr>
            </form>

            @endforeach
        </tbody>
    </table>
    {!! $products->links('pagination::bootstrap-4') !!}
</div>
<script>
    function confirmDelete(orderId) {
        if (confirm("Are you sure you want to delete this order?")) {
            const form = document.getElementById("deleteForm_" + orderId);
            form.submit();
        }
    }

    function filterProductsByCategory(categoryId) {
        window.location.href = "{{ url('admin/products') }}" + (categoryId ? '?category=' + categoryId : '');
    }

    function filterProductsByShop(shopId) {
    window.location.href = "{{ url('admin/products') }}" + (shopId ? '?shop=' + shopId : '');
}

</script>

@endsection