@extends('admin.layouts.app')

@section('title', 'Create Sale Return')
@section('page_title', 'Add Sale Return')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Create Sale Return</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('sale-returns.store') }}" method="POST">
            @csrf
            <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', date('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">Return No <span class="text-danger">*</span></label>
                    <input type="text" name="return_no" class="form-control @error('return_no') is-invalid @enderror" value="{{ old('return_no', $return_no) }}" required>
                    @error('return_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') == $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>
                    </select>
                    @error('branch_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label class="form-label">Sale Invoice <span class="text-danger">*</span></label>
                    <select name="sale_id" class="form-select @error('sale_id') is-invalid @enderror" required id="saleSelect">
                        <option value="">Select Customer & Branch first</option>
                    </select>
                    @error('sale_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
             
            <hr>
            <h5>Return Items</h5>
            <div class="table-responsive">
                <table class="table table-bordered" id="returnItemsTable">
                    <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="returnItemsBody">
                        <tr>
                            <td colspan="6" class="text-center text-muted">Select a sale invoice to load items</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" 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>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Reason</label>
                <textarea name="reason" class="form-control @error('reason') is-invalid @enderror" rows="3">{{ old('reason') }}</textarea>
                @error('reason')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Save Return
            </button>
            <a href="{{ route('sale-returns.index') }}" class="btn btn-secondary">Cancel</a>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    var products = {!! $productsJson !!};
</script>
<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));
    }
    
    function updateShipmentNumbers(row) {
        var productId = row.find('.product-select').val();
        var shipmentSelect = row.find('.shipment-select');
        
        shipmentSelect.empty();
        shipmentSelect.append('<option value="">Select Shipment Number</option>');
        
        if (productId) {
            $.ajax({
                url: '{{ url("/api/get-sale-shipment-numbers") }}/' + productId,
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response && response.length > 0) {
                        response.forEach(function(item) {
                            if (item.shipment_number) {
                                shipmentSelect.append(
                                    '<option value="' + item.shipment_number + '">' + 
                                    item.shipment_number + 
                                    '</option>'
                                );
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching shipment numbers:', error);
                }
            });
        }
    }
    
    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>');
                }
            });
        }
    }
    
    function loadSales() {
        var customerId = $('#customerSelect').val();
        var branchId = $('#branchSelect').val();
        var saleSelect = $('#saleSelect');
        
        saleSelect.html('<option value="">Loading...</option>');
        
        if (!customerId) {
            saleSelect.html('<option value="">Select Customer & Branch first</option>');
            return;
        }
        
        var url = '{{ url("/api/get-customer-sales") }}/' + customerId;
        if (branchId) {
            url += '/' + branchId;
        }
        
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                saleSelect.html('<option value="">Select Sale Invoice</option>');
                if (response && response.length > 0) {
                    response.forEach(function(sale) {
                        saleSelect.append(
                            '<option value="' + sale.id + '" data-total="' + sale.total + '">' +
                            sale.invoice_no + ' (' + sale.date + ' - ' + parseFloat(sale.total).toFixed(2) + ')' +
                            '</option>'
                        );
                    });
                } else {
                    saleSelect.html('<option value="">No sales found</option>');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching sales:', error);
                saleSelect.html('<option value="">Error loading sales</option>');
            }
        });
    }
    
    function loadSaleItems() {
        var saleId = $('#saleSelect').val();
        var tbody = $('#returnItemsBody');
        
        if (!saleId) {
            tbody.html('<tr><td colspan="6" class="text-center text-muted">Select a sale invoice to load items</td></tr>');
            calculateTotal();
            return;
        }
        
        tbody.html('<tr><td colspan="6" class="text-center">Loading items...</td></tr>');
        
        $.ajax({
            url: '{{ url("/api/get-sale-return-items") }}/' + saleId,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                tbody.empty();
                if (response && response.length > 0) {
                    response.forEach(function(item) {
                        var productOptions = '<option value="">Select Product</option>';
                        products.forEach(function(p) {
                            var selected = p.id == item.product_id ? 'selected' : '';
                            productOptions += '<option value="' + p.id + '" data-price="' + p.sale_price + '" ' + selected + '>' + p.name + ' (' + p.code + ')</option>';
                        });
                        var shipmentOptions = '<option value="">Select Shipment Number</option>';
                        if (item.shipment_number) {
                            shipmentOptions += '<option value="' + item.shipment_number + '" selected>' + item.shipment_number + '</option>';
                        }
                        var row = '<tr>' +
                            '<td><select name="products[]" class="form-select product-select" required>' + productOptions + '</select></td>' +
                            '<td><select name="shipment_numbers[]" class="form-select shipment-select">' + shipmentOptions + '</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).toFixed(2) + '" readonly></td>' +
                            '<td><button type="button" class="btn btn-danger btn-sm removeRow"><i class="fas fa-trash"></i></button></td>' +
                            '</tr>';
                        tbody.append(row);
                    });
                } else {
                    tbody.html('<tr><td colspan="6" class="text-center text-muted">No items found for this sale</td></tr>');
                }
                calculateTotal();
            },
            error: function(xhr, status, error) {
                console.error('Error fetching sale items:', error);
                tbody.html('<tr><td colspan="6" class="text-center text-danger">Error loading items</td></tr>');
            }
        });
    }
    
    $('#customerSelect').change(function() {
        loadBranches($(this));
        $('#saleSelect').html('<option value="">Select Customer & Branch first</option>');
        $('#returnItemsBody').html('<tr><td colspan="6" class="text-center text-muted">Select a sale invoice to load items</td></tr>');
        calculateTotal();
    });
    
    $('#branchSelect').change(function() {
        loadSales();
        $('#returnItemsBody').html('<tr><td colspan="6" class="text-center text-muted">Select a sale invoice to load items</td></tr>');
        calculateTotal();
    });
    
    $('#saleSelect').change(function() {
        loadSaleItems();
    });
    
    $(document).on('change', '.product-select', function() {
        var price = $(this).find('option:selected').data('price') || 0;
        $(this).closest('tr').find('.rate').val(price);
        updateShipmentNumbers($(this).closest('tr'));
        calculateRowAmount($(this).closest('tr'));
    });
    
    $(document).on('input', '.quantity, .rate', function() {
        calculateRowAmount($(this).closest('tr'));
    });
    
    $('#addRow').click(function() {
        var productOptions = '<option value="">Select Product</option>';
        products.forEach(function(p) {
            productOptions += '<option value="' + p.id + '" data-price="' + p.sale_price + '">' + p.name + ' (' + p.code + ')</option>';
        });
        var row = '<tr>' +
            '<td><select name="products[]" class="form-select product-select" required>' + productOptions + '</select></td>' +
            '<td><select name="shipment_numbers[]" class="form-select shipment-select"><option value="">Select Shipment Number</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>';
        $('#returnItemsBody').append(row);
    });
    
    $(document).on('click', '.removeRow', function() {
        if ($('#returnItemsBody tr').length > 1) {
            $(this).closest('tr').remove();
            calculateTotal();
        }
    });
});
</script>
@endsection