@extends('layouts.admin.app')
@section('vendor_css')
<link rel="stylesheet" type="text/css" href="{{asset('admin_assets/app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
<style type="text/css">
  td form{
    display: inline;
  }
  .dt-buttons{margin-right: 10px}
  .select2-selection {padding: 0px 5px !important}
</style>
@endsection   
@section('css')
@endsection 

@section('content')
<!-- BEGIN: Content-->
<div class="app-content content">
  <div class="content-overlay"></div>
  <div class="header-navbar-shadow"></div>
  <div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">{{ trans('admin.contact_heading') }}</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('home')}}">{{ trans('common.home') }}</a>
                            </li>
                            <li class="breadcrumb-item active">{{ trans('admin.contacts') }}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-body">
      <!-- Zero configuration table -->
      <section id="basic-datatable">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">{{ trans('admin.contacts') }}</h4>
              </div>
               
              <div class="card-content">
                <div class="card-body card-dashboard">
                  <div class="table-responsive">
                    <table class="table zero-configuration data_table_ajax">
                      <thead>
                        <tr>
                          <th>{{trans('admin.id')}}</th>
                          <th>{{trans('admin.contact_name')}}</th>
                          <th>{{trans('admin.contact_number')}}</th>
                          <th>{{trans('admin.contact_email')}}</th>
                          <th>{{trans('admin.contact_message')}}</th>
                          <th>{{trans('admin.contact_date')}}</th>
                          <th>{{trans('admin.action')}}</th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      <tfoot>
                        <tr>
                          <th>{{trans('admin.id')}}</th>
                          <th>{{trans('admin.contact_name')}}</th>
                          <th>{{trans('admin.contact_number')}}</th>
                          <th>{{trans('admin.contact_email')}}</th>
                          <th>{{trans('admin.contact_message')}}</th>
                          <th>{{trans('admin.contact_date')}}</th>
                          <th>{{trans('admin.action')}}</th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--/ Zero configuration table -->
    </div>
  </div>
</div>
@endsection
@section('page_js')
<!-- BEGIN: Page Vendor JS-->
<script src="{{asset('admin_assets/app-assets/vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('admin_assets/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js')}}"></script>
<script src="{{asset('admin_assets/app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js')}}"></script>
<script src="{{asset('admin_assets/app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js')}}"></script>
<!-- END: Page Vendor JS-->
@endsection

@section('js')
<script src="{{asset('admin_assets/custom/data_tables/export/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('admin_assets/custom/data_tables/export/jszip.min.js')}}"></script>
<script src="{{asset('admin_assets/custom/data_tables/export/buttons.html5.min.js')}}"></script>
<script src="{{asset('admin_assets/custom/data_tables/export/buttons.print.min.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){
    fill_datatable();
  });

  function fill_datatable() {

    $('.data_table_ajax').DataTable({
      aaSorting : [[0, 'desc']],
      dom: 'Blfrtip',
      lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
      pageLength: 10,
      buttons: [
        // {
        //     extend: 'excel',
        //     text: '<span class="fa fa-file-excel-o"></span> {{trans("common.export")}}',
        //     exportOptions: {
        //         modifier: {
        //             search: 'applied',
        //             order: 'applied'
        //         },
        //         columns: [0, 1, 2]
        //     },
        // },
        // {
        //     extend: 'print',
        //     text: '<i class="fa fa-print" aria-hidden="true"></i> {{trans("common.print")}}',
        //     autoPrint: true,
        //     exportOptions: {
        //         modifier: {
        //             search: 'applied',
        //             order: 'applied'
        //         },
        //         columns: [0, 1, 2, 3]
        //     },
        // }

      ],
      processing: true,
      serverSide: true,
      serverMethod:'POST',
      processing: true,
      bDestroy: true,
      language: {
          processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> ',
          url: lang_url,
          emptyTable: "{{trans('admin.empty_support')}}",
          zeroRecords:"{{trans('admin.no_support')}}",
        },
      ajax: {
          url: "{{route('dt_contact_us')}}",
          data: {"_token": "{{csrf_token()}}"},
      },
     
      columns: [

         { data: 'id'},
         { data: 'name',orderable:false},
         { data: 'mobile_number',orderable:false},
         { data: 'email',orderable:false},
         { data: 'message',orderable:false},
         { data: 'created',orderable:false},
          { 
            mRender : function(data, type, row) {
              return '<a class="btn" href="'+row["show"]+'"><i class="fa fa-eye"></i></a>';  
              }, orderable: false, searchable: false
          },
       
           
        ]
    });
  } 
</script>
@endsection