@extends('layouts.acorn.acorn_admin_app')
@section('header_styles')
    
    <style>
        :root {
            --primary-color: #0d6efd;
            --dark-blue: #1e293b;
        }

        body {
            background: #f4f7ff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .main-header {
            background-color: var(--dark-blue);
            padding: 0.75rem 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand-custom {
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
            text-decoration: none;
        }

        .content-body {
            padding: 2rem;
            flex-grow: 1;
        }

        .card-dashboard {
            background: #fff;
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }

        .project-card {
            transition: 0.2s;
        }

        .project-card:hover {
            transform: translateY(-2px);
        }

        .text-muted-small {
            font-size: 0.85rem;
            color: #64748b;
        }
    </style>
@endsection
@section('content')
    <!-- MAIN CONTENT -->
    <main class="content-body">
        <div class="container-fluid">
            <div class="card card-dashboard p-4">
                <!-- PROJECT LIST (HORIZONTAL CARDS) -->
                <div class="d-flex flex-column gap-4">
                    @forelse($accessedLongTermProjectList as $accessedLongTermProject)
                        <div class="card project-card border-0 shadow-sm rounded-4">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-lg-9">
                                        <h4 class="fw-bold text-primary mb-2">
                                            {{ $accessedLongTermProject->title }}
                                        </h4>
                                        <span class="badge bg-primary-subtle text-primary px-3 py-2 mb-3 d-inline-block">
                                            Project No: {{ $accessedLongTermProject->project_no }}
                                        </span>
                                        <div class="row g-3 mb-3">
                                            <div class="col-md-4">
                                                <div class="text-muted-small">Budget</div>
                                                <div class="fw-semibold text-success">
                                                    ${{ number_format($accessedLongTermProject->budget, 2) }}
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="text-muted-small">Start Date</div>
                                                <div>
                                                    {{ \Carbon\Carbon::parse($accessedLongTermProject->start_date)->format('Y-m-d') }}
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="text-muted-small">End Date</div>
                                                <div>
                                                    {{ \Carbon\Carbon::parse($accessedLongTermProject->end_date)->format('Y-m-d') }}
                                                </div>
                                            </div>
                                        </div>
                                        <p class="text-secondary small mb-0">
                                            {{ \Illuminate\Support\Str::limit($accessedLongTermProject->description, 160) }}
                                        </p>
                                    </div>

                                    <!-- RIGHT BUTTON -->
                                    <div class="col-lg-3 text-lg-end mt-3 mt-lg-0">
                                        <a href="{{ route('admin-long-term-project-view', ['id' => $accessedLongTermProject->id]) }}" class="btn btn-primary px-4 py-2 rounded-3">
                                            <i class="fa-solid fa-eye me-2"></i>
                                            View Project
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-5 text-muted">
                            <i class="fa fa-folder-open fa-3x mb-3 opacity-50"></i>
                            <h5>No Projects Found</h5>
                            <p class="mb-0">No long term projects assigned.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </main>
@endsection
@section('footer_scripts')
@endsection