@extends('layouts.app')

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

@section('css')
<style>
    .mpesa-pos-btn {
        padding: 20px 15px;
        border: 2px solid #ddd;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s;
        background: #fff;
        display: block;
        width: 100%;
    }
    .mpesa-pos-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .mpesa-pos-btn.active { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .mpesa-pos-btn .icon { font-size: 32px; font-weight: 800; margin-bottom: 5px; }
    .mpesa-pos-btn .label-text { font-size: 16px; font-weight: 700; }
    .mpesa-pos-btn .desc { font-size: 12px; color: #94a3b8; margin-top: 3px; }
    .mpesa-pos-btn .journal { font-size: 11px; font-family: monospace; margin-top: 5px; }

    .mpesa-pos-btn.deposit { border-color: #00a650; }
    .mpesa-pos-btn.deposit .icon, .mpesa-pos-btn.deposit .label-text { color: #00a650; }
    .mpesa-pos-btn.deposit.active { background: #f0fdf4; }

    .mpesa-pos-btn.withdrawal { border-color: #e8363d; }
    .mpesa-pos-btn.withdrawal .icon, .mpesa-pos-btn.withdrawal .label-text { color: #e8363d; }
    .mpesa-pos-btn.withdrawal.active { background: #fef2f2; }

    .mpesa-pos-btn.float { border-color: #2970ff; }
    .mpesa-pos-btn.float .icon, .mpesa-pos-btn.float .label-text { color: #2970ff; }
    .mpesa-pos-btn.float.active { background: #eff6ff; }

    .amount-input {
        font-size: 36px;
        font-weight: 800;
        text-align: center;
        border: none;
        border-bottom: 3px solid #e2e8f0;
        background: transparent;
        width: 100%;
        padding: 10px;
        outline: none;
    }
    .amount-input:focus { border-bottom-color: #00a650; }

    .quick-amount {
        display: inline-block;
        padding: 6px 16px;
        border: 1.5px solid #e2e8f0;
        border-radius: 20px;
        background: #fff;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        margin: 3px;
        transition: all 0.1s;
    }
    .quick-amount:hover, .quick-amount.active { background: #00a650; color: #fff; border-color: #00a650; }

    .shift-stat {
        text-align: center;
        padding: 10px;
        background: #f8fafc;
        border-radius: 8px;
    }
    .shift-stat .val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .shift-stat .lbl { font-size: 11px; color: #94a3b8; text-transform: uppercase; font-weight: 600; }

    .contact-search-results {
        position: absolute;
        z-index: 999;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        max-height: 200px;
        overflow-y: auto;
        width: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        display: none;
    }
    .contact-search-results .item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 13px;
        border-bottom: 1px solid #f1f5f9;
    }
    .contact-search-results .item:hover { background: #f0fdf4; }
    .contact-search-results .item .name { font-weight: 600; }
    .contact-search-results .item .phone { color: #64748b; font-size: 12px; }

    .txn-list-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
    }
</style>
@endsection

@section('content')

<section class="content-header" style="padding-bottom: 5px;">
    <h1>
        <i class="fas fa-cash-register"></i> M-Pesa Cashier
        <small>{{ Auth::user()->first_name }} — {{ now()->format('D, d M') }}</small>
    </h1>
</section>

<section class="content">
    <div class="row">

        {{-- LEFT: Transaction Entry --}}
        <div class="col-md-7">

            {{-- Type Selection --}}
            <div class="row" style="margin-bottom: 15px;">
                <div class="col-xs-4">
                    <button class="mpesa-pos-btn deposit" onclick="selectType('deposit', this)">
                        <div class="icon">↓</div>
                        <div class="label-text">Deposit</div>
                        <div class="desc">Customer → Till</div>
                        <div class="journal" style="color:#00a650;">DR: M-Pesa  CR: Sales</div>
                    </button>
                </div>
                <div class="col-xs-4">
                    <button class="mpesa-pos-btn withdrawal" onclick="selectType('withdrawal', this)">
                        <div class="icon">↑</div>
                        <div class="label-text">Withdraw</div>
                        <div class="desc">Cash in, M-Pesa out</div>
                        <div class="journal" style="color:#e8363d;">DR: Cash  CR: M-Pesa</div>
                    </button>
                </div>
                <div class="col-xs-4">
                    <button class="mpesa-pos-btn float" onclick="selectType('float', this)">
                        <div class="icon">⟳</div>
                        <div class="label-text">Float</div>
                        <div class="desc">Cash → M-Pesa</div>
                        <div class="journal" style="color:#2970ff;">DR: M-Pesa  CR: Cash</div>
                    </button>
                </div>
            </div>

            {{-- Entry Form --}}
            <div class="box box-success" id="entryForm" style="display:none;">
                <div class="box-header with-border">
                    <h3 class="box-title" id="formTitle">Record Transaction</h3>
                </div>
                <div class="box-body">
                    <input type="hidden" id="txn_type" value="">

                    {{-- Amount --}}
                    <div style="text-align:center; margin-bottom: 15px;">
                        <label style="font-size:13px; color:#64748b;">AMOUNT (KES)</label>
                        <input type="number" id="txn_amount" class="amount-input" placeholder="0" autofocus>
                    </div>

                    {{-- Quick Amounts --}}
                    <div style="text-align:center; margin-bottom: 20px;">
                        @foreach([50, 100, 200, 500, 1000, 2000, 5000, 10000] as $amt)
                            <span class="quick-amount" onclick="setQuickAmount({{ $amt }}, this)">
                                {{ $amt >= 1000 ? ($amt/1000).'K' : $amt }}
                            </span>
                        @endforeach
                    </div>

                    <div class="row">
                        {{-- Phone --}}
                        <div class="col-md-6" id="phoneField">
                            <div class="form-group">
                                <label>Phone Number</label>
                                <input type="tel" id="txn_phone" class="form-control" placeholder="0712345678">
                            </div>
                        </div>

                        {{-- M-Pesa Code --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>M-Pesa Code <small class="text-muted">(optional)</small></label>
                                <input type="text" id="txn_mpesa_code" class="form-control" 
                                       placeholder="e.g. SLK4XYZ9AB" style="text-transform:uppercase; font-family:monospace;">
                            </div>
                        </div>
                    </div>

                    {{-- Contact Search --}}
                    <div class="form-group" id="contactField" style="position:relative;">
                        <label>Link to Customer <small class="text-muted">(optional — search by name or phone)</small></label>
                        <input type="text" id="contact_search" class="form-control" placeholder="Search customer..."
                               autocomplete="off">
                        <input type="hidden" id="txn_contact_id" value="">
                        <div id="contactSearchResults" class="contact-search-results"></div>
                        <div id="selectedContact" style="display:none; margin-top:5px;">
                            <span class="label label-success" id="selectedContactName"></span>
                            <a href="#" onclick="clearContact()" style="margin-left:5px; font-size:12px;">✕ Clear</a>
                        </div>
                    </div>

                    {{-- Note --}}
                    <div class="form-group">
                        <label>Note <small class="text-muted">(optional)</small></label>
                        <input type="text" id="txn_note" class="form-control" placeholder="Optional note">
                    </div>

                    {{-- Submit --}}
                    <button id="submitBtn" class="btn btn-success btn-lg btn-block" onclick="submitTransaction()" style="padding: 14px; font-size: 16px;">
                        <i class="fas fa-check"></i> Record Transaction
                    </button>
                </div>
            </div>
        </div>

        {{-- RIGHT: Shift Summary --}}
        <div class="col-md-5">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fas fa-clock"></i> Shift Summary — Today</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="shift-stat">
                                <div class="val" style="color:#00a650;" id="shiftDeposits">{{ number_format($shiftSummary['deposits']) }}</div>
                                <div class="lbl">Deposits</div>
                                <div style="font-size:11px; color:#94a3b8;" id="shiftDepositCount">{{ $shiftSummary['deposit_count'] }} txns</div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="shift-stat">
                                <div class="val" style="color:#e8363d;" id="shiftWithdrawals">{{ number_format($shiftSummary['withdrawals']) }}</div>
                                <div class="lbl">Withdrawals</div>
                                <div style="font-size:11px; color:#94a3b8;" id="shiftWithdrawalCount">{{ $shiftSummary['withdrawal_count'] }} txns</div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="shift-stat">
                                <div class="val" style="color:#2970ff;" id="shiftFloats">{{ number_format($shiftSummary['floats']) }}</div>
                                <div class="lbl">Float</div>
                                <div style="font-size:11px; color:#94a3b8;" id="shiftFloatCount">{{ $shiftSummary['float_count'] }} txns</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Recent Transactions --}}
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title"><i class="fas fa-history"></i> Recent</h3>
                </div>
                <div class="box-body" id="recentTxns" style="max-height: 400px; overflow-y: auto;">
                    @forelse($todayTxns->take(15) as $txn)
                        <div class="txn-list-item">
                            @php
                                $colors = ['deposit' => 'success', 'withdrawal' => 'danger', 'float' => 'primary'];
                                $icons  = ['deposit' => '↓', 'withdrawal' => '↑', 'float' => '⟳'];
                            @endphp
                            <span class="label label-{{ $colors[$txn->type] ?? 'default' }}">{{ $icons[$txn->type] ?? '' }}</span>
                            <div style="flex:1; min-width:0;">
                                <div style="font-size:13px; font-weight:600;">{{ $txn->type_label }}</div>
                                <div style="font-size:11px; color:#94a3b8;">
                                    {{ $txn->created_at->format('H:i:s') }}
                                    @if($txn->contact) · {{ $txn->contact->name }} @endif
                                    @if($txn->mpesa_code) · {{ $txn->mpesa_code }} @endif
                                </div>
                            </div>
                            <div style="font-weight:700; font-variant-numeric:tabular-nums; color: {{ $txn->type === 'withdrawal' ? '#e8363d' : '#00a650' }};">
                                {{ $txn->type === 'withdrawal' ? '−' : '+' }}{{ number_format($txn->amount) }}
                            </div>
                        </div>
                    @empty
                        <p class="text-muted text-center" style="padding:20px;">No transactions yet today</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('javascript')
<script>
    var selectedType = null;

    function selectType(type, btn) {
        // Remove active from all
        document.querySelectorAll('.mpesa-pos-btn').forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
        selectedType = type;
        document.getElementById('txn_type').value = type;

        // Show form
        document.getElementById('entryForm').style.display = 'block';

        // Update title and submit button color
        var titles = { deposit: 'Record M-Pesa Deposit', withdrawal: 'Record M-Pesa Withdrawal', float: 'Record Float Top-Up' };
        var colors = { deposit: 'btn-success', withdrawal: 'btn-danger', float: 'btn-primary' };
        document.getElementById('formTitle').innerText = titles[type];

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.className = 'btn btn-lg btn-block ' + colors[type];

        // Hide phone for float
        document.getElementById('phoneField').style.display = type === 'float' ? 'none' : 'block';
        document.getElementById('contactField').style.display = type === 'float' ? 'none' : 'block';

        // Focus amount
        document.getElementById('txn_amount').focus();
    }

    function setQuickAmount(amount, el) {
        document.getElementById('txn_amount').value = amount;
        document.querySelectorAll('.quick-amount').forEach(function(b) { b.classList.remove('active'); });
        el.classList.add('active');
    }

    // Contact search
    var searchTimeout = null;
    document.getElementById('contact_search').addEventListener('input', function() {
        var term = this.value.trim();
        clearTimeout(searchTimeout);
        if (term.length < 2) {
            document.getElementById('contactSearchResults').style.display = 'none';
            return;
        }
        searchTimeout = setTimeout(function() {
            $.ajax({
                url: '{{ route("mpesa-agent.search-contacts") }}',
                data: { q: term },
                success: function(contacts) {
                    var html = '';
                    contacts.forEach(function(c) {
                        html += '<div class="item" onclick="pickContact(' + c.id + ', \'' + c.name.replace(/'/g, "\\'") + '\', \'' + (c.mobile || '') + '\')">';
                        html += '<span class="name">' + c.name + '</span>';
                        if (c.mobile) html += ' <span class="phone">' + c.mobile + '</span>';
                        html += '</div>';
                    });
                    if (contacts.length === 0) html = '<div class="item text-muted">No customers found</div>';
                    var results = document.getElementById('contactSearchResults');
                    results.innerHTML = html;
                    results.style.display = 'block';
                }
            });
        }, 300);
    });

    function pickContact(id, name, phone) {
        document.getElementById('txn_contact_id').value = id;
        document.getElementById('selectedContactName').innerText = name;
        document.getElementById('selectedContact').style.display = 'block';
        document.getElementById('contact_search').value = '';
        document.getElementById('contactSearchResults').style.display = 'none';
        // Auto-fill phone if empty
        if (phone && !document.getElementById('txn_phone').value) {
            document.getElementById('txn_phone').value = phone;
        }
    }

    function clearContact() {
        document.getElementById('txn_contact_id').value = '';
        document.getElementById('selectedContact').style.display = 'none';
        return false;
    }

    // Hide search results on click outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('#contactField')) {
            document.getElementById('contactSearchResults').style.display = 'none';
        }
    });

    function submitTransaction() {
        var amount = parseFloat(document.getElementById('txn_amount').value);
        if (!selectedType || !amount || amount <= 0) {
            toastr.error('Select a type and enter a valid amount');
            return;
        }

        var data = {
            type: selectedType,
            amount: amount,
            phone: document.getElementById('txn_phone').value,
            mpesa_code: document.getElementById('txn_mpesa_code').value,
            contact_id: document.getElementById('txn_contact_id').value || null,
            note: document.getElementById('txn_note').value,
        };

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Recording...';

        $.ajax({
            url: '{{ route("mpesa-agent.store") }}',
            method: 'POST',
            data: data,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.msg);
                    // Reset form
                    document.getElementById('txn_amount').value = '';
                    document.getElementById('txn_phone').value = '';
                    document.getElementById('txn_mpesa_code').value = '';
                    document.getElementById('txn_note').value = '';
                    clearContact();
                    document.querySelectorAll('.quick-amount').forEach(function(b) { b.classList.remove('active'); });

                    // Reload page to update shift summary and recent txns
                    setTimeout(function() { location.reload(); }, 500);
                }
            },
            error: function(xhr) {
                var msg = 'Error recording transaction';
                if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                toastr.error(msg);
            },
            complete: function() {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-check"></i> Record Transaction';
            }
        });
    }
</script>
@endsection