@extends('layouts.app_layout')

 @section('content')
 <!-- [ Page Header ] start -->
 @php
 $addRoute = route('events.create');
 @endphp
 @can('add event')
 @php
 $button = '<a href="'.$addRoute.'" class="btn btn-primary"><i class="fa fa-plus"></i> Add New</a>';
 @endphp
 @endcan
 <x-page-header title="{{ $pageTitle }}" button="{!! (isset($button))?$button:'' !!}" />
 <!-- [ Page Header ] end -->

 <div class="row">
     <div class="col-12">
         <div class="card">
             <div class="card-body">
                 <div class="dt-responsive">
                     <table id="events-datatable" class="table table-striped table-bordered nowrap">
                         <thead>
                             <tr>
                                 <th>Sl. No.</th>
                                 <th>Title</th>
                                 <th>Date</th>
                                 <th>Time</th>
                                 <th>Venue</th>
                                 <th>Is Approved</th>
                                 <th>Is Published</th>
                                 <th>Actions</th>
                             </tr>
                         </thead>
                     </table>
                 </div>
             </div>
         </div>
     </div>
 </div>
 @endsection

 @section('pages-scripts')
 <script>
     $(document).ready(function() {
         $('#events-datatable').DataTable({
             processing: true,
             serverSide: true,
             ordering: false,
             ajax: {
                 url: "{{ route('events.fetch-for-datatable') }}",
                 type: "POST",
                 data: function(d) {
                     d._token = $('meta[name="csrf-token"]').attr('content');
                 }
             },
             columns: [{
                     data: null,
                     name: 'id',
                     render: function(data, type, row, meta) {
                         return meta.row + 1;
                     },
                     width: '8%',
                 },
                 {
                     data: 'title',
                     name: 'title'
                 },
                 {
                     data: 'date',
                     name: 'date'
                 },
                 {
                     data: 'time',
                     name: 'time'
                 },
                 {
                     data: 'venue',
                     name: 'venue'
                 },
                 {
                     data: null,
                     name: 'is_approved',
                     render: function(data) {
                         if (data.is_approved == 1) {
                             return '<span class="badge bg-success">' + data.is_approved_desc + '</span>';
                         } else if (data.is_approved == 2) {
                             return '<span class="badge bg-danger">' + data.is_approved_desc + '</span>';
                         } else {
                             return '<span class="badge bg-warning">' + data.is_approved_desc + '</span>';
                         }
                     }
                 },
                 {
                     data: null,
                     name: 'is_published',
                     render: function(data) {
                         if (data.is_published == 1) {
                             return '<span class="badge bg-success">' + data.is_published_desc + '</span>';
                         } else {
                             return '<span class="badge bg-warning">' + data.is_published_desc + '</span>';
                         }
                     }
                 },
                 {
                     data: 'action',
                     name: 'action',
                     orderable: false,
                     searchable: false
                 }
             ]
         });

         // Delete event
         $(document).on('click', '.delete-event', function() {
             let eventId = $(this).data('id');

             Swal.fire({
                 title: "Are you sure?",
                 text: "You want to delete this event.",
                 icon: "warning",
                 showCancelButton: true,
                 confirmButtonText: "Yes",
                 cancelButtonText: "Cancel"
             }).then((result) => {
                 if (result.isConfirmed) {
                     $.ajax({
                         url: "{{ route('events.destroy', ':id') }}".replace(':id', eventId),
                         type: "POST",
                         headers: {
                             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                         },
                         beforeSend: function() {
                             showLoader();
                         },
                         success: function(response) {
                             hideLoader();
                             Swal.fire("Deleted!", response.message, "success");
                             $('#events-datatable').DataTable().ajax.reload();
                         },
                         error: function() {
                             hideLoader();
                             Swal.fire("Error!", "Something went wrong!", "error");
                         }
                     });
                 }
             });
         });
     });
 </script>
 @endsection