@extends('layouts.front.main')
@section('title', 'Notifications')
@section('style')
<link href="{{ asset('assets/css/star-rating.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')
<style>
    .notification-item {
        cursor: pointer;
        color: #fff;
        transition: all 0.3s ease;
    }
    .notification-item:hover {
        color: rgb(190, 3, 47);
        background: rgba(190, 3, 47, 0.1);
    }
    .notification-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .badge-program {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .badge-podcast {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    .badge-episode {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    .badge-live_show {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    .remove-notification-btn {
        color: #e03136;
        opacity: 0.8;
        transition: all 0.3s ease;
    }
    .remove-notification-btn:hover {
        opacity: 1;
        transform: scale(1.1);
    }
</style>

@php
$playlist = [];
@endphp

<div class="ms-banner hero-area-two1">
    <div class="container">
        <h2 class="mb-4">
            <i class="fas fa-bell mr-2" style="color: #e03136;"></i>
            My Notifications
        </h2>

        @if($notifications->count() > 0)
        <div class="ms_album_single_wrapper">
            <!----Notification List---->
            <div class="album_inner_list">
                <div class="album_list_wrapper">
                    <ul class="album_list_name">
                        <li style="width: 5%;"></li>
                        <li style="width: 35%;">Content Name</li>
                        <li style="width: 15%;">Type</li>
                        <li style="width: 20%;">Subscribed Since</li>
                        <li style="width: 15%;" class="text-center">Status</li>
                        <li style="width: 10%;" class="text-center">Remove</li>
                    </ul>

                    @foreach($notifications as $notification)
                    @php
                        // Get the content details based on type
                        $contentName = '';
                        $contentImage = '';
                        $contentLink = '#';
                        $contentId = $notification->content_id;
                        
                        switch($notification->content_type) {
                            case 'program':
                                $program = \Modules\Album\Entities\Program::find($contentId);
                                if($program) {
                                    $contentName = $program->program_name;
                                    $contentImage = asset('images/programs/'.$program->image);
                                    $contentLink = route('program_details', ['slug' => $program->slug]);
                                }
                                break;
                            
                            case 'podcast':
                                $podcast = \Modules\Album\Entities\Podcast::find($contentId);
                                if($podcast) {
                                    $contentName = $podcast->album_name;
                                    if($podcast->image && (strpos($podcast->image, 'http') !== false))
                                        $contentImage = $podcast->image;
                                    else if($podcast->image && file_exists(public_path('images/podcast/'.$podcast->image)))
                                        $contentImage = asset('images/podcast/'.$podcast->image);
                                    else
                                        $contentImage = dummyImage('custom', $podcast->album_slug, 500);
                                    $contentLink = route('single_album', ['slug' => $podcast->album_slug]);
                                }
                                break;
                            
                            case 'episode':
                                $audio = \Modules\Audio\Entities\Audio::find($contentId);
                                if($audio) {
                                    $contentName = $audio->audio_title;
                                    $contentImage = $audio->image;
                                    $contentLink = route('program_details', ['slug' => $audio->parent_program->slug ?? '']);
                                }
                                break;
                        }

                        // Skip if content not found
                        if(!$contentName) continue;
                    @endphp

                    <ul class="notification-item" data-notif-id="{{ $notification->id }}">
                        <li style="width: 5%;">
                            <div style="width: 40px; height: 40px; border-radius: 8px; overflow: hidden;">
                                <img src="{{ $contentImage }}" alt="{{ $contentName }}" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </li>
                        
                        <li style="width: 35%;">
                            <a href="{{ $contentLink }}" style="color: #fff; text-decoration: none;">
                                {{ Str::limit($contentName, 50) }}
                            </a>
                        </li>
                        
                        <li style="width: 15%;">
                            <span class="notification-badge badge-{{ $notification->content_type }}">
                                {{ ucfirst(str_replace('_', ' ', $notification->content_type)) }}
                            </span>
                        </li>
                        
                        <li style="width: 20%;">
                            {{ $notification->created_at->format('M d, Y') }}
                        </li>
                        
                        <li style="width: 15%;" class="text-center">
                            <span style="color: #38ef7d;">
                                <i class="fas fa-bell mr-1"></i> Active
                            </span>
                        </li>
                        
                        <li style="width: 10%;" class="text-center">
                            <a href="javascript:;" 
                               class="remove-notification" 
                               data-notif-id="{{ $notification->id }}"
                               data-content-type="{{ $notification->content_type }}"
                               data-content-id="{{ $notification->content_id }}"
                               data-content-name="{{ $contentName }}"
                               title="Remove notification">
                                <i class="fas fa-times-circle fa-lg"></i>
                            </a>
                        </li>
                    </ul>
                    @endforeach
                </div>
            </div>
        </div>

        @else
        <div class="text-center py-5">
            <div class="mb-4">
                <i class="far fa-bell-slash" style="font-size: 80px; color: rgba(255,255,255,0.2);"></i>
            </div>
            <h3 style="color: rgba(255,255,255,0.6); font-weight: 400;">No Active Notifications</h3>
            <p style="color: rgba(255,255,255,0.4); margin-top: 10px;">
                Click the <i class="far fa-bell"></i> icon on any program or podcast to get notified when new content is available.
            </p>
            <a href="{{ route('home') }}" class="ms_btn mt-4" style="display: inline-block; padding: 12px 30px;">
                Browse Content
            </a>
        </div>
        @endif
    </div>
</div>

@endsection

@section('script')
<script>
$(document).ready(function() {
    // Remove notification handler
    $('.remove-notification').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var notifId = $(this).attr('data-notif-id');
        var contentType = $(this).attr('data-content-type');
        var contentId = $(this).attr('data-content-id');
        var contentName = $(this).attr('data-content-name');
        var notifRow = $(this).closest('.notification-item');
        
        if(confirm('Stop receiving notifications for "' + contentName + '"?')) {
            $(".ms_ajax_loader").show();
            
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'post',
                url: baseURL + '/notifications/toggle-subscription',
                data: {
                    content_id: contentId,
                    content_type: contentType,
                    content_name: contentName
                },
                dataType: 'json',
                success: function(result) {
                    $(".ms_ajax_loader").hide();
                    
                    if(result.success) {
                        // Remove the row with animation
                        notifRow.fadeOut(300, function() {
                            $(this).remove();
                            
                            // Check if list is empty
                            if($('.notification-item').length === 0) {
                                location.reload();
                            }
                        });
                        
                        toastr.success('Notification removed successfully');
                    } else {
                        toastr.error(result.message || 'Failed to remove notification');
                    }
                },
                error: function(xhr, status, error) {
                    $(".ms_ajax_loader").hide();
                    toastr.error('Failed to remove notification');
                    console.error('Error:', error);
                }
            });
        }
    });
    
    // Click on row to go to content (except when clicking remove button)
    $('.notification-item').on('click', function(e) {
        if(!$(e.target).closest('.remove-notification').length) {
            var link = $(this).find('a').first().attr('href');
            if(link && link !== '#') {
                window.location.href = link;
            }
        }
    });
});
</script>
@endsection