@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;
  }

  table.dataTable td.dt-type-numeric {
    text-align: left !important;
  }

  table td,
  table th {
    text-align: left !important;
  }

  .dt-length {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
</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-2">
            <div class="table-responsive">
              <table id="custom_notifications-table" class="table table-head-fixed table-striped table-bordered text-nowrap ">
                <thead>
                  <tr>
                    <th>Sr No.</th>
                    <th>Title</th>
                    <!-- <th>Message</th> -->
                    <th>Sent From</th>
                    <th>Leave Type</th>
                    <!-- <th>Date/Time</th> -->
                    <!-- <th>Date</th> -->
                    <th>Leave Status</th>
                     <th>Action By</th>

                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="modal fade" id="notificationModal" tabindex="-1" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="notificationModalLabel">Leave Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered table-sm mt-0 mb-0">
          <tbody>
            <tr>
              <th style="width: 150px;">Apply Date</th>
              <td><span id="modal-date"></span></td>
            </tr>
            <tr>
              <th>Title</th>
              <td><span id="modal-title"></span></td>
            </tr>
            <tr>
              <th>Leave Type</th>
              <td><span id="modal-leave-type"></span></td>
            </tr>
            <tr>
              <th>Leave Reason</th>
              <td><span id="modal-message"></span></td>
            </tr>
            <tr>
              <th>Approve At</th>
              <td><span id="modal-approveat"></span></td>
            </tr>
            <tr>
              <th>Rejected At</th>
              <td><span id="modal-rejectat"></span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div> -->
    </div>
  </div>
</div>
@endsection

@push('scripts')

<script>
  $(document).ready(function() {

    const table = $('#custom_notifications-table').DataTable({
      processing: true,
      serverSide: true,
      pageLength: 25,
      lengthChange: false,
      ajax: "{{ route('notifications.index') }}",
      columns: [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'title',
          name: 'title'
        },
        // { data: 'message', name: 'message' },
        {
          data: 'sent_from',
          name: 'sent_from'
        },
        {
          data: 'leave_type',
          name: 'leave_type'
        },
        // {
        //   data: 'date_time',
        //   name: 'date_time'
        // },
        {
          data: 'leave_action',
          name: 'leave_action',
          orderable: false,
          searchable: false
        },
        // {
        //   data: 'approved_by',
        //   name: 'approved_by'
        // },
        // {
        //   data: 'approved_at',
        //   name: 'approved_at'
        // },
        // {
        //   data: 'rejected_by',
        //   name: 'rejected_by'
        // },

        {
          data: 'action_by',
          name: 'action_by'
        },
        // {
        //   data: 'rejected_at',
        //   name: 'rejected_at'
        // }
      ]
    });

    // Approve/Reject action
    $(document).on('click', '.btn-approve, .btn-reject', function(e) {
      e.preventDefault();

      const id = $(this).data('id');
      const action = $(this).data('action');

      if ($(this).prop('disabled')) return;

      Swal.fire({
        title: `Are you sure?`,
        text: `Do you want to ${action} this request?`,
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#28a745",
        cancelButtonColor: "#d33",
        confirmButtonText: `Yes, ${action} it!`
      }).then((result) => {
        if (result.isConfirmed) {
          updateStatus(id, action);

          Swal.fire({
            title: "Processing...",
            text: `Your request is being ${action}d.`,
            icon: "success",
            timer: 1500,
            showConfirmButton: false
          });
        }
      });
    });

    // Revert status action
    $(document).on('click', '.btn-edit-status', function(e) {
      e.preventDefault();

      const id = $(this).data('id');
      const currentStatus = $(this).data('current-status');

      Swal.fire({
        title: 'Are you sure?',
        html: `The current status is <b>${currentStatus}</b>.<br>Do you want to reset it? This will bring back the Approve/Decline buttons.`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No'
      }).then((result) => {
        if (result.isConfirmed) {
          updateStatus(id, 'revert');
        }
      });
    });

    // Update status via AJAX
    function updateStatus(id, action) {
      $.ajax({
        type: 'POST',
        url: '{{ route("notification.approve-status") }}',
        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!', data.message || 'Update failed on server.', 'error');
          }
        },
        error: function(xhr) {
          Swal.fire('Error!', 'An error occurred. Check network tab (Server Error).', 'error');
          console.error('AJAX Error:', xhr.responseText);
        }
      });
    }
  });
</script>
<script>
  $(document).ready(function() {
    // Re-bind the click event every time the table is redrawn (due to AJAX/pagination)
    $('#custom_notifications-table').on('draw.dt', function() {

      // Listener for the custom Info button
      $('.btn-info-modal').on('click', function() {
        var button = $(this);

        // Get data from button attributes
        var title = button.data('title');
        var message = button.data('message');
        var leaveType = button.data('leavetype');
        var date = button.data('date');
        var approveAt = button.data('approveat');
        var rejectAt = button.data('rejectat');

        // Update modal content fields
        $('#modal-title').text(title);
        $('#modal-message').text(message);
        $('#modal-leave-type').text(leaveType);
        $('#modal-date').text(date);
        $('#modal-approveat').text(approveAt);
        $('#modal-rejectat').text(rejectAt);
      });
    });

  });
</script>
@endpush