@extends('layouts.app')
@section('title', __('dashboard.sidebar_products'))
@section('page_heading', __('dashboard.sidebar_products'))

@section('content')
<style>
.page-th { padding: .65rem 1.1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
.page-table tbody tr:hover { background: var(--surface-50); }
</style>
@php
    $currentState  = $state ?? request('state', 'active');
    $scrapFilter   = $scrapFilter ?? 'active';
    $totalRent     = \App\Models\Product::where('type','rent')->where('is_scrapped',false)->count();
    $totalSale     = \App\Models\Product::where('type','sale')->where('is_scrapped',false)->count();
    $totalScrapped = \App\Models\Product::where('is_scrapped',true)->count();
    $fallbackImg   = asset('assets/media/svg/files/blank-image.svg');
@endphp

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-bag-shopping', '#eff6ff','#2563eb', $products->total(), __('dashboard.total_products')],
        ['fa-solid fa-rotate',       'var(--c-primary-bg)','var(--c-primary)', $totalRent,    'منتجات تأجير'],
        ['fa-solid fa-cart-shopping','#f0fdf4','#16a34a', $totalSale,          'منتجات بيع'],
        ['fa-solid fa-trash-can',    '#fef2f2','#dc2626', $totalScrapped,      'خردة'],
    ] as [$ic,$bg,$cl,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1rem 1.15rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:40px;height:40px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0"><i class="{{ $ic }}"></i></div>
        <div>
            <div style="font-size:1.2rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.73rem;font-weight:700;color:var(--text-muted);margin-top:.15rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)">

    {{-- Head --}}
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-bag-shopping" style="color:var(--c-primary)"></i>
            {{ __('dashboard.All Products') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ number_format($products->total()) }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap">
            {{-- State tabs --}}
            <div style="display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden">
                @foreach(['active' => __('dashboard.status_active'), 'trashed' => __('dashboard.status_deleted'), 'all' => __('dashboard.all')] as $v => $l)
                <a href="{{ route('dashboard.products.index', array_merge(request()->except('page'), ['state'=>$v])) }}"
                   style="padding:.3rem .75rem;font-size:.75rem;font-weight:700;text-decoration:none;{{ $currentState===$v ? 'background:var(--c-primary);color:#fff' : 'color:var(--text-muted)' }}">{{ $l }}</a>
                @endforeach
            </div>
            {{-- Scrap filter --}}
            <div style="display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden">
                @foreach(['active' => __('dashboard.active'), 'scrapped' => 'خردة', 'all' => __('dashboard.all')] as $v => $l)
                <a href="{{ route('dashboard.products.index', array_merge(request()->except('page'), ['scrap_filter'=>$v])) }}"
                   style="padding:.3rem .75rem;font-size:.75rem;font-weight:700;text-decoration:none;{{ $scrapFilter===$v ? 'background:#dc2626;color:#fff' : 'color:var(--text-muted)' }}">{{ $l }}</a>
                @endforeach
            </div>
            {{-- Search --}}
            <form method="GET" action="{{ route('dashboard.products.index') }}" style="display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-50)">
                <input type="hidden" name="state" value="{{ $currentState }}">
                <input type="hidden" name="scrap_filter" value="{{ $scrapFilter }}">
                <span style="padding:0 .6rem;color:var(--text-muted);font-size:.8rem"><i class="fa-solid fa-magnifying-glass"></i></span>
                <input type="text" name="keyword" value="{{ request('keyword') }}" placeholder="اسم أو SKU..." style="border:0;outline:none;background:transparent;font-size:.8rem;font-weight:600;color:var(--text-primary);padding:.4rem 0;min-width:140px">
                <button type="submit" style="padding:0 .6rem;border:0;background:transparent;color:var(--text-muted);cursor:pointer"><i class="fa-solid fa-circle-arrow-left"></i></button>
            </form>
            <a href="{{ route('dashboard.product_categories.index') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-tags me-1"></i>التصنيفات</a>
            @can('create products')
            <a href="{{ route('dashboard.products.create') }}" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-plus me-1"></i>{{ __('dashboard.Add New Product') }}</a>
            @endcan
        </div>
    </div>

    @if($products->isEmpty())
    <div style="padding:3rem;text-align:center">
        @include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-bag-shopping','title'=>__('dashboard.No products found.'),'message'=>''])
    </div>
    @else
    <div style="overflow-x:auto">
        <table class="page-table" style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['SKU','الصورة','المنتج','التصنيف',__('dashboard.type_label'),'السعر','المخزون','النشاط',''] as $h)
                    <th class="page-th">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($products as $prod)
                @php
                    $img = $prod->main_image ? asset('storage/'.$prod->main_image) : $fallbackImg;
                @endphp
                <tr style="border-top:1px solid var(--border-subtle)">
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $prod->sku }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <img src="{{ $img }}" data-fallback="{{ $fallbackImg }}"
                             style="width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--border)">
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $prod->name }}</div>
                        @if($prod->trashed())
                        <span style="display:inline-flex;padding:.1rem .4rem;border-radius:999px;font-size:.65rem;font-weight:700;background:#fef2f2;color:#dc2626;margin-top:.2rem">محذوف</span>
                        @elseif($prod->is_scrapped)
                        <span style="display:inline-flex;padding:.1rem .4rem;border-radius:999px;font-size:.65rem;font-weight:700;background:#fef2f2;color:#dc2626;margin-top:.2rem">خردة</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:8px;background:var(--surface-100);color:var(--text-secondary);font-size:.75rem;font-weight:700">
                            {{ $prod->category?->name ?? '—' }}
                        </span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($prod->type === 'rent')
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--c-primary-bg);color:var(--c-primary)">تأجير</span>
                        @else
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#f0f9ff;color:#0ea5e9">بيع</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format($prod->price,2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $prod->stock > 0 ? '#f0fdf4' : '#fef2f2' }};color:{{ $prod->stock > 0 ? '#16a34a' : '#dc2626' }}">
                            {{ $prod->stock }}
                        </span>
                    </td>
                    <td style="padding:.875rem 1.25rem;text-align:center">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $prod->type === 'rent' ? $prod->reservations_count : ($prod->sale_products_sum_quantity ?? 0) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">{{ $prod->type === 'rent' ? 'حجز' : 'وحدة' }}</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @canany(['view products','edit products','delete products'])
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">إجراءات</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @if($prod->trashed())
                                <form action="{{ route('dashboard.trash.restore', ['type'=>'products','id'=>$prod->id]) }}" method="POST">
                                    @csrf<button type="submit" class="custom-dropdown__item custom-dropdown__item--success"><i class="fa-solid fa-rotate-left me-2"></i>استرجاع</button>
                                </form>
                                @else
                                    @can('view products')
                                    <a href="{{ route('dashboard.products.show', $prod->id) }}" class="custom-dropdown__item"><i class="fa-solid fa-eye me-2"></i>عرض</a>
                                    @endcan
                                    @can('edit products')
                                    <a href="{{ route('dashboard.products.edit', $prod->id) }}" class="custom-dropdown__item"><i class="fa-solid fa-pen me-2"></i>تعديل</a>
                                    @endcan
                                    @can('delete products')
                                    <form action="{{ route('dashboard.products.destroy', $prod->id) }}" method="POST">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="{{ __('dashboard.Are you sure you want to delete this product?') }}">
                                            <i class="fa-solid fa-trash me-2"></i>حذف
                                        </button>
                                    </form>
                                    @endcan
                                @endif
                            </div>
                        </div>
                        @endcanany
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $products->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection