@extends('admin.admin_dashboard')
@section('customcss')
<style>
    .item-row { border-bottom: 1px solid #eee; padding: 10px 0; }
    .item-row:last-child { border-bottom: none; }
</style>
@endsection

@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active"><a href="{{route('admin.product-purchases.index')}}">Purchases</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">New Purchase</a></li>
            </ol>
        </div>
        
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Create Purchase Order</h4>
                </div>
                <div class="card-body">
                    <form action="{{route('admin.product-purchases.store')}}" method="post" id="purchaseForm">
                        @csrf
                        
                        <div class="row">
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Purchase No: <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('purchase_no') is-invalid @enderror" name="purchase_no" value="{{old('purchase_no', $purchaseNo)}}" required>
                                @error('purchase_no')<div class="invalid-feedback">{{$message}}</div>@enderror
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Purchase Date: <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('purchase_date') is-invalid @enderror" name="purchase_date" value="{{old('purchase_date', date('Y-m-d'))}}" required>
                                @error('purchase_date')<div class="invalid-feedback">{{$message}}</div>@enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label">Vendor: <span class="text-danger">*</span></label>
                                <select class="form-control @error('vendor_id') is-invalid @enderror" name="vendor_id" required>
                                    <option value="">Select Vendor</option>
                                    @foreach($vendors as $vendor)
                                    <option value="{{$vendor->id}}" {{old('vendor_id') == $vendor->id ? 'selected' : ''}}>{{$vendor->name}}</option>
                                    @endforeach
                                </select>
                                @error('vendor_id')<div class="invalid-feedback">{{$message}}</div>@enderror
                            </div>
                        </div>

                        <hr>
                        <h5>Purchase Items</h5>
                        <div id="itemsContainer">
                            <div class="item-row">
                                <div class="row">
                                    <div class="col-md-5">
                                        <label class="form-label">Product <span class="text-danger">*</span></label>
                                        <select class="form-control product-select" name="items[0][product_id]" required>
                                            <option value="">Select Product</option>
                                            @foreach($products as $product)
                                            <option value="{{$product->id}}" data-cost="{{$product->cost_price}}">{{$product->name}} ({{$product->category->name ?? ''}})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Quantity <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control item-qty" name="items[0][quantity]" value="1" min="1" required>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Unit Price <span class="text-danger">*</span></label>
                                        <input type="number" step="0.01" class="form-control item-price" name="items[0][unit_price]" value="0" min="0" required>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Total</label>
                                        <input type="text" class="form-control item-total" readonly value="0.00">
                                    </div>
                                    <div class="col-md-1">
                                        <label class="form-label">&nbsp;</label>
                                        <button type="button" class="btn btn-danger btn-sm remove-item" disabled><i class="fas fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-info btn-sm mt-2" id="addItem"><i class="fas fa-plus"></i> Add Item</button>

                        <hr>
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label class="form-label">Notes:</label>
                                    <textarea class="form-control" name="notes" rows="2">{{old('notes')}}</textarea>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h5>Total Amount: <span id="grandTotal">৳0.00</span></h5>
                            </div>
                        </div>

                        <hr>
                        <h5>Payment Information</h5>
                        <div class="row">
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Payment Status: <span class="text-danger">*</span></label>
                                <select class="form-control" name="payment_status" id="paymentStatus" required>
                                    <option value="unpaid">Unpaid</option>
                                    <option value="partial">Partial Payment</option>
                                    <option value="paid">Paid</option>
                                </select>
                            </div>
                            <div class="mb-3 col-md-3" id="paidAmountWrap" style="display:none;">
                                <label class="form-label">Paid Amount:</label>
                                <input type="number" step="0.01" class="form-control" name="paid_amount" id="paidAmount" value="0" min="0">
                            </div>
                            <div class="mb-3 col-md-3" id="paymentMethodWrap" style="display:none;">
                                <label class="form-label">Payment Method:</label>
                                <select class="form-control" name="paid_from" id="paymentMethod">
                                    <option value="cash">Cash</option>
                                    <option value="bank">Bank</option>
                                </select>
                            </div>
                        </div>

                        <div class="row" style="text-align: right;">
                            <div class="mb-3 col-md-12">
                                <button type="submit" class="btn btn-primary">Save as Draft</button>
                                <a href="{{route('admin.product-purchases.index')}}" class="btn btn-danger">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('customjs')
<script>
let itemIndex = 1;

$(document).ready(function() {
    // Product selection - auto fill price
    $(document).on('change', '.product-select', function() {
        let cost = $(this).find(':selected').data('cost');
        $(this).closest('.item-row').find('.item-price').val(cost || 0);
        calculateRow($(this).closest('.item-row'));
    });

    // Calculate on qty or price change
    $(document).on('input', '.item-qty, .item-price', function() {
        calculateRow($(this).closest('.item-row'));
    });

    // Add new item row
    $('#addItem').click(function() {
        let html = `
            <div class="item-row">
                <div class="row">
                    <div class="col-md-5">
                        <select class="form-control product-select" name="items[${itemIndex}][product_id]" required>
                            <option value="">Select Product</option>
                            @foreach($products as $product)
                            <option value="{{$product->id}}" data-cost="{{$product->cost_price}}">{{$product->name}} ({{$product->category->name ?? ''}})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="number" class="form-control item-qty" name="items[${itemIndex}][quantity]" value="1" min="1" required>
                    </div>
                    <div class="col-md-2">
                        <input type="number" step="0.01" class="form-control item-price" name="items[${itemIndex}][unit_price]" value="0" min="0" required>
                    </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control item-total" readonly value="0.00">
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-danger btn-sm remove-item"><i class="fas fa-trash"></i></button>
                    </div>
                </div>
            </div>
        `;
        $('#itemsContainer').append(html);
        itemIndex++;
        updateRemoveButtons();
    });

    // Remove item row
    $(document).on('click', '.remove-item', function() {
        $(this).closest('.item-row').remove();
        calculateGrandTotal();
        updateRemoveButtons();
    });

    // Payment status change
    $('#paymentStatus').change(function() {
        if ($(this).val() === 'unpaid') {
            $('#paidAmountWrap, #paymentMethodWrap').hide();
            $('#paidAmount').val(0);
        } else if ($(this).val() === 'partial') {
            $('#paidAmountWrap, #paymentMethodWrap').show();
        } else if ($(this).val() === 'paid') {
            $('#paidAmountWrap, #paymentMethodWrap').show();
            // Set paid amount to total
            let total = 0;
            $('.item-total').each(function() {
                total += parseFloat($(this).val()) || 0;
            });
            $('#paidAmount').val(total.toFixed(2));
        }
    });

    function calculateRow($row) {
        let qty = parseFloat($row.find('.item-qty').val()) || 0;
        let price = parseFloat($row.find('.item-price').val()) || 0;
        let total = qty * price;
        $row.find('.item-total').val(total.toFixed(2));
        calculateGrandTotal();
    }

    function calculateGrandTotal() {
        let grand = 0;
        $('.item-total').each(function() {
            grand += parseFloat($(this).val()) || 0;
        });
        $('#grandTotal').text('৳' + grand.toFixed(2));
        
        // Update paid amount if payment status is 'paid'
        if ($('#paymentStatus').val() === 'paid') {
            $('#paidAmount').val(grand.toFixed(2));
        }
    }

    function updateRemoveButtons() {
        let itemCount = $('.item-row').length;
        $('.remove-item').prop('disabled', itemCount <= 1);
    }

    // Initial calculation
    calculateRow($('.item-row').first());
});
</script>
@endsection