@extends('layouts.app')
@section('css')
<!-- third party css -->
@endsection
@section('js')
  <!-- third party js -->
    <script src="/js/whatsapp_sender.js"></script>

    <script>
        // this is the id of the form
        $( '#formId' )
.submit( function( e ) {
    Swal.fire({
            title: "جاري المعالجة ...",
            allowEscapeKey: false,
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            },
            onAfterClose: () => {
                Swal.hideLoading();
            },
        });
  $.ajax( {
    url: '/whatsapp_sender',
    type: 'POST',
    data: new FormData( this ),
    processData: false,
    contentType: false,
    success: function( data){
        Swal.fire(`نجح`, "تم الارسال.", "success");
    },
    error: function ( data ) {
        Swal.fire(`فشل`, "يوجد خطأ في البينات.", "error");

    }
  } );
  e.preventDefault();
} );
      </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">
                <hr>

                <div class="card">
                    <div class="card-body"><div class="table-responsive mb-3">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>الرسالة</th>
                                    <th>الحالة</th>
                                        <th>المعاملات</th>
                                    <th>اجراء</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($wr as $r)
                                <tr>
                                    <th scope="row" class="row">
                                        @if ($r->status == "processing")
                                        <div class="col-2"><div class=" spinner-grow text-warning " style="    width: 12px;
                                            height: 12px;" role="status"></div></div>
                                        @endif
                                        <div class="col-2">{{$r->id}}</div>    
                                    </th>
                                    <td>{{join(', ',( json_decode($r->message)))}}</td>
                                    <td>{{ $r->status}}</td>
                                    @if ($r->status != "ready")
                                        <td>{{ sizeof(json_decode($r->jobs_id)) }}/{{ sizeof(array_merge(json_decode($r->jobs_successed), json_decode($r->jobs_failed))) }}</td>
                                    @else
                                    <td>---</td>
                                        @endif
                                    <td class='row'>
                                       
                                        @if ($r->status == "processing")
                                        <div class="col-1">
                                            <a  style="cursor: pointer;" onclick="_stop('{{$r->id}}')" class="fas fa-stop col text-danger"></a>
                                        </div>
                                            <div class="col-1">
                                            <a  style="cursor: pointer;" onclick="_pause('{{$r->id}}')" class="fas fa-pause col text-warning "></a>
                                        </div>
                                        @else
                                        <div class="col-1">
                                            <a  style="cursor: pointer;" onclick="_start('{{$r->id}}')" class="fas fa-play col text-success"></a>
                                        </div>
                                        @endif
                                        @if ($r->status != "processing")
                                        <div class="col-1">
                                            <a  style="cursor: pointer;" onclick="_edit('{{$r->id}}')" class="fas fa-edit col text-pramiry "></a>
                                        </div>
                                        <div class="col-1">
                                            <a  style="cursor: pointer;" onclick="_delete('{{$r->id}}')" class="fas fa-trash col text-danger"></a>
                                        </div>
                                        @endif
                                        @if (!empty($r->task_id))
                                            <div class="col-1">
                                                <a  style="cursor: pointer;" href="/whatsapp_sender/{{$r->task_id}}/report" class="fa fa-file col text-blue-800"></a>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div></div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                @if(Session::has('success'))
                                <div class="alert alert-success" role="alert">
                                    تم الارسال
                                  </div>
                                @endif
                                <form id="formId" class="mt-4 border-1 p-2" action="/whatsapp_sender" method="post" enctype="multipart/form-data" style="border:1px solid #00000050; border-radius: 3px;">
                                    @csrf
                                    <textarea name="message" class="form-control mt-1" placeholder="الرسال......" style="min-height:250px"></textarea>
                                    ملف مرفق مع الرسالة
                                    <input name="attach" type="file" class="form-control mt-1" />
                                    صورة مرفقة مع الرسالة
                                    <input name="image[]" multiple type="file" class="form-control mt-1" />
                                    <div class="my-1">
                                    <label >
                                     صور عشوائية
                                    </label>
                                    <input name="random_image"  type="checkbox"   @class([
                                        'form-checkbox',
                                    ]) /></div>
                                    ملف الارقام
                                    <input name="file" type="file" class="form-control mt-1" />
                                <button type="submit" class="btn btn-info btn-block mt-1 w-100" style="display: block">تسجيل</button>

                                </form>



                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->
                </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