@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/{{$wr->id}}/edit',
    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="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">{{join(', ', json_decode($wr->message))}}</textarea>
                                    ملف مرفق مع الرسالة
                                    <input name="attach" type="file" @class([
                                        'form-control',
                                        "border-3 border-success" => !empty($wr->file)
                                    ])  />
                                  
                                    صورة مرفقة مع الرسالة
                                    <input name="image[]" multiple type="file"   @class([
                                        'form-control',
                                        "border-3 border-success" => !empty($wr->image)
                                    ]) />
                                    @if ($wr->image)
                                        @foreach (json_decode($wr->image) as $image)
                                            <img width=75 class="mt-1" src="{{$image}}" alt="" /> 
                                        @endforeach
                                    @endif
                                    <br>
                                    <label class="mt-1">
                                     صور عشوائية
                                    </label>
                                      <input @if($wr->random_image == 1) checked @endif name="random_image"  type="checkbox"   @class([
                                        'form-checkbox',
                                    ]) />
                                    <br>
                                    ملف الارقام
                                    <input name="file" type="file"  @class([
                                        'form-control mt-1',
                                        "border-3 border-success" 
                                    ]) />
                                <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