@extends('app')
<style>
    .moveRight {
        float: right !important
    }
</style>
@section('content')
    @if (Session::has('flash_message'))
        <div class="alert {{ Session::has('flash_message_status') ? 'alert-error' : 'alert-success' }}"
            style="text-align: center;">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif


    <div class="row">
        <div class="col-sm-12">
            <div class="grid simple vertical">



                <div class="grid-body no-border overflow-auto">
                    <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                        <div class="col-12" style="text-align: center;">
                            <span class="bold" style="font-size: 20px;">
                                تنبيه الرسائل القصيرة</span>
                        </div>

                    </div>
                    <div class='control'>
                        <div class="pull-right markaction text-end">
                            <a id="bulkSms" href="javascript:void(0)" class="btn btn-success"
                                data-url="{{ URL::to('admin/newSection/bulkSendSMS') }}" onclick="sendSMS(this)">
                                إرسال
                            </a>
                        </div>
                    </div>

                    <div class="grid-body no-border">
                        <div class="row text-end" dir="rtl">
                            <form method="GET" id="advance_search_form" novalidate>
                                @csrf
                                {{-- <div class="col-sm-6" style="margin-top:25px">
                                    <button type="submit" class="btn btn-primary btn-cons">بحث</button>
                                    <a href="javascript:void(0)" class="btn btn-info btn-cons" id="clear_filters">مسح</a>
                                </div> --}}

                                <div class="col-sm-2 moveRight">
                                    <label>التسجيل</label>
                                    <select name="credentials_issued" id="registered_select" class="form-select"
                                        style="width:100%">

                                        <option value="الكل"
                                            {{ request('credentials_issued', 'الكل') == 'الكل' ? 'selected' : '' }}>الكل
                                        </option>
                                        <option value="1" {{ request('credentials_issued') == 1 ? 'selected' : '' }}>
                                            نعم</option>
                                        <option value="0" {{ request('credentials_issued') == 0 ? 'selected' : '' }}>
                                            لا</option>
                                    </select>
                                </div>

                                <div class="col-sm-2 moveRight">
                                    <label>الجنس</label>
                                    <select name="gender" id="gender_select" class="form-select" style="width:100%">

                                        <option value="الكل" {{ request('gender', 'الكل') == 'الكل' ? 'selected' : '' }}>
                                            الكل</option>
                                        <option value="0" {{ request('gender') == 0 ? 'selected' : '' }}>ذکر</option>
                                        <option value="1" {{ request('gender') == 1 ? 'selected' : '' }}>أنثى
                                        </option>
                                    </select>
                                </div>

                                <div class="col-sm-2 moveRight">
                                    <label>الحياة</label>
                                    <select name="alive" id="alive_select" class="form-select" style="width:100%">

                                        <option value="الكل" {{ request('alive', 'الكل') == 'الكل' ? 'selected' : '' }}>
                                            الكل</option>
                                        <option value="1" {{ request('alive') == 1 ? 'selected' : '' }}>نعم
                                        </option>
                                        <option value="0" {{ request('alive') == 0 ? 'selected' : '' }}>لا</option>
                                    </select>
                                </div>

                            </form>
                        </div>
                    </div>



                    <table class="table table-hover table-condensed display nowrap" id="datatable-example" cellspacing="0"
                        width="100%">
                        <thead>
                            <tr>
                                <th width="2%">
                                    <input type="checkbox" class="group-checkable"
                                        data-set="#datatable-example .checkboxes" />
                                </th>
                                <th>Id</th>
                                <th width="5%">الهوية</th>
                                <th width="20%">الإسم</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <form method="POST" class="inline" id="bulkaction" action="">
        @csrf
        <input type="hidden" name="ids" id="ids" value="">
    </form>
    <div id="smsModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

                <form method="POST" id="sendSms_form">
                    @csrf

                    <!-- Modal Header with Centered Title -->
                    <div class="modal-header">
                        <h4 class="modal-title mx-auto">تنبيه الرسائل القصيرة بالجملة</h4>
                    </div>

                    <div class="modal-body info-modal">
                        <div class="form-group row" style="margin-top:20px">
                            <div class="input-with-icon right col-md-9 col-sm-12">
                                <textarea name="description" id="credentials_description_field" class="form-control" required style="direction: rtl;">{{ old('description') }}</textarea>
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label for="description" class="form-label">كتابة نص الرسالة</label>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                            إلغاء
                        </button>
                        <button type="submit" class="btn btn-primary sms-submit-btn">ارسال</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection
