@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;">Core Rent</h3>
                            <div class="card-tools">
                                @can('core-rent-history')
                                    <a href="{{ route('manager-finance-log.index', ['type' => 'CoreRent']) }}"
                                        class="btn btn-sm btn-secondary mr-1">
                                        <i class="fas fa-list-alt"></i> Edit &amp; Delete Log
                                    </a>
                                @endcan
                                @can('core-rent-create')
                                    <a href="{{ route('core-rent.create') }}" class="btn btn-sm btn-primary">
                                        <i class="fa fa-plus-circle"></i> Add New
                                    </a>
                                @endcan
                            </div>
                        </div>
                        <div class="card-body py-2">

                            @if (session('success_message'))
                                <div class="alert alert-success">{{ session('success_message') }}</div>
                            @endif
                            @if (session('error_message'))
                                <div class="alert alert-danger">{{ session('error_message') }}</div>
                            @endif

                            <form method="GET" action="{{ route('core-rent.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="filterReseller" 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-3 mb-1 ml-auto 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'))
                                            <a href="{{ route('core-rent.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">
                                    @php
                                        // "Billable" grows on its own: rent × periods elapsed since start_date.
                                        $grandRentPerPeriod = (float) $coreRents->sum('rent_amount');
                                        $grandRent = (float) $coreRents->sum('total_billable');
                                        $grandPaid = (float) $coreRents->sum('payments_sum_amount');
                                        // Sum each rent's own clamped remaining so an overpaid rent can't cancel real dues on others.
                                        $grandRemaining = (float) $coreRents->sum('remaining_due');
                                    @endphp
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Manager</th>
                                            <th>POP</th>
                                            <th>Title</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                            <th>Status</th>
                                            <th class="text-right">Rent / Period (৳)</th>
                                            <th class="text-right">Billed Till Now (৳)</th>
                                            <th class="text-right">Total Paid (৳)</th>
                                            <th class="text-right">Due (৳)</th>
                                            <th>Action</th>
                                        </tr>
                                        {{-- The Total row lives in <thead>, above the rows: a header row is
                                             never sorted or paginated with the data, and it pins under the
                                             sticky header. --}}
                                        <tr class="total-row" style="font-weight:bold;background:#f4f6f9;">
                                            <td colspan="7" class="text-right">Total</td>
                                            <td class="text-right">{{ number_format($grandRentPerPeriod, 2) }}</td>
                                            <td class="text-right">{{ number_format($grandRent, 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 ($coreRents 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>
                                                    {{ $item->title }}
                                                    @if ($item->location)
                                                        <br><small class="text-muted">{{ $item->location }}</small>
                                                    @endif
                                                    <br><small class="text-muted"><i class="fa fa-user"></i> Added by:
                                                        {{ $item->submittedBy->name ?? ($item->createdBy->name ?? '—') }}</small>
                                                </td>
                                                <td>{{ $item->start_date ? $item->start_date->format('d M Y') : '—' }}</td>
                                                <td>{{ $item->end_date ? $item->end_date->format('d M Y') : '—' }}</td>
                                                <td>
                                                    @include('partials.approval-status', ['item' => $item])
                                                    @include('partials.approval-comment', ['item' => $item])
                                                </td>
                                                <td class="text-right">
                                                    {{ number_format($item->rent_amount, 2) }}
                                                    <br><small class="text-muted text-capitalize">{{ $item->payment_type }}</small>
                                                </td>
                                                <td class="text-right">
                                                    @if ($billable > 0)
                                                        {{ number_format($billable, 2) }}
                                                        @if ($item->payment_type !== 'one-time')
                                                            {{-- A monthly rent's first / last month is charged by days, so it shows a month count. --}}
                                                            <br><small class="text-muted">{{ $item->elapsed_periods }}{{ $item->payment_type === 'monthly' ? ' month(s)' : ' ×' }}
                                                                (till {{ $item->current_period_label }})</small>
                                                        @endif
                                                    @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
                                                        {{-- Nothing billed yet (rejected, or start date not reached) — "Paid" would be misleading. --}}
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                                <td style="white-space:nowrap">
                                                    {{-- Edit stays available after approval: it is how a running rent
                                                         gets its End Date set to stop the recurring charge. Touching an
                                                         approved record needs the extra *-approved permission. --}}
                                                    @php
                                                        $isApproved = $item->status === 'approved';
                                                        $canEditRow = auth()->user()->can('core-rent-edit') && (!$isApproved || auth()->user()->can('core-rent-edit-approved'));
                                                        $canDeleteRow = auth()->user()->can('core-rent-delete') && (!$isApproved || auth()->user()->can('core-rent-delete-approved'));
                                                    @endphp
                                                    @if ($canEditRow)
                                                        <a href="{{ route('core-rent.edit', $item->id) }}"
                                                            class="btn btn-sm btn-primary">Edit</a>
                                                    @endif
                                                    @if ($canDeleteRow)
                                                        <form action="{{ route('core-rent.destroy', $item->id) }}"
                                                            method="POST" class="d-inline"
                                                            onsubmit="return confirm('Delete this record?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit"
                                                                class="btn btn-sm btn-danger">Delete</button>
                                                        </form>
                                                    @endif
                                                    @can('core-rent-approve')
                                                        @include('partials.approval-decision-buttons', [
                                                            'item'  => $item,
                                                            'url'   => route('core-rent.approve', $item->id),
                                                            'label' => 'Core Rent',
                                                        ])
                                                    @endcan
                                                    @if ($item->status === 'approved')
                                                        @can('core-rent-payment')
                                                            <button type="button" class="btn btn-sm btn-warning pay-btn"
                                                                data-id="{{ $item->id }}" data-title="{{ $item->title }}"
                                                                data-rent-amount="{{ number_format($billable, 2) }}"
                                                                data-period="{{ $item->elapsed_periods }} period(s) — till {{ $item->current_period_label }}"
                                                                data-total-paid="{{ number_format($totalPaid, 2) }}"
                                                                data-reseller-id="{{ $item->reseller_id }}"
                                                                data-reseller-name="{{ $item->reseller->name_with_type ?? '' }}"
                                                                data-reseller-type="{{ $item->reseller->reseller_type ?? '' }}">
                                                                <i class="fas fa-money-bill-wave"></i> Pay
                                                            </button>
                                                            @if ($totalPaid > 0)
                                                                <button type="button"
                                                                    class="btn btn-sm btn-info pay-history-btn"
                                                                    data-id="{{ $item->id }}">
                                                                    <i class="fas fa-history"></i>Pay Log
                                                                </button>
                                                            @endif
                                                        @endcan
                                                    @endif
                                                    @can('core-rent-history')
                                                        <a href="{{ route('editLog-history', ['id' => $item->id, 'type' => 'CoreRent']) }}"
                                                            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>

            @can('core-rent-payment')
                {{-- Pay Modal --}}
                <div class="modal fade" id="payModal" 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 — <span id="payModalTitle"></span>
                                </h5>
                                <button type="button" class="close" data-dismiss="modal"
                                    style="color:#fff;"><span>&times;</span></button>
                            </div>
                            <form method="POST" action="" id="payForm">
                                @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="payRentAmount"
                                                        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">Total
                                                        Paid</span>
                                                    <span class="info-box-number text-success" id="payTotalPaid"
                                                        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="payHistoryModal" 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="payHistoryContent">
                                    <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 commissionCheckUrl = "{{ route('core-rent.commission-check') }}";
            var payHistoryUrlTemplate = "{{ route('core-rent.payment-history', ['coreRent' => '__ID__']) }}";
            var payFormUrlTemplate = "{{ route('core-rent.pay', ['coreRent' => '__ID__']) }}";
            var paymentDeleteUrlTemplate = "{{ route('core-rent.payment-delete', ['coreRentPayment' => '__ID__']) }}";
            var csrfToken = "{{ csrf_token() }}";

            // ── Filter: reseller-wise POP cascade (uses existing reseller-pop route) ───
            var resellerPopUrl = "{{ route('reseller-pop') }}";
            var currentPopId   = "{{ request('pop_id') }}";

            function loadFilterPops(resellerId, selectedPopId) {
                var $pop = $('#filterPop');
                $pop.empty().append('<option value="">— All POPs —</option>');

                if (!resellerId) {
                    $pop.trigger('change.select2');
                    return;
                }

                $.get(resellerPopUrl, { reseller: resellerId }, function (data) {
                    $.each(data.popes, function (i, pop) {
                        var sel = (selectedPopId && pop.id == selectedPopId) ? 'selected' : '';
                        $pop.append('<option value="' + pop.id + '" ' + sel + '>' + pop.popname + '</option>');
                    });
                    $pop.trigger('change.select2');
                });
            }

            // Reseller changed → reload POP options (no page reload; filter runs on button click).
            $('#filterReseller').on('change', function () {
                loadFilterPops($(this).val(), null);
            });

            // Populate POP options for the already-selected manager on load.
            if ($('#filterReseller').val()) {
                loadFilterPops($('#filterReseller').val(), currentPopId);
            }

            // ── Pay button ──────────────────────────────────────────────────────────
            $(document).on('click', '.pay-btn', function() {
                var id = $(this).data('id');
                var title = $(this).data('title');
                var rentAmount = $(this).data('rent-amount');
                var totalPaid = $(this).data('total-paid');
                var resellerId = $(this).data('reseller-id');
                var resellerName = $(this).data('reseller-name');
                var resellerType = $(this).data('reseller-type');

                resetPayModal();

                var remaining = parseFloat(String(rentAmount).replace(/,/g, '')) -
                    parseFloat(String(totalPaid).replace(/,/g, ''));
                remaining = Math.max(remaining, 0);

                $('#payModalTitle').text(title);
                $('#payRentAmount').text('৳' + rentAmount);
                $('#payPeriodInfo').text($(this).data('period') || '');
                $('#payTotalPaid').text('৳' + totalPaid);
                $('#payAmount').attr('max', remaining.toFixed(2));
                $('#payForm').attr('action', payFormUrlTemplate.replace('__ID__', id));

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

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

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

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

            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.');
                });
            }

            function resetPayModal() {
                $('#payAmount').val('');
                $('textarea[name="note"]').val('');
                $('#payNoResellerAlert,#payResellerInfo,#balanceInfo,#payFields').hide();
                $('#paySubmitBtn').hide();
                $('#payTypeBadge').text('—');
                $('#payRentAmount').text('—');
                $('#payPeriodInfo').text('');
                $('#payTotalPaid').text('—');
                $('#payResellerName').text('');
                $('#payTypeHidden').val('');
                $('#payResellerIdHidden').val('');
                $('#payModalTitle').text('');
            }

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

                var amount = parseFloat($('#payAmount').val());
                var remaining = parseFloat($('#payAmount').attr('max'));
                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...');
            });

            $('#payModal').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-btn', function() {
                var id = $(this).data('id');

                $('#payHistoryContent').html(
                    '<div class="text-center p-4"><i class="fas fa-spinner fa-spin fa-2x"></i></div>');
                $('#payHistoryModal').modal('show');

                $.get(payHistoryUrlTemplate.replace('__ID__', id))
                    .done(function(res) {
                        var cr = res.core_rent;
                        var html = '<div class="row mb-3 px-3 pt-3">' +
                            '<div class="col-md-4"><strong>Title:</strong> ' + cr.title + '</div>' +
                            '<div class="col-md-4"><strong>Manager:</strong> ' + cr.manager + '</div>' +
                            '<div class="col-md-2"><strong>Rent/Period:</strong> ৳' + cr.rent_amount +
                            '</div>' +
                            '<div class="col-md-2"><strong>Type:</strong> <span class="text-capitalize">' +
                            cr.payment_type + '</span></div>' +
                            '</div>';

                        var colCount = res.can_delete ? 8 : 7;

                        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>Reseller</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>' + p.reseller + '</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>';
                        html +=
                            '<div class="text-right px-3 pb-2"><strong>Total Paid: <span class="text-success">৳' +
                            res.total_paid + '</span></strong></div>';

                        $('#payHistoryContent').html(html);
                    })
                    .fail(function() {
                        $('#payHistoryContent').html(
                            '<div class="alert alert-danger">Failed to load payment history.</div>');
                    });
            });

        });
    </script>
@endsection

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