@extends('layouts.seller')

@section('title', 'My Products')

@section('content')
<div class="page-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
    <div>
        <h4 class="page-title fw-bold text-dark fs-5 mb-0">My Products</h4>
        <p class="text-muted small mb-0">Manage and organize your product catalog.</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('seller.products.bulk-upload') }}" class="btn btn-white btn-sm border shadow-sm rounded-pill fw-medium text-dark">
            <i class="bi bi-cloud-arrow-up me-1"></i> Bulk Upload
        </a>
        <a href="{{ route('seller.products.create') }}" class="btn btn-primary btn-sm rounded-pill shadow-sm fw-bold px-3">
            <i class="bi bi-plus-lg me-1"></i> Add Product
        </a>
    </div>
</div>

<!-- Compact Stats Row -->
<div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 bg-primary text-white h-100 overflow-hidden position-relative" style="min-height: 80px;">
            <div class="card-body p-3 d-flex align-items-center justify-content-between position-relative z-1">
                <div>
                     <div class="text-white-50 text-uppercase fw-bold" style="font-size: 0.65rem;">Total Products</div>
                     <div class="h4 fw-bold mb-0 mt-1">{{ $products->count() }}</div>
                </div>
                <div class="bg-white bg-opacity-25 rounded p-2">
                    <i class="bi bi-box-seam fs-4"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 bg-success text-white h-100 overflow-hidden position-relative" style="min-height: 80px;">
            <div class="card-body p-3 position-relative z-1">
                 <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                         <div class="text-white-50 text-uppercase fw-bold" style="font-size: 0.65rem;">Usage Limit</div>
                         <div class="h5 fw-bold mb-0 mt-1">{{ $products->count() }}/{{ auth()->user()->seller->subscription->plan->product_limit ?? '10' }}</div>
                    </div>
                     <div class="bg-white bg-opacity-25 rounded p-2">
                        <i class="bi bi-graph-up fs-4"></i>
                    </div>
                </div>
                <div class="progress bg-white bg-opacity-25" style="height: 4px;">
                    <div class="progress-bar bg-white" role="progressbar" style="width: {{ ($products->count() / (auth()->user()->seller->subscription->plan->product_limit ?? 10)) * 100 }}%"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 bg-info text-white h-100 overflow-hidden position-relative" style="background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%); min-height: 80px;">
             <div class="card-body p-3 d-flex align-items-center justify-content-between position-relative z-1">
                 <div class="overflow-hidden">
                     <div class="text-white-50 text-uppercase fw-bold" style="font-size: 0.65rem;">Current Plan</div>
                     <div class="fw-bold mb-0 mt-1 text-truncate" style="font-size: 1rem; max-width: 100%;" title="{{ auth()->user()->seller->subscription->plan->name ?? 'Free Plan' }}">
                         {{ auth()->user()->seller->subscription->plan->name ?? 'Free' }}
                     </div>
                </div>
                 <div class="bg-white bg-opacity-25 rounded p-2 ms-2 flex-shrink-0">
                    <i class="bi bi-gem fs-4"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 bg-warning text-dark h-100 overflow-hidden position-relative" style="background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%); min-height: 80px;">
            <div class="card-body p-3 d-flex align-items-center justify-content-between position-relative z-1">
                <div>
                     <div class="text-dark text-opacity-75 text-uppercase fw-bold" style="font-size: 0.65rem;">Views</div>
                     <div class="h4 fw-bold mb-0 mt-1">{{ $totalViews ?? 0 }}</div>
                </div>
                 <div class="bg-white bg-opacity-25 rounded p-2">
                    <i class="bi bi-eye-fill fs-4 text-dark"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-primary bg-primary-subtle border-0 rounded-3 p-2 d-flex align-items-center mb-3">
    <i class="bi bi-info-circle-fill text-primary me-2 fs-5"></i>
    <div class="small text-primary-emphasis lh-sm">
        <strong>Platform Standard:</strong> MOQ must be between <strong>10 - 150 units</strong> to maintain quality.
    </div>
</div>