@section('page_script')
    <script type="text/javascript">
        jQuery(document).ready(function($) {

            // Initialize DataTable
            var table = $('#datatable-example').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 50,
                order: [
                    [1, "desc"]
                ],
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    processing: "<img src='{{ asset('assets/img/Webp.net-resizeimage.gif') }}' />",
                    emptyTable: "لا يوجد محتوى",
                    zeroRecords: "لا يوجد محتوى",
                },
                ajax: {
                    url: "{{ route('admin.smsalert.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: function(d) {
                        const credentials = $('#registered_select').val();
                        const gender = $('#gender_select').val();
                        const alive = $('#alive_select').val();
                        if (credentials && credentials !== 'الكل') d.credentials_issued = credentials;
                        if (gender && gender !== 'الكل') d.gender = gender;
                        if (alive && alive !== 'الكل') d.alive = alive;
                    }
                },
                columns: [{
                        data: 'check',
                        name: 'check',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'family_tree_id',
                        name: 'family_tree_id',
                        visible: false,
                        searchable: false
                    },
                    {
                        data: 'information',
                        name: 'information',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
            var errorMessageStr = 'يجب إختيار إستمارة أو أكثر';
            $(".source").click(function() {

                var ids = $('#datatable-example tbody :checkbox:checked').map(function() {
                    return this.value;
                }).get();

                if (ids.length > 0) {

                    $('#data_field_id').val('');

                    $('#myModal').modal('show');
                    var source_name = this.id;
                    $("#myModal .modal-title").text('تحديث ' + $(this).text());
                    $(".source_label").text($(this).text());

                    $("#ids_array").val(ids);
                    $("#source_name").val(source_name);
                } else {
                    showErrorMessage(errorMessageStr);
                }

            });
            // Filter triggers
            $('#advance_search_form').on('submit', function(e) {
                e.preventDefault();
                table.ajax.reload();
            });
            $('#registered_select, #gender_select, #alive_select').on('change', function() {
                table.ajax.reload();
            });

            // Group check/uncheck all
            $(document).on('change', '.group-checkable', function() {
                let checked = $(this).is(':checked');
                $('#datatable-example .checkboxes').prop('checked', checked);
            });

            // Handle SMS form submit
            $('#sendSms_form').on('submit', function(e) {
                e.preventDefault();

                let url = $('#smsModal').data('url');
                let description = $('#credentials_description_field').val().trim();
                if (description === '') {
                    alert('الرجاء كتابة نص الرسالة');
                    return false;
                }

                // Collect selected IDs (for bulk)
                let selected = [];
                $('input[name="id[]"]:checked').each(function() {
                    selected.push($(this).val());
                });

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: selected,
                        description: description
                    },
                    beforeSend: function() {
                        $('.sms-submit-btn').prop('disabled', true).text('...جاري الإرسال');
                    },
                    success: function(response) {
                        alert('تم إرسال الرسائل بنجاح');
                        $('#smsModal').modal('hide');
                        $('#sendSms_form')[0].reset();
                        $('.sms-submit-btn').prop('disabled', false).text('ارسال');
                        table.ajax.reload();
                    },
                    error: function() {
                        alert('حدث خطأ أثناء إرسال الرسائل');
                        $('.sms-submit-btn').prop('disabled', false).text('ارسال');
                    }
                });
            });
        });

        // ✅ Unified function for both single & bulk
        function sendSMS(action) {
            let url = '';
            if (typeof action === 'string') {
                // Single record action
                url = action;
            } else {
                // Bulk action
                url = action.getAttribute('data-url');
                let selected = [];
                $('input[name="id[]"]:checked').each(function() {
                    selected.push($(this).val());
                });

                if (selected.length === 0) {
                    alert('الرجاء تحديد صف واحد على الأقل');
                    return false;
                }
            }

            $('#smsModal').data('url', url);
            $('#smsModal').modal('show');
        }
    </script>
@endsection