@extends('layouts.app')

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


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.sale_returns.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Returns') }}
    </a>
</div>

@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-rotate-left"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Edit Return') }} #{{ $saleReturn->id }}</h2>
                    <p>فاتورة البيع #{{ $saleReturn->sale_id }}</p>
                </div>
            </div>
        </div>

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

            <div class="app-table-wrap">
                <table class="app-table app-table--bordered collection-table" id="returns_table">
                    <thead>
                        <tr>
                            <th>{{ __('Product ID') }}</th>
                            <th>{{ __('Quantity') }}</th>
                            <th>{{ __('Refund Amount') }}</th>
                            <th style="width:60px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($saleReturn->products as $index => $prod)
                        <tr>
                            <td><input type="number" name="products[{{ $index }}][product_id]" class="app-input app-input--sm" value="{{ $prod->id }}" readonly></td>
                            <td><input type="number" name="products[{{ $index }}][quantity]" class="app-input app-input--sm" value="{{ $prod->pivot->quantity }}"></td>
                            <td><input type="number" step="0.01" name="products[{{ $index }}][refund_amount]" class="app-input app-input--sm" value="{{ $prod->pivot->refund_amount }}"></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>
            <button type="button" class="app-btn app-btn--secondary app-btn--sm mt-2" id="add_return_row">
                <i class="fa-solid fa-plus"></i> {{ __('Add Row') }}
            </button>

            <div class="flex justify-end gap-2 mt-5">
                <a href="{{ route('dashboard.sale_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.getElementById('add_return_row').addEventListener('click', function() {
    const tbody = document.querySelector('#returns_table tbody');
    const i = tbody.querySelectorAll('tr').length;
    tbody.insertAdjacentHTML('beforeend', `
        <tr>
            <td><input type="number" name="products[${i}][product_id]" class="app-input app-input--sm" placeholder="Product ID"></td>
            <td><input type="number" name="products[${i}][quantity]" class="app-input app-input--sm" value="1"></td>
            <td><input type="number" step="0.01" name="products[${i}][refund_amount]" class="app-input app-input--sm" value="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>`);
});
document.addEventListener('click', e => { if (e.target.closest('.remove-row')) e.target.closest('tr').remove(); });
</script>
@endsection