@extends('layouts.app')

@section('title', 'مرتجع فاتورة بيع')
@section('page_heading', 'مرتجع فاتورة بيع #' . $sale->id)


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.sales.show', $sale) }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> الفاتورة #{{ $sale->id }}
    </a>
</div>

@include('layouts.partials.workspace-page-styles')

<div class="app-grid gap-4">
    <div class="xl:col-span-8">
        <div class="workspace-shell">
            <div class="workspace-body">
                <div class="collection-card__header">
                    <div class="collection-card__intro">
                        <span class="collection-card__icon"><i class="fa-solid fa-rotate-left"></i></span>
                        <div class="collection-card__title">
                            <h2>إرجاع من فاتورة البيع #{{ $sale->id }}</h2>
                            <p>حدد نوع المرتجع والكميات المستردة.</p>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('dashboard.sales.returns.store', $sale) }}" class="mt-4">
                    @csrf

                    <div class="app-grid gap-4 mb-4">
                        <div class="md:col-span-6">
                            <label class="app-label font-bold">نوع المرتجع</label>
                            <select name="return_type" id="sale_return_type" class="app-input app-select">
                                <option value="partial">إرجاع جزئي</option>
                                <option value="full">إرجاع كامل الفاتورة</option>
                            </select>
                        </div>
                        <div class="md:col-span-6">
                            <label class="app-label font-bold">ملاحظات</label>
                            <textarea name="notes" class="app-input" rows="2">{{ old('notes') }}</textarea>
                        </div>
                    </div>

                    <div class="app-table-wrap">
                        <table class="app-table app-table--bordered collection-table">
                            <thead>
                                <tr>
                                    <th>المنتج</th>
                                    <th>المباع</th>
                                    <th>تم إرجاعه</th>
                                    <th>المتاح</th>
                                    <th>كمية الإرجاع</th>
                                    <th>استرداد الوحدة</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($sale->saleProducts as $index => $saleProduct)
                                <tr>
                                    <td>
                                        <div class="font-bold">{{ $saleProduct->product->name }}</div>
                                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem">{{ $saleProduct->product->sku }}</div>
                                    </td>
                                    <td>{{ $saleProduct->quantity }}</td>
                                    <td>{{ $saleProduct->returned_quantity }}</td>
                                    <td class="font-bold {{ $saleProduct->returnable_quantity > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400' }}">{{ $saleProduct->returnable_quantity }}</td>
                                    <td>
                                        <input type="hidden" name="products[{{ $index }}][sale_product_id]" value="{{ $saleProduct->id }}">
                                        <input type="number" class="app-input app-input--sm sale-return-quantity" name="products[{{ $index }}][quantity]"
                                            min="0" max="{{ $saleProduct->returnable_quantity }}" value="0"
                                            {{ $saleProduct->returnable_quantity === 0 ? 'disabled' : '' }}>
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" class="app-input app-input--sm" name="products[{{ $index }}][refund_amount]"
                                            value="{{ number_format($saleProduct->unit_net_price, 2, '.', '') }}"
                                            {{ $saleProduct->returnable_quantity === 0 ? 'disabled' : '' }}>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="flex justify-end gap-2 mt-5">
                        <a href="{{ route('dashboard.sales.show', $sale) }}" class="app-btn app-btn--secondary">رجوع</a>
                        <button type="submit" class="app-btn app-btn--primary">تسجيل المرتجع</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="xl:col-span-4">
        <div class="workspace-shell">
            <div class="workspace-body">
                <div class="collection-card__header">
                    <div class="collection-card__intro">
                        <span class="collection-card__icon"><i class="fa-solid fa-receipt"></i></span>
                        <div class="collection-card__title"><h2>ملخص الفاتورة</h2></div>
                    </div>
                </div>
                <div class="flex flex-col gap-3 mt-4">
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">العميل</span><span class="font-bold">{{ $sale->customer?->name ?: '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">إجمالي الفاتورة</span><span class="font-bold">{{ number_format($sale->final_total, 2) }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">المرتجع السابق</span><span class="font-bold text-red-600 dark:text-red-400">{{ number_format($sale->refunded_amount, 2) }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-500 dark:text-slate-400">الصافي الحالي</span><span class="font-bold text-emerald-600 dark:text-emerald-400">{{ number_format($sale->net_total, 2) }}</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const returnType = document.getElementById('sale_return_type');
    const inputs = document.querySelectorAll('.sale-return-quantity');
    function sync() {
        const isFull = returnType.value === 'full';
        inputs.forEach(i => { if (!i.disabled) { i.value = isFull ? i.max : 0; i.readOnly = isFull; } });
    }
    returnType.addEventListener('change', sync);
    sync();
});
</script>
@endsection