@extends('layout.app')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color:#115548;">
                            <i class="fas fa-network-wired mr-2"></i>Real IP Bill Management
                        </h3>
                        <div class="card-tools">
                            @can('real-ip-bill-history')
                                <a href="{{ route('manager-finance-log.index', ['type' => 'RealIpBill']) }}"
                                    class="btn btn-sm btn-secondary mr-1">
                                    <i class="fas fa-list-alt"></i> Edit &amp; Delete Log
                                </a>
                            @endcan
                            @can('real-ip-bill-create')
                                <a href="{{ route('real-ip-bill.create') }}" class="btn btn-sm btn-primary">
                                    <i class="fa fa-plus-circle mr-1"></i> Add Real IP Bill
                                </a>
                            @endcan
                        </div>
                    </div>

                    <div class="card-body py-2">

                        <form method="GET" action="{{ route('real-ip-bill.index') }}" class="mb-2" id="filterForm">
                            <div class="form-row align-items-end">
                                <div class="col-md-3">
                                    <label class="mb-0 small text-muted">Manager</label>
                                    <select name="reseller_id" id="filterManager" class="form-control select2">
                                        <option value="">— All Managers —</option>
                                        @foreach ($resellers as $reseller)
                                            <option value="{{ $reseller->id }}"
                                                {{ request('reseller_id') == $reseller->id ? 'selected' : '' }}>
                                                {{ $reseller->name_with_type }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="mb-0 small text-muted">POP</label>
                                    <select name="pop_id" id="filterPop" class="form-control select2">
                                        <option value="">— All POPs —</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="mb-0 small text-muted">Status</label>
                                    <select name="status" class="form-control select2">
                                        <option value="">— All Status —</option>
                                        <option value="pending"  {{ request('status') == 'pending'  ? 'selected' : '' }}>Pending</option>
                                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                        <option value="modification" {{ request('status') == 'modification' ? 'selected' : '' }}>Modification</option>
                                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-1 text-right">
                                    <button type="submit" class="btn btn-sm btn-primary">
                                        <i class="fa fa-filter"></i> Filter
                                    </button>
                                    @if (request('reseller_id') || request('pop_id') || request('status'))
                                        <a href="{{ route('real-ip-bill.index') }}" class="btn btn-sm btn-secondary">Clear</a>
                                    @endif
                                </div>
                            </div>
                        </form>

                        <div class="table-responsive finance-table-wrap">
                            <table id="dataTable" class="table table-bordered table-striped table-hover table-sm">
                                @php
                                    // "Billed" grows on its own: amount × months elapsed since the billing month.
                                    $grandPerMonth  = (float) $bills->sum('amount');
                                    $grandAmount    = (float) $bills->sum('total_billable');
                                    $grandPaid      = (float) $bills->sum('payments_sum_amount');
                                    // Sum each bill's own clamped remaining so an overpaid bill can't cancel real dues on others.
                                    $grandRemaining = (float) $bills->sum('remaining_due');
                                @endphp
                                <thead class="thead-dark">
                                    <tr>
                                        <th>#</th>
                                        <th>Manager</th>
                                        <th>POP</th>
                                        <th>IP Address</th>
                                        <th>Start Date</th>
                                        <th>Status</th>
                                        <th class="text-right">Per Month (৳)</th>
                                        <th class="text-right">Billed Till Now (৳)</th>
                                        <th class="text-right">Paid (৳)</th>
                                        <th class="text-right">Due (৳)</th>
                                        <th>Action</th>
                                    </tr>
                                    {{-- The Total row lives in <thead>, above the rows: DataTables never sorts
                                         or paginates a header row, and it pins under the sticky header. --}}
                                    <tr class="total-row" style="font-weight:bold;background:#f4f6f9;">
                                        <td colspan="6" class="text-right">Total</td>
                                        <td class="text-right">{{ number_format($grandPerMonth, 2) }}</td>
                                        <td class="text-right">{{ number_format($grandAmount, 2) }}</td>
                                        <td class="text-right text-success">{{ number_format($grandPaid, 2) }}</td>
                                        <td class="text-right text-danger">{{ number_format($grandRemaining, 2) }}</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($bills as $item)
                                        @php
                                            $totalPaid = (float) ($item->payments_sum_amount ?? 0);
                                            $billable  = $item->total_billable;
                                            $remaining = $item->remaining_due;
                                        @endphp
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>{{ $item->reseller->name_with_type ?? '—' }}</td>
                                            <td>{{ $item->pop->popname ?? '—' }}</td>
                                            <td><code>{{ $item->ip_address }}</code></td>
                                            <td>
                                                {{ $item->billing_month ? $item->billing_month->format('d M Y') : '—' }}
                                                @if ($item->end_month)
                                                    <br><small class="{{ $item->is_stopped ? 'text-danger' : 'text-muted' }}">
                                                        <i class="fa fa-stop-circle"></i>
                                                        {{ $item->is_stopped ? 'Stopped after' : 'Ends' }}
                                                        {{ $item->end_month->format('d M Y') }}
                                                    </small>
                                                @else
                                                    <br><small class="text-success"><i class="fa fa-sync-alt"></i> Recurring</small>
                                                @endif
                                                @if ($item->description)
                                                    <br><small class="text-muted">{{ $item->description }}</small>
                                                @endif
                                                <br><small class="text-muted"><i class="fa fa-user"></i> Added by:
                                                    {{ $item->createdBy->name ?? '—' }}</small>
                                            </td>
                                            <td>
                                                @include('partials.approval-status', ['item' => $item])
                                                @if ($item->status === 'approved')
                                                    {{-- Only a stopped bill is truly finished; a running one charges again next month. --}}
                                                    @if ($billable > 0 && $remaining <= 0)
                                                        <span class="badge badge-primary">{{ $item->is_stopped ? 'Fully Paid' : 'Up to date' }}</span>
                                                    @endif
                                                @endif
                                                @include('partials.approval-comment', ['item' => $item])
                                            </td>
                                            <td class="text-right">{{ number_format($item->amount, 2) }}</td>
                                            <td class="text-right">
                                                @if ($billable > 0)
                                                    {{ number_format($billable, 2) }}
                                                    {{-- First / last month are charged by days, so this is a month count, not a multiplier. --}}
                                                    <br><small class="text-muted">{{ $item->elapsed_periods }} month(s)
                                                        (till {{ $item->current_period_label }})</small>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-right">
                                                @if ($totalPaid > 0)
                                                    <strong class="text-success">{{ number_format($totalPaid, 2) }}</strong>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td class="text-right">
                                                @if ($remaining > 0)
                                                    <strong class="text-danger">{{ number_format($remaining, 2) }}</strong>
                                                @elseif ($billable > 0)
                                                    <span class="badge badge-success">Paid</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td style="white-space:nowrap">
                                                {{-- Edit stays available after approval: it is how a running bill
                                                     gets its End Date set to stop the monthly charge. Touching an
                                                     approved record needs the extra *-approved permission. --}}
                                                @php
                                                    $isApproved = $item->status === 'approved';
                                                    $canEditRow = auth()->user()->can('real-ip-bill-edit') && (!$isApproved || auth()->user()->can('real-ip-bill-edit-approved'));
                                                    $canDeleteRow = auth()->user()->can('real-ip-bill-delete') && (!$isApproved || auth()->user()->can('real-ip-bill-delete-approved'));
                                                @endphp
                                                @if ($canEditRow)
                                                    <a href="{{ route('real-ip-bill.edit', $item->id) }}" class="btn btn-sm btn-info">
                                                        <i class="fas fa-edit"></i> Edit
                                                    </a>
                                                @endif
                                                @can('real-ip-bill-approve')
                                                    @include('partials.approval-decision-buttons', [
                                                        'item'  => $item,
                                                        'url'   => route('real-ip-bill.approve', $item->id),
                                                        'label' => 'Real IP Bill',
                                                    ])
                                                @endcan
                                                @if ($canDeleteRow)
                                                    <form action="{{ route('real-ip-bill.destroy', $item->id) }}"
                                                        method="POST" class="d-inline"
                                                        onsubmit="return confirm('Delete this entry?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                                    </form>
                                                @endif
                                                @if ($item->status === 'approved')
                                                    @can('real-ip-bill-payment')
                                                        @if ($remaining > 0)
                                                            <button type="button" class="btn btn-sm btn-warning pay-real-ip-btn"
                                                                data-id="{{ $item->id }}"
                                                                data-amount="{{ number_format($billable, 2) }}"
                                                                data-period="{{ $item->elapsed_periods }} month(s) — till {{ $item->current_period_label }}"
                                                                data-remaining="{{ number_format($remaining, 2) }}"
                                                                data-pay-type="{{ $item->reseller->reseller_type ?? '' }}"
                                                                data-reseller-id="{{ $item->reseller_id }}"
                                                                data-reseller-name="{{ $item->reseller->name_with_type ?? '' }}">
                                                                <i class="fas fa-money-bill-wave"></i> Pay
                                                            </button>
                                                        @endif
                                                        @if ($totalPaid > 0)
                                                            <button type="button" class="btn btn-sm btn-info pay-history-real-ip-btn"
                                                                data-id="{{ $item->id }}">
                                                                <i class="fas fa-history"></i> Pay Log
                                                            </button>
                                                        @endif
                                                    @endcan
                                                @endif
                                                @can('real-ip-bill-history')
                                                    <a href="{{ route('editLog-history', ['id' => $item->id, 'type' => 'RealIpBill']) }}"
                                                        class="btn btn-sm btn-secondary">
                                                        <i class="fas fa-list-alt"></i> History
                                                    </a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Pay Modal --}}
        @can('real-ip-bill-payment')
        <div class="modal fade" id="payRealIpModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="background:#f39c12;color:#fff;">
                        <h5 class="modal-title"><i class="fas fa-money-bill-wave mr-2"></i>Make Payment</h5>
                        <button type="button" class="close" data-dismiss="modal" style="color:#fff;"><span>&times;</span></button>
                    </div>
                    <form method="POST" action="" id="payRealIpForm">
                        @csrf
                        <input type="hidden" name="pay_type"    id="payTypeHidden">
                        <input type="hidden" name="reseller_id" id="payResellerIdHidden">
                        <div class="modal-body">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <div class="info-box bg-light mb-0">
                                        <div class="info-box-content">
                                            <span class="info-box-text text-muted" style="font-size:11px">Billed Till Now</span>
                                            <span class="info-box-number" id="payBillAmount" style="font-size:16px">—</span>
                                            <small class="text-muted" id="payPeriodInfo"></small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-box bg-light mb-0">
                                        <div class="info-box-content">
                                            <span class="info-box-text text-muted" style="font-size:11px">Remaining</span>
                                            <span class="info-box-number text-danger" id="payRemainingAmount" style="font-size:16px">—</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-box bg-light mb-0">
                                        <div class="info-box-content">
                                            <span class="info-box-text text-muted" style="font-size:11px">Payment Type</span>
                                            <span class="info-box-number" id="payTypeBadge" style="font-size:14px">—</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="payNoResellerAlert" class="alert alert-danger" style="display:none">
                                <i class="fas fa-exclamation-circle mr-1"></i> No manager linked. Payment cannot be processed.
                            </div>

                            <div id="payResellerInfo" style="display:none">
                                <div class="form-group">
                                    <label>Manager</label>
                                    <div class="form-control bg-light" id="payResellerName" style="pointer-events:none"></div>
                                </div>

                                <div id="balanceInfo" class="alert alert-info py-2" style="display:none"></div>

                                <div id="payFields" style="display:none">
                                    <div class="form-group">
                                        <label>Payment Amount (৳) <span class="text-danger">*</span></label>
                                        <input type="number" name="amount" id="payAmount" class="form-control" placeholder="Enter amount" min="0.01" step="0.01">
                                    </div>
                                    <div class="form-group">
                                        <label>Note</label>
                                        <textarea name="note" class="form-control" rows="2" placeholder="Optional note..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-warning" id="paySubmitBtn" style="display:none">
                                <i class="fas fa-money-bill-wave mr-1"></i> Confirm Payment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Payment History Modal --}}
        <div class="modal fade" id="payHistoryRealIpModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-info text-white">
                        <h5 class="modal-title"><i class="fas fa-history mr-2"></i>Payment History</h5>
                        <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div id="payHistoryRealIpContent">
                            <div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        @endcan

    </div>
