@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@endsection
@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="my-auto mb-0 content-title">البطاقات الافتراضية</h4>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.virtual-cards.dashboard') }}" class="btn btn-info mr-2">
                <x-lucide-bar-chart-3 width="20" height="20" /> لوحة التحكم
            </a>
            <a href="{{ route('admin.virtual-cards.operations') }}" class="btn btn-secondary mr-2">
                <x-lucide-history width="20" height="20" /> العمليات
            </a>
        </div>
    </div>
@endsection
@section('content')
    <div id='virtualCardsPage'>
        {{-- FILTERS --}}
        <div class="row">
            <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                <form id="filters">
                    <div class="card">
                        <div class="card-body">
                            <div class="main-content-label mg-b-5">
                                تصفية البيانات
                            </div>
                            <div class="row row-sm">
                                <!-- User Filter -->
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0">المستخدم</label>
                                    <select name="user_id" id="userFilter" class="form-control select2">
                                        <option value="" selected>جميع المستخدمين</option>
                                        @foreach (\App\Models\User::select('id', 'name', 'email')->get() as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->email }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Status Filter -->
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0">الحالة</label>
                                    <select id="statusFilter" class="form-control select2">
                                        <option value="">جميع الحالات</option>
                                        <option value="active">نشط</option>
                                        <option value="frozen">مجمد</option>
                                        <option value="terminated">ملغي</option>
                                    </select>
                                </div>

                                <!-- From Date Filter -->
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0">من تاريخ</label>
                                    <input type="date" id="date_fromFilter" class="form-control">
                                </div>

                                <!-- To Date Filter -->
                                <div class="col-lg-2 mt-2">
                                    <label class="mt-0">إلى تاريخ</label>
                                    <input type="date" id="date_toFilter" class="form-control">
                                </div>

                                <!-- Search Filter -->
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0">بحث</label>
                                    <input type="text" id="searchFilter" class="form-control" placeholder="اسم، بريد، ID...">
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-lg-12">
                                    <button type="button" id="refresh" class="btn btn-primary">
                                        <x-lucide-refresh-cw width="20" height="20" /> تحديث
                                    </button>
                                    <button type="button" class="btn btn-success ml-2" data-toggle="modal" data-target="#exportModal">
                                        <x-lucide-download width="20" height="20" /> تصدير Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="pb-0 card-header">
                            <div class="d-flex justify-content-between">
                                <h4 class="card-title mg-b-0">قائمة البطاقات</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" style="font-size: 12px" id="virtualCardsTable">
                                    <thead>
                                        <tr>
                                            <th>ID</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>
    </div>

    <!-- Export Modal -->
    <div class="modal fade" id="exportModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">تصدير البطاقات</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="exportForm">
                        <div class="form-group">
                            <label>المستخدم</label>
                            <select class="form-control select2" name="user_id">
                                <option value="">الكل</option>
                                @foreach (\App\Models\User::select('id', 'name', 'email')->get() as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->email }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>الحالة</label>
                            <select class="form-control" name="status">
                                <option value="">الكل</option>
                                <option value="active">نشط</option>
                                <option value="frozen">مجمد</option>
                                <option value="terminated">ملغي</option>
                            </select>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label>من تاريخ</label>
                                <input class="form-control" type="date" name="date_from">
                            </div>
                            <div class="form-group col-md-6">
                                <label>إلى تاريخ</label>
                                <input class="form-control" type="date" name="date_to">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>بحث</label>
                            <input class="form-control" type="text" name="search" placeholder="اسم، بريد، ID...">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-success" id="exportBtn">تصدير</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            const table = $('#virtualCardsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.virtual-cards.index') }}",
                    data: function(d) {
                        d.user_id = $('#userFilter').val();
                        d.status = $('#statusFilter').val();
                        d.date_from = $('#date_fromFilter').val();
                        d.date_to = $('#date_toFilter').val();
                        d.search = $('#searchFilter').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'user', name: 'user' },
                    { data: 'user_email', name: 'user_email' },
                    { data: 'balance', name: 'balance' },
                    { data: 'status', name: 'status' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                order: [[0, 'desc']],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/Arabic.json'
                },
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'الكل']]
            });

            // Filter change handlers
            $('#userFilter, #statusFilter, #date_fromFilter, #date_toFilter').on('change', function() {
                table.draw();
            });

            $('#searchFilter').on('keyup', function() {
                table.draw();
            });

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

            // Export modal select2 initialization
            $('#exportModal').on('shown.bs.modal', function() {
                $(this).find('select.select2').each(function() {
                    if (!$(this).hasClass('select2-hidden-accessible')) {
                        $(this).select2({
                            dropdownParent: $('#exportModal'),
                            width: '100%'
                        });
                    }
                });
            });

            // Export button handler
            $('#exportBtn').on('click', function() {
                const params = new URLSearchParams($("#exportForm").serialize());
                window.location.href = "{{ route('admin.virtual-cards.export') }}" + '?' + params.toString();
                $('#exportModal').modal('hide');
            });

            // Initialize select2
            $('.select2').select2();
        });
    </script>
@endsection