@extends('business::layouts.app')

@section('title', 'Wallet — BizWap')

@push('styles')
<style>
    #transactions-table_wrapper .dt-layout-row:first-child {
        display: none;
    }

    #transactions-table_wrapper .dt-layout-row:last-child {
        margin-top: 0.75rem;
        padding: 0 1rem 0.75rem;
    }

    #transactions-table thead th {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bw-text-muted);
        border-bottom: 1px solid var(--bw-border);
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }

    #transactions-table tbody td {
        padding: 0.85rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--bw-border);
        font-size: 0.875rem;
    }

    #transactions-table tbody tr:last-child td {
        border-bottom: none;
    }

    [data-bs-theme="dark"] #transactions-table thead th {
        background: var(--bw-surface);
    }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">Wallet</h4>
        <p class="text-muted small mb-0">Your balance and transaction history</p>
    </div>
</div>

<div class="row g-4">

    {{-- Balance --}}
    <div class="col-12 col-sm-6 col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4 text-center">
                <p class="text-muted small mb-1 text-uppercase fw-semibold">Current Balance</p>
                <h2 class="fw-bold mb-0 {{ $currentBalance < 0 ? 'text-danger' : 'text-success' }}">
                    ₹{{ number_format($currentBalance, 2) }}
                </h2>
            </div>
        </div>
    </div>

    {{-- Total Spending by Category --}}
    <div class="col-12 col-sm-6 col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <p class="text-muted small mb-3 text-uppercase fw-semibold">Total Spent by Type</p>
                <ul class="list-unstyled mb-0 small">
                    <li class="d-flex justify-content-between py-1 border-bottom">
                        <span>Marketing</span>
                        <span class="fw-semibold text-danger">₹{{ number_format($spending['marketing'], 2) }}</span>
                    </li>
                    <li class="d-flex justify-content-between py-1 border-bottom">
                        <span>Utility</span>
                        <span class="fw-semibold text-danger">₹{{ number_format($spending['utility'], 2) }}</span>
                    </li>
                    <li class="d-flex justify-content-between py-1 border-bottom">
                        <span>Authentication</span>
                        <span class="fw-semibold text-danger">₹{{ number_format($spending['authentication'], 2) }}</span>
                    </li>
                    <li class="d-flex justify-content-between py-1">
                        <span>Service</span>
                        <span class="fw-semibold text-danger">₹{{ number_format($spending['service'], 2) }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Message Pricing --}}
    <div class="col-12 col-sm-6 col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <p class="text-muted small mb-3 text-uppercase fw-semibold">Message Pricing</p>
                @if($pricing)
                    <ul class="list-unstyled mb-0 small">
                        <li class="d-flex justify-content-between py-1 border-bottom">
                            <span>Marketing</span>
                            <span class="fw-semibold">₹{{ number_format($pricing->marketing, 5) }}/msg</span>
                        </li>
                        <li class="d-flex justify-content-between py-1 border-bottom">
                            <span>Utility</span>
                            <span class="fw-semibold">₹{{ number_format($pricing->utility, 5) }}/msg</span>
                        </li>
                        <li class="d-flex justify-content-between py-1 border-bottom">
                            <span>Authentication</span>
                            <span class="fw-semibold">₹{{ number_format($pricing->authentication, 5) }}/msg</span>
                        </li>
                        <li class="d-flex justify-content-between py-1">
                            <span>Service</span>
                            <span class="fw-semibold">₹{{ number_format($pricing->service, 5) }}/msg</span>
                        </li>
                    </ul>
                @else
                    <p class="text-muted mb-0 small">No pricing configured yet.</p>
                @endif
            </div>
        </div>
    </div>

</div>

<div class="card border-0 shadow-sm mt-4">

    {{-- Filter bar --}}
    <div class="card-body border-bottom pb-3">
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <select id="filter-type" class="form-select form-select-sm" style="width: auto;">
                <option value="">All types</option>
                <option value="credit">Credits</option>
                <option value="debit">Debits</option>
            </select>
            <input type="date" id="filter-date-from" class="form-control form-control-sm" style="width: auto;" title="From date">
            <input type="date" id="filter-date-to" class="form-control form-control-sm" style="width: auto;" title="To date">
            <button id="clear-filters" class="btn btn-sm btn-outline-secondary d-none">
                <i class="bi bi-x-lg me-1"></i>Clear
            </button>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="transactions-table" class="table table-hover align-middle mb-0 w-100">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Balance After</th>
                        <th>Notes</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
(function () {
    'use strict';

    const DATATABLE_URL = @json(route('business.wallet.datatable'));

    const today  = new Date();
    const past30 = new Date(today);
    past30.setDate(past30.getDate() - 29);
    const fmt = (d) => d.toISOString().slice(0, 10);

    document.getElementById('filter-date-from').value = fmt(past30);
    document.getElementById('filter-date-to').value   = fmt(today);

    function typeBadge(type) {
        return type === 'credit'
            ? '<span class="badge text-bg-success">Credit</span>'
            : '<span class="badge text-bg-danger">Debit</span>';
    }

    function amountCell(type, amount) {
        const sign = type === 'credit' ? '+' : '-';
        const cls  = type === 'credit' ? 'text-success' : 'text-danger';
        return `<span class="fw-semibold ${cls}">${sign}₹${amount}</span>`;
    }

    function notesCell(row) {
        let html = row.notes ? row.notes : '—';
        if (row.log_id) {
            html += `<br><small class="text-muted">Log #${row.log_id} · ${row.phone}</small>`;
        }
        return html;
    }

    const table = new DataTable('#transactions-table', {
        processing: true,
        serverSide: true,
        ajax: {
            url: DATATABLE_URL,
            data: function (d) {
                d.type      = $('#filter-type').val();
                d.date_from = $('#filter-date-from').val();
                d.date_to   = $('#filter-date-to').val();
            },
        },
        columns: [
            { data: 'date',    orderable: false, render: (val) => `<span class="text-muted">${val}</span>` },
            { data: 'type',    orderable: false, render: (val) => typeBadge(val) },
            { data: null,      orderable: false, render: (row) => amountCell(row.type, row.amount) },
            { data: 'balance', orderable: false, render: (val) => `₹${val}` },
            { data: null,      orderable: false, render: (row) => notesCell(row) },
        ],
        pageLength: 20,
        language: {
            processing:  '<div class="text-muted small py-2">Loading…</div>',
            zeroRecords: '<div class="text-center text-muted py-4"><i class="bi bi-receipt" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No transactions for this period.</p></div>',
            emptyTable:  '<div class="text-center text-muted py-4"><i class="bi bi-receipt" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No transactions yet.</p></div>',
            paginate: { previous: '&lsaquo;', next: '&rsaquo;' },
        },
        dom: 'rtip',
    });

    $('#filter-type, #filter-date-from, #filter-date-to').on('change', function () {
        table.draw();
        syncClearBtn();
    });

    $('#clear-filters').on('click', function () {
        $('#filter-type').val('');
        $('#filter-date-from').val(fmt(past30));
        $('#filter-date-to').val(fmt(today));
        table.draw();
        $(this).addClass('d-none');
    });

    function syncClearBtn() {
        const active = $('#filter-type').val() ||
            $('#filter-date-from').val() !== fmt(past30) ||
            $('#filter-date-to').val()   !== fmt(today);
        $('#clear-filters').toggleClass('d-none', !active);
    }
}());
</script>
@endpush