@extends('layouts.app')

@section('title', 'Products')

@section('content')
<h1>Products</h1>
<p style="margin-bottom:16px;">
    <a href="{{ route('products.create') }}" style="padding:8px 16px; background:var(--m3-primary); color:var(--m3-on-primary); border-radius:8px; text-decoration:none;">New product</a>
    <a href="{{ route('products.export', request()->only('status', 'q')) }}" style="margin-left:8px; padding:8px 16px; background:var(--m3-surface-variant); color:var(--m3-on-surface); border-radius:8px; text-decoration:none;">Export CSV</a>
    <form method="get" action="{{ route('products.index') }}" style="display:inline; margin-left:12px;">
        <input type="hidden" name="status" value="{{ request('status') }}">
        <input type="hidden" name="sort" value="{{ request('sort') }}">
        <input type="search" name="q" value="{{ request('q') }}" placeholder="Search by title" style="padding:6px 12px; border:1px solid var(--m3-outline); border-radius:8px; width:180px;">
        <button type="submit" style="margin-left:4px; padding:6px 12px; border-radius:8px; background:var(--m3-surface-variant); border:1px solid var(--m3-outline); cursor:pointer;">Search</button>
    </form>
    <span style="margin-left:8px;">Sort: <a href="{{ route('products.index', array_merge(request()->only('status','q'), ['sort' => 'created_desc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort', 'created_desc') === 'created_desc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Newest</a> <a href="{{ route('products.index', array_merge(request()->only('status','q'), ['sort' => 'title_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'title_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Title A–Z</a> <a href="{{ route('products.index', array_merge(request()->only('status','q'), ['sort' => 'title_desc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'title_desc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Title Z–A</a></span>
    <span style="margin-left:12px;">Filter: <a href="{{ route('products.index', request()->only('q')) }}" style="padding:4px 10px; border-radius:20px; background:{{ request('status') === null ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === null ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">All</a>
    <a href="{{ route('products.index', array_merge(request()->only('q'), ['status' => 'active'])) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'active' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'active' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Active</a>
    <a href="{{ route('products.index', array_merge(request()->only('q'), ['status' => 'draft'])) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'draft' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'draft' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Draft</a></span>
</p>
<div class="card">
    <h2>Digital products</h2>
    <form method="post" action="{{ route('products.bulk-destroy') }}" id="bulk-form">
        @csrf
        <p style="margin-bottom:12px;">
            <button type="submit" form="bulk-form" onclick="var n = document.querySelectorAll('#bulk-form .row-select:checked').length; if (n === 0) { alert('Please select at least one product.'); return false; } return confirm('Delete selected products?');" style="padding:6px 12px; border-radius:8px; background:var(--m3-surface-variant); border:1px solid var(--m3-outline); cursor:pointer;">Delete selected</button>
        </p>
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="select-all" aria-label="Select all"></th>
                    <th>Title</th>
                    <th>Price</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($products as $p)
                    <tr>
                        <td data-label=""><input type="checkbox" name="ids[]" value="{{ $p->id }}" form="bulk-form" class="row-select"></td>
                        <td data-label="Title">{{ $p->title }}</td>
                        <td data-label="Price">{{ number_format($p->price, 2) }}</td>
                        <td data-label="Status">{{ $p->status }}</td>
                        <td data-label="Created">{{ $p->created_at->format('M j, Y') }}</td>
                        <td data-label="Actions">
                            @if($p->file_path)
                                <a href="{{ route('products.download', $p) }}" style="margin-right:8px;">Download</a>
                            @endif
                            <a href="{{ route('products.edit', $p) }}" style="margin-right:8px;">Edit</a>
                            <form method="post" action="{{ route('products.destroy', $p) }}" style="display:inline;" onsubmit="return confirm('Delete this product?');">@csrf @method('DELETE')<button type="submit" style="background:none;border:none;color:var(--m3-primary);cursor:pointer;padding:0;text-decoration:underline;">Delete</button></form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="empty-state">No products yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    </form>
    @if($products->hasPages())
        <div class="pagination">{{ $products->links() }}</div>
    @endif
</div>
<script>
document.getElementById('select-all')?.addEventListener('change', function() {
    document.querySelectorAll('.row-select').forEach(function(cb) { cb.checked = this.checked; }.bind(this));
});
</script>
@endsection