@extends('layouts.app')

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

@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-bag-shopping"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Edit Purchase') }} #{{ $purchase->id }}</h2>
                    <p>{{ __('dashboard.edit_purchase_desc') }}</p>
                </div>
            </div>
            <a href="{{ route('dashboard.purchases.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Purchases') }}
            </a>
        </div>

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

            <div class="app-grid gap-4 mb-5">
                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Select Supplier') }}</label>
                    <select name="supplier_id" class="app-input app-select @error('supplier_id') app-input--invalid @enderror" required>
                        @foreach($suppliers as $sup)
                            <option value="{{ $sup->id }}" @selected(old('supplier_id', $purchase->supplier_id) == $sup->id)>{{ $sup->name }}</option>
                        @endforeach
                    </select>
                    @error('supplier_id')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-3">
                    <label class="app-label font-bold">{{ __('dashboard.Discount') }}</label>
                    <input type="number" step="0.01" name="discount" class="app-input" value="{{ old('discount', $purchase->discount) }}">
                </div>

                <div class="md:col-span-3">
                    <label class="app-label font-bold">{{ __('dashboard.Attach Invoice') }}</label>
                    @if($purchase->invoice_file)
                        <div class="mb-1"><a href="{{ asset('storage/'.$purchase->invoice_file) }}" target="_blank" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-eye me-1"></i>{{ __('dashboard.View Invoice') }}</a></div>
                    @endif
                    <input type="file" name="invoice_file" class="app-input">
                </div>
            </div>

            <hr class="my-4">

            <div class="flex items-center justify-between mb-3">
                <h6 class="font-bold mb-0">{{ __('dashboard.Products') }}</h6>
                <button type="button" class="app-btn app-btn--secondary app-btn--sm" id="add_product_row">
                    <i class="fa-solid fa-plus"></i> {{ __('dashboard.Add Row') }}
                </button>
            </div>

            <div class="app-table-wrap">
                <table class="app-table app-table--bordered collection-table" id="purchase_products_table">
                    <thead>
                        <tr>
                            <th>{{ __('dashboard.Product ID/SKU') }}</th>
                            <th>{{ __('dashboard.Price') }}</th>
                            <th>{{ __('dashboard.Quantity') }}</th>
                            <th style="width:60px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($purchase->products as $product)
                        <tr>
                            <td><input type="text" name="products[{{ $loop->index }}][product_id]" class="app-input app-input--sm" value="{{ $product->id }}"></td>
                            <td><input type="number" step="0.01" name="products[{{ $loop->index }}][price]" class="app-input app-input--sm" value="{{ $product->pivot->price }}"></td>
                            <td><input type="number" name="products[{{ $loop->index }}][quantity]" class="app-input app-input--sm" value="{{ $product->pivot->quantity }}"></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.purchases.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('DOMContentLoaded', function() {
    document.getElementById('add_product_row').addEventListener('click', function() {
        const tbody = document.querySelector('#purchase_products_table tbody');
        const i = tbody.querySelectorAll('tr').length;
        tbody.insertAdjacentHTML('beforeend', `
            <tr>
                <td><input type="text" name="products[${i}][product_id]" class="app-input app-input--sm"></td>
                <td><input type="number" step="0.01" name="products[${i}][price]" class="app-input app-input--sm" value="0"></td>
                <td><input type="number" name="products[${i}][quantity]" class="app-input app-input--sm" value="1"></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.querySelector('#purchase_products_table').addEventListener('click', e => {
        if (e.target.closest('.remove-row')) e.target.closest('tr').remove();
    });
});
</script>
@endsection