@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
  <style>
    /* Compact table styling */
    #dataTableExample {
      font-size: 0.825rem; /* Smaller font size */
    }
    
    #dataTableExample th,
    #dataTableExample td {
      padding: 0.4rem 0.75rem; /* Reduced padding */
    }
    
    #dataTableExample thead th {
      background-color: #f8f9fa; /* Light gray header */
      font-weight: 600;
      font-size: 0.825rem; /* Consistent with body */
    }
    
    /* Compact buttons */
    .btn-sm {
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
      line-height: 1.2;
    }
    
    /* Smaller badges */
    .badge {
      font-size: 0.75rem;
      padding: 0.25em 0.4em;
    }
    
    /* Unread row highlight */
    .bg-light {
      background-color: #f8f9fa!important;
    }
    
    /* Button group spacing */
    .d-flex.gap-2 {
      gap: 0.5rem!important;
    }
  </style>
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Maintenance Pack</a></li>
    <li class="breadcrumb-item active" aria-current="page">My Task</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h6 class="card-title mb-0">My Task</h6> <!-- Removed margin-bottom -->
          <button id="mark-all-read" class="btn btn-sm btn-primary">Mark All as Read</button>
        </div>
        <p class="text-muted mb-3" style="font-size: 0.875rem;">All your notifications</p> <!-- Smaller subtitle -->
        <div class="table-responsive">
          <table id="dataTableExample" class="table table-sm"> <!-- Added table-sm -->
            <thead class="table-light"> <!-- Added table-light -->
              <tr>
                <th>No</th>
                <th>Type</th>
                <th>Message</th>
                <th>Status</th>
                <th>Date</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @foreach($notifications as $index => $notification)
              @php
                  $notificationData = $notification->data;
                  $notificationType = class_basename($notification->type);
              @endphp
              <tr class="{{ $notification->read_at ? '' : 'bg-light' }}">
                <td>{{ $index + 1 }}</td>
                <td>{{ $notificationType }}</td>
                <td>{{ $notificationData['message'] ?? 'No message' }}</td>
                <td>
                  @if($notification->read_at) 
                    <span class="badge bg-success">Read</span>
                  @else
                    <span class="badge bg-warning">Unread</span>
                  @endif
                </td>
                <td>{{ $notification->created_at->diffForHumans() }}</td>
<td>
  <div class="d-flex gap-2">
    @if(!$notification->read_at)
      <button class="btn btn-sm btn-primary mark-as-read px-2" data-id="{{ $notification->id }}" title="Mark as Read">
        <i class="fas fa-check me-1" style="font-size: 0.8rem;"></i>
        <span style="font-size: 0.8rem;">Mark Read</span>
      </button>
    @endif
    @if(isset($notificationData['action_url']))
      <a href="{{ $notificationData['action_url'] }}" class="btn btn-sm btn-info px-2" title="View">
        <i class="fas fa-eye me-1" style="font-size: 0.8rem;"></i>
        <span style="font-size: 0.8rem;">View</span>
      </a>
    @endif
  </div>
</td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
  $(document).ready(function() {
    $('#dataTableExample').DataTable({
      "pageLength": 10, // Show fewer rows by default
      "language": {
        "search": "_INPUT_",
        "searchPlaceholder": "Search...",
        "lengthMenu": "Show _MENU_ entries",
        "info": "Showing _START_ to _END_ of _TOTAL_ entries",
        "infoEmpty": "Showing 0 to 0 of 0 entries",
        "infoFiltered": "(filtered from _MAX_ total entries)"
      }
    });
    
    // Mark single notification as read
    $(document).on('click', '.mark-as-read', function() {
        const notificationId = $(this).data('id');
        const button = $(this);
        const row = button.closest('tr');
        
        $.ajax({
            url: "{{ route('notifications.mark-as-read', ['id' => 'PLACEHOLDER']) }}".replace('PLACEHOLDER', notificationId),
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if(response.success) {
                    row.removeClass('bg-light');
                    row.find('.badge')
                        .removeClass('bg-warning')
                        .addClass('bg-success')
                        .text('Read');
                    button.remove();
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Marked as read',
                        text: '',
                        timer: 1000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Failed to mark notification as read',
                    timer: 2000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }
        });
    });
    
    // Mark all notifications as read
    $('#mark-all-read').click(function() {
        $.ajax({
            url: "{{ route('notifications.mark-all-read') }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if(response.success) {
                    $('tr').removeClass('bg-light');
                    $('.badge.bg-warning')
                        .removeClass('bg-warning')
                        .addClass('bg-success')
                        .text('Read');
                    $('.mark-as-read').remove();
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'All marked as read',
                        text: '',
                        timer: 1000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON?.message || 'Failed to mark all notifications as read',
                    timer: 2000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }
        });
    });
});
</script>
@endpush