@extends('layouts.app')

@section('title', __('dashboard.Edit Purchase Return'))
@section('page_heading', __('dashboard.Edit Purchase Return'))

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

<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>{{ __('dashboard.Edit Purchase Return') }} #{{ $purchaseReturn->id }}</h2>
                    <p>مرتجع الشراء #{{ $purchaseReturn->purchase->id }} — {{ $purchaseReturn->creator->name ?? '' }}</p>
                </div>
            </div>
            <a href="{{ route('dashboard.purchase-returns.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Purchase Returns') }}
            </a>
        </div>

        <form action="{{ route('dashboard.purchase-returns.update', $purchaseReturn->id) }}" method="POST" class="mt-4">
            @csrf @method('PATCH')

            <div class="app-table-wrap">
                <table class="app-table app-table--bordered collection-table" id="return_products_table">
                    <thead>
                        <tr>
                            <th>{{ __('dashboard.Product Name') }}</th>
                            <th>{{ __('dashboard.Purchased Quantity') }}</th>
                            <th>{{ __('dashboard.Return Quantity') }}</th>
                            <th>{{ __('dashboard.Refund Amount') }}</th>
                            <th style="width:60px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($purchaseReturn->returnProducts as $returnProduct)
                        @php $maxQty = $purchaseReturn->purchase->products->firstWhere('id', $returnProduct->product_id)?->pivot->quantity ?? 0; @endphp
                        <tr>
                            <td class="font-bold">{{ $returnProduct->product->name }}</td>
                            <td>{{ $maxQty }}</td>
                            <td>
                                <input type="hidden" name="return_products[{{ $returnProduct->product_id }}][product_id]" value="{{ $returnProduct->product_id }}">
                                <input type="number" name="return_products[{{ $returnProduct->product_id }}][quantity]" class="app-input app-input--sm return-quantity"
                                    value="{{ old('return_products.'.$returnProduct->product_id.'.quantity', $returnProduct->quantity) }}"
                                    max="{{ $maxQty }}" min="0">
                            </td>
                            <td>
                                <input type="number" step="0.01" name="return_products[{{ $returnProduct->product_id }}][refund_amount]" class="app-input app-input--sm"
                                    value="{{ old('return_products.'.$returnProduct->product_id.'.refund_amount', $returnProduct->refund_amount) }}" min="0">
                            </td>
                            <td><button type="button" class="app-btn app-btn--sm app-btn--danger remove-row"><i class="fa-solid fa-trash"></i></button></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <a href="{{ route('dashboard.purchase-returns.index') }}" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save Changes') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('click', e => { if (e.target.closest('.remove-row')) e.target.closest('tr').remove(); });
document.getElementById('return_products_table').addEventListener('input', function(e) {
    if (e.target.classList.contains('return-quantity')) {
        const max = parseInt(e.target.getAttribute('max'));
        let val = parseInt(e.target.value);
        if (isNaN(val) || val < 0) val = 0;
        else if (val > max) val = max;
        e.target.value = val;
    }
});
</script>
@endsection