@extends('layouts.dashboard')

{{-- Bootstrap Toggle CSS --}}
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

<style>
  .deprt-seach {
    width: 300px !important;
  }

  .badge-secondary {
    background-color: #6c757d;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
  }
</style>

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Notification List</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Notification</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    @if (Session::has('message'))
    <div class="col-sm-12">
      <div id="alert" class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show" role="alert">
        {{ Session::get('message') }}
      </div>
    </div>
    @endif

    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body p-0">
            <div class="table-responsive">
              <table id="custom_notifications-table" class="table table-head-fixed table-striped table-bordered text-nowrap text-center">
                <thead>
                  <tr>
                    <th>Sr No.</th>
                    <th>Title</th>
                    <th>Message</th>
                    <th>Leave Type</th>
                    <th>Date/Time</th>
                    <th>Approved By</th>
                    <th>Approved At</th>
                    <th>Rejected By</th>
                    <th>Rejected At</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@push('scripts')

<script>
  $(document).ready(function() {
    
    const table = $('#custom_notifications-table').DataTable({
      processing: true,
      serverSide: true,
      pageLength: 25,
      lengthChange: false,
      ajax: "{{ route('employee.showNotifications') }}",
      columns: [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'title',
          name: 'title'
        },
        {
          data: 'message',
          name: 'message'
        },
        {
          data: 'leave_type',
          name: 'leave_type'
        },
        {
          data: 'date_time',
          name: 'date_time'
        },
        {
          data: 'approved_by',
          name: 'approved_by'
        },
        {
          data: 'approved_at',
          name: 'approved_at'
        },
        {
          data: 'rejected_by',
          name: 'rejected_by'
        },
        {
          data: 'rejected_at',
          name: 'rejected_at'
        }
      ],
      drawCallback: function() {
        $('[data-toggle="toggle"]').bootstrapToggle(); // Enable toggle styles

        $('.btn-approve').off('change').on('change', function() {
          let id = $(this).data('id');
          if ($(this).prop('checked')) {
            updateStatus(id, 'approve');
          }
        });

        $('.btn-reject').off('change').on('change', function() {
          let id = $(this).data('id');
          if ($(this).prop('checked')) {
            updateStatus(id, 'reject');
          }
        });
      }
    });

    function updateStatus(id, action) {
      $.ajax({
        type: 'POST',
        url: '{{ route("employee.showNotifications") }}',
        data: {
          _token: '{{ csrf_token() }}',
          id: id,
          action: action
        },
        success: function(data) {
          if (data.status === 'success') {
            Swal.fire('Updated!', '', 'success');
            table.ajax.reload(null, false);
          } else {
            Swal.fire('Failed!', '', 'error');
          }
        },
        error: function() {
          Swal.fire('Error!', '', 'error');
        }
      });
    }
  });
</script>
@endpush