@extends('administrative.layouts.main')
@section('title', 'Notification Sent History')
@section('content')
  <x-breadcrumb />

  <div class="flex justify-between items-center mt-5">
    <div>
      <h4 class="text-2xl font-semibold">Notification Sent History</h4>
    </div>

    <div class="">
      <x-button link="true" url="{{ request()->fullUrlWithQuery(['download' => '']) }}" variant="blue" size="sm">
        <i class="fas fa-download me-1"></i> Download
      </x-button>
    </div>
  </div>

  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <table id="datatables" class="table">
      <thead>
        <tr>
          <th>Alert ID</th>
          <th>User Name</th>
          <th>Phone Number</th>
          <th>Email Address</th>
          <th>Identifier</th>
          <th>BST ID</th>
          <th>Alert Type</th>
          <th>Notification Type</th>
          <th>Is Email Delivered</th>
          <th>Is SMS Delivered</th>
          <th>Email Delivered At</th>
          <th>SMS Delivered At</th>
          <th>Email Send Tried</th>
          <th>SMS Send Tried</th>
          <th>Created At</th>
          <th>Updated At</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
@endsection
@section('pageScripts')
  <script>
    $(document).ready(function() {
      $('#datatables').DataTable({
        layout: {
          topEnd: {
            search: {
              placeholder: 'Search...'
            }
          }
        },
        lengthMenu: [10, 20, 50, {
          label: 'All',
          value: -1
        }],
        pageLength: 50,
        language: {
          search: ""
        },
        scrollX: true,
        processing: true,
        serverSide: true,
        ajax: '{{ route('administrative.notificationSentHistoryData') }}',
        columns: [{
            data: 'alert_id',
            name: 'alert_id',
            searchable: true
          },
          {
            data: 'username',
            name: 'users.username',
            searchable: true
          },
          {
            data: 'phone_number',
            name: 'phone_number',
            searchable: true
          },
          {
            data: 'email_address',
            name: 'email_address',
            searchable: true
          },

          {
            data: 'identifier',
            name: 'identifier',
            searchable: true
          },
          {
            data: 'bst_id',
            name: 'bst_id',
            searchable: true
          },
          {
            data: 'alert_type',
            name: 'alert_type'
          },
          {
            data: 'notification_type',
            name: 'notification_type'
          },

          {
            data: 'is_email_delivered',
            name: 'is_email_delivered'
          },
          {
            data: 'is_sms_delivered',
            name: 'is_sms_delivered'
          },
          {
            data: 'email_delivered_at',
            name: 'email_delivered_at'
          },
          {
            data: 'sms_delivered_at',
            name: 'sms_delivered_at'
          },
          {
            data: 'email_send_tried',
            name: 'email_send_tried'
          },
          {
            data: 'sms_send_tried',
            name: 'sms_send_tried'
          },
          {
            data: 'created_at',
            name: 'created_at'
          },
          {
            data: 'updated_at',
            name: 'updated_at'
          }
        ],
        order: [
          [3, 'desc']
        ]
      });
    });
  </script>
@endsection