@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')

    <style>
        /* Visual distinction between amounts (money) and counts */
        .amount {
            direction: ltr;
            font-variant-numeric: tabular-nums;
            color: #0d6efd;
            font-weight: 600;
        }

        .count-badge {
            direction: ltr;
            font-variant-numeric: tabular-nums;
        }

        .card-row-custom {
            display: flex;
            gap: 0.3em;
            align-items: center;
        }
    </style>
@endsection
@include('admin.helper.tittle', ['title' => 'تقرير المدفوعات اليومي'])
@section('content')
    <div class="row mb-3">
        <div class="col-md-3">
            <label>التاريخ</label>
            <input type="date" id="date" class="form-control" value="{{ $date }}">
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button type="button" id="refresh" class="btn btn-primary">تحديث</button>
        </div>
    </div>

    <div class="row" id="paymentsSummary">
        <!-- Transfers -->
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-header bg-secondary text-white">التحويلات</div>
                <div class="card-body">
                    <div class="card-row-custom">USD: <span class="amount" id="transfer_usd">0.00</span></div>
                    <div class="card-row-custom">SYP: <span class="amount" id="transfer_syp">0.00</span></div>
                    <div class="card-row-custom">TRY: <span class="amount" id="transfer_try">0.00</span></div>
                    <div class="card-row-custom">EGP: <span class="amount" id="transfer_egp">0.00</span></div>
                </div>
            </div>
        </div>

        <!-- Refunds -->
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-header bg-info text-white">المسترد</div>
                <div class="card-body">
                    <div class="card-row-custom">USD: <span class="amount" id="refund_usd">0.00</span></div>
                    <div class="card-row-custom">SYP: <span class="amount" id="refund_syp">0.00</span></div>
                    <div class="card-row-custom">TRY: <span class="amount" id="refund_try">0.00</span></div>
                    <div class="card-row-custom">EGP: <span class="amount" id="refund_egp">0.00</span></div>
                </div>
            </div>
        </div>

        <!-- Charges -->
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-header bg-success text-white">الشحن</div>
                <div class="card-body">
                    <div class="card-row-custom">USD: <span class="amount" id="charge_usd">0.00</span></div>
                    <div class="card-row-custom">SYP: <span class="amount" id="charge_syp">0.00</span></div>
                    <div class="card-row-custom">TRY: <span class="amount" id="charge_try">0.00</span></div>
                    <div class="card-row-custom">EGP: <span class="amount" id="charge_egp">0.00</span></div>
                </div>
            </div>
        </div>

        <!-- Orders (purchase) -->
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">الطلبات</div>
                <div class="card-body">
                    <div class="card-row-custom">USD: <span class="amount" id="order_usd">0.00</span></div>
                    <div class="card-row-custom">SYP: <span class="amount" id="order_syp">0.00</span></div>
                    <div class="card-row-custom">TRY: <span class="amount" id="order_try">0.00</span></div>
                    <div class="card-row-custom">EGP: <span class="amount" id="order_egp">0.00</span></div>
                </div>
            </div>
        </div>

        <!-- Withdraw -->
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-header bg-danger text-white">السحب</div>
                <div class="card-body">
                    <div class="card-row-custom">USD: <span class="amount" id="withdraw_usd">0.00</span></div>
                    <div class="card-row-custom">SYP: <span class="amount" id="withdraw_syp">0.00</span></div>
                    <div class="card-row-custom">TRY: <span class="amount" id="withdraw_try">0.00</span></div>
                    <div class="card-row-custom">EGP: <span class="amount" id="withdraw_egp">0.00</span></div>
                </div>
            </div>
        </div>

        <!-- Counts -->
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-header bg-dark text-white">عدد العمليات</div>
                <div class="card-body">
                    <div class="card-row-custom">USD: <span class="badge bg-dark text-white count-badge"
                            id="count_usd">0</span></div>
                    <div class="card-row-custom">SYP: <span class="badge bg-dark text-white count-badge"
                            id="count_syp">0</span></div>
                    <div class="card-row-custom">TRY: <span class="badge bg-dark text-white count-badge"
                            id="count_try">0</span></div>
                    <div class="card-row-custom">EGP: <span class="badge bg-dark text-white count-badge"
                            id="count_egp">0</span></div>
                    <hr>
                    <div>الإجمالي: <span class="badge bg-primary text-white count-badge" id="count_total">0</span></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('vue')
    <script>
        $(function() {
            if (!$('#date').val()) {
                const today = new Date().toISOString().slice(0, 10);
                $('#date').val(today);
            }

            const currencyMap = {
                1: 'usd',
                2: 'syp',
                3: 'try',
                4: 'egp'
            };

            function formatAmount(n) {
                const num = Number(n || 0);
                return num.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function formatCount(n) {
                const num = Number(n || 0);
                return num.toLocaleString('en-US');
            }

            function setMoneyVals(prefix, data) {
                Object.entries(currencyMap).forEach(([cid, key]) => {
                    const val = (data && data[cid]) ? data[cid] : 0;
                    $('#' + prefix + '_' + key).text(formatAmount(val));
                });
            }

            function setCountVals(prefix, data) {
                Object.entries(currencyMap).forEach(([cid, key]) => {
                    const val = (data && data[cid]) ? data[cid] : 0;
                    $('#' + prefix + '_' + key).text(formatCount(val));
                });
            }

            function loadSummary() {
                const date = $('#date').val();
                $.get("{{ route('admin.reports.payments.summary') }}", {
                    date
                }, function(res) {
                    if (!res || !res.success) return;
                    const d = res.data;
                    setMoneyVals('transfer', d.transfer);
                    setMoneyVals('refund', d.refund);
                    setMoneyVals('charge', d.charge);
                    setMoneyVals('order', d.order);
                    setMoneyVals('withdraw', d.withdraw);
                    setCountVals('count', d.count_per_currency);
                    $('#count_total').text(formatCount(d.count_total || 0));
                });
            }

            $('#refresh').on('click', loadSummary);
            $('#date').on('change', loadSummary);

            loadSummary();
        });
    </script>
@endsection