@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
    <style>
        .card-row-custom {
            display: flex;
            gap: 0.5em;
            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="summaryCards">
        <div class="col-md-3 mb-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="totalOrders">0</h4>
                            <small>إجمالي الطلبات</small>
                        </div>
                        <x-lucide-list width="32" height="32" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="rejectedOrders">0</h4>
                            <small>الطلبات المرفوضة</small>
                        </div>
                        <x-lucide-x width="32" height="32" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="acceptedOrders">0</h4>
                            <small>الطلبات المقبولة</small>
                            <div class="small mt-2">
                                <div class="card-row-custom">USD: <span id="accepted_usd">0</span></div>
                                <div class="card-row-custom">SYP: <span id="accepted_syp">0</span></div>
                                <div class="card-row-custom">TRY: <span id="accepted_try">0</span></div>
                                <div class="card-row-custom">EGP: <span id="accepted_egp">0</span></div>
                            </div>
                        </div>
                        <x-lucide-check width="32" height="32" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <small>مبيعات اليوم</small>
                            <div class="mt-1">
                                <div class="card-row-custom">USD: <span id="sales_usd">0</span></div>
                                <div class="card-row-custom">SYP: <span id="sales_syp">0</span></div>
                                <div class="card-row-custom">TRY: <span id="sales_try">0</span></div>
                                <div class="card-row-custom">EGP: <span id="sales_egp">0</span></div>
                            </div>
                        </div>
                        <x-lucide-dollar-sign width="32" height="32" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="mb-0" id="newUsers">0</h4>
                            <small>مستخدمون جدد</small>
                        </div>
                        <x-lucide-user-plus width="32" height="32" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header pb-0 d-flex justify-content-between align-items-center">
            <h4 class="card-title mg-b-0">مبيعات الألعاب حسب اليوم</h4>
            <small class="text-muted">إجمالي وعدد المقبول لكل عملة</small>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table" id="gamesTable">
                    <thead>
                        <tr>
                            <th>اللعبة</th>
                            <th>إجمالي الطلبات</th>
                            <th>إجمالي المقبول</th>
                            <th>إجمالي المرفوض</th>
                            <th>مقبول USD</th>
                            <th>مقبول SYP</th>
                            <th>مقبول TRY</th>
                            <th>مقبول EGP</th>
                            <th>مبيعات USD</th>
                            <th>مبيعات SYP</th>
                            <th>مبيعات TRY</th>
                            <th>مبيعات EGP</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

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

            function loadSummary() {
                const date = $('#date').val();
                $.get("{{ route('admin.reports.orders.summary') }}", {
                    date
                }, function(res) {
                    if (!res || !res.success) return;
                    const d = res.data;
                    $('#totalOrders').text(d.total_orders);
                    $('#rejectedOrders').text(d.rejected_orders);
                    $('#acceptedOrders').text(d.accepted_orders);
                    $('#accepted_usd').text(d.accepted_per_currency[1] || 0);
                    $('#accepted_syp').text(d.accepted_per_currency[2] || 0);
                    $('#accepted_try').text(d.accepted_per_currency[3] || 0);
                    $('#accepted_egp').text(d.accepted_per_currency[4] || 0);
                    $('#sales_usd').text(d.sales_per_currency[1] || 0);
                    $('#sales_syp').text(d.sales_per_currency[2] || 0);
                    $('#sales_try').text(d.sales_per_currency[3] || 0);
                    $('#sales_egp').text(d.sales_per_currency[4] || 0);
                    $('#newUsers').text(d.new_users);
                });
            }

            const table = initUrlSyncedDatatable({
                selector: '#gamesTable',
                url: "{{ route('admin.reports.orders.table') }}",
                columns: ['game', 'total', 'accepted_total', 'rejected_total', 'cnt_usd', 'cnt_syp',
                    'cnt_try', 'cnt_egp', 'sales_usd', 'sales_syp', 'sales_try', 'sales_egp'
                ],
                filters: ['date'],
                refreshSelector: '#refresh',
                extraOptions: {
                    order: [
                        [1, 'desc']
                    ]
                }
            });

            // Initial load 
            loadSummary();

            $('#refresh').on('click', function() {
                loadSummary();
            });

            $('#date').on('change', function() {
                loadSummary();
            });
        });
    </script>
@endsection