</section>
@endsection

@section('ajax')
<script>
$(function () {

    var resellerPopUrl           = "{{ route('reseller-pop') }}";
    var currentPopId             = "{{ request('pop_id') }}";
    var commissionCheckUrl       = "{{ route('real-ip-bill.commission-check') }}";
    var payFormUrlTemplate       = "{{ route('real-ip-bill.pay', ['id' => '__ID__']) }}";
    var payHistoryUrlTemplate    = "{{ route('real-ip-bill.payment-history', ['id' => '__ID__']) }}";
    var paymentDeleteUrlTemplate = "{{ route('real-ip-bill.payment-delete', ['payment' => '__ID__']) }}";
    var csrfToken                = "{{ csrf_token() }}";

    // ── POP cascade helper ────────────────────────────────────────────────
    function loadPops($select, resellerId, selectedPopId, emptyLabel) {
        $select.empty().append('<option value="">' + emptyLabel + '</option>');
        if (!resellerId) { $select.trigger('change.select2'); return; }
        $.get(resellerPopUrl, { reseller: resellerId }, function (data) {
            $.each(data.popes, function (i, pop) {
                var sel = (selectedPopId && pop.id == selectedPopId) ? 'selected' : '';
                $select.append('<option value="' + pop.id + '" ' + sel + '>' + pop.popname + '</option>');
            });
            $select.trigger('change.select2');
        });
    }

    // ── Filter: reseller-wise POP cascade ─────────────────────────────────
    $('#filterManager').on('change', function () {
        loadPops($('#filterPop'), $(this).val(), null, '— All POPs —');
    });
    if ($('#filterManager').val()) {
        loadPops($('#filterPop'), $('#filterManager').val(), currentPopId, '— All POPs —');
    }

    // ── Pay Modal ─────────────────────────────────────────────────────────
    function resetPayModal() {
        $('#payAmount').val('');
        $('textarea[name="note"]').val('');
        $('#payNoResellerAlert,#payResellerInfo,#balanceInfo,#payFields').hide();
        $('#paySubmitBtn').hide();
        $('#payTypeBadge').text('—');
        $('#payBillAmount,#payRemainingAmount').text('—');
        $('#payPeriodInfo').text('');
        $('#payResellerName').text('');
        $('#payTypeHidden,#payResellerIdHidden').val('');
    }

    function fetchPayInfo(type, resellerId) {
        $.get(commissionCheckUrl, {
            reseller_id: resellerId,
            pay_type:    type,
        }).done(function (res) {
            $('#balanceInfo').html('Manager Balance: <strong>৳' + parseFloat(res.balance).toFixed(2) + '</strong>').show();
            $('#payFields').show();
            $('#paySubmitBtn').show();
        }).fail(function () { alert('Failed to fetch data. Please try again.'); });
    }

    $(document).on('click', '.pay-real-ip-btn', function () {
        var id           = $(this).data('id');
        var amount       = $(this).data('amount');
        var remaining    = $(this).data('remaining');
        var type         = $(this).data('pay-type');
        var resellerId   = $(this).data('reseller-id');
        var resellerName = $(this).data('reseller-name');

        resetPayModal();
        $('#payRealIpForm').attr('action', payFormUrlTemplate.replace('__ID__', id));
        $('#payBillAmount').text('৳' + amount);
        $('#payPeriodInfo').text($(this).data('period') || '');
        $('#payRemainingAmount').text('৳' + remaining);
        $('#payAmount').attr('max', String(remaining).replace(/,/g, ''));

        if (!type || !resellerId) {
            $('#payNoResellerAlert').show();
            $('#payRealIpModal').modal('show');
            return;
        }

        var payType = type === 'own' ? 'own' : 'other';
        $('#payTypeHidden').val(payType);
        $('#payResellerIdHidden').val(resellerId);

        var badgeClass = payType === 'own' ? 'badge-primary' : 'badge-secondary';
        $('#payTypeBadge').html('<span class="badge ' + badgeClass + ' px-2">' + (payType === 'own' ? 'Own' : 'Other') + '</span>');
        $('#payResellerName').text(resellerName);
        $('#payResellerInfo').show();

        if (payType === 'own') {
            // Own managers can pay freely — no commission check.
            $('#payFields').show();
            $('#paySubmitBtn').show();
        } else {
            fetchPayInfo('other', resellerId);
        }

        $('#payRealIpModal').modal('show');
    });

    $('#payRealIpForm').on('submit', function () {
        var $btn = $('#paySubmitBtn');
        if ($btn.prop('disabled')) return false;

        var amount    = parseFloat($('#payAmount').val());
        var remaining = parseFloat(String($('#payAmount').attr('max')).replace(/,/g, ''));
        if (isNaN(amount) || amount <= 0) {
            alert('Please enter a valid payment amount.');
            return false;
        }
        if (amount > remaining) {
            alert('Payment amount cannot exceed the remaining due (৳' + remaining.toFixed(2) + ').');
            return false;
        }

        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Processing...');
    });
    $('#payRealIpModal').on('hidden.bs.modal', function () {
        $('#paySubmitBtn').prop('disabled', false).html('<i class="fas fa-money-bill-wave mr-1"></i> Confirm Payment');
        resetPayModal();
    });

    // ── Payment History ───────────────────────────────────────────────────
    $(document).on('click', '.pay-history-real-ip-btn', function () {
        var id = $(this).data('id');
        $('#payHistoryRealIpContent').html('<div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>');
        $('#payHistoryRealIpModal').modal('show');

        $.get(payHistoryUrlTemplate.replace('__ID__', id))
            .done(function (res) {
                var html = '<div class="row mb-3 px-3 pt-3">'
                    + '<div class="col-md-3"><strong>Manager:</strong> ' + res.bill.manager + '</div>'
                    + '<div class="col-md-3"><strong>IP:</strong> ' + res.bill.ip + '</div>'
                    + '<div class="col-md-3"><strong>Month:</strong> ' + res.bill.month + '</div>'
                    + '<div class="col-md-3"><strong>Total:</strong> ৳' + res.bill.amount + '</div>'
                    + '</div>';
                html += '<div class="row px-3 mb-3">'
                    + '<div class="col-md-6"><strong>Total Paid:</strong> <span class="text-success">৳' + res.total_paid + '</span></div>'
                    + '<div class="col-md-6"><strong>Remaining:</strong> <span class="text-danger">৳' + res.remaining + '</span></div>'
                    + '</div>';

                var colCount = res.can_delete ? 7 : 6;

                html += '<div class="table-responsive"><table class="table table-bordered table-sm">'
                    + '<thead class="bg-info text-white"><tr>'
                    + '<th>#</th><th>Type</th><th>Amount (৳)</th>'
                    + '<th>Note</th><th>Paid By</th><th>Date</th>'
                    + (res.can_delete ? '<th>Action</th>' : '')
                    + '</tr></thead><tbody>';

                if (!res.payments.length) {
                    html += '<tr><td colspan="' + colCount + '" class="text-center text-muted">No payments recorded.</td></tr>';
                } else {
                    $.each(res.payments, function (i, p) {
                        var actionCell = '';
                        if (res.can_delete) {
                            var delUrl = paymentDeleteUrlTemplate.replace('__ID__', p.id);
                            actionCell = '<td>'
                                + '<form method="POST" action="' + delUrl + '" class="d-inline" '
                                + 'onsubmit="return confirm(\'Delete this payment?\')">'
                                + '<input type="hidden" name="_token" value="' + csrfToken + '">'
                                + '<input type="hidden" name="_method" value="DELETE">'
                                + '<button type="submit" class="btn btn-xs btn-danger"><i class="fas fa-trash"></i></button>'
                                + '</form></td>';
                        }
                        html += '<tr>'
                            + '<td>' + (i + 1) + '</td>'
                            + '<td><span class="badge badge-' + (p.pay_type === 'Own' ? 'primary' : 'secondary') + '">' + p.pay_type + '</span></td>'
                            + '<td><strong>৳' + p.amount + '</strong></td>'
                            + '<td>' + p.note + '</td>'
                            + '<td>' + p.created_by + '</td>'
                            + '<td>' + p.date + '</td>'
                            + actionCell
                            + '</tr>';
                    });
                }
                html += '</tbody></table></div>';
                $('#payHistoryRealIpContent').html(html);
            })
            .fail(function () {
                $('#payHistoryRealIpContent').html('<div class="alert alert-danger">Failed to load payment history.</div>');
            });
    });

});
</script>
@endsection

@include('partials.finance-sticky-table')
@include('partials.approve-comment-modal')