@extends('layouts.app')

@section('title', __('dashboard.Add Purchase Return'))
@section('page_heading', __('dashboard.Add 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.Create Purchase Return for Purchase') }} #{{ $purchase->id }}</h2>
                    <p>حدد الكميات والمبالغ المستردة لكل منتج.</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.purchases.return.store', $purchase->id) }}" method="POST" class="mt-4">
            @csrf

            <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>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($purchase->products as $product)
                        <tr>
                            <td class="font-bold">{{ $product->name }}</td>
                            <td>{{ $product->pivot->quantity }}</td>
                            <td>
                                <input type="hidden" name="return_products[{{ $product->id }}][product_id]" value="{{ $product->id }}">
                                <input type="number" name="return_products[{{ $product->id }}][quantity]" class="app-input app-input--sm return-quantity" value="0" max="{{ $product->pivot->quantity }}" min="0">
                            </td>
                            <td>
                                <input type="number" step="0.01" name="return_products[{{ $product->id }}][refund_amount]" class="app-input app-input--sm" value="0" min="0">
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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

@section('scripts')
<script>
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