@extends('layouts.admin')
@section('title', 'Products')
@section('page_title', 'Shopping Products')
@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/tables.css') }}">
@endsection
@section('content')
    <x-admin.page-header title="Shopping Products" :breadcrumb="[['label' => 'Products']]" button-label="Add New Product" :button-route="route('admin.products.create')" module="products" />
    <div class="table-toolbar">
        <form method="GET" action="{{ route('admin.products.index') }}" class="table-toolbar__search-form">
            <div class="table-toolbar__search-wrap">
                <i class="bi bi-search table-toolbar__search-icon"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..." class="table-toolbar__search-input">
            </div>
            <button type="submit" class="table-toolbar__search-btn">Search</button>
            @if(request('search'))<a href="{{ route('admin.products.index') }}" class="table-toolbar__clear-btn">Clear</a>@endif
        </form>
    </div>
    <x-admin.data-table :headers="['#', 'Image', 'Name', 'Brand', 'Price', 'Discount', 'Top', 'Status', 'Actions']">
        @forelse($products as $product)
            <tr class="data-table__row">
                <td class="data-table__td">{{ $products->firstItem() + $loop->index }}</td>
                <td class="data-table__td"><img src="{{ $product->image ? asset('storage/' . $product->image) : asset('images/placeholder.svg') }}" alt="{{ $product->name }}" class="table-thumb"></td>
                <td class="data-table__td data-table__td--name">{{ $product->name }}</td>
                <td class="data-table__td">{{ $product->brand->name ?? '—' }}</td>
                <td class="data-table__td">{{ $product->price ? config('admin.currency_symbol','$') . number_format($product->price, 2) : '—' }}</td>
                <td class="data-table__td">
                    @if($product->discount_percent)<span class="discount-pill">{{ $product->discount_percent }}% OFF</span>
                    @else<span class="text-muted-val">—</span>@endif
                </td>
                <td class="data-table__td">
                    <span class="bool-badge {{ $product->is_top ? 'bool-badge--yes' : 'bool-badge--no' }}">{{ $product->is_top ? 'Yes' : 'No' }}</span>
                </td>
                <td class="data-table__td">
                    <button type="button" class="status-toggle js-status-toggle" data-route="{{ route('admin.products.toggle-status', $product->id) }}" data-status="{{ $product->status }}">
                        <x-admin.status-badge :status="$product->status" />
                    </button>
                </td>
                <td class="data-table__td">
                    <x-admin.action-buttons
                        module="products" :edit-route="route('admin.products.edit', $product->id)" :delete-route="route('admin.products.destroy', $product->id)" :id="$product->id" :item-name="$product->name" />
                </td>
            </tr>
        @empty
            <tr><td colspan="9" class="data-table__empty">No products found.</td></tr>
        @endforelse
    </x-admin.data-table>
    <div class="table-pagination">
        <span class="pagination-info">
            Showing <strong>{{ $products->firstItem() }}</strong>–<strong>{{ $products->lastItem() }}</strong>
            of <strong>{{ $products->total() }}</strong> products
        </span>
        {{ $products->appends(request()->query())->links('vendor.pagination.bootstrap-5') }}
    </div>
    <x-admin.confirm-modal />
@endsection
@section('page_js')
    <script src="{{ asset('js/admin/confirm-delete.js') }}"></script>
    <script src="{{ asset('js/admin/status-toggle.js') }}"></script>
@endsection