@extends('layouts.app')

@section('title', 'Create Commission Invoice')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-plus-circle mr-2"></i>Create Commission Invoice
                    </h1>
                    <p class="text-muted">Generate commission invoice from sales invoice</p>
                </div>
                <div>
                    <a href="{{ route('reseller.commission-invoices.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if(!$salesInvoice)
        <!-- No Sales Invoice Selected -->
        <div class="row">
            <div class="col-12">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Please select a sales invoice first.
                </div>
                <a href="{{ route('reseller.commission-invoices.sales-invoices-list') }}" class="btn btn-primary">
                    <i class="fas fa-list mr-2"></i>View Available Sales Invoices
                </a>
            </div>
        </div>
    @else
        <!-- Commission Invoice Form -->
        <form action="{{ route('reseller.commission-invoices.store') }}" method="POST" id="commissionForm">
            @csrf
            <input type="hidden" name="sales_invoice_id" value="{{ $salesInvoice->id }}">
            <input type="hidden" name="user_id" id="user_id" value="">
            <input type="hidden" name="sub_tag_id" id="sub_tag_id" value="">

            <div class="row">
                <!-- Sales Invoice Info -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-primary text-white">
                            <h6 class="m-0 font-weight-bold">Sales Invoice Information</h6>
                        </div>
                        <div class="card-body">
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <th width="40%">Invoice No:</th>
                                    <td>{{ $salesInvoice->invoice_no }}</td>
                                </tr>
                                @if($salesInvoice->customer_invoice)
                                <tr>
                                    <th>Customer Invoice:</th>
                                    <td>{{ $salesInvoice->customer_invoice }}</td>
                                </tr>
                                @endif
                                <tr>
                                    <th>Customer:</th>
                                    <td>
                                        @if($salesInvoice->customer)
                                            {{ $salesInvoice->customer->name }}
                                            @if($salesInvoice->customer->company_name)
                                                <br><small class="text-muted">{{ $salesInvoice->customer->company_name }}</small>
                                            @endif
                                        @else
                                            {{ $salesInvoice->customer_name ?? 'N/A' }}
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th>Invoice Date:</th>
                                    <td>{{ \Carbon\Carbon::parse($salesInvoice->invoice_date)->format('d M, Y') }}</td>
                                </tr>
                                <tr>
                                    <th>Total Amount:</th>
                                    <td><strong>৳ {{ number_format($salesInvoice->invoice_amount, 2) }}</strong></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Commission Items Table -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-info text-white">
                            <h6 class="m-0 font-weight-bold">
                                <i class="fas fa-list mr-2"></i>Commission Items & Prices
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                <table class="table table-bordered table-sm" style="font-size: 0.80em;">
                                    <thead class="thead-light sticky-top">
                                        <tr>
                                            <th>#</th>
                                            <th>Item</th>
                                            <th>Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">1</span>
                                            </td>
                                            <td><strong>Internet</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 180.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">2</span>
                                            </td>
                                            <td><strong>PNI</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 120.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">3</span>
                                            </td>
                                            <td><strong>Facebook</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 50.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">4</span>
                                            </td>
                                            <td><strong>GGC</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 20.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">5</span>
                                            </td>
                                            <td><strong>MCDN</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 100.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">6</span>
                                            </td>
                                            <td><strong>Bhaisan</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 40.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">7</span>
                                            </td>
                                            <td><strong>Nttn - Summit</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 36.00</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-center">
                                                <span class="badge badge-primary">8</span>
                                            </td>
                                            <td><strong>F@H Nttn</strong></td>
                                            <td class="text-right">
                                                <strong class="text-success">৳ 36.00</strong>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Commission Details -->
                <div class="col-md-4 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-success text-white">
                            <h6 class="m-0 font-weight-bold">Commission Details</h6>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="sales_person_id">Sales Person <span class="text-danger">*</span></label>
                                <select class="form-control @error('sales_person_id') is-invalid @enderror" 
                                        id="sales_person_id" name="sales_person_id" required disabled>
                                    <option value="">Select Sales Person</option>
                                    @foreach($salesPersons as $person)
                                        <option value="{{ $person['sub_tag_id'] }}" data-user-id="{{ $person['id'] }}" {{ (old('sub_tag_id', $defaultSubTagId) == $person['sub_tag_id']) ? 'selected' : '' }}>
                                            {{ $person['sub_tag_name'] ?? $person['name'] }}
                                            @if($person['company_name'])
                                                ({{ $person['company_name'] }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('sales_person_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="invoice_date">Commission Invoice Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('invoice_date') is-invalid @enderror" 
                                       id="invoice_date" name="invoice_date" 
                                       value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                                @error('invoice_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="alert alert-info mt-3">
                                <strong>Total Commission:</strong>
                                <h4 class="mb-0">৳ <span id="totalCommission">0.00</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Commission Items -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow">
                        <div class="card-header bg-warning text-dark">
                            <h6 class="m-0 font-weight-bold">Commission Items (Set Percentage for Each Item)</h6>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Item Name</th>
                                            <th>Unit</th>
                                            <th>Quantity</th>
                                            <th>Rate</th>
                                            <th>From Date</th>
                                            <th>To Date</th>
                                            <th>Item Amount</th>
                                            <th>Commission %</th>
                                            <th>Commission Rate</th>
                                            <th>Commission Item Amount</th>
                                            <th>Commission Amount</th>
                                            <th>
                                                <button type="button" class="btn btn-sm btn-success" onclick="setAllPercentage()">
                                                    <i class="fas fa-calculator"></i> Set Rate
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($salesInvoice->items as $index => $item)
                                            <tr>
                                                <td class="text-center">
                                                    <span class="badge badge-info">{{ $index + 1 }}</span>
                                                </td>
                                                <td>
                                                    {{ $item->item_name }}
                                                    @if($item->description)
                                                        <br><small class="text-muted">{{ $item->description }}</small>
                                                    @endif
                                                    <input type="hidden" name="items[{{ $index }}][sales_invoice_item_id]" value="{{ $item->id }}">
                                                    <input type="hidden" name="items[{{ $index }}][item_name]" value="{{ $item->item_name }}">
                                                    <input type="hidden" name="items[{{ $index }}][description]" value="{{ $item->description }}">
                                                </td>
                                                <td>{{ $item->unit ?? 'N/A' }}</td>
                                                <td class="text-center">
                                                    {{ number_format($item->quantity, 2) }}
                                                    <input type="hidden" class="item-quantity" data-index="{{ $index }}" value="{{ $item->quantity }}">
                                                    <input type="hidden" name="items[{{ $index }}][quantity]" value="{{ $item->quantity }}">
                                                </td>
                                                <td class="text-right">
                                                    ৳ {{ number_format($item->rate, 2) }}
                                                    <input type="hidden" class="item-rate" data-index="{{ $index }}" value="{{ $item->rate }}">
                                                    @if($item->from_date && $item->to_date)
                                                        @php
                                                            $days = \Carbon\Carbon::parse($item->from_date)->diffInDays(\Carbon\Carbon::parse($item->to_date)) + 1;
                                                        @endphp
                                                        <input type="hidden" class="item-days" data-index="{{ $index }}" value="{{ $days }}">
                                                    @else
                                                        <input type="hidden" class="item-days" data-index="{{ $index }}" value="1">
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    {{ $item->from_date ? \Carbon\Carbon::parse($item->from_date)->format('d M, Y') : 'N/A' }}
                                                </td>
                                                <td class="text-center">
                                                    {{ $item->to_date ? \Carbon\Carbon::parse($item->to_date)->format('d M, Y') : 'N/A' }}
                                                </td>
                                                <td class="text-right">
                                                    <strong>৳ {{ number_format($item->total_amount, 2) }}</strong>
                                                    <input type="hidden" name="items[{{ $index }}][item_amount]" value="{{ $item->total_amount }}" class="item-amount">
                                                </td>
                                                <td>
                                                    <input type="number" 
                                                           class="form-control form-control-sm commission-percentage" 
                                                           name="items[{{ $index }}][commission_percentage]" 
                                                           min="0" 
                                                           max="100" 
                                                           step="0.01" 
                                                           value="0"
                                                           data-index="{{ $index }}"
                                                           readonly
                                                           style="background-color: #f8f9fa;">
                                                </td>
                                                <td>
                                                    <input type="number" 
                                                           class="form-control form-control-sm commission-rate-input text-info" 
                                                           name="items[{{ $index }}][commission_rate]"
                                                           min="0" 
                                                           step="0.01" 
                                                           value="0"
                                                           data-index="{{ $index }}"
                                                           placeholder="Enter rate"
                                                           required>
                                                </td>
                                                <td class="text-right">
                                                    <strong class="commission-item-amount-display text-success" data-index="{{ $index }}">৳ 0.00</strong>
                                                </td>
                                                <td>
                                                    <input type="number" 
                                                           class="form-control form-control-sm commission-amount" 
                                                           name="items[{{ $index }}][commission_amount]" 
                                                           min="0" 
                                                           step="0.01" 
                                                           value="0"
                                                           data-index="{{ $index }}"
                                                           required
                                                           readonly>
                                                </td>
                                                <td class="text-center">
                                                    <i class="fas fa-check text-success"></i>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot class="bg-light">
                                        <tr>
                                            <th colspan="7" class="text-right">Total:</th>
                                            <th class="text-right">৳ {{ number_format($salesInvoice->items->sum('total_amount'), 2) }}</th>
                                            <th colspan="5"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="row mt-4">
                <div class="col-12">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save mr-2"></i>Create Commission Invoice
                    </button>
                    <a href="{{ route('reseller.commission-invoices.index') }}" class="btn btn-secondary btn-lg">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </a>
                </div>
            </div>
        </form>
    @endif
</div>

<script>
        // Calculate commission amount when rate changes
        document.querySelectorAll('.commission-rate-input').forEach(input => {
            input.addEventListener('input', function() {
                const index = this.dataset.index;
                const itemAmount = parseFloat(document.querySelector(`input[name="items[${index}][item_amount]"]`).value);
                const itemRate = parseFloat(document.querySelector(`.item-rate[data-index="${index}"]`).value);
                const commissionRate = parseFloat(this.value) || 0;
                
                // Step 1: Calculate Commission Percentage = (Commission Rate / Item Rate) × 100
                const percentage = itemRate > 0 ? (commissionRate / itemRate) * 100 : 0;
                
                // Step 2: Commission Item Amount = Item Amount × Commission % / 100
                const commissionItemAmount = (itemAmount * percentage) / 100;
                
                // Step 3: Commission Amount = Item Amount - Commission Item Amount
                const commissionAmount = itemAmount - commissionItemAmount;
                
                // Update Commission Percentage (readonly)
                document.querySelector(`input[name="items[${index}][commission_percentage]"]`).value = percentage.toFixed(2);
                
                // Update Commission Item Amount display
                document.querySelector(`.commission-item-amount-display[data-index="${index}"]`).textContent = '৳ ' + commissionItemAmount.toFixed(2);
                
                // Update Commission Amount input
                document.querySelector(`input[name="items[${index}][commission_amount]"]`).value = commissionAmount.toFixed(2);
                
                updateTotalCommission();
            });
        });

// Set all commission rates to same value
function setAllPercentage() {
    const rate = prompt('Enter commission rate for all items:', '0');
    if (rate !== null && rate !== '') {
        const rateValue = parseFloat(rate);
        if (rateValue >= 0) {
            document.querySelectorAll('.commission-rate-input').forEach(input => {
                input.value = rateValue;
                // Trigger input event to recalculate
                input.dispatchEvent(new Event('input'));
            });
        } else {
            alert('Please enter a valid commission rate (0 or greater)');
        }
    }
}

// Update total commission
function updateTotalCommission() {
    let total = 0;
    document.querySelectorAll('.commission-amount').forEach(input => {
        total += parseFloat(input.value) || 0;
    });
    document.getElementById('totalCommission').textContent = total.toFixed(2);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    updateTotalCommission();
    
    // Set initial values for hidden fields (Sales Person is now fixed/disabled)
    const salesPersonSelect = document.getElementById('sales_person_id');
    if (salesPersonSelect.value) {
        const selectedOption = salesPersonSelect.options[salesPersonSelect.selectedIndex];
        document.getElementById('user_id').value = selectedOption.getAttribute('data-user-id');
        document.getElementById('sub_tag_id').value = selectedOption.value;
        
        // Load commission rates for the default selected sales person
        fetchCommissionRates(selectedOption.value);
    }
    
    // No change event listener needed since Sales Person is now fixed/disabled
    
    // Function to fetch commission rates from server
    function fetchCommissionRates(subTagId) {
        fetch(`{{ route('reseller.commission-invoices.get-commission-rates') }}?sub_tag_id=${subTagId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    populateCommissionRates(data.commission_items);
                } else {
                    console.error('Error fetching commission rates:', data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
    
    // Function to populate commission rates in the form
    function populateCommissionRates(commissionItems) {
        // Create a mapping of item names to commission rates
        const rateMap = {};
        commissionItems.forEach(item => {
            rateMap[item.name.toLowerCase()] = item.commission_rate;
        });
        
        // Update commission rate inputs based on item names
        document.querySelectorAll('.commission-rate-input').forEach(input => {
            const index = input.dataset.index;
            const itemNameElement = document.querySelector(`input[name="items[${index}][item_name]"]`);
            
            if (itemNameElement) {
                const itemName = itemNameElement.value.toLowerCase();
                
                // Try to find matching commission rate
                let commissionRate = 0;
                for (const [key, rate] of Object.entries(rateMap)) {
                    if (itemName.includes(key) || key.includes(itemName)) {
                        commissionRate = rate;
                        break;
                    }
                }
                
                // Set the commission rate
                input.value = commissionRate;
                
                // Trigger input event to recalculate
                input.dispatchEvent(new Event('input'));
            }
        });
    }
    
});
</script>
@endsection