@extends('admin.layouts.app')

@section('title', 'Create Wastage')
@section('page_title', 'Add Wastage')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Create Wastage</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('wastages.store') }}" method="POST">
            @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>
            
            <hr>
            <h5>Wastage Items</h5>
            <div class="table-responsive">
                <table class="table table-bordered" id="wastageItemsTable">
                    <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="wastageItemsBody">
                        <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 }}) - Stock: {{ $product->current_stock }}</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>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Total Amount:</strong></td>
                            <td><input type="number" name="total_amount" 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">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 Wastage
            </button>
            <a href="{{ route('wastages.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));
    }
    
    $(document).on('change', '.product-select', function() {
        var row = $(this).closest('tr');
        var price = $(this).find('option:selected').data('price') || 0;
        row.find('.rate').val(price);
        calculateRowAmount(row);
        loadShipmentNumbers(row, $(this).val());
    });
    
    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) {
                        shipmentSelect.append('<option value="' + shipment.shipment_number + '">' + shipment.shipment_number + '</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('input', '.quantity, .rate', function() {
        calculateRowAmount($(this).closest('tr'));
    });
    
    $('#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 }}) - Stock: {{ $product->current_stock }}</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>
        `;
        $('#wastageItemsBody').append(row);
    });
    
    $(document).on('click', '.removeRow', function() {
        if ($('#wastageItemsBody tr').length > 1) {
            $(this).closest('tr').remove();
            calculateTotal();
        }
    });
});
</script>
@endsection