@extends('admin.layouts.app')

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

@section('content')
<style>
    .subtotal-card {
        position: sticky;
        top: 20px;
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .subtotal-card h6 {
        color: #6c757d;
        font-weight: 600;
        margin-bottom: 15px;
    }
    .subtotal-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 8px 0;
        border-bottom: 1px dashed #dee2e6;
    }
    .subtotal-row:last-child {
        border-bottom: none;
    }
    .subtotal-label {
        color: #495057;
    }
    .subtotal-value {
        font-weight: 600;
        color: #212529;
    }
    .subtotal-total {
        font-size: 1.1em;
        color: #28a745;
    }
    .subtotal-due {
        font-size: 1.1em;
        color: #dc3545;
    }
    .sale-items-table {
        font-size: 0.85rem;
    }
    .sale-items-table th {
        font-size: 0.8rem;
        padding: 8px 5px;
        white-space: nowrap;
    }
    .sale-items-table td {
        padding: 5px;
        vertical-align: middle;
    }
    .sale-items-table .form-control,
    .sale-items-table .form-select {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
    .sale-items-table .btn-sm {
        padding: 3px 6px;
        font-size: 0.75rem;
    }
</style>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Create Sale</h5>
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('sales.store') }}" method="POST" id="saleForm">
                    @csrf
                    <div class="row">
                        <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">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">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-4 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>
                    
                    <hr>
                    <h5 class="mb-3">Sale Items</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered sale-items-table" id="saleItemsTable">
                            <thead class="table-light">
                                <tr>
                                    <th style="min-width: 160px;">Product</th>
                                    <th style="min-width: 180px;">Shipment Number</th>
                                    <th style="width: 90px;">Quantity</th>
                                    <th style="width: 100px;">Rate</th>
                                    <th style="width: 100px;">Amount</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody id="saleItemsBody">
                                <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->sale_price }}" data-stock="{{ $product->current_stock }}">{{ $product->name }} ({{ $product->code }}) - Stock: {{ $product->current_stock }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="shipment_numbers[]" class="form-select shipment-select">
                                            <option value="">Select Shipment</option>
                                        </select>
                                        <div class="shipment-stock-info mt-1" style="font-size: 11px; line-height: 1.3;"></div>
                                    </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>
                        </table>
                    </div>
                    
                    <button type="button" class="btn btn-success mb-3" id="addRow">
                        <i class="fas fa-plus"></i> Add Product
                    </button>
                    
                    <div class="row">
                        <div class="col-md-8">
                            <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>
                        </div>
                        <div class="col-md-4">
                            <div class="subtotal-card" style="max-width: 300px; margin-left: auto;">
                                <h6><i class="fas fa-calculator me-2"></i>Summary</h6>
                                <div class="subtotal-row">
                                    <span class="subtotal-label">Subtotal:</span>
                                    <span class="subtotal-value" id="subtotalDisplay">0.00</span>
                                </div>
                                <div class="subtotal-row">
                                    <span class="subtotal-label">Discount:</span>
                                    <input type="number" name="discount" id="discountAmount" class="form-control form-control-sm @error('discount') is-invalid @enderror" step="0.01" value="{{ old('discount', 0) }}" oninput="calculateDue()">
                                </div>
                                <div class="subtotal-row">
                                    <span class="subtotal-label">Total:</span>
                                    <span class="subtotal-value subtotal-total" id="grandTotalDisplay">0.00</span>
                                </div>
                                <div class="subtotal-row">
                                    <span class="subtotal-label">Paid:</span>
                                    <input type="number" name="paid" id="paidAmount" class="form-control form-control-sm @error('paid') is-invalid @enderror" step="0.01" value="{{ old('paid', 0) }}">
                                </div>
                                <div class="subtotal-row">
                                    <span class="subtotal-label">Due:</span>
                                    <span class="subtotal-value subtotal-due" id="dueAmountDisplay">0.00</span>
                                </div>
                                <input type="hidden" name="subtotal" id="totalAmount" value="0">
                                <input type="hidden" id="grandTotal" value="0">
                                <input type="hidden" id="dueAmount" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Sale
                    </button>
                    <a href="{{ route('sales.index') }}" class="btn btn-secondary">Cancel</a>
                </form>
            </div>
        </div>
    </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));
        $('#subtotalDisplay').text(total.toFixed(2));
        calculateDue();
    }
    
    function calculateDue() {
        var total = parseFloat($('#totalAmount').val()) || 0;
        var discount = parseFloat($('#discountAmount').val()) || 0;
        var grandTotal = total - discount;
        $('#grandTotal').val(grandTotal.toFixed(2));
        $('#grandTotalDisplay').text(grandTotal.toFixed(2));
        var paid = parseFloat($('#paidAmount').val()) || 0;
        var due = grandTotal - paid;
        $('#dueAmount').val(due.toFixed(2));
        $('#dueAmountDisplay').text(due.toFixed(2));
    }
    
    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));
    });
    
    function loadShipmentNumbers(row, productId) {
        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',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data) {
                shipmentSelect.html('<option value="">Select Shipment</option>');
                if (data && data.length > 0) {
                    $.each(data, function(index, shipment) {
                        var label = shipment.shipment_number + ' (Stock: ' + shipment.available_quantity + ')';
                        shipmentSelect.append('<option value="' + shipment.shipment_number + '" data-available="' + shipment.available_quantity + '" data-purchased="' + shipment.purchased_quantity + '" data-sold="' + (shipment.purchased_quantity - shipment.available_quantity) + '">' + label + '</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>');
            }
        });
    }
    
    $(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);
        row.find('.shipment-stock-info').html('');
        loadShipmentNumbers(row, productId);
        calculateRowAmount(row);
    });
    
    $(document).on('change', '.shipment-select', function() {
        var row = $(this).closest('tr');
        var selected = $(this).find('option:selected');
        var infoDiv = row.find('.shipment-stock-info');
        
        var shipment = selected.val();
        var available = parseFloat(selected.data('available')) || 0;
        var purchased = parseFloat(selected.data('purchased')) || 0;
        
        if (shipment) {
            var html = '<span class="text-muted">Purchased: ' + purchased.toFixed(3) + '</span> | ';
            html += '<strong class="' + (available > 0 ? 'text-success' : 'text-danger') + '">Available: ' + available.toFixed(3) + '</strong>';
            infoDiv.html(html);
        } else {
            infoDiv.html('');
        }
    });
    
    $(document).on('input', '.quantity, .rate', function() {
        calculateRowAmount($(this).closest('tr'));
    });
    
    $('#paidAmount').on('input', function() {
        calculateDue();
    });
    
    $('#discountAmount').on('input', function() {
        calculateDue();
    });
    
    $('#addRow').click(function() {
        var newRow = `
            <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 }}" data-stock="{{ $product->current_stock }}">{{ $product->name }} ({{ $product->code }}) - Stock: {{ $product->current_stock }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select name="shipment_numbers[]" class="form-select shipment-select">
                        <option value="">Select Shipment</option>
                    </select>
                    <div class="shipment-stock-info mt-1" style="font-size: 11px; line-height: 1.3;"></div>
                </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(newRow);
    });
    
    $(document).on('click', '.removeRow', function() {
        if ($('#saleItemsBody tr').length > 1) {
            $(this).closest('tr').remove();
            calculateTotal();
        }
    });
});
</script>
@endsection