@extends('admin.layouts.app')

@section('title', 'Create Purchase')
@section('page_title', 'Add New Purchase')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Create Purchase</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('purchases.store') }}" method="POST" id="purchaseForm">
            @csrf
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Invoice No <span class="text-danger">*</span></label>
                    <input type="text" name="invoice_no" class="form-control @error('invoice_no') is-invalid @enderror" value="{{ old('invoice_no', $invoice_no) }}" required>
                    @error('invoice_no')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Date <span class="text-danger">*</span></label>
                    <input type="date" name="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', date('Y-m-d')) }}" required>
                    @error('date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Supplier <span class="text-danger">*</span></label>
                    <select name="supplier_id" class="form-select @error('supplier_id') is-invalid @enderror" required>
                        <option value="">Select Supplier</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>{{ $supplier->name }}</option>
                        @endforeach
                    </select>
                    @error('supplier_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Shipment Number</label>
                    <input type="text" name="shipment_number" class="form-control @error('shipment_number') is-invalid @enderror" value="{{ old('shipment_number') }}">
                    @error('shipment_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <hr>
            <h5>Purchase Items</h5>
            <div class="table-responsive">
                <table class="table table-bordered" id="purchaseItemsTable">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Shipment No</th>
                            <th>Quantity</th>
                            <th>Rate</th>
                            <th>Amount</th>
                            <th><button type="button" class="btn btn-success btn-sm" id="addRow"><i class="fas fa-plus"></i></button></th>
                        </tr>
                    </thead>
                    <tbody id="purchaseItemsBody">
                        <tr>
                            <td>
                                <select name="products[]" class="form-select product-select @error('products.*') is-invalid @enderror" required>
                                    <option value="">Select Product</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}" data-price="{{ $product->purchase_price }}">{{ $product->name }} ({{ $product->code }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="text" name="shipment_numbers[]" class="form-control" placeholder="Optional">
                            </td>
                            <td>
                                <input type="number" name="quantities[]" class="form-control quantity" step="0.01" value="1" required>
                            </td>
                            <td>
                                <input type="number" name="rates[]" class="form-control rate" step="0.01" value="0" required>
                            </td>
                            <td>
                                <input type="number" class="form-control amount" step="0.01" value="0" readonly>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm removeRow"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Total:</strong></td>
                            <td><input type="number" name="total" id="totalAmount" class="form-control" step="0.01" value="0" readonly></td>
                        </tr>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Paid Amount:</strong></td>
                            <td><input type="number" name="paid" id="paidAmount" class="form-control @error('paid') is-invalid @enderror" step="0.01" value="{{ old('paid', 0) }}"></td>
                        </tr>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Discount:</strong></td>
                            <td><input type="number" name="discount" id="discountAmount" class="form-control" step="0.01" value="{{ old('discount', 0) }}"></td>
                        </tr>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Paid Amount:</strong></td>
                            <td><input type="number" name="paid" id="paidAmount" class="form-control @error('paid') is-invalid @enderror" step="0.01" value="{{ old('paid', 0) }}"></td>
                        </tr>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Due Amount:</strong></td>
                            <td><input type="number" id="dueAmount" class="form-control" step="0.01" value="0" readonly></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-control @error('notes') is-invalid @enderror" rows="3">{{ old('notes') }}</textarea>
                @error('notes')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Purchase
            </button>
            <a href="{{ route('purchases.index') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    function calculateRowAmount(row) {
        var quantity = parseFloat(row.find('.quantity').val()) || 0;
        var rate = parseFloat(row.find('.rate').val()) || 0;
        var amount = quantity * rate;
        row.find('.amount').val(amount.toFixed(2));
        calculateTotal();
    }
    
    function calculateTotal() {
        var total = 0;
        $('.amount').each(function() {
            total += parseFloat($(this).val()) || 0;
        });
        $('#totalAmount').val(total.toFixed(2));
        calculateDue();
    }
    
    function calculateDue() {
        var total = parseFloat($('#totalAmount').val()) || 0;
        var discount = parseFloat($('#discountAmount').val()) || 0;
        var paid = parseFloat($('#paidAmount').val()) || 0;
        var due = total - discount - paid;
        $('#dueAmount').val(due.toFixed(2));
    }
    
    $(document).on('change', '.product-select', function() {
        var price = $(this).find('option:selected').data('price') || 0;
        $(this).closest('tr').find('.rate').val(price);
        calculateRowAmount($(this).closest('tr'));
    });
    
    $(document).on('input', '.quantity, .rate', function() {
        calculateRowAmount($(this).closest('tr'));
    });
    
    $('#paidAmount').on('input', function() {
        calculateDue();
    });
    
    $('#addRow').click(function() {
        var row = `
            <tr>
                <td>
                    <select name="products[]" class="form-select product-select" required>
                        <option value="">Select Product</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}" data-price="{{ $product->purchase_price }}">{{ $product->name }} ({{ $product->code }})</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" name="shipment_numbers[]" class="form-control" placeholder="Optional">
                </td>
                <td>
                    <input type="number" name="quantities[]" class="form-control quantity" step="0.01" value="1" required>
                </td>
                <td>
                    <input type="number" name="rates[]" class="form-control rate" step="0.01" value="0" required>
                </td>
                <td>
                    <input type="number" class="form-control amount" step="0.01" value="0" readonly>
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm removeRow"><i class="fas fa-trash"></i></button>
                </td>
            </tr>
        `;
        $('#purchaseItemsBody').append(row);
    });
    
    $(document).on('click', '.removeRow', function() {
        if ($('#purchaseItemsBody tr').length > 1) {
            $(this).closest('tr').remove();
            calculateTotal();
        }
    });
});
</script>
@endsection