@extends('layouts.front.app')

@section('title', 'My Saved Research & Bookmarks - JotiJournal')
@section('meta_description', 'Access all your saved legal judgments, research articles, and circulars in one centralized location. Organize your legal research efficiently.')
@section('meta_keywords', 'saved judgments, legal bookmarks, research archive, JotiJournal wishlists')


@section('content')
<section class="breadcrumb-section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('welcome') }}">Home</a></li>
                <li aria-current="page" class="breadcrumb-item active text-dark">Saved Research</li>
            </ol>
        </nav>
    </div>
</section>

<main class="container py-5">
    <div class="row mb-3 animate-up">
        <div class="col-12 text-center">
            <h2 class="h3 font-serif mb-2" style="color: var(--legal-blue);">Saved Research & Articles</h2>
            <p class="text-muted mx-auto mb-2" style="max-width: 700px; font-size: 0.95rem;">
                Your personal library of legal precedents, notifications, and scholarly articles, organized by folders.
            </p>
            <div class="header-line mx-auto"></div>
        </div>
    </div>

    <div class="row g-4 animate-up" style="animation-delay: 0.1s;">
        <!-- New Folder Card (Action) -->
        <div class="col-md-4 col-lg-3">
            <div class="card h-100 border-dashed text-center p-4 d-flex align-items-center justify-content-center bg-light-subtle pointer-hover" id="createNewFolderCard" style="border: 2px dashed #cbd5e1; border-radius: 16px; min-height: 200px;">
                <div class="folder-action-icon mb-3">
                    <i class="fa-solid fa-folder-plus fa-3x" style="color: var(--legal-gold);"></i>
                </div>
                <h3 class="h5 font-serif mb-2">Create New Folder</h3>
                <p class="small text-muted">Start a new research project</p>
            </div>
        </div>

        <!-- Dynamic Folder Cards -->
        @forelse($folders as $index => $folder)
            <div class="col-md-4 col-lg-3 animate-up" style="animation-delay: {{ 0.2 + ($index * 0.1) }}s;">
                <div class="card h-100 folder-card shadow-sm border-0" style="border-radius: 16px; overflow: hidden; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="folder-icon-box">
                                <i class="fa-solid fa-folder fa-3x" style="color: var(--legal-gold);"></i>
                            </div>
                            <form action="{{ route('user.folder.delete', $folder->id) }}" method="POST" onsubmit="return confirm('Delete this folder and all saved items inside it?');" style="position: relative; z-index: 2;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-link p-0 folder-delete-btn" title="Delete folder">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </form>
                        </div>
                        <h3 class="h5 font-serif mb-2">{{ $folder->folder_name }}</h3>
                        <div class="d-flex align-items-center mb-0 mt-3">
                            <span class="badge bg-light text-dark border me-2">
                                {{ $folder->wishlists_count ?? $folder->wishlists->count() }} items
                            </span>
                            <span class="small text-muted">Updated {{ $folder->updated_at->diffForHumans() }}</span>
                        </div>
                        <a href="{{ route('user.folder.view', $folder->id) }}" class="stretched-link"></a>
                    </div>
                </div>
            </div>
        @empty
            <!-- If no folders, this will be handled by the "Create" card which is always shown -->
        @endforelse
    </div>
</main>

@include('users.partials._create_folder_modal')

<style>
.folder-card .folder-delete-btn {
    color: #94a3b8;
    text-decoration: none;
}
.folder-card .folder-delete-btn:hover {
    color: #dc3545;
}
</style>
@endsection