@extends('layouts.app')

@section('title', 'Notifications')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-bell"></i>
                        Notifications
                        @if($unreadCount > 0)
                            <span class="badge badge-danger ml-2">{{ $unreadCount }}</span>
                        @endif
                    </h3>
                    <div class="card-tools">
                        @if($unreadCount > 0)
                            <button type="button" class="btn btn-sm btn-outline-primary" id="markAllReadBtn">
                                <i class="fas fa-check-double"></i>
                                Mark All Read
                            </button>
                        @endif
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="clearReadBtn">
                            <i class="fas fa-trash"></i>
                            Clear Read
                        </button>
                        <a href="{{ route('notifications.history') }}" class="btn btn-sm btn-outline-info">
                            <i class="fas fa-history"></i>
                            History
                        </a>
                    </div>
                </div>
                
                <div class="card-body p-0">
                    @if($notifications->count() > 0)
                        <div class="list-group list-group-flush" id="notificationsList">
                            @foreach($notifications as $notification)
                                <div class="list-group-item notification-item {{ $notification->read_at ? '' : 'unread' }}" 
                                     data-id="{{ $notification->id }}">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            @if(!$notification->read_at)
                                                <div class="unread-indicator"></div>
                                            @endif
                                        </div>
                                        <div class="col-auto">
                                            <div class="notification-icon">
                                                @php
                                                    $type = $notification->data['type'] ?? 'general';
                                                    $iconClass = match($type) {
                                                        'frost', 'freeze' => 'fas fa-snowflake text-info',
                                                        'extreme_weather', 'wind', 'rain' => 'fas fa-cloud-bolt text-warning',
                                                        'task_due', 'task_overdue' => 'fas fa-tasks text-primary',
                                                        'equipment_maintenance' => 'fas fa-wrench text-orange',
                                                        'test' => 'fas fa-vial text-success',
                                                        default => 'fas fa-info-circle text-secondary',
                                                    };
                                                @endphp
                                                <i class="{{ $iconClass }}"></i>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <h6 class="notification-title mb-1">
                                                {{ $notification->data['title'] ?? 'Notification' }}
                                            </h6>
                                            <p class="notification-message mb-1">
                                                {{ $notification->data['message'] ?? '' }}
                                            </p>
                                            <small class="text-muted">
                                                {{ $notification->created_at->diffForHumans() }}
                                            </small>
                                        </div>
                                        <div class="col-auto">
                                            <div class="btn-group" role="group">
                                                @if(!$notification->read_at)
                                                    <button type="button" class="btn btn-sm btn-outline-primary mark-read-btn"
                                                            data-id="{{ $notification->id }}">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                @endif
                                                <button type="button" class="btn btn-sm btn-outline-danger delete-btn"
                                                        data-id="{{ $notification->id }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="card-footer">
                            {{ $notifications->links() }}
                        </div>
                    @else
                        <div class="text-center p-5">
                            <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                            <h5>No notifications</h5>
                            <p class="text-muted">You don't have any notifications yet.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.notification-item {
    transition: all 0.3s ease;
}

.notification-item.unread {
    background-color: #f8f9fe;
    border-left: 4px solid #007bff;
}

.unread-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #007bff;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-title {
    font-weight: 600;
    color: #2d3748;
}

.notification-message {
    color: #4a5568;
    font-size: 0.9em;
}

.notification-item:hover {
    background-color: #f7fafc;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Mark single notification as read
    $('.mark-read-btn').on('click', function() {
        const notificationId = $(this).data('id');
        const $item = $(this).closest('.notification-item');
        
        $.post(`/notifications/${notificationId}/read`, {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.success) {
                $item.removeClass('unread');
                $item.find('.unread-indicator').remove();
                $item.find('.mark-read-btn').remove();
                updateBadgeCount(response.unread_count);
                showToast('Notification marked as read', 'success');
            }
        })
        .fail(function() {
            showToast('Failed to mark notification as read', 'error');
        });
    });
    
    // Mark all notifications as read
    $('#markAllReadBtn').on('click', function() {
        $.post('/notifications/read-all', {
            _token: '{{ csrf_token() }}'
        })
        .done(function(response) {
            if (response.success) {
                $('.notification-item').removeClass('unread');
                $('.unread-indicator').remove();
                $('.mark-read-btn').remove();
                $('#markAllReadBtn').hide();
                updateBadgeCount(0);
                showToast(response.message, 'success');
            }
        })
        .fail(function() {
            showToast('Failed to mark all notifications as read', 'error');
        });
    });
    
    // Delete notification
    $('.delete-btn').on('click', function() {
        const notificationId = $(this).data('id');
        const $item = $(this).closest('.notification-item');
        
        if (confirm('Are you sure you want to delete this notification?')) {
            $.ajax({
                url: `/notifications/${notificationId}`,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                }
            })
            .done(function(response) {
                if (response.success) {
                    $item.fadeOut(300, function() {
                        $(this).remove();
                    });
                    updateBadgeCount(response.unread_count);
                    showToast(response.message, 'success');
                }
            })
            .fail(function() {
                showToast('Failed to delete notification', 'error');
            });
        }
    });
    
    // Clear read notifications
    $('#clearReadBtn').on('click', function() {
        if (confirm('Are you sure you want to clear all read notifications?')) {
            $.post('/notifications/clear-read', {
                _token: '{{ csrf_token() }}'
            })
            .done(function(response) {
                if (response.success) {
                    $('.notification-item:not(.unread)').fadeOut(300, function() {
                        $(this).remove();
                    });
                    showToast(response.message, 'success');
                }
            })
            .fail(function() {
                showToast('Failed to clear read notifications', 'error');
            });
        }
    });
});

function updateBadgeCount(count) {
    const $badge = $('.card-title .badge');
    if (count > 0) {
        if ($badge.length === 0) {
            $('.card-title').append(`<span class="badge badge-danger ml-2">${count}</span>`);
        } else {
            $badge.text(count);
        }
        $('#markAllReadBtn').show();
    } else {
        $badge.remove();
        $('#markAllReadBtn').hide();
    }
}

function showToast(message, type) {
    // Simple toast notification - you can replace with your preferred toast library
    const toast = $(`
        <div class="alert alert-${type === 'error' ? 'danger' : 'success'} alert-dismissible fade show position-fixed" 
             style="top: 20px; right: 20px; z-index: 9999;">
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `);
    
    $('body').append(toast);
    
    setTimeout(function() {
        toast.alert('close');
    }, 3000);
}
</script>
@endpush
@endsection