<!-- Products List -->
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
    <div class="card-body p-0">
        <!-- Desktop Table View -->
        <div class="table-responsive d-none d-lg-block">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted small text-uppercase">
                    <tr>
                        <th class="ps-3 py-2 fw-bold" style="width: 50px;">Img</th>
                        <th class="py-2 fw-bold">Product Name</th>
                        <th class="py-2 fw-bold">Category</th>
                        <th class="py-2 fw-bold">Price / Unit</th>
                        <th class="py-2 fw-bold">Min. Order</th>
                        <th class="py-2 fw-bold">Status</th>
                        <th class="pe-3 py-2 fw-bold text-end">Actions</th>
                    </tr>
                </thead>
                <tbody class="border-top-0">
                    @forelse($products as $product)
                        <tr>
                            <td class="ps-3 py-2">
                                @php
                                    $images = is_string($product->images_json) ? json_decode($product->images_json, true) : $product->images_json;
                                    $thumb = $images[0]['thumbnail'] ?? ($images[0] ?? null);
                                @endphp
                                <img src="{{ $thumb ? asset('storage/'.$thumb) : 'https://placehold.co/40?text=P' }}" 
                                     class="rounded border object-fit-cover" width="40" height="40">
                            </td>
                            <td class="py-2">
                                <span class="d-block fw-bold text-dark text-truncate" style="max-width: 250px;">{{ $product->name }}</span>
                                <small class="text-muted">ID: {{ $product->id }}</small>
                            </td>
                            <td class="py-2 text-muted small">{{ $product->category->name ?? 'Uncategorized' }}</td>
                            <td class="py-2 fw-medium">{{ $product->price_range ?? 'N/A' }}</td>
                            <td class="py-2 small">{{ $product->min_order_quantity }} {{ $product->unit->name ?? 'Units' }}</td>
                            <td class="py-2">
                                 @if($product->is_approved)
                                    <span class="badge bg-success-subtle text-success rounded-pill px-2 py-1 small fw-normal">Active</span>
                                @else
                                    <span class="badge bg-warning-subtle text-warning rounded-pill px-2 py-1 small fw-normal">Pending</span>
                                @endif
                            </td>
                            <td class="pe-3 py-2 text-end">
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('seller.products.edit', $product->id) }}" class="btn btn-light border text-muted" title="Edit">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                     <button type="button" class="btn btn-light border text-muted" title="Delete" 
                                            onclick="if(confirm('Delete {{ addslashes($product->name) }}?')) document.getElementById('del-{{$product->id}}').submit()">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                                <form id="del-{{$product->id}}" action="{{ route('seller.products.destroy', $product->id) }}" method="POST" class="d-none">
                                    @csrf @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="text-muted mb-2"><i class="bi bi-box-seam display-6"></i></div>
                                <h6 class="fw-bold text-muted">No products yet</h6>
                                <p class="small text-muted mb-3">Add products to start selling.</p>
                                <a href="{{ route('seller.products.create') }}" class="btn btn-primary btn-sm rounded-pill px-3">Add Product</a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile Compact List View -->
        <div class="d-lg-none">
             @forelse($products as $product)
                @php
                    $images = is_string($product->images_json) ? json_decode($product->images_json, true) : $product->images_json;
                    $thumb = $images[0]['thumbnail'] ?? ($images[0] ?? null);
                @endphp
                <div class="d-flex align-items-center p-3 border-bottom bg-white">
                    <img src="{{ $thumb ? asset('storage/'.$thumb) : 'https://placehold.co/50?text=P' }}" 
                         class="rounded border object-fit-cover flex-shrink-0 me-3" width="50" height="50">
                    <div class="flex-grow-1 min-w-0">
                        <div class="d-flex justify-content-between align-items-start mb-1">
                            <span class="fw-bold text-dark text-truncate d-block">{{ $product->name }}</span>
                             @if($product->is_approved)
                                <span class="badge bg-success-subtle text-success rounded-pill small fst-normal" style="font-size: 0.65rem;">Active</span>
                            @else
                                <span class="badge bg-warning-subtle text-warning rounded-pill small fst-normal" style="font-size: 0.65rem;">Pend.</span>
                            @endif
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">{{ $product->price_range ?? '-' }} / {{ $product->min_order_quantity }} MOQ</small>
                            
                            <div class="d-flex gap-2">
                                <a href="{{ route('seller.products.edit', $product->id) }}" class="btn btn-light btn-sm p-1 px-2 border text-muted">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <button type="button" class="btn btn-light btn-sm p-1 px-2 border text-danger"
                                        onclick="if(confirm('Delete?')) document.getElementById('del-{{$product->id}}').submit()">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
             @empty
                <div class="text-center py-5">
                    <p class="text-muted small">No products found.</p>
                </div>
             @endforelse
        </div>
    </div>
    @if($products->hasPages())
        <div class="card-footer bg-white border-top py-2">
            {{ $products->links() }}
        </div>
    @endif
</div>

<style>
    .page-title { font-size: 1.25rem; }
    .card-body { padding: 1rem; }
    .table > :not(caption) > * > * { padding: 0.75rem 0.5rem; } 
    /* Compact pagination */
    .pagination { margin-bottom: 0; }
    .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
</style>
@endsection
