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

@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('title', 'Wallet — ' . $business->name . ' — BizWap Admin')

@section('content')
<div class="d-flex align-items-center mb-4 gap-3">
    <a href="{{ route('admin.businesses.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div>
        <h4 class="fw-bold mb-0">Wallet — {{ $business->name }}</h4>
        <p class="text-muted small mb-0">{{ $business->phone }}</p>
    </div>
</div>

{{-- Success flash --}}
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
    <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row g-4">

    {{-- Balance + top-up --}}
    <div class="col-12 col-lg-4">

        <div class="card border-0 shadow-sm mb-4">
            <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 class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h6 class="fw-semibold mb-4 pb-2 border-bottom">
                    <i class="bi bi-plus-circle me-2 text-success"></i>Add Balance
                </h6>

                <form method="POST" action="{{ route('admin.businesses.transactions.store', $business) }}" novalidate>
                    @csrf

                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount (₹) <span class="text-danger">*</span></label>
                        <input type="number" id="amount" name="amount" step="0.01" min="0.01"
                               class="form-control @error('amount') is-invalid @enderror"
                               value="{{ old('amount') }}" placeholder="e.g. 500.00" required>
                        @error('amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="notes" class="form-label">Notes</label>
                        <input type="text" id="notes" name="notes"
                               class="form-control @error('notes') is-invalid @enderror"
                               value="{{ old('notes') }}" placeholder="e.g. April top-up">
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-success w-100">
                        <i class="bi bi-plus-lg me-1"></i>Add Balance
                    </button>
                </form>
            </div>
        </div>

    </div>

    {{-- Transaction history --}}
    <div class="col-12 col-lg-8">
        <div class="card border-0 shadow-sm">

            {{-- 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>
                                <th>By</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection

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

    const DATATABLE_URL = @json(route('admin.businesses.transactions.datatable', $business));

    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) },
            { data: 'by',      orderable: false, render: (val) => `<span class="text-muted">${val}</span>` },
        ],
        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