@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="content-title mb-0 my-auto">سجل التصدير</h4>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div id='exportsList'>
        {{-- FILTERS --}}
        <div class="row">
            <div class="col-md-12">
                <form id="filters">
                    <div class="card">
                        <div class="card-body">
                            <div class="row row-sm">
                                <div class="col-lg-3 mt-2">
                                    <label for="statusFilter" class="mt-0">الحالة</label>
                                    <select class="form-control select2" id="statusFilter">
                                        <option value="">جميع الحالات</option>
                                        <option value="pending">قيد الانتظار</option>
                                        <option value="processing">جاري التصدير</option>
                                        <option value="completed">مكتمل</option>
                                        <option value="failed">فشل</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label for="typeFilter" class="mt-0">النوع</label>
                                    <select class="form-control select2" id="typeFilter">
                                        <option value="">الكل</option>
                                        <option value="orders">طلبات</option>
                                        <option value="waiting_orders">طلبات معلقة</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2 d-flex align-items-end">
                                    <button type="button" id="refresh" class="btn btn-primary">
                                        <i class="lucide lucide-refresh-cw"></i> تحديث
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- TABLE --}}
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="exportsTable" class="table table-bordered text-nowrap text-center">
                                <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>

    {{-- Error Modal --}}
    <div class="modal fade" id="errorModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">تفاصيل الخطأ</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <pre id="errorText" class="text-danger" dir="ltr" style="white-space: pre-wrap; word-wrap: break-word;"></pre>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(function() {
            var table = $('#exportsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.order-exports.index') }}',
                    data: function(d) {
                        d.status = $('#statusFilter').val();
                        d.type = $('#typeFilter').val();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'admin_id',
                        name: 'admin_id'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'total_count',
                        name: 'total_count'
                    },
                    {
                        data: 'file_name',
                        name: 'file_name',
                        render: function(data) {
                            return data || '-';
                        }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'completed_at',
                        name: 'completed_at'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    },
                ],
                order: [
                    [0, 'desc']
                ],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/ar.json'
                }
            });

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

            // Show error modal
            $(document).on('click', '.show-error', function() {
                $('#errorText').text($(this).data('error'));
                $('#errorModal').modal('show');
            });

            // Delete export
            $(document).on('click', '.delete-export', function() {
                var id = $(this).data('id');
                if (!confirm('هل أنت متأكد من حذف هذا التصدير؟')) return;

                $.ajax({
                    url: '{{ url('admin/order-exports') }}/' + id,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        table.ajax.reload();
                        toastr.success(res.message);
                    },
                    error: function() {
                        toastr.error('حدث خطأ أثناء الحذف');
                    }
                });
            });
        });
    </script>
@endsection