@extends('layouts.app')

@section('title', __('dashboard.Add New Purchase'))
@section('page_heading', __('dashboard.Add New 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-cart-plus"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Add New Purchase') }}</h2>
                    <p>{{ __('dashboard.create_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.store') }}" method="POST" enctype="multipart/form-data" class="mt-4">
            @csrf

            <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>
                        <option value="">{{ __('dashboard.Choose Supplier') }}</option>
                        @foreach($suppliers as $sup)
                            <option value="{{ $sup->id }}" @selected(old('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', 0) }}">
                </div>

                <div class="md:col-span-3">
                    <label class="app-label font-bold">{{ __('dashboard.Attach Invoice') }}</label>
                    <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>
                        <tr>
                            <td><input type="text" name="products[0][product_id]" class="app-input app-input--sm"></td>
                            <td><input type="number" step="0.01" name="products[0][price]" class="app-input app-input--sm" value="0"></td>
                            <td><input type="number" name="products[0][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>
                    </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') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
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.addEventListener('click', e => { if (e.target.closest('.remove-row')) e.target.closest('tr').remove(); });
</script>
@endsection