@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@endsection
@include('admin.helper.tittle', ['title' => 'أكواد الطلبات'])
@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">قائمة أكواد الطلبات</h4>
                    <small class="text-muted">عرض الأكواد المرتبطة بالطلبات (داخلي/خارجي)</small>
                </div>
                <div class="card-body">
                    <!-- Filters Section -->
                    <div class="row row-sm mb-3">
                        @include('admin.filters.userwithgames')

                        <!-- Code search -->
                        <div class="col-lg-3 mt-2">
                            <label for="codeFilter">البحث بالكود</label>
                            <input type="text" class="form-control" id="codeFilter" name="code"
                                placeholder="أدخل جزء من الكود">
                        </div>
                        <!-- Order number search -->
                        <div class="col-lg-3 mt-2">
                            <label for="order_numberFilter">رقم الطلب</label>
                            <input type="text" class="form-control" id="order_numberFilter" name="order_number"
                                placeholder="أدخل رقم الطلب">
                        </div>
                        <!-- Type filter -->
                        <div class="col-lg-3 mt-2">
                            <label for="typeFilter">نوع الكود</label>
                            <select class="form-control select2" id="typeFilter" name="type">
                                <option value="">جميع الأنواع</option>
                                <option value="internal">داخلي</option>
                                <option value="external">خارجي</option>
                            </select>
                        </div>
                        <div class="col-lg-3 mt-2 d-flex align-items-end">
                            <button type="button" id="refresh" class="btn btn-primary me-2">
                                <x-lucide-refresh-cw width="20" height="20" /> تحديث
                            </button>
                            <button type="button" id="clearFilters" class="btn btn-secondary">
                                <x-lucide-x width="20" height="20" /> مسح
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table text-md-nowrap" id="orderCodesTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>المستخدم</th>
                                    <th>الكود</th>
                                    <th>النوع</th>
                                    <th>رقم الطلب</th>
                                    <th>اسم المنتج</th>
                                    <th>اللعبة</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.requfilter')
    @include('vue')
    <script>
        $(function() {
            $('.select2').select2();
            // Clear filters
            $('#clearFilters').on('click', function() {
                $('#userFilter').val('').trigger('change');
                $('#gameFilter').val('').trigger('change');
                $('#productFilter').val('').trigger('change');
                $('#typeFilter').val('').trigger('change');
                $('#codeFilter').val('');
                $('#order_numberFilter').val('');
            });

            const table = initUrlSyncedDatatable({
                selector: '#orderCodesTable',
                url: "{{ route('admin.orderCodes.index') }}",
                columns: ['id', 'user', 'code', 'type', 'order_number', 'product', 'game'],
                extraOptions: {
                    columnDefs: [{
                        targets: 3,
                        render: function(data) {
                            // Translate type to Arabic badge
                            const map = {
                                internal: 'داخلي',
                                external: 'خارجي'
                            };
                            const label = map[data] || data;
                            const cls = data === 'internal' ? 'badge-success' : 'badge-primary';
                            return `<span class="badge ${cls}">${label}</span>`;
                        }
                    }, ]
                },
                filters: ['user', 'game', 'product', 'type', 'code', 'order_number'],
                refreshSelector: '#refresh',
            });
        });
    </script>
@endsection