@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">
                    <tr>
                        <th class="ps-4 py-3 text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px; width: 60px;">Image</th>
                        <th class="py-3 text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">Product Name</th>
                        <th class="py-3 text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">Category</th>
                        <th class="py-3 text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">Price</th>
                        <th class="py-3 text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">MOQ</th>
                        <th class="py-3 text-center text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">Status</th>
                        <th class="pe-4 py-3 text-end text-secondary text-uppercase fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">Actions</th>
                    </tr>
                </thead>
                <tbody class="border-top-0">
                    @forelse($products as $product)
                        <tr>
                            <td class="ps-4 py-3">
                                <div class="position-relative">
                                    <img src="{{ $product->main_image }}" 
                                         class="rounded-3 border shadow-sm object-fit-cover" width="48" height="48" alt="{{ $product->name }}">
                                </div>
                            </td>
                            <td class="py-3">
                                <a href="{{ route('seller.products.edit', $product->id) }}" class="fw-bold text-dark text-decoration-none text-truncate d-block mb-1" style="max-width: 280px; font-size: 0.95rem;">
                                    {{ $product->name }}
                                </a>
                                <span class="badge bg-light text-secondary border fw-normal" style="font-size: 0.7rem;">ID: {{ $product->id }}</span>
                            </td>
                            <td class="py-3">
                                <span class="badge bg-blue-soft text-primary-emphasis fw-medium px-2 py-1 rounded-pill" style="background-color: #ebf5ff;">{{ $product->category->name ?? 'Uncategorized' }}</span>
                            </td>
                            <td class="py-3 fw-medium text-dark">{{ $product->formatted_price }}</td>
                            <td class="py-3 text-muted small">
                                <i class="bi bi-box-seam me-1"></i>{{ $product->moq }} Units
                            </td>
                            <td class="py-3 text-center">
                                 @if($product->is_approved)
                                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1 fw-medium">
                                        <i class="bi bi-check-circle-fill me-1"></i>Active
                                    </span>
                                @else
                                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-3 py-1 fw-medium">
                                        <i class="bi bi-clock-fill me-1"></i>Pending
                                    </span>
                                @endif
                            </td>
                            <td class="pe-4 py-3 text-end">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('seller.products.edit', $product->id) }}" class="btn btn-sm btn-light border text-primary shadow-sm" data-bs-toggle="tooltip" title="Edit Product">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                     <button type="button" class="btn btn-sm btn-light border text-danger shadow-sm" data-bs-toggle="tooltip" title="Delete Product" 
                                            onclick="if(confirm('Are you sure you want to delete {{ addslashes($product->name) }}? This action cannot be undone.')) 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="mb-3">
                                    <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                        <i class="bi bi-box-seam text-muted display-6"></i>
                                    </div>
                                </div>
                                <h5 class="fw-bold text-dark text-opacity-75">No products found</h5>
                                <p class="text-muted small mb-4">Start building your catalog by adding your first product.</p>
                                <a href="{{ route('seller.products.create') }}" class="btn btn-primary rounded-pill px-4 shadow-sm fw-medium">
                                    <i class="bi bi-plus-lg me-1"></i> Add New Product
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile Compact List View (Designed) -->
        <div class="d-lg-none">
             @forelse($products as $product)
                <div class="p-3 border-bottom bg-white d-flex gap-3 position-relative">
                    <div class="flex-shrink-0">
                        <img src="{{ $product->main_image }}" 
                             class="rounded-3 border shadow-sm object-fit-cover" width="65" height="65" alt="{{ $product->name }}">
                    </div>
                    <div class="flex-grow-1 min-w-0">
                        <div class="d-flex justify-content-between align-items-start mb-1">
                            <div>
                                <h6 class="fw-bold text-dark text-truncate mb-0" style="max-width: 180px;">{{ $product->name }}</h6>
                                <small class="text-muted" style="font-size: 0.75rem;">{{ $product->category->name ?? 'Uncategorized' }}</small>
                            </div>
                             @if($product->is_approved)
                                <span class="badge bg-success-subtle text-success rounded-pill border border-success-subtle" style="font-size: 0.65rem;">Active</span>
                            @else
                                <span class="badge bg-warning-subtle text-warning rounded-pill border border-warning-subtle" style="font-size: 0.65rem;">Pending</span>
                            @endif
                        </div>
                        
                        <div class="d-flex align-items-center justify-content-between mt-2">
                            <div>
                                <span class="fw-bold text-dark d-block" style="font-size: 0.9rem;">{{ $product->formatted_price }}</span>
                                <small class="text-muted" style="font-size: 0.75rem;">MOQ: {{ $product->moq }} Units</small>
                            </div>
                            
                            <div class="d-flex gap-2">
                                <a href="{{ route('seller.products.edit', $product->id) }}" class="btn btn-sm btn-outline-primary px-3 rounded-pill" style="font-size: 0.8rem;">
                                    Edit
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-danger px-2 rounded-pill"
                                        onclick="if(confirm('Delete?')) document.getElementById('del-m-{{$product->id}}').submit()">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <form id="del-m-{{$product->id}}" action="{{ route('seller.products.destroy', $product->id) }}" method="POST" class="d-none">
                                    @csrf @method('DELETE')
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
             @empty
                <div class="text-center py-5 px-3">
                    <div class="mb-3">
                        <i class="bi bi-box-seam text-secondary display-1 opacity-25"></i>
                    </div>
                    <h6 class="fw-bold text-dark">No Products Found</h6>
                    <p class="text-muted small mb-3">Your catalog is currently empty.</p>
                    <a href="{{ route('seller.products.create') }}" class="btn btn-primary w-100 rounded-pill">Add Product</a>
                </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
