@extends('layouts.app')

@section('title', 'M-Pesa Agent — Reconciliation')

@section('content')

<section class="content-header">
    <h1>M-Pesa Agent <small>Daily Reconciliation</small></h1>
</section>

<section class="content">

    {{-- Date Selector --}}
    <div class="box box-solid" style="border-top: 3px solid #f59e0b;">
        <div class="box-body">
            <form method="GET" action="{{ route('mpesa-agent.reconcile') }}" class="form-inline">
                <div class="form-group">
                    <label>Reconciliation Date:</label>
                    <input type="date" name="date" value="{{ $date }}" class="form-control input-sm" />
                </div>
                <button type="submit" class="btn btn-warning btn-sm" style="margin-left: 10px;">
                    <i class="fas fa-calendar"></i> Load
                </button>
                <a href="{{ route('mpesa-agent.reconcile') }}" class="btn btn-default btn-sm" style="margin-left: 5px;">Today</a>
            </form>
        </div>
    </div>

    <div class="row">

        {{-- Opening Balances --}}
        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fas fa-wallet"></i> Opening Balances — {{ $date }}</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>M-Pesa Opening Balance (KES)</label>
                                <input type="number" id="opening_mpesa" class="form-control" 
                                       value="{{ $summary['opening_mpesa'] }}" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Cash Opening Balance (KES)</label>
                                <input type="number" id="opening_cash" class="form-control" 
                                       value="{{ $summary['opening_cash'] }}" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-4" style="padding-top: 25px;">
                            <button class="btn btn-success" onclick="saveBalances()">
                                <i class="fas fa-save"></i> Save Opening Balances
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        {{-- M-Pesa Float Reconciliation --}}
        <div class="col-md-6">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fas fa-mobile-alt"></i> M-Pesa Float Reconciliation</h3>
                </div>
                <div class="box-body">
                    <table class="table" style="margin-bottom:0;">
                        <tr>
                            <td>Opening Balance</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                {{ number_format($summary['opening_mpesa']) }}
                            </td>
                        </tr>
                        <tr class="text-success">
                            <td>+ Deposits (Sales)</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                +{{ number_format($summary['deposits']) }}
                            </td>
                        </tr>
                        <tr class="text-danger">
                            <td>− Withdrawals (Agent)</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                −{{ number_format($summary['withdrawals']) }}
                            </td>
                        </tr>
                        <tr style="color: #2970ff;">
                            <td>+ Float Top-Ups</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                +{{ number_format($summary['floats']) }}
                            </td>
                        </tr>
                        <tr style="border-top: 3px solid #0f172a; font-weight:800; font-size:16px;">
                            <td>Expected Closing</td>
                            <td class="text-right" style="font-variant-numeric:tabular-nums;">
                                KES {{ number_format($summary['closing_mpesa']) }}
                            </td>
                        </tr>
                    </table>

                    <hr style="margin: 10px 0;">
                    <div class="form-group">
                        <label>Actual M-Pesa Balance <small class="text-muted">(from SMS / App)</small></label>
                        <input type="number" id="actual_mpesa" class="form-control" 
                               value="{{ $summary['actual_mpesa'] }}" placeholder="Enter actual balance" step="0.01">
                    </div>

                    <div id="mpesaDiffBox" style="display:none; padding:10px 15px; border-radius:6px; font-weight:600; text-align:center; font-size:14px; margin-top:10px;"></div>
                </div>
            </div>
        </div>

        {{-- Cash Reconciliation --}}
        <div class="col-md-6">
            <div class="box" style="border-top: 3px solid #f59e0b;">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fas fa-money-bill-wave"></i> Cash Reconciliation</h3>
                </div>
                <div class="box-body">
                    <table class="table" style="margin-bottom:0;">
                        <tr>
                            <td>Opening Cash</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                {{ number_format($summary['opening_cash']) }}
                            </td>
                        </tr>
                        <tr class="text-success">
                            <td>+ Withdrawals (cash received)</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                +{{ number_format($summary['withdrawals']) }}
                            </td>
                        </tr>
                        <tr class="text-danger">
                            <td>− Float Top-Ups (cash used)</td>
                            <td class="text-right" style="font-weight:600; font-variant-numeric:tabular-nums;">
                                −{{ number_format($summary['floats']) }}
                            </td>
                        </tr>
                        <tr style="border-top: 3px solid #0f172a; font-weight:800; font-size:16px;">
                            <td>Expected Closing</td>
                            <td class="text-right" style="font-variant-numeric:tabular-nums;">
                                KES {{ number_format($summary['closing_cash']) }}
                            </td>
                        </tr>
                    </table>

                    <hr style="margin: 10px 0;">
                    <div class="form-group">
                        <label>Actual Cash Count</label>
                        <input type="number" id="actual_cash" class="form-control" 
                               value="{{ $summary['actual_cash'] }}" placeholder="Count your cash" step="0.01">
                    </div>

                    <div id="cashDiffBox" style="display:none; padding:10px 15px; border-radius:6px; font-weight:600; text-align:center; font-size:14px; margin-top:10px;"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Save Actuals --}}
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-warning btn-lg btn-block" onclick="saveBalances()" style="padding:14px; margin-bottom:15px;">
                <i class="fas fa-check-double"></i> Save Reconciliation
            </button>
        </div>
    </div>

    {{-- Troubleshoot --}}
    <div id="troubleshootBox" style="display:none;">
        <div class="callout callout-warning">
            <h4><i class="fas fa-exclamation-triangle"></i> Mismatch Detected — Check These:</h4>
            <ul>
                <li><strong>Missing entry</strong> — a transaction wasn't recorded in the system</li>
                <li><strong>Wrong type selected</strong> — deposit entered as withdrawal or vice versa</li>
                <li><strong>Wrong amount</strong> — typo during entry</li>
                <li><strong>Pending M-Pesa</strong> — transaction hasn't settled yet</li>
            </ul>
            <p>
                <a href="{{ route('mpesa-agent.transactions', ['from' => $date, 'to' => $date]) }}" class="btn btn-sm btn-default">
                    <i class="fas fa-search"></i> Review Transactions for {{ $date }}
                </a>
            </p>
        </div>
    </div>

