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

@section('content')
@php
    $totalRefunded = $returns->sum('total_refunded');
    $fullReturns   = $returns->getCollection()->where('return_type','full')->count();
    $partialReturns= $returns->getCollection()->where('return_type','partial')->count();
@endphp

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-rotate-left',  '#fef2f2','#dc2626', $returns->total(),              'إجمالي المرتجعات'],
        ['fa-solid fa-coins',        '#fffbeb','#d97706', number_format($totalRefunded,2), 'إجمالي المبالغ المستردة (ج.م)'],
        ['fa-solid fa-circle-xmark', '#fef2f2','#dc2626', $fullReturns,                   'مرتجعات كاملة'],
        ['fa-solid fa-circle-half-stroke','#eff6ff','#2563eb', $partialReturns,            'مرتجعات جزئية'],
    ] 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>

{{-- Table card --}}
<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-rotate-left" style="color:var(--c-primary)"></i>
            {{ __('dashboard.All Returns') }}
            <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($returns->total()) }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <form method="GET" action="{{ route('dashboard.sale_returns.index') }}" style="display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-50)">
                <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="search" value="{{ request('search') }}" placeholder="رقم الفاتورة أو البائع..." style="border:0;outline:none;background:transparent;font-size:.8rem;font-weight:600;color:var(--text-primary);padding:.4rem 0;min-width:160px">
                <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.invoices.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-receipt me-1"></i>ابدأ من الفاتورة
            </a>
        </div>
    </div>

    @if($returns->isEmpty())
    <div style="padding:3rem;text-align:center">
        @include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-rotate-left','title'=>__('dashboard.No returns found.'),'message'=>''])
    </div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['#','رقم الفاتورة','العميل','المبلغ المسترد','النوع','المنتجات','بواسطة','التاريخ',''] as $h)
                    <th style="padding:.65rem 1.25rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($returns as $ret)
                <tr style="border-top:1px solid var(--border-subtle)" onmouseover="this.style.background='var(--surface-50)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">{{ $ret->id }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <a href="{{ route('dashboard.sales.show', $ret->sale_id) }}"
                           style="display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:8px;font-size:.78rem;font-weight:800;text-decoration:none;background:var(--c-primary-bg);color:var(--c-primary)">
                            <i class="fa-solid fa-receipt"></i>#{{ $ret->sale_id }}
                        </a>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($ret->sale?->customer)
                        <div style="font-weight:800;color:var(--text-primary)">{{ $ret->sale->customer->name }}</div>
                        <div style="font-size:.7rem;color:var(--text-muted)">{{ $ret->sale->customer->phone }}</div>
                        @else
                        <span style="color:var(--text-muted)">—</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:#dc2626">{{ number_format($ret->total_refunded,2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($ret->return_type === 'full')
                        <span style="display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;background:#fef2f2;color:#dc2626">
                            <i class="fa-solid fa-circle-xmark"></i>كامل
                        </span>
                        @else
                        <span style="display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:800;background:#fffbeb;color:#d97706">
                            <i class="fa-solid fa-circle-half-stroke"></i>جزئي
                        </span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;flex-direction:column;gap:.2rem">
                            @foreach($ret->items->take(2) as $item)
                            <span style="font-size:.72rem;font-weight:700;color:var(--text-secondary)">{{ $item->product?->name ?? '—' }} ×{{ $item->quantity }}</span>
                            @endforeach
                            @if($ret->items->count() > 2)
                            <span style="font-size:.7rem;color:var(--text-muted)">+{{ $ret->items->count()-2 }} أخرى</span>
                            @endif
                        </div>
                    </td>
                    <td style="padding:.875rem 1.25rem;color:var(--text-secondary);font-size:.8rem">{{ $ret->creator?->name ?? '—' }}</td>
                    <td style="padding:.875rem 1.25rem;font-size:.78rem;color:var(--text-muted);white-space:nowrap">{{ $ret->created_at->format('Y-m-d') }}</td>
                    <td style="padding:.875rem 1.25rem">
                        @canany(['view sale returns','delete sale returns'])
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">إجراءات</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @can('view sale returns')
                                <a href="{{ route('dashboard.sale_returns.show', $ret->id) }}" class="custom-dropdown__item"><i class="fa-solid fa-eye me-2"></i>عرض التفاصيل</a>
                                @endcan
                                @can('delete sale returns')
                                <form action="{{ route('dashboard.sale_returns.destroy', $ret->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 return?') }}">
                                        <i class="fa-solid fa-trash me-2"></i>حذف
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </div>
                        @endcanany
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $returns->appends(request()->query())->links() }}
    </div>
    @endif
</div>
@endsection