@extends('layouts.app')

@section('content')
@php
    $isActive = strtolower((string) $project->status) === 'active';
@endphp

<div class="row mb-4 align-items-center">
    <div class="col-xl-7">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-muted small">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('projects.index') }}" class="text-decoration-none text-muted small">Projects</a></li>
                <li class="breadcrumb-item active text-primary small fw-semibold" aria-current="page">Preview</li>
            </ol>
        </nav>
        <h2 class="fw-bold text-dark mb-1">Project Preview</h2>
        <p class="text-secondary small mb-0">Review the project presentation, links, and technology stack before making further changes.</p>
    </div>
    <div class="col-xl-5 text-xl-end mt-3 mt-xl-0">
        <div class="project-actions justify-content-xl-end">
            <a href="{{ route('projects.index') }}" class="action-btn action-btn-light">
                <i class="bi bi-arrow-left"></i>
                <span>Back to List</span>
            </a>
            <a href="{{ route('projects.edit', $project->id) }}" class="action-btn action-btn-primary">
                <i class="bi bi-pencil-square"></i>
                <span>Edit Project</span>
            </a>
            <a href="{{ route('projects.create') }}" class="action-btn action-btn-soft">
                <i class="bi bi-plus-circle"></i>
                <span>New Project</span>
            </a>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
            <div class="project-hero">
                @if(!empty($project->image))
                    <img src="{{ asset('storage/' . $project->image) }}" alt="{{ $project->project_name }}" class="project-hero-image">
                    <div class="project-hero-overlay"></div>
                @else
                    <div class="project-hero-fallback d-flex align-items-center justify-content-center">
                        <div class="text-center px-4">
                            <div class="fallback-icon mx-auto mb-3">
                                <i class="bi bi-window-stack"></i>
                            </div>
                            <h5 class="fw-bold text-dark mb-2">No project image uploaded</h5>
                            <p class="text-secondary small mb-0">The project will still be saved, but adding a preview image will make it feel much stronger on the portfolio.</p>
                        </div>
                    </div>
                @endif

                <div class="project-hero-copy">
                    <span class="badge hero-badge rounded-pill px-3 py-2 mb-3 {{ $isActive ? 'hero-badge-active' : 'hero-badge-inactive' }}">
                        {{ ucfirst($project->status) }} Project
                    </span>
                    <h1 class="project-hero-heading">{{ $project->project_name }}</h1>
                    <p class="project-hero-description mb-0">{{ $project->short_description }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-4">
                    <i class="bi bi-card-checklist me-2 text-primary"></i>Project Details
                </h6>

                <div class="detail-row">
                    <span class="detail-label">Project ID</span>
                    <span class="badge bg-light text-dark border fw-bold">#{{ $project->id }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Status</span>
                    <span class="badge rounded-pill px-3 py-2 {{ $isActive ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }}">
                        {{ ucfirst($project->status) }}
                    </span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Image</span>
                    <span class="detail-value">{{ !empty($project->image) ? 'Uploaded' : 'Not added' }}</span>
                </div>

                <div class="detail-row mb-0">
                    <span class="detail-label">Technologies</span>
                    <span class="detail-value">{{ $project->technologies->count() }}</span>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-4">
                    <i class="bi bi-link-45deg me-2 text-primary"></i>Project Links
                </h6>

                <div class="link-stack">
                    @if($project->github_link)
                        <a href="{{ $project->github_link }}" target="_blank" rel="noopener" class="preview-link-card">
                            <div class="preview-link-icon bg-dark text-white">
                                <i class="bi bi-github"></i>
                            </div>
                            <div>
                                <span class="preview-link-label">GitHub Repository</span>
                                <span class="preview-link-copy">Open source code</span>
                            </div>
                            <i class="bi bi-box-arrow-up-right ms-auto text-secondary"></i>
                        </a>
                    @endif

                    @if($project->live_demo_link)
                        <a href="{{ $project->live_demo_link }}" target="_blank" rel="noopener" class="preview-link-card">
                            <div class="preview-link-icon bg-primary text-white">
                                <i class="bi bi-globe2"></i>
                            </div>
                            <div>
                                <span class="preview-link-label">Live Demo</span>
                                <span class="preview-link-copy">View deployed project</span>
                            </div>
                            <i class="bi bi-box-arrow-up-right ms-auto text-secondary"></i>
                        </a>
                    @endif

                    @if(!$project->github_link && !$project->live_demo_link)
                        <div class="empty-link-card">
                            <i class="bi bi-link-45deg text-secondary me-2"></i>
                            <span class="text-secondary small">No external project links have been added yet.</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mt-1">
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-3">
                    <i class="bi bi-cpu-fill me-2 text-primary"></i>Technology Stack
                </h6>

                @if($project->technologies->isNotEmpty())
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($project->technologies as $technology)
                            <span class="tech-chip-large">
                                <span class="tech-chip-dot" style="background-color: {{ $technology->color ?: '#3b82f6' }};"></span>
                                <span>{{ $technology->name }}</span>
                                @if($technology->icon)
                                    <small>{{ $technology->icon }}</small>
                                @endif
                            </span>
                        @endforeach
                    </div>
                @else
                    <div class="empty-link-card">
                        <i class="bi bi-diagram-3 text-secondary me-2"></i>
                        <span class="text-secondary small">No technologies are linked to this project yet.</span>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-4">
                    <i class="bi bi-clock-history me-2 text-primary"></i>Timeline
                </h6>

                <div class="timeline-item">
                    <span class="detail-label d-block mb-1">Created</span>
                    <span class="detail-value d-block">{{ $project->created_at ? $project->created_at->format('d M, Y h:i A') : 'Not available' }}</span>
                    <span class="text-secondary small">{{ $project->created_at ? $project->created_at->diffForHumans() : '' }}</span>
                </div>

                <div class="timeline-item mb-0">
                    <span class="detail-label d-block mb-1">Last Updated</span>
                    <span class="detail-value d-block">{{ $project->updated_at ? $project->updated_at->format('d M, Y h:i A') : 'Not available' }}</span>
                    <span class="text-secondary small">{{ $project->updated_at ? $project->updated_at->diffForHumans() : '' }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .project-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        min-height: 48px;
        padding: 0.75rem 1.25rem;
        border-radius: 14px;
        border: 1px solid transparent;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .action-btn-light {
        background-color: #ffffff;
        border-color: #e2e8f0;
        color: #0f172a;
    }
    .action-btn-light:hover {
        background-color: #f8fafc;
        color: #0f172a;
    }
    .action-btn-primary {
        background-color: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.16);
    }
    .action-btn-primary:hover {
        background-color: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }
    .action-btn-soft {
        background-color: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }
    .action-btn-soft:hover {
        background-color: #dbeafe;
        color: #1d4ed8;
    }
    .project-hero {
        min-height: 520px;
        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
        position: relative;
    }
    .project-hero-image {
        width: 100%;
        height: 520px;
        object-fit: cover;
        display: block;
    }
    .project-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(15, 23, 42, 0.9) 8%, rgba(15, 23, 42, 0.35) 55%, rgba(15, 23, 42, 0.78) 100%);
    }
    .project-hero-fallback {
        min-height: 520px;
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    }
    .fallback-icon {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        background-color: #dbeafe;
        color: #2563eb;
        font-size: 2rem;
    }
    .project-hero-copy {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2rem;
        z-index: 2;
        color: #fff;
    }
    .hero-badge {
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(4px);
    }
    .hero-badge-active {
        background-color: rgba(16, 185, 129, 0.18);
        color: #ecfdf5;
    }
    .hero-badge-inactive {
        background-color: rgba(245, 158, 11, 0.16);
        color: #fef3c7;
    }
    .project-hero-heading {
        font-size: clamp(2rem, 4vw, 3.4rem);
        font-weight: 800;
        line-height: 1.08;
        margin-bottom: 1rem;
    }
    .project-hero-description {
        max-width: 640px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1rem;
    }
    .detail-row,
    .timeline-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .timeline-item {
        display: block;
    }
    .detail-row:last-child,
    .timeline-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .detail-label {
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }
    .detail-value {
        color: #0f172a;
        font-weight: 600;
        text-align: right;
    }
    .preview-link-card,
    .empty-link-card {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        text-decoration: none;
        background: #fff;
    }
    .preview-link-card:hover {
        border-color: #93c5fd;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }
    .preview-link-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .preview-link-label {
        display: block;
        color: #0f172a;
        font-weight: 700;
        line-height: 1.1;
    }
    .preview-link-copy {
        display: block;
        color: #64748b;
        font-size: 0.82rem;
        margin-top: 0.2rem;
    }
    .link-stack {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }
    .tech-chip-large {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.7rem 1rem;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #0f172a;
        font-weight: 600;
    }
    .tech-chip-large small {
        color: #64748b;
        font-weight: 500;
    }
    .tech-chip-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        flex-shrink: 0;
    }
    .bg-success-subtle {
        background-color: #ecfdf5 !important;
    }
    .bg-warning-subtle {
        background-color: #fffbeb !important;
    }
    .text-success {
        color: #10b981 !important;
    }
    .text-warning {
        color: #d97706 !important;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: "\2022";
        color: #cbd5e1;
    }
    @media (max-width: 767.98px) {
        .project-actions {
            flex-direction: column;
        }
        .action-btn {
            width: 100%;
        }
        .project-hero,
        .project-hero-image,
        .project-hero-fallback {
            min-height: 420px;
            height: 420px;
        }
        .project-hero-copy {
            padding: 1.5rem;
        }
        .detail-row {
            flex-direction: column;
        }
        .detail-value {
            text-align: left;
        }
    }
</style>
@endsection