@extends('vendors.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
    <style>
        .stats-card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stats-card:hover {
            transform: translateY(-5px);
        }

        .profit-amount {
            font-size: 1.5em;
            font-weight: bold;
        }

        .percentage-badge {
            font-size: 0.9em;
        }

        .filter-section {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>
@endsection

@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">المعاملات والأرباح</h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <!-- row -->
    <div id='transactionsPage'>
        <!-- إحصائيات الأرباح -->
        <div class="row mb-4" id="profitStatsRow">
            <div class=" col-6 mx-auto">
                <div class="card stats-card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title text-white">إجمالي الأرباح</h6>
                                <h2 class="profit-amount" id="totalProfit">
                                    <x-lucide-loader-2 class="animate-spin" style="display: none;" id="loadingProfit" />
                                    <span id="totalProfitValue">0</span>
                                </h2>
                                <small><span class="percentage-badge" id="profitPercentage">0%</span> من الإيرادات</small>
                            </div>
                            <div class="align-self-center">
                                <x-lucide-trending-up class="opacity-7" width="48" height="48" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- جدول المعاملات -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mg-b-0">معاملات الأرباح والعمولات</h4>
                            <div>
                                <button type="button" class="btn btn-primary btn-sm" id="refreshStats">
                                    <x-lucide-refresh-cw /> تحديث الإحصائيات
                                </button>
                            </div>
                        </div>

                        <!-- Filters -->
                        <div class="filter-section">
                            <div class="row">
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0 font-weight-bold">المستخدم</label>
                                    <select id="userFilter" class="form-control select2">
                                        <option value="">جميع المستخدمين</option>
                                        @if (Auth::user()->is_vendor && Auth::user()->vendorProfile)
                                            @foreach (Auth::user()->vendorProfile->managedUsers as $user)
                                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                                            @endforeach
                                        @endif
                                        <option value="{{ Auth::user()->id }}">{{ Auth::user()->name }} (أنت)</option>
                                    </select>
                                </div>

                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0 font-weight-bold">رقم الطلب</label>
                                    <input type="number" id="orderIdFilter" class="form-control" placeholder="رقم الطلب">
                                </div>
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0 font-weight-bold">من تاريخ</label>
                                    <input type="date" id="dateFromFilter" class="form-control">
                                </div>
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0 font-weight-bold">إلى تاريخ</label>
                                    <input type="date" id="dateToFilter" class="form-control">
                                </div>
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0 font-weight-bold">&nbsp;</label>
                                    <div class="d-flex">
                                        <button type="button" class="btn btn-success btn-sm mr-1" id="applyFilters">
                                            <x-lucide-filter /> تطبيق
                                        </button>
                                        <button type="button" class="btn btn-secondary btn-sm" id="resetFilters">
                                            <x-lucide-x /> إعادة تعيين
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="transactions" class="table text-md-nowrap table-sm" data-page-length="25">
                                <thead>
                                    <tr>
                                        <th class="wd-5p border-bottom-0">#</th>
                                        <th class="wd-10p border-bottom-0">المستخدم</th>
                                        <th class="wd-8p border-bottom-0">رقم الطلب</th>
                                        <th class="wd-8p border-bottom-0">السعر قبل ربح التاجر</th>
                                        <th class="wd-8p border-bottom-0">الإجمالي</th>
                                        <th class="wd-8p border-bottom-0">نسبة التاجر</th>
                                        <!--<th class="wd-10p border-bottom-0">ربح قبل (إجمالي)</th>-->
                                        <!--<th class="wd-10p border-bottom-0">قيمة الخصومات/الضرائب (النسبة)</th>-->
                                        <th class="wd-10p border-bottom-0">ربح بعد (إجمالي)</th>
                                        <th class="wd-10p border-bottom-0">التاريخ</th>
                                       
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('vendors.transactions.modals.transaction-details')
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2()
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('order_id')) {
                $('#orderIdFilter').val(urlParams.get('order_id'));
            }

            function loadProfitStats() {
                $('#loadingProfit, #loadingAverage').show();
                $('#totalProfitValue, #averageProfitValue').hide();

                $.ajax({
                    url: "{{ route('vendor.transactions.profit-stats') }}",
                    method: 'GET',
                    data: {
                        user: $('#userFilter').val(),
                        type: $('#typeFilter').val(),
                        order_id: $('#orderIdFilter').val(),
                        date_from: $('#dateFromFilter').val(),
                        date_to: $('#dateToFilter').val()
                    },
                    success: function(response) {
                        $('#loadingProfit, #loadingAverage').hide();
                        $('#totalProfitValue, #averageProfitValue').show();

                        if (response.success) {
                            const stats = response.stats;
                            $('#totalProfitValue').text(parseFloat(stats.total_profit));
                            $('#profitPercentage').text(parseFloat(stats.profit_percentage).toFixed(2) +
                                '%');
                        } else {
                            Swal.fire('خطأ', response.error, 'error');
                        }
                    },
                    error: function(xhr) {
                        $('#loadingProfit, #loadingAverage').hide();
                        $('#totalProfitValue, #averageProfitValue').show();
                        let errorMessage = 'حدث خطأ في تحميل الإحصائيات';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMessage = xhr.responseJSON.error;
                        }
                        Swal.fire('خطأ', errorMessage, 'error');
                    }
                });
            }

            let transactionsTable = $('#transactions').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('vendor.transactions.index') }}",
                    data: function(d) {
                        d.user = $('#userFilter').val();
                        d.type = $('#typeFilter').val();
                        d.order_id = $('#orderIdFilter').val();
                        d.date_from = $('#dateFromFilter').val();
                        d.date_to = $('#dateToFilter').val();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'user',
                        name: 'user'
                    },
                    {
                        data: 'order_info',
                        name: 'order_info',
                        orderable: false
                    },
                    {
                        data: 'base_total',
                        name: 'base_total',
                        orderable: false
                    },
                    {
                        data: 'final_price',
                        name: 'final_price'
                    },
                    {
                        data: 'vendor_percent',
                        name: 'vendor_percent'
                    },
                    
                    {
                        data: 'vendor_profit',
                        name: 'vendor_profit',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    }
                    
                ],
                responsive: true,
                autoWidth: false,
                order: [
                    [0, 'desc']
                ]
            });

            $('#applyFilters').click(function() {
                transactionsTable.ajax.reload();
                loadProfitStats();
            });

            $('#resetFilters').click(function() {
                $('#userFilter, #typeFilter, #orderIdFilter').val('');
                $('#dateFromFilter, #dateToFilter').val('');
                transactionsTable.ajax.reload();
                loadProfitStats();
                window.history.replaceState({}, document.title, window.location.pathname);
            });

            $('#refreshStats').click(function() {
                loadProfitStats();
                transactionsTable.ajax.reload();
            });

            $(document).on('click', '.show-transaction', function() {
                let transactionId = $(this).attr('value');
                showTransactionDetails(transactionId);
            });

            function showTransactionDetails(transactionId) {
                $.ajax({
                    url: "{{ route('vendor.transactions.show') }}",
                    method: 'POST',
                    data: {
                        id: transactionId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            populateTransactionDetails(response.transaction);
                            $('#transactionDetailsModal').modal('show');
                        } else {
                            Swal.fire('خطأ', response.error, 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('خطأ', 'حدث خطأ في تحميل تفاصيل المعاملة', 'error');
                    }
                });
            }

            function populateTransactionDetails(t) {
                $('#transactionId').text(t.id);
                $('#transactionUser').text(t.user);
                $('#transactionVendorPercent').text(t.vendor_percent + '%');
                $('#transactionVendorProfit').text(t.vendor_profit);
                // new breakdown fields (optional to display in modal UI later)
                $('#transactionUserTax').text(t.price_after_user_tax || '—');
                $('#transactionGameTax').text(t.price_after_game_tax || '—');
                $('#transactionProductTax').text(t.price_after_product_tax || '—');
                $('#transactionUserDiscount').text(t.price_after_user_discount || '—');
                $('#transactionGameDiscount').text(t.price_after_game_discount || '—');
                $('#transactionProductDiscount').text(t.price_after_product_discount || '—');
                $('#transactionFinalPrice').text(t.final_price || '—');
                $('#transactionTotalPrice').text(t.total_price || '—');
                $('#transactionCurrency').text(t.currency || '—');
                $('#transactionOrderId').text(t.order_id || '—');
                $('#transactionCreatedAt').text(t.created_at);
            }

            loadProfitStats();

            if (urlParams.get('order_id')) {
                setTimeout(function() {
                    transactionsTable.ajax.reload();
                    loadProfitStats();
                }, 500);
            }
        });
    </script>
@endsection