@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Tax Calculator</h1>
            <p>Calculate taxes for international shipments</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5>Shipment Details</h5>
                </div>
                <div class="card-body">
                    <form id="taxCalculatorForm" method="POST" action="{{ route('tax.calculate') }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label>Origin Country</label>
                                    <select name="origin_country" class="form-control" required>
                                        <option value="">Select Origin</option>
                                        <option value="Pakistan">Pakistan</option>
                                        <option value="United States">United States</option>
                                        <option value="Germany">Germany</option>
                                        <option value="China">China</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label>Destination Country</label>
                                    <select name="destination_country" class="form-control" required>
                                        <option value="">Select Destination</option>
                                        <option value="Pakistan">Pakistan</option>
                                        <option value="United States">United States</option>
                                        <option value="Germany">Germany</option>
                                        <option value="China">China</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label>Shipment Type</label>
                                    <select name="shipment_type" class="form-control" required>
                                        <option value="import">Import</option>
                                        <option value="export">Export</option>
                                        <option value="domestic">Domestic</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label>Declared Value</label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        <input type="number" name="declared_value" class="form-control" step="0.01" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label>Weight (kg)</label>
                                    <input type="number" name="weight" class="form-control" step="0.01" required>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label>Transport Mode</label>
                                    <select name="transport_mode" class="form-control" required>
                                        <option value="air">Air</option>
                                        <option value="sea">Sea</option>
                                        <option value="land">Land</option>
                                        <option value="rail">Rail</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">Calculate Tax</button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>Tax Calculation Result</h5>
                </div>
                <div class="card-body" id="taxResult">
                    <p class="text-muted">Enter shipment details to calculate taxes</p>
                </div>
            </div>
            
            <div class="card mt-3">
                <div class="card-header">
                    <h5>Tax Information</h5>
                </div>
                <div class="card-body">
                    <small class="text-muted">
                        <strong>Note:</strong> Tax calculations are based on current rates and may vary. 
                        Always consult with customs authorities for accurate information.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('taxCalculatorForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Get form values
    const formData = new FormData(this);
    const declaredValue = parseFloat(formData.get('declared_value')) || 0;
    const weight = parseFloat(formData.get('weight')) || 0;
    const shipmentType = formData.get('shipment_type');
    const transportMode = formData.get('transport_mode');
    
    // Calculate taxes using JavaScript
    const result = calculateTaxes(declaredValue, weight, shipmentType, transportMode);
    displayTaxResult(result);
});

function calculateTaxes(declaredValue, weight, shipmentType, transportMode) {
    let customsDuty = 0;
    let salesTax = 0;
    let incomeTax = 0;
    let additionalTax = 0;
    
    if (shipmentType === 'import') {
        // Import duties
        customsDuty = declaredValue * 0.10; // 10% customs duty
        salesTax = (declaredValue + customsDuty) * 0.17; // 17% sales tax
        incomeTax = declaredValue * 0.05; // 5% income tax
        additionalTax = declaredValue * 0.02; // 2% additional tax
    } else if (shipmentType === 'export') {
        // Export duties (usually lower)
        customsDuty = 0; // No customs duty on exports
        salesTax = 0; // No sales tax on exports
        incomeTax = declaredValue * 0.01; // 1% income tax
        additionalTax = 0;
    } else {
        // Domestic shipment
        salesTax = declaredValue * 0.17; // 17% sales tax
        incomeTax = declaredValue * 0.025; // 2.5% income tax
    }
    
    // Transport mode adjustments
    if (transportMode === 'air') {
        additionalTax += declaredValue * 0.01; // 1% air transport tax
    }
    
    const totalTax = customsDuty + salesTax + incomeTax + additionalTax;
    const totalAmount = declaredValue + totalTax;
    
    return {
        invoice_value: declaredValue,
        customs_duty: customsDuty,
        sales_tax: salesTax,
        income_tax: incomeTax,
        additional_tax: additionalTax,
        total_tax: totalTax,
        total_amount: totalAmount,
        shipment_type: shipmentType,
        transport_mode: transportMode
    };
}

function displayTaxResult(result) {
    let html = `
        <div class="alert alert-success">
            <h6>Total Tax: $${result.total_tax.toFixed(2)}</h6>
            <small>Total Amount: $${result.total_amount.toFixed(2)}</small>
        </div>
        <h6>Tax Breakdown:</h6>
        <ul class="list-unstyled">
    `;
    
    if (result.customs_duty > 0) {
        html += `
            <li class="mb-2">
                <strong>Customs Duty</strong><br>
                <small>Pakistan - 10%</small><br>
                <span class="text-success">$${result.customs_duty.toFixed(2)}</span>
            </li>
        `;
    }
    
    if (result.sales_tax > 0) {
        html += `
            <li class="mb-2">
                <strong>Sales Tax</strong><br>
                <small>Pakistan - 17%</small><br>
                <span class="text-success">$${result.sales_tax.toFixed(2)}</span>
            </li>
        `;
    }
    
    if (result.income_tax > 0) {
        html += `
            <li class="mb-2">
                <strong>Income Tax</strong><br>
                <small>Pakistan - ${result.shipment_type === 'export' ? '1%' : (result.shipment_type === 'import' ? '5%' : '2.5%')}</small><br>
                <span class="text-success">$${result.income_tax.toFixed(2)}</span>
            </li>
        `;
    }
    
    if (result.additional_tax > 0) {
        html += `
            <li class="mb-2">
                <strong>Additional Tax</strong><br>
                <small>Pakistan - Various</small><br>
                <span class="text-success">$${result.additional_tax.toFixed(2)}</span>
            </li>
        `;
    }
    
    html += `
        </ul>
        <hr>
        <div class="row">
            <div class="col-6"><strong>Invoice Value:</strong></div>
            <div class="col-6 text-end">$${result.invoice_value.toFixed(2)}</div>
        </div>
        <div class="row">
            <div class="col-6"><strong>Total Tax:</strong></div>
            <div class="col-6 text-end text-danger">$${result.total_tax.toFixed(2)}</div>
        </div>
        <div class="row border-top pt-2">
            <div class="col-6"><strong>Grand Total:</strong></div>
            <div class="col-6 text-end"><strong>$${result.total_amount.toFixed(2)}</strong></div>
        </div>
    `;
    
    document.getElementById('taxResult').innerHTML = html;
}
</script>
@endsection