@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@endsection
@include('admin.helper.tittle', ['title' => 'إدارة الميزات'])
@section('content')
    <div id='blogId'>
        <div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title mb-0">قائمة الميزات</h4>
                            <a href="{{ route('admin.feature-flags.create') }}" class="btn btn-primary">
                                <x-lucide-plus width="20" height="20" /> إضافة ميزة جديدة
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="feature-flags-table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <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>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            var table = $('#feature-flags-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                autoWidth: false,
                ajax: {
                    url: "{{ route('admin.feature-flags.index') }}",
                    data: function(d) {}
                },
                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'name' },
                    { data: 'description' },
                    { data: 'status' },
                    { data: 'activate_for_everyone_badge' },
                    { data: 'rollout_badge' },
                    { data: 'conditions_count' },
                    { data: 'created' },
                    { data: 'action', orderable: false, searchable: false }
                ]
            });

            // Toggle feature
            $('#feature-flags-table tbody').on('click', '.toggle-btn', function() {
                var id = $(this).data('id');
                Swal.fire({
                    title: 'هل تريد تبديل حالة الميزة؟',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.showLoading();
                        adawe(`{{ url('admin/feature-flags') }}/${id}/toggle`, {
                            '_token': "{{ csrf_token() }}"
                        });
                        table.draw();
                    }
                });
            });

            // Delete feature
            $('#feature-flags-table tbody').on('click', '.delete-btn', function() {
                var id = $(this).data('id');
                Swal.fire({
                    title: 'هل أنت متأكد من حذف هذه الميزة؟',
                    text: 'لا يمكن التراجع عن هذا الإجراء!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.showLoading();
                        $.ajax({
                            url: `{{ url('admin/feature-flags') }}/${id}`,
                            type: 'DELETE',
                            data: { '_token': "{{ csrf_token() }}" },
                            success: function(response) {
                                Swal.fire('تم الحذف!', response.message || 'تم حذف الميزة بنجاح', 'success');
                                table.draw();
                            },
                            error: function(xhr) {
                                Swal.fire('خطأ!', xhr.responseJSON?.message || 'حدث خطأ أثناء الحذف', 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection