@extends('layouts.app')
@section('page-pretitle', __('Quick Access'))
@section('page-title', __('Bookmark'))

@section('content')
@if (session('success'))
    <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
        <div class="flex-grow-1">
            {{ session('success') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<style>
    .bookmark-enter {
        opacity: 0;
        transform: translateY(20px);
        animation: slideFadeIn 0.5s ease forwards;
    }

    @keyframes slideFadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .bookmark-delay-1 { animation-delay: 0.1s; }
    .bookmark-delay-2 { animation-delay: 0.2s; }
    .bookmark-delay-3 { animation-delay: 0.3s; }

    .dropdown-menu {
        z-index: 1050 !important;
        margin-top: -20px !important; /* Pull it upward slightly */
    }
</style>

<div class="page-wrapper">
    <div class="container">
        <div class="card shadow-sm">
            <div class="card-header">
                <h3 class="card-title">{{ __('List of Bookmarks') }}</h3>
            </div>

            {{-- Search Filter --}}
            <div class="card-header d-flex flex-column" style="align-items: normal;">
                <div class="d-flex justify-content-between" data-bs-toggle="collapse" data-bs-target="#search-col">
                    <h3 class="card-title">{{ __('Search Filter') }}</h3>
                    <div class="card-actions btn-actions">
                        <button type="button" class="btn-action" data-bs-toggle="collapse" data-bs-target="#search-col">
                            <i class="ti ti-search"></i>
                        </button>
                    </div>
                </div>
                <div id="search-col" class="mt-3 collapse @if(request('q')) show @endif">
                    <form id="form-search" method="GET" action="{{ route('bookmark.index') }}">
                        <input type="hidden" id="h-entries" name="entries" value="{{ request('entries') }}">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="description" name="description" value="{{ request('description') }}" autocomplete="off">
                                    <label for="description">{{ __('Description') }}</label>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="ref_no" name="ref_no" value="{{ request('ref_no') }}" autocomplete="off">
                                    <label for="ref_no">{{ __('Ref. No.') }}</label>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="client" name="client" value="{{ request('client') }}" autocomplete="off">
                                    <label for="client">{{ __('Client') }}</label>
                                </div>
                            </div>

                            <div class="col-auto d-flex align-items-center">
                                <button type="submit" title="{{ __('Search') }}" name="q" value="1" class="btn btn-ghost-info me-1 mt-2">
                                    <i class="ti ti-search"></i>
                                </button>
                                <a href="{{ route('bookmark.index') }}" class="btn btn-ghost-yellow mt-2" title="{{ __('Reset') }}">
                                    <i class="ti ti-refresh"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body border-bottom py-2">
                @if ($bookmarkedProjects->isEmpty())
                    <div class="alert alert-warning text-center m-2">
                        <i class="ti ti-info-circle me-2"></i> No bookmarked projects found.
                    </div>
                @else
                    @foreach($bookmarkedProjects as $index => $bookmark)
                        @php
                            $project = $bookmark->project;
                            $delayClass = 'bookmark-delay-' . min($index + 1, 3);
                        @endphp

                        <div class="alert alert-info m-2 d-flex justify-content-between align-items-start bookmark-enter {{ $delayClass }}" style="min-height: 140px;">
                            <div style="width: 100%;">
                                <div class="d-flex justify-content-between text-muted">
                                    <div class="d-flex align-items-center text-muted mb-3">
                                        <i class="ti ti-star text-warning fs-4 me-2"></i>
                                        <h4 class="mb-0">{{ $project->ref_no ?? '-' }}</h4>
                                    </div>
                                    <small>
                                        <span class="badge badge-outline text-blue" style="font-size: 12px;">
                                            {{ strtoupper($project->client) }}
                                        </span>
                                    </small>
                                </div>

                                <p class="mb-3">{{ strtoupper($project->description) ?? 'No description available.' }}</p>

                                <small class="d-flex justify-content-between text-muted">
                                    Bookmarked on {{ $bookmark->created_at->format('d M Y') }}
                                </small>
                            </div>

                            <div class="dropdown">
                                <button class="btn btn-icon btn-light" type="button"
                                    id="dropdownMenuButton{{ $project->id }}"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="ti ti-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $project->id }}">
                                    <li>
                                        <a href="{{ route('project_list.show', $project->id) }}" class="dropdown-item text-primary">
                                            <i class="ti ti-eye me-2"></i> View Project
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ route('project.tasks', ['project' => $project->id]) }}" class="dropdown-item text-cyan">
                                            <i class="ti ti-list-check me-2"></i> View Tasks
                                        </a>
                                    </li>
                                    <li>
                                        <form method="POST" action="{{ route('bookmark.toggle') }}" class="delete-form">
                                            @csrf
                                            <input type="hidden" name="type" value="project">
                                            <input type="hidden" name="id" value="{{ $project->id }}">
                                            <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                <i class="ti ti-trash me-2"></i> Remove Bookmark
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    @endforeach
                    {{ $bookmarkedProjects->links('pagination::bootstrap-5') }}
                @endif
            </div>
            
            <div class="card-footer">
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
document.addEventListener("DOMContentLoaded", () => {
    // Auto-submit search on entries change
    $('#entries').on('change', function () {
        $('#h-entries').val($(this).val());
        $('#form-search').submit();
    });

    // Auto-hide alerts
    ['error-alert', 'success-alert', 'validation-alert'].forEach(id => {
        const alert = document.getElementById(id);
        if (alert) {
            setTimeout(() => {
                alert.classList.remove('show');
                alert.classList.add('hide');
                setTimeout(() => alert.remove(), 500);
            }, 3000);
        }
    });
});
</script>
@endsection