@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    @endif

    <!-- 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-file-invoice-dollar mr-2"></i>Commission Invoice Details
                    </h1>
                    <p class="text-muted">{{ $commissionInvoice->commission_invoice_no }}</p>
                </div>
                <div>
                    <a href="{{ route('reseller.commission-invoices.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i>Back to List
                    </a>
                    @if($commissionInvoice->status == 'active' && $commissionInvoice->payment_status != 'paid')
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#paymentModal">
                            <i class="fas fa-money-bill mr-2"></i>Update Payment
                        </button>
                    @endif
                    @if($commissionInvoice->status == 'active')
                        <button type="button" class="btn btn-danger" onclick="confirmCancel()">
                            <i class="fas fa-ban mr-2"></i>Cancel Invoice
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Invoice Overview -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">Commission Invoice Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="40%">Invoice No:</th>
                            <td><strong>{{ $commissionInvoice->commission_invoice_no }}</strong></td>
                        </tr>
                        <tr>
                            <th>Invoice Date:</th>
                            <td>{{ $commissionInvoice->invoice_date->format('d M, Y') }}</td>
                        </tr>
                        <tr>
                            <th>Sales Person:</th>
                            <td>
                                @php
                                    $salesPersonInfo = $commissionInvoice->salesPersonWithSubTag();
                                @endphp
                                {{ $salesPersonInfo['sub_tag_name'] ?? $salesPersonInfo['name'] }}
                                @if($commissionInvoice->company_name)
                                    <br><small class="text-muted">{{ $commissionInvoice->company_name }}</small>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                @if($commissionInvoice->status == 'active')
                                    <span class="badge badge-success">Active</span>
                                @else
                                    <span class="badge badge-secondary">{{ ucfirst($commissionInvoice->status) }}</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Created By:</th>
                            <td>
                                @if($commissionInvoice->createdBy)
                                    {{ $commissionInvoice->createdBy->name }}
                                @else
                                    N/A
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ $commissionInvoice->created_at->format('d M, Y h:i A') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h6 class="m-0 font-weight-bold">Linked Sales Invoice</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <th width="40%">Invoice No:</th>
                            <td>{{ $commissionInvoice->salesInvoice->invoice_no }}</td>
                        </tr>
                        @if($commissionInvoice->salesInvoice->customer_invoice)
                        <tr>
                            <th>Customer Invoice:</th>
                            <td>{{ $commissionInvoice->salesInvoice->customer_invoice }}</td>
                        </tr>
                        @endif
                        <tr>
                            <th>Customer:</th>
                            <td>
                                @if($commissionInvoice->salesInvoice->customer)
                                    {{ $commissionInvoice->salesInvoice->customer->name }}
                                @else
                                    {{ $commissionInvoice->salesInvoice->customer_name ?? 'N/A' }}
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Invoice Date:</th>
                            <td>{{ \Carbon\Carbon::parse($commissionInvoice->salesInvoice->invoice_date)->format('d M, Y') }}</td>
                        </tr>
                        <tr>
                            <th>Invoice Amount:</th>
                            <td><strong>৳ {{ number_format($commissionInvoice->salesInvoice->invoice_amount, 2) }}</strong></td>
                        </tr>
                        <tr>
                            <th>Actions:</th>
                            <td>
                                <a href="{{ route('reseller.sales-invoices.show', $commissionInvoice->salesInvoice->id) }}" 
                                   class="btn btn-sm btn-info" target="_blank">
                                    <i class="fas fa-external-link-alt mr-1"></i>View Invoice
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Summary -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Total Commission
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                ৳ {{ number_format($commissionInvoice->total_commission_amount, 2) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Paid Amount
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                ৳ {{ number_format($commissionInvoice->paid_amount, 2) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Due Amount
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                ৳ {{ number_format($commissionInvoice->due_amount, 2) }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Payment Status
                            </div>
                            <div class="h5 mb-0">
                                @if($commissionInvoice->payment_status == 'paid')
                                    <span class="badge badge-success">Paid</span>
                                @elseif($commissionInvoice->payment_status == 'partial')
                                    <span class="badge badge-warning">Partial</span>
                                @else
                                    <span class="badge badge-danger">Pending</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-info-circle fa-2x text-gray-300"></i>
                        </div>
                    </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 Breakdown</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-sm">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>Item Name</th>
                                    <th>Description</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>
                                </tr>
                            </thead>
                            <tbody>
                                @if($commissionInvoice->items->count() > 0)
                                    @foreach($commissionInvoice->items as $index => $item)
                                        @php
                                            // Step 1: Get Commission % (already stored)
                                            $commissionPercentage = $item->commission_percentage ?? 0;
                                            
                                            // Step 2: Commission Item Amount = Item Amount × Commission % / 100
                                            $commissionItemAmount = ($item->item_amount * $commissionPercentage) / 100;
                                        @endphp
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $item->item_name }}</td>
                                            <td>{{ $item->description ?? 'N/A' }}</td>
                                            <td>{{ $item->salesInvoiceItem->unit ?? 'N/A' }}</td>
                                            <td class="text-center">{{ $item->salesInvoiceItem ? number_format($item->salesInvoiceItem->quantity, 2) : 'N/A' }}</td>
                                            <td class="text-right">{{ $item->salesInvoiceItem ? '৳ ' . number_format($item->salesInvoiceItem->rate, 2) : 'N/A' }}</td>
                                            <td class="text-center">{{ $item->salesInvoiceItem && $item->salesInvoiceItem->from_date ? \Carbon\Carbon::parse($item->salesInvoiceItem->from_date)->format('d M, Y') : 'N/A' }}</td>
                                            <td class="text-center">{{ $item->salesInvoiceItem && $item->salesInvoiceItem->to_date ? \Carbon\Carbon::parse($item->salesInvoiceItem->to_date)->format('d M, Y') : 'N/A' }}</td>
                                            <td class="text-right">৳ {{ number_format($item->item_amount, 2) }}</td>
                                            <td class="text-center">{{ number_format($item->commission_percentage, 2) }}%</td>
                                            <td class="text-right text-info"><strong>৳ {{ number_format($item->commission_rate ?? 0, 2) }}</strong></td>
                                            <td class="text-right text-success"><strong>৳ {{ number_format($commissionItemAmount, 2) }}</strong></td>
                                            <td class="text-right"><strong>৳ {{ number_format($item->commission_amount, 2) }}</strong></td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="13" class="text-center text-muted py-4">
                                            <i class="fas fa-info-circle mr-2"></i>
                                            No commission items found for this invoice.
                                            <br><small>This commission invoice was created without any items.</small>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                            <tfoot class="bg-light">
                                <tr>
                                    <th colspan="12" class="text-right">Total Commission:</th>
                                    <th class="text-right">৳ {{ number_format($commissionInvoice->total_commission_amount, 2) }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment History -->
    @if($commissionInvoice->payment_date || $commissionInvoice->payment_notes)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h6 class="m-0 font-weight-bold">Payment Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        @if($commissionInvoice->payment_date)
                        <tr>
                            <th width="20%">Payment Date:</th>
                            <td>{{ \Carbon\Carbon::parse($commissionInvoice->payment_date)->format('d M, Y') }}</td>
                        </tr>
                        @endif
                        @if($commissionInvoice->payment_notes)
                        <tr>
                            <th>Payment Notes:</th>
                            <td>{{ $commissionInvoice->payment_notes }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Payment Update Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ route('reseller.commission-invoices.update-payment', $commissionInvoice->id) }}" method="POST">
                @csrf
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">Update Payment</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="paid_amount">Paid Amount <span class="text-danger">*</span></label>
                        <input type="number" 
                               class="form-control" 
                               id="paid_amount" 
                               name="paid_amount" 
                               min="0" 
                               step="0.01" 
                               value="{{ $commissionInvoice->paid_amount }}"
                               max="{{ $commissionInvoice->total_commission_amount }}"
                               required>
                        <small class="form-text text-muted">
                            Total: ৳ {{ number_format($commissionInvoice->total_commission_amount, 2) }}
                        </small>
                    </div>
                    <div class="form-group">
                        <label for="payment_date">Payment Date</label>
                        <input type="date" 
                               class="form-control" 
                               id="payment_date" 
                               name="payment_date" 
                               value="{{ $commissionInvoice->payment_date ? $commissionInvoice->payment_date->format('Y-m-d') : date('Y-m-d') }}">
                    </div>
                    <div class="form-group">
                        <label for="payment_notes">Payment Notes</label>
                        <textarea class="form-control" 
                                  id="payment_notes" 
                                  name="payment_notes" 
                                  rows="3">{{ $commissionInvoice->payment_notes }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save mr-2"></i>Update Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Cancel Form (Hidden) -->
<form id="cancelForm" action="{{ route('reseller.commission-invoices.cancel', $commissionInvoice->id) }}" method="POST" style="display: none;">
    @csrf
</form>

<script>
function confirmCancel() {
    if (confirm('Are you sure you want to cancel this commission invoice? This action cannot be undone.')) {
        document.getElementById('cancelForm').submit();
    }
}
</script>
@endsection