@extends('vendors.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@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='ordersPage'>
        <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>

                        <!-- Filters -->
                        <div class="row">
                            <div class="col-lg-3 mt-2">
                                <p class="mt-0">المستخدم</p>
                                <select id="userFilter" class="form-control">
                                    <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-3 mt-2">
                                <p class="mt-0">المنتج</p>
                                <input type="text" id="productFilter" class="form-control" placeholder="اسم المنتج">
                            </div>
                            <div class="col-lg-3 mt-2">
                                <p class="mt-0">اللعبة</p>
                                <input type="text" id="gameFilter" class="form-control" placeholder="اسم اللعبة">
                            </div>
                            <div class="col-lg-3 mt-2">
                                <p class="mt-0">رقم الطلب</p>
                                <input type="number" id="orderIdFilter" class="form-control" placeholder="رقم الطلب">
                            </div>
                        </div>

                        <!-- Statistics Cards -->
                        <div class="row mt-3">
                            <div class="col-lg-3">
                                <div class="card bg-primary-gradient">
                                    <div class="card-body">
                                        <div class="counter-status d-flex md-mb-0">
                                            <div class="counter-icon text-warning">
                                                <x-lucide-shopping-bag />
                                            </div>
                                            <div class="mr-auto">
                                                <h5 class="tx-13 tx-white-8 mb-3">إجمالي الطلبات</h5>
                                                <x-lucide-loader-2 class="animate-spin" style="color: white;" width="8" height="8"
                                                    v-show="!statsLoaded" />
                                                <h6 class="counter mb-0 text-white" v-show="statsLoaded">
                                                    @{{ stats.total || 0 }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card bg-success-gradient">
                                    <div class="card-body">
                                        <div class="counter-status d-flex md-mb-0">
                                            <div class="counter-icon text-warning">
                                                <x-lucide-check-circle />
                                            </div>
                                            <div class="mr-auto">
                                                <h5 class="tx-13 tx-white-8 mb-3">طلبات مكتملة</h5>
                                                <x-lucide-loader-2 class="animate-spin" style="color: white;" width="8" height="8"
                                                    v-show="!statsLoaded" />
                                                <h6 class="counter mb-0 text-white" v-show="statsLoaded">
                                                    @{{ stats.completed || 0 }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card bg-warning-gradient">
                                    <div class="card-body">
                                        <div class="counter-status d-flex md-mb-0">
                                            <div class="counter-icon text-warning">
                                                <x-lucide-clock />
                                            </div>
                                            <div class="mr-auto">
                                                <h5 class="tx-13 tx-white-8 mb-3">قيد المعالجة</h5>
                                                <x-lucide-loader-2 class="animate-spin" style="color: white;" width="8" height="8"
                                                    v-show="!statsLoaded" />
                                                <h6 class="counter mb-0 text-white" v-show="statsLoaded">
                                                    @{{ stats.processing || 0 }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card bg-danger-gradient">
                                    <div class="card-body">
                                        <div class="counter-status d-flex md-mb-0">
                                            <div class="counter-icon text-warning">
                                                <x-lucide-x-circle />
                                            </div>
                                            <div class="mr-auto">
                                                <h5 class="tx-13 tx-white-8 mb-3">ملغية</h5>
                                                <x-lucide-loader-2 class="animate-spin" style="color: white;" width="8" height="8"
                                                    v-show="!statsLoaded" />
                                                <h6 class="counter mb-0 text-white" v-show="statsLoaded">
                                                    @{{ stats.cancelled || 0 }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="table-responsive">
                            <table class="table text-md-nowrap" id="vendorOrders">
                                <thead>
                                    <tr>
                                        <th>رقم الطلب</th>
                                        <th>المستخدم</th>
                                        <th>المنتج</th>
                                        <th>اللعبة</th>
                                        <th>السعر</th>
                                        <th>الحالة</th>
                                        <th>تاريخ الطلب</th>
                                        <th>إجراءات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Details Modal -->
    <div class="modal fade" id="orderDetailsModal" tabindex="-1" role="dialog"
        aria-labelledby="orderDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderDetailsModalLabel">تفاصيل الطلب</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="orderDetailsContent">
                    <!-- Order details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')

    <script>
        $(function() {
            // Initialize DataTable
            const tablehead = ['id', 'user', 'product', 'game', 'price', 'status', 'created_at', 'action'];
            const filterdata = ['user', 'product', 'game', 'id'];

            const table = initDatatable(
                    '#vendorOrders',
                    "{{ route('vendor.orders.index') }}",
                    tablehead, {}
                    order: [
                        [0, 'desc']
                    ]
                },
                filterdata
        );

        // Filter events
        $('#userFilter, #productFilter, #gameFilter, #orderIdFilter').on('keyup change', function() {
            table.draw();
            app.loadStats();
        });

        // Show order details
        $('#vendorOrders tbody').on('click', '.show', function() {
            let orderId = $(this).attr("value");

            // Show loading
            $('#orderDetailsContent').html(
                `<div class="text-center">{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري التحميل...</div>`
            );
            $('#orderDetailsModal').modal('show');

            // Load order details
            $.ajax({
                url: '{{ route('vendor.orders.show') }}',
                type: 'GET',
                data: {
                    id: orderId
                },
                success: function(response) {
                    if (response.success) {
                        let order = response.order;
                        let html = `
                                <div class="row">
                                    <div class="col-md-6">
                                        <h6><strong>معلومات الطلب:</strong></h6>
                                        <p><strong>رقم الطلب:</strong> ${order.id}</p>
                                        <p><strong>المستخدم:</strong> ${order.user ? order.user.name : 'غير متوفر'}</p>
                                        <p><strong>المنتج:</strong> ${order.product ? order.product.name : 'غير متوفر'}</p>
                                        <p><strong>اللعبة:</strong> ${order.game ? order.game.name : 'غير متوفر'}</p>
                                        <p><strong>السعر:</strong> ${order.price}</p>
                                        <p><strong>الحالة:</strong> <span class="badge badge-${getStatusClass(order.status)}">${getStatusText(order.status)}</span></p>
                                        <p><strong>تاريخ الطلب:</strong> ${new Date(order.created_at).toLocaleString('ar-EG')}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <h6><strong>العمليات:</strong></h6>
                                        <div style="max-height: 300px; overflow-y: auto;">
                                            ${order.operations && order.operations.length > 0 ? 
                                                order.operations.map(op => `
                                                                        <div class="mb-2 p-2 border rounded">
                                                                            <small><strong>العملية:</strong> ${op.operation_type}</small><br>
                                                                            <small><strong>التفاصيل:</strong> ${op.details || 'لا توجد تفاصيل'}</small><br>
                                                                            <small><strong>التاريخ:</strong> ${new Date(op.created_at).toLocaleString('ar-EG')}</small>
                                                                        </div>
                                                                    `).join('') : 
                                                '<p>لا توجد عمليات</p>'
                                            }
                                        </div>
                                    </div>
                                </div>
                            `;
                        $('#orderDetailsContent').html(html);
                    } else {
                        $('#orderDetailsContent').html('<div class="alert alert-danger">' +
                            response.error + '</div>');
                    }
                },
                error: function() {
                    $('#orderDetailsContent').html(
                        '<div class="alert alert-danger">حدث خطأ في تحميل تفاصيل الطلب</div>'
                    );
                }
            });
        });

        // Helper functions for status
        function getStatusClass(status) {
            const classes = {
                "processing": 'warning',
                "completed": 'success',
                "cancelled": 'danger',
            };
            return classes[status] || 'secondary';
        }

        function getStatusText(status) {
            const texts = {
                "processing": 'قيد المعالجة',
                "completed": 'مكتمل',
                "cancelled": 'ملغي',
            };
            return texts[status] || status;
        }
        });
    </script>

    <script>
        app = new Vue({
            'el': '#ordersPage',
            data: {
                stats: {
                    total: 0,
                    completed: 0,
                    processing: 0,
                    cancelled: 0
                },
                statsLoaded: false
            },
            methods: {
                loadStats: async function() {
                    this.statsLoaded = false;
                    try {
                        let response = await axios.get('{{ route('vendor.orders.stats') }}');
                        if (response.data.success) {
                            this.stats = response.data.stats;
                        }
                        this.statsLoaded = true;
                    } catch (error) {
                        console.error('Error loading stats:', error);
                        this.statsLoaded = true;
                    }
                }
            },
            created() {
                this.loadStats();
            }
        });
    </script>
@endsection