@extends('layouts.admin')

@section('content')
<div class="card">
    <div class="card-header">
        <h4>Product Page</h4>
    </div>
    <div class="card-body">
        <a class="btn btn-primary" href="{{url('add-product')}}">
            <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
              <i class="material-icons opacity-10">add_circle</i>
            </div>
            <span class="nav-link-text ms-1">Add Product</span>
          </a>
        {{-- Filter and Search Form --}}
        <form method="GET" action="{{ route('admin.products.index') }}" class="mb-4">
            <div class="row">
                <div class="col-md-3">
                    <input type="text" name="search" class="form-control border border-primary px-2" placeholder="Search by Name or Code" value="{{ request('search') }}">
                </div>
                <div class="col-md-3">
                    <select name="category" class="form-control">
                        <option value="">Filter by Category</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="brand" class="form-control">
                        <option value="">Filter by Brand</option>
                        @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" {{ request('brand') == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">Apply</button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </div>
        </form>

        {{-- Product Table --}}
        <div class="table-responsive" style="overflow-x: auto;">
            <table class="table table-striped table-hover text-center" style="width: 1500px; min-width: 1500px;">
                <thead class="table-dark">
                    <tr>
                        <th style="width: 50px;">Id</th>
                        <th style="width: 200px;">Category</th>
                        <th style="width: 200px;">Brand</th>
                        <th style="width: 200px;">Name</th>
                        <th style="width: 150px;">Product Code</th>
                        <th style="width: 150px;">SKU</th>
                        <th style="width: 100px;">Regular Price</th>
                        <th style="width: 100px;">Sale Price</th>
                        <th style="width: 100px;">In Stock</th>
                        <th style="width: 200px;">Image</th>
                        <th style="width: 200px;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $item)
                    <tr>
                        <td>{{ $item->id }}</td>
                        <td>{{ $item->category->name }}</td>
                        <td>{{ $item->brand->name }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->product_code }}</td>
                        <td>{{ $item->sku }}</td>
                        <td>{{ $item->old_price }}</td>
                        <td>{{ $item->price }}</td>
                        <td>{{ $item->in_stock }}</td>
                        <td>
                            @foreach($item->images as $image)
                                <img style="width:50px;" src="{{ asset('storage/images/' . $image->image) }}" class="w-25 h-25" alt="Image Not Found">
                            @endforeach
                        </td>
                        <td>
                            <a class="btn btn-primary" href="{{ url('edit-product/' . $item->id) }}">Edit</a>
                            <a class="btn btn-danger" href="{{ url('delete-product/' . $item->id) }}">Delete</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination Links --}}
        <div class="d-flex justify-content-center pagination">
            {{ $products->appends(request()->query())->links() }}
        </div>
    </div>
</div>
@endsection