@extends('Admin.layout.app')

@section('content')

<div class="card">
   <div class="card-header d-flex justify-content-between align-items-center">
       <h5 class="mb-0">All Products</h5>
       <a href="{{ route('admin.new.product') }}" class="btn btn-primary btn-sm">+ Add New Product</a>
   </div>

   <div class="card-body">
       <!-- Filter Form -->
       <form method="GET" class="row g-2 mb-3">
           <div class="col-md-3">
               <input type="text" name="search" class="form-control"
                  value="{{ request('search') }}" placeholder="Search product">
           </div>
           <div class="col-md-3">
               <select name="category" class="form-control">
                   <option value="">All Categories</option>
                   @foreach($categories as $category)
                       <option value="{{ $category->id }}"
                           {{ request('category') == $category->id ? 'selected' : '' }}>
                           {{ $category->name }}
                       </option>
                   @endforeach
               </select>
           </div>
           <div class="col-md-3">
               <select name="status" class="form-control">
                   <option value="">Status</option>
                   <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Published</option>
                   <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Unpublished</option>
               </select>
               
               
           </div>
           <div class="col-md-3">
               <button class="btn btn-secondary w-100">Filter</button>
           </div>
       </form>

       <!-- Products Table -->
       <div class="table-responsive">
           <table class="table table-bordered align-middle">
               <thead class="table-light">
                   <tr>
                       <th width="30"><input type="checkbox" class="check-all"></th>
                       <th>Image</th>
                       <th>Name</th>
                       <th>Price</th>
                       <th>Stock</th>
                       <th>Status</th>
                       <th class="text-end">Action</th>
                   </tr>
               </thead>
               <tbody>
                   @foreach($allproducts as $product)
                   <tr>
                       <td><input type="checkbox" class="check-one" value="{{ $product->id }}"></td>
                       <td>
                           <img src="{{ $product->thumbnail_img ? asset('storage/' . $product->thumbnail_img) : asset('default-product.png') }}"
                               alt="{{ $product->name }}" class="img-fluid" style="max-width:100px; max-height:80px; object-fit:cover;">
                       </td>
                       <td>
                           <strong>{{ $product->name }}</strong><br>
                           <small class="text-muted">SKU: {{ $product->sku }}</small>
                       </td>
                       <td>Rs {{ number_format($product->unit_price, 2) }}</td>
                       <td>
                           @if($product->current_stock > 0)
                               <span class="badge bg-success">In Stock</span>
                           @else
                               <span class="badge bg-danger">Out of Stock</span>
                           @endif
                       </td>
                       <td>
                           <label class="aiz-switch aiz-switch-success mb-0">
                               <input type="checkbox" onchange="updatePublished(this)" value="{{ $product->id }}" {{ $product->published ? 'checked' : '' }}>
                               <span></span>
                           </label>
                       </td>
                       <td class="text-end">
                           <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-sm btn-soft-primary">Edit</a>
                           <button onclick="deleteProduct({{ $product->id }})" class="btn btn-sm btn-soft-danger">Delete</button>
                       </td>
                   </tr>
                   @endforeach
               </tbody>
           </table>
       </div>

       <!-- Pagination -->
       <div class="mt-3">
           {{ $allproducts->links() }}
       </div>
   </div>
</div>
@endsection

@push('script')
<script>
    // Check all checkboxes
    document.querySelector('.check-all')?.addEventListener('change', function () {
        document.querySelectorAll('.check-one').forEach(cb => cb.checked = this.checked);
    });

    // Delete product
    function deleteProduct(id) {
        if(confirm('Are you sure?')) {
            // Example AJAX delete (you need your route)
            $.post("{{ route('admin.products.delete') }}", {
                _token: "{{ csrf_token() }}",
                id: id
            }, function(data){
                if(data.success) {
                    location.reload();
                } else {
                    alert('Something went wrong!');
                }
            });
        }
    }

    // Toggle published
    function updatePublished(el) {
        let status = el.checked ? 1 : 0;
        $.post("{{ route('admin.products.togglePublished') }}", {
            _token: "{{ csrf_token() }}",
            id: el.value,
            status: status
        }, function(data){
            if(data.success){
                alert('Status updated');
            } else {
                alert('Failed to update status');
            }
        });
    }
</script>
@endpush