@extends('layouts.app')

        @section('styles')

        @endsection

            @section('content')
                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Contact Messages</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Contact Messages</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                               <!-- Row -->
                       
                             <div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title mb-0">View Contact Messages </h3>
                                    </div>
                                    <div class="card-body pt-4">
                                        <div class="grid-margin">
                                            <div class="">
                                                <div class="panel panel-primary">
                                                    <div class="tab-menu-heading border-0 p-0">
                                                        <div class="tabs-menu1">
         
                                                         
                                                        </div>
                                                    </div>
                                                    <div class="panel-body tabs-menu-body border-0 pt-0">
                                                        <div class="tab-content">
                                                            <div class="tab-pane active" id="tab5">
                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;"  id="table_datatable"
                                                                        class="table table-bordered text-nowrap mb-0">
                                                                        <thead class="border-top text-center">
                                                                            <tr>
                                                                                <th class="bg-transparent border-bottom-0"
                                                                                    style="width: 5%;">#</th>
                                                                                <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Date</th>
                                                                             
                                                                                <th class="bg-transparent border-bottom-0">
                                                                                   Unique ID</th>
                                                                                <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Name</th>
                                                                                    <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Mobile</th>
                                                                                         <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Email</th>
                                                                                          <th
                                                                                    class="bg-transparent border-bottom-0">
                                                                                    Action</th>
                                                                            </tr>
                                                                        </thead>
                                                               
                                                                    </table>
                                                                </div>
                                                            </div>
                                                           
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Row -->
                        
                        <!--###########################view Model######################-->
                                <div class="modal fade" id="extralargemodal" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-xl" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Contact Message  Details</h5>
                                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                </div>
                                <div class="modal-body" id="message_view_modal_body">
                                 
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--###########################End Of  View Model#######################-->
                    
                        <!-- Modal -->
        <div class="modal fade" id="largemodal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Send Replay</h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body">
                       <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">  
                       @csrf
                                            <div class="form-group">
                                                <div class="row align-items-center">
                                                    <label class="col-xl-2 form-label">To</label>
                                                    <div class="col-xl-10">
                                                    
                                            <input type="hidden" name="message_id" value="" id="message_id">
                                                        <input type="text" id="to_address" name="to_address" class="form-control" data-parsley-required-message="To Address Required" required>
                                                    </div>
                                                </div>
                                            </div>
                                           
                                        
                                            <div class="form-group">
                                                <div class="row align-items-center">
                                                    <label class="col-xl-2 form-label">Subject</label>
                                                    <div class="col-xl-10">
                                                        <input type="text" id="mail_subject" name="mail_subject" class="form-control"  data-parsley-required-message="Subject Required" required>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="row ">
                                                    <label class="col-xl-2 form-label">Message</label>
                                                    <div class="col-xl-10">
                                                        <textarea name="message" id="message" rows="10" class="form-control" data-parsley-required-message="Message Required" required></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            
                                              <div class="form-group">
                                                <div class="row ">
                                                
                                                
                                                <div class="btn-list ms-auto my-auto">
                                     
                                          
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/admin/send_contact_mail')}}', 'createForm', '', '','')" class="btn custom-btn-success"><i class="fa fa-envelope"></i> Send Mail</a>
                                          
                                        </div>
                                        
                                        
                                                </div>
                                            </div>
                                            
                                            
                                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->



                  

          

       
                      

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var base_url='{{url('/')}}';
    var datatable_name="table_datatable";
$('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,4],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,2,6]},
           {"className": "text-left", "targets": [3,4,5]},
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/admin/contact_message_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "cus_msg_id", "name": "cus_msg_id"},
                  {"data": "msg_date", "name": "msg_date"},
                  {"data": "msg_u_id", "name": "msg_u_id"},
                  {"data": "cus_name", "name": "cus_name"}, 
                  {"data": "cust_phone", "name": "cust_phone"},
                  {"data": "cust_email", "name": "cust_email"}, 
                  {"data": "cus_msg_id", "name": "cus_msg_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var action="";
          var index = (page * length + (iDataIndex + 1));         
            $('td:eq(0)', nRow).html(index);
        //View Section
        var action=action+'&nbsp;<button title="View"  onclick=View('+aData.cus_msg_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class=" fa fa-eye"> </span></button>'
        
         //Replay Section
        // var action=action+'&nbsp;<button title="Replay"  onclick=replay("'+aData.cus_msg_id+'","'+aData.cust_email+'","'+aData.cust_sub+'") id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fa fa-reply"> </span></button>'
        
        $('td:eq(6)', nRow).html(action);
 }
 });



 function View(id){
           $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/view_message_details',
                        success: function (result) {
                            $('#message_view_modal_body').html(result); 
                            $('#extralargemodal').modal('show');
                        }
                    })

 }
 
 
 function replay(id,Email,Subject){
     $('#message_id').val(id);
      $('#to_address').val(Email);
      $('#mail_subject').val(Subject);
      $('#largemodal').modal('show');
      
      


     
 }

        </script>
        @endsection