@extends('client.layouts.main')

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

@section('content')
<!-- Invoice Header -->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Invoice #{{ $invoice->invoice_number }}</span></div>
        <div class="actions">
            <a href="{{ route('client.invoices.print', $invoice) }}" target="_blank" class="btn btn-default btn-sm">
                <i class="fa fa-print"></i> Print Invoice
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row">
            <div class="col-md-2">
                <strong>Invoice Number</strong>
                <p>{{ $invoice->invoice_number }}</p>
            </div>
            <div class="col-md-2">
                <strong>Due Date</strong>
                <p>{{ $invoice->due_date->format('M d, Y') }}</p>
            </div>
            <div class="col-md-2">
                <strong>Status</strong>
                <p>
                    @php
                        $statusColors = [
                            'paid' => 'success',
                            'unpaid' => 'warning',
                            'overdue' => 'danger',
                            'cancelled' => 'default',
                        ];
                    @endphp
                    <span class="label label-sm label-{{ $statusColors[$invoice->status] ?? 'info' }}">{{ ucfirst($invoice->status) }}</span>
                </p>
            </div>
            <div class="col-md-2">
                <strong>Total</strong>
                <p>{{ number_format($invoice->total, 2) }}</p>
            </div>
            <div class="col-md-2">
                <strong>Amount Paid</strong>
                <p>{{ number_format($invoice->amount_paid, 2) }}</p>
            </div>
            <div class="col-md-2">
                <strong>Balance Due</strong>
                <p class="bold text-{{ $invoice->balance_due > 0 ? 'danger' : 'success' }}">
                    {{ number_format($invoice->balance_due, 2) }}
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Invoice Items -->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Items</span></div>
    </div>
    <div class="portlet-body">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Period</th>
                    <th>Qty</th>
                    <th>Unit Price</th>
                    <th>Discount</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $item)
                <tr>
                    <td>{{ $item->description }}</td>
                    <td>{{ $item->formatted_period ?? '-' }}</td>
                    <td>{{ $item->quantity }}</td>
                    <td>{{ number_format($item->unit_price, 2) }}</td>
                    <td>{{ number_format($item->discount, 2) }}</td>
                    <td>{{ number_format($item->total, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Transaction History -->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Payment History</span></div>
    </div>
    <div class="portlet-body">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Gateway</th>
                    <th>Reference</th>
                    <th>Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($invoice->transactions as $transaction)
                <tr>
                    <td>{{ $transaction->created_at->format('M d, Y H:i') }}</td>
                    <td>{{ $transaction->paymentGateway->display_name ?? '-' }}</td>
                    <td>{{ $transaction->transaction_reference }}</td>
                    <td>{{ number_format($transaction->amount, 2) }}</td>
                    <td>
                        <span class="label label-sm label-{{ $transaction->status === 'completed' ? 'success' : ($transaction->status === 'failed' ? 'danger' : 'warning') }}">
                            {{ ucfirst($transaction->status) }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center font-grey-mint">No transactions recorded.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Pay Now Section -->
@if($invoice->balance_due > 0 && $invoice->status !== 'cancelled')
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption"><span class="caption-subject theme-font bold uppercase">Pay Now</span></div>
    </div>
    <form action="{{ route('client.invoices.pay', $invoice) }}" method="POST">
        @csrf
        <div class="portlet-body">
            <p>Balance due: <strong>{{ number_format($invoice->balance_due, 2) }}</strong></p>

            @foreach($gateways as $gateway)
            <label class="gateway-option" style="display:block; padding:12px 15px; margin-bottom:5px; border:1px solid {{ $loop->first ? '#3598dc' : '#e0e0e0' }}; border-radius:4px; cursor:pointer; background:{{ $loop->first ? '#f5faff' : '#fff' }};">
                <input type="radio" name="payment_gateway_id"
                       value="{{ $gateway->id }}"
                       data-instructions="{{ $gateway->instructions ? e($gateway->instructions) : '' }}"
                       {{ $loop->first ? 'checked' : '' }}
                       style="margin-right:10px; position:relative; top:1px;">
                <strong>{{ $gateway->display_name }}</strong>
                @if($gateway->description)
                    <span class="font-grey-mint" style="margin-left:5px;">- {{ $gateway->description }}</span>
                @endif
            </label>
            @endforeach

            @if ($errors->has('payment_gateway_id'))
                <span class="help-block text-danger">{{ $errors->first('payment_gateway_id') }}</span>
            @endif

            <!-- Instructions & Transaction Reference -->
            <div id="gateway-instructions-panel" style="display:none; margin-top:15px;">
                <div class="alert alert-info" style="white-space:pre-line;" id="gateway-instructions-text"></div>
                <div class="form-group">
                    <label class="control-label">Transaction Reference <span class="text-danger">*</span></label>
                    <input type="text" name="transaction_reference" id="transaction_reference" class="form-control" placeholder="Enter your payment transaction reference / receipt number">
                    <span class="help-block font-grey-mint">Please complete the payment using the instructions above, then enter the transaction reference here.</span>
                    @if ($errors->has('transaction_reference'))
                        <span class="help-block text-danger">{{ $errors->first('transaction_reference') }}</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button type="submit" class="btn btn-success">
                <i class="fa fa-credit-card"></i> Pay Now
            </button>
        </div>
    </form>
</div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var radios = document.querySelectorAll('input[name="payment_gateway_id"]');
    var panel = document.getElementById('gateway-instructions-panel');
    var instructionsText = document.getElementById('gateway-instructions-text');
    var txnInput = document.getElementById('transaction_reference');

    if (!panel || !radios.length) return;

    function updateGatewayUI() {
        var selected = document.querySelector('input[name="payment_gateway_id"]:checked');
        var instructions = selected ? selected.getAttribute('data-instructions') : '';

        document.querySelectorAll('.gateway-option').forEach(function(l) {
            l.style.border = '1px solid #e0e0e0';
            l.style.background = '#fff';
        });
        if (selected) {
            selected.closest('.gateway-option').style.border = '1px solid #3598dc';
            selected.closest('.gateway-option').style.background = '#f5faff';
        }

        if (instructions) {
            instructionsText.textContent = instructions;
            panel.style.display = 'block';
            txnInput.required = true;
        } else {
            panel.style.display = 'none';
            txnInput.required = false;
            txnInput.value = '';
        }
    }

    radios.forEach(function(radio) {
        radio.addEventListener('change', updateGatewayUI);
    });

    updateGatewayUI();
});
</script>
@endpush