@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss')
    <style>
        .stats-card {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .stats-card h4 {
            margin: 0;
            font-size: 1.5em;
        }

        .stats-card p {
            margin: 5px 0 0;
            font-size: 0.9em;
        }

        .filters-card {
            margin-bottom: 20px;
        }

        .badge {
            font-size: 0.85em;
        }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'رسائل سيريتل SMS'])

@section('content')
    <div id="syriatelSmsSection">
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card stats-card bg-primary text-white">
                    <h4>{{ number_format($totalMessages) }}</h4>
                    <p>إجمالي الرسائل</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stats-card bg-success text-white">
                    <h4>{{ number_format($processedMessages) }}</h4>
                    <p>تمت المعالجة</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stats-card bg-warning text-dark">
                    <h4>{{ number_format($unprocessedMessages) }}</h4>
                    <p>في الانتظار</p>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="card filters-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <x-lucide-filter width="20" height="20" /> الفلاتر
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">حالة المعالجة</label>
                        <select class="form-control" id="filter-processed">
                            <option value="all">الكل</option>
                            <option value="1">تمت المعالجة</option>
                            <option value="0">في الانتظار</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">رقم العملية</label>
                        <input type="text" class="form-control" id="filter-operation" placeholder="ابحث برقم العملية">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">من تاريخ</label>
                        <input type="date" class="form-control" id="filter-date-from">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date" class="form-control" id="filter-date-to">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-primary w-100" id="btn-filter">
                            <x-lucide-search width="20" height="20" /> بحث
                        </button>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-12">
                        <button type="button" class="btn btn-secondary btn-sm" id="btn-reset">
                            <x-lucide-undo-2 width="20" height="20" /> إعادة تعيين
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <x-lucide-message-square width="20" height="20" /> رسائل سيريتل SMS
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table text-md-nowrap" id="syriatel-sms-table">
                                <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>

    <!-- Details Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">
                        <x-lucide-info width="20" height="20" /> تفاصيل الرسالة
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>رقم الرسالة:</strong> <span id="detail-id"></span></p>
                            <p><strong>رقم العملية:</strong> <span id="detail-operation"></span></p>
                            <p><strong>المبلغ:</strong> <span id="detail-amount"></span> ل.س</p>
                            <p><strong>الحالة:</strong> <span id="detail-status"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>طلب الشحن:</strong> <span id="detail-credit-request"></span></p>
                            <p><strong>المستخدم:</strong> <span id="detail-user"></span></p>
                            <p><strong>تاريخ الإنشاء:</strong> <span id="detail-created"></span></p>
                            <p><strong>تاريخ التحديث:</strong> <span id="detail-updated"></span></p>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <p><strong>نص الرسالة:</strong></p>
                            <div class="alert alert-secondary" id="detail-message" dir="ltr"
                                style="white-space: pre-wrap;"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(function() {
            var table = $('#syriatel-sms-table').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                autoWidth: false,
                order: [
                    [0, 'desc']
                ],
                ajax: {
                    url: "{{ route('admin.syriatel-sms.index') }}",
                    data: function(d) {
                        d.processed = $('#filter-processed').val();
                        d.operation_number = $('#filter-operation').val();
                        d.date_from = $('#filter-date-from').val();
                        d.date_to = $('#filter-date-to').val();
                    }
                },
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'operation_number'
                    },
                    {
                        data: 'formatted_amount'
                    },
                    {
                        data: 'short_message'
                    },
                    {
                        data: 'processed_status'
                    },
                    {
                        data: 'credit_request_link'
                    },
                    {
                        data: 'time'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json'
                }
            });

            // Filter button click
            $('#btn-filter').on('click', function() {
                table.draw();
            });

            // Reset button click
            $('#btn-reset').on('click', function() {
                $('#filter-processed').val('all');
                $('#filter-operation').val('');
                $('#filter-date-from').val('');
                $('#filter-date-to').val('');
                table.draw();
            });

            // Enter key in filter inputs
            $('#filter-operation').on('keypress', function(e) {
                if (e.which === 13) {
                    table.draw();
                }
            });

            // Show details modal
            $('#syriatel-sms-table tbody').on('click', '.show-details', function() {
                var id = $(this).data('id');

                $.ajax({
                    url: "{{ route('admin.syriatel-sms.show') }}",
                    type: 'GET',
                    data: {
                        id: id
                    },
                    success: function(response) {
                        if (response.success) {
                            var data = response.data;
                            $('#detail-id').text(data.id);
                            $('#detail-operation').text(data.operation_number);
                            $('#detail-amount').text(data.amount);
                            $('#detail-status').html(data.processed ?
                                '<span class="badge bg-success">تمت المعالجة</span>' :
                                '<span class="badge bg-warning">في الانتظار</span>');
                            $('#detail-credit-request').text(data.credit_request_id || '-');
                            $('#detail-user').text(data.credit_request_user || '-');
                            $('#detail-created').text(data.created_at);
                            $('#detail-updated').text(data.updated_at);
                            $('#detail-message').text(data.message || 'لا يوجد نص');

                            $('#detailsModal').modal('show');
                        } else {
                            Swal.fire('خطأ', response.message, 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('خطأ', 'حدث خطأ أثناء جلب البيانات', 'error');
                    }
                });
            });
        });
    </script>
@endsection