</section>

@endsection

@section('javascript')
<script>
    var closingMpesa = {{ $summary['closing_mpesa'] }};
    var closingCash = {{ $summary['closing_cash'] }};

    function checkDifferences() {
        var hasMismatch = false;

        // M-Pesa
        var actualMpesa = document.getElementById('actual_mpesa').value;
        var mpesaBox = document.getElementById('mpesaDiffBox');
        if (actualMpesa !== '' && actualMpesa !== null) {
            var diff = parseFloat(actualMpesa) - closingMpesa;
            mpesaBox.style.display = 'block';
            if (Math.abs(diff) < 1) {
                mpesaBox.style.background = '#e8f9ef';
                mpesaBox.style.color = '#00a650';
                mpesaBox.innerHTML = '✓ Balanced — No discrepancy';
            } else {
                mpesaBox.style.background = '#fef2f2';
                mpesaBox.style.color = '#e8363d';
                mpesaBox.innerHTML = '⚠ Discrepancy: KES ' + Math.abs(diff).toLocaleString() + (diff > 0 ? ' over' : ' short');
                hasMismatch = true;
            }
        } else {
            mpesaBox.style.display = 'none';
        }

        // Cash
        var actualCash = document.getElementById('actual_cash').value;
        var cashBox = document.getElementById('cashDiffBox');
        if (actualCash !== '' && actualCash !== null) {
            var diff = parseFloat(actualCash) - closingCash;
            cashBox.style.display = 'block';
            if (Math.abs(diff) < 1) {
                cashBox.style.background = '#e8f9ef';
                cashBox.style.color = '#00a650';
                cashBox.innerHTML = '✓ Balanced — No discrepancy';
            } else {
                cashBox.style.background = '#fef2f2';
                cashBox.style.color = '#e8363d';
                cashBox.innerHTML = '⚠ Discrepancy: KES ' + Math.abs(diff).toLocaleString() + (diff > 0 ? ' over' : ' short');
                hasMismatch = true;
            }
        } else {
            cashBox.style.display = 'none';
        }

        document.getElementById('troubleshootBox').style.display = hasMismatch ? 'block' : 'none';
    }

    document.getElementById('actual_mpesa').addEventListener('input', checkDifferences);
    document.getElementById('actual_cash').addEventListener('input', checkDifferences);

    // Check on load if values exist
    checkDifferences();

    function saveBalances() {
        var data = {
            date: '{{ $date }}',
            opening_mpesa: document.getElementById('opening_mpesa').value || 0,
            opening_cash: document.getElementById('opening_cash').value || 0,
            actual_mpesa: document.getElementById('actual_mpesa').value || null,
            actual_cash: document.getElementById('actual_cash').value || null,
        };

        $.ajax({
            url: '{{ route("mpesa-agent.save-balances") }}',
            method: 'POST',
            data: data,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.msg);
                    // Reload to recalculate with new opening balances
                    setTimeout(function() { location.reload(); }, 800);
                }
            },
            error: function() {
                toastr.error('Failed to save balances');
            }
        });
    }
</script>
@endsection