@extends('layouts.app')

@section('css')

<style>
    .dt-buttons{
        margin-bottom: 10px !important;
    }
</style>
<!-- third party css -->
<link href="/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css" rel="stylesheet" type="text/css" />
@endsection
@section('js')
  <!-- third party js -->
  <script src="/assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
  <script src="/assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
  <script src="/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
  <script src="/assets/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
  <script src="/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
  <script src="/assets/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
  <script src="/assets/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
  <script src="/assets/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
  <script src="/assets/libs/datatables.net-buttons/js/buttons.print.min.js"></script>
  <script src="/assets/libs/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

  <script src="/assets/libs/datatables.net-select/js/dataTables.select.min.js"></script>
  <script src="/assets/libs/pdfmake/build/pdfmake.min.js"></script>
  <script src="/assets/libs/pdfmake/build/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
    <script>
         var a = $('table').DataTable({
            dom: 'Bfrtip',
        buttons: [
            {
                text: '<i class="far fa-check-square"></i>',
                titleAttr: "select all",
                action: function () {
                    a.rows({
                        page: "current",
                    }).select();
                },
            },
            {
                text: '<i class="far fa-square"></i>',
                titleAttr: "unselect all",
                action: function () {
                    a.rows({
                        page: "current",
                    }).deselect();
                },
            },
            {
                extend: "copy",
                exportOptions: {
                    columns: ":visible",
                }},
                {
                extend: "colvis",
            },
                     ],
         select: {
            style: "os",
            selector: "td:first-child",
            style: "multi",
        },columnDefs: [
            {
                orderable: false,
                className: "select-checkbox",
                targets: 0,
            },
        ],
         });

    </script>
@endsection
@section('content')
        <!-- Begin page -->
        <div id="wrapper">
            @include('layouts.components.admin.navbar')

            <!-- Left Sidebar End -->

            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div class="content-page p-3">
                <div class="table-responsive ">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th style="max-width: 10px;"> </th>
                                <th>#</th>
                                <th>من</th>
                                <th>الي</th>
                                <th>نوع الرسالة</th>
                                <th>الرسالة</th>
                                <th>الحالة</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($rows as $row)
                            <tr>
                                <td></td>
                                <th scope="row">{{$row->id}}</th>
                                <th scope="row">{{($row->from)}}</th>
                                <th scope="row">{{join(',', json_decode($row->to))}}</th>
                                <th scope="row">{{($row->message_type)}}</th>
                                <th scope="row">{{($row->message_body)}}</th>
                                <th scope="row">{{($row->status)}}</th>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Footer Start -->
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <script>document.write(new Date().getFullYear())</script> &copy; Powered by {{env('website_name')}}
                            </div>

                        </div>
                    </div>
                </footer>
                <!-- end Footer -->

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>


        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

@endsection