@extends('admin.layouts.app')

@section('title', 'Edit Sale')
@section('page_title', 'Edit Sale')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Edit Sale</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('sales.update', $sale->id) }}" method="POST" id="saleForm">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-md-3 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', $sale->date ? $sale->date->format('Y-m-d') : '') }}" required>
                    @error('date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3 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', $sale->invoice_no) }}" required>
                    @error('invoice_no')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Customer <span class="text-danger">*</span></label>
                    <select name="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required id="customerSelect">
                        <option value="">Select Customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" data-branches="{{ $customer->branches->toJson() }}" {{ old('customer_id', $sale->customer_id) == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                        @endforeach
                    </select>
                    @error('customer_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Branch</label>
                    <select name="branch_id" class="form-select @error('branch_id') is-invalid @enderror" id="branchSelect">
                        <option value="">Select Branch (Optional)</option>
                        @if($sale->branch)
                            <option value="{{ $sale->branch_id }}" selected>{{ $sale->branch->name }}</option>
                        @endif
                    </select>
                    @error('branch_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
            <hr>
            <h5>Sale Items</h5>
            <div class="table-responsive">
                <table class="table table-bordered" id="saleItemsTable">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Shipment Number</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="saleItemsBody">
                        @foreach($sale->items as $item)
                        <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->sale_price }}" {{ $item->product_id == $product->id ? 'selected' : '' }}>{{ $product->name }} ({{ $product->code }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <select name="shipment_numbers[]" class="form-select shipment-select" data-current="{{ $item->shipment_number ?? '' }}">
                                    <option value="">Select Shipment</option>
                                    @if($item->shipment_number)
                                        <option value="{{ $item->shipment_number }}" selected>{{ $item->shipment_number }}</option>
                                    @endif
                                </select>
                            </td>
                            <td>
                                <input type="number" name="quantities[]" class="form-control quantity" step="0.01" value="{{ $item->quantity }}" required>
                            </td>
                            <td>
                                <input type="number" name="rates[]" class="form-control rate" step="0.01" value="{{ $item->rate }}" required>
                            </td>
                            <td>
                                <input type="number" class="form-control amount" step="0.01" value="{{ $item->quantity * $item->rate }}" readonly>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm removeRow"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                        @endforeach
                    </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="{{ $sale->total }}" readonly></td>
                            <td></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="{{ $sale->paid }}"></td>
                            <td></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="{{ $sale->due }}" readonly></td>
                            <td></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">{{ $sale->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> Update Sale
            </button>
            <a href="{{ route('sales.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 paid = parseFloat($('#paidAmount').val()) || 0;
        var due = total - paid;
        $('#dueAmount').val(due.toFixed(2));
    }
    
    function loadShipmentNumbers(row, productId, selectedShipment) {
        var shipmentSelect = row.find('.shipment-select');
        shipmentSelect.html('<option value="">Loading...</option>');
        
        if (!productId) {
            shipmentSelect.html('<option value="">Select Shipment</option>');
            return;
        }
        
        $.ajax({
            url: '{{ url("/api/get-shipment-numbers") }}/' + productId,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                shipmentSelect.html('<option value="">Select Shipment</option>');
                if (data && data.length > 0) {
                    $.each(data, function(index, item) {
                        var shipment = item.shipment_number;
                        if (shipment) {
                            var selected = (selectedShipment && selectedShipment == shipment) ? 'selected' : '';
                            shipmentSelect.append('<option value="' + shipment + '" ' + selected + '>' + shipment + '</option>');
                        }
                    });
                } else {
                    shipmentSelect.html('<option value="">No Shipments Available</option>');
                }
            },
            error: function(xhr, status, error) {
                console.log('Error:', error);
                shipmentSelect.html('<option value="">Error Loading</option>');
            }
        });
    }
    
    // Only load shipment numbers when product changes (Blade handles initial render)
    $(document).on('change', '.product-select', function() {
        var row = $(this).closest('tr');
        var productId = $(this).val();
        var price = $(this).find('option:selected').data('price') || 0;
        
        row.find('.rate').val(price);
        if (productId) {
            loadShipmentNumbers(row, productId, null);
        }
        calculateRowAmount(row);
    });
    
    $(document).on('input', '.quantity, .rate', function() {
        calculateRowAmount($(this).closest('tr'));
    });
    
    $('#paidAmount').on('input', function() {
        calculateDue();
    });
    
    function loadBranches(customerSelect) {
        var selectedOption = customerSelect.find('option:selected');
        var branches = selectedOption.data('branches');
        var branchSelect = $('#branchSelect');
        
        branchSelect.html('<option value="">Select Branch (Optional)</option>');
        
        if (branches && branches.length > 0) {
            $.each(branches, function(index, branch) {
                if (branch.status == 1) {
                    branchSelect.append('<option value="' + branch.id + '">' + branch.name + '</option>');
                }
            });
        }
    }
    
    $('#customerSelect').change(function() {
        loadBranches($(this));
    });
    
    $('#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->sale_price }}">{{ $product->name }} ({{ $product->code }})</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select name="shipment_numbers[]" class="form-select shipment-select">
                        <option value="">Select Shipment</option>
                    </select>
                </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>
        `;
        $('#saleItemsBody').append(row);
    });
    
    $(document).on('click', '.removeRow', function() {
        if ($('#saleItemsBody tr').length > 1) {
            $(this).closest('tr').remove();
            calculateTotal();
        }
    });
});
</script>
@endsection