@extends('layouts.app')

@section('title', __('master::lang.master') . ' | ' . __('master::lang.messages'))

@section('content')
@include('master::layouts.nav')

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('master::lang.all_messages')</h1>
</section>

<section class="content">
    <div class="tw-transition-all lg:tw-col-span-1 tw-duration-200 tw-bg-white tw-shadow-sm tw-rounded-xl tw-ring-1 hover:tw-shadow-md tw-ring-gray-200">
        <div class="tw-p-4 sm:tw-p-5">
            <div class="tw-flow-root tw-mt-5 tw-border-b tw-border-gray-200">
                <div class="tw-mx-4 tw--my-2 tw-overflow-x-auto sm:tw--mx-5">
                    <div class="tw-inline-block tw-min-w-full tw-py-2 tw-align-middle sm:tw-px-5">
                        @can('superadmin')
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="superadmin_Messages_table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>@lang('master::lang.date')</th>
                                        <th>@lang('master::lang.phone')</th>
                                        <th>@lang('master::lang.message')</th>
                                        <th>@lang('master::lang.action')</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal عرض الرسالة -->
<div class="modal fade" id="viewMessageModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">@lang('master::lang.message_details')</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p><strong>📞 الهاتف:</strong> <span id="messagePhone"></span></p>
        <p><strong>📅 التاريخ:</strong> <span id="messageDate"></span></p>
        <hr>
        <p id="messageContent" class="tw-text-gray-800"></p>
      </div>
    </div>
  </div>
</div>

@endsection

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    // تهيئة DataTable
    master_messages_table = $('#superadmin_Messages_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ action([\Modules\Master\Http\Controllers\MessagesController::class, 'index']) }}",
        aaSorting: [[1, 'desc']], // العمود 1 = created_at
        columns: [
            { 
                data: null, 
                name: 'serial', 
                orderable: false, 
                searchable: false,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: 'created_at', name: 'created_at' },
            { data: 'phone', name: 'phone' },
            { data: 'message', name: 'message' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    // عند الضغط على زر 'عرض' — استخرج البيانات من data-* وأعرضها في المودال
    $(document).on('click', '.view_message', function(e) {
        e.preventDefault();
        var message = $(this).data('message') || '';
        var phone = $(this).data('phone') || '';
        var date  = $(this).data('date') || '';

        $('#messageContent').text(message);
        $('#messagePhone').text(phone);
        $('#messageDate').text(date);
        $('#viewMessageModal').modal('show');
    });

    // معالجة تأكيد الحذف: الاستماع لحدث submit على form الحذف
    $(document).on('submit', '.delete_message_form', function(e) {
        e.preventDefault();
        var form = this;
        swal({
            title: LANG.sure || 'هل أنت متأكد؟',
            text: "بمجرد الحذف، لن تستطيع استعادة هذه الرسالة!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((confirmed) => {
            if (confirmed) {
                form.submit();
            }
        });
    });
});
</script>
@endsection