@extends('layouts.app')

@section('content')
<div class="row mb-4 align-items-center">
    <div class="col-lg-8">
        <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('experiences.index') }}" class="text-decoration-none text-muted small">Experience</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">Experience Preview</h2>
        <p class="text-secondary small mb-0">Review how this experience record looks.</p>
    </div>
    <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        <div class="experience-actions justify-content-lg-end">
            <a href="{{route('experiences.index')}}" class="action-btn action-btn-light">
                <i class="bi bi-arrow-left"></i>
                <span>Back to List</span>
            </a>
            <a href="{{route('experiences.edit', $experience->id)}}" class="action-btn action-btn-primary">
                <i class="bi bi-pencil-square"></i>
                <span>Edit Experience</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="hero-preview position-relative bg-light d-flex align-items-center justify-content-center p-5">
                <div class="text-center">
                    @if(!empty($experience->company_logo) && Storage::disk('public')->exists($experience->company_logo))
                        <div class="company-logo-preview bg-white shadow-sm p-4 rounded-4 mb-4 mx-auto border" style="max-width: 200px;">
                            <img src="{{ asset('storage/' . $experience->company_logo) }}" alt="{{ $experience->company_name }}" class="img-fluid object-fit-contain">
                        </div>
                    @else
                        <div class="fallback-icon mx-auto mb-4">
                            <i class="bi bi-building"></i>
                        </div>
                    @endif
                    <span class="badge hero-badge rounded-pill px-3 py-2 mb-3 bg-primary">Professional Timeline Highlight</span>
                    <h1 class="hero-heading text-dark">{{ $experience->company_name }}</h1>
                    <p class="hero-subheading text-secondary mb-0 fs-5">{{ $experience->job_title }}</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>Experience Details
                </h6>

                <div class="detail-row">
                    <span class="detail-label">Record ID</span>
                    <span class="badge bg-light text-dark border fw-bold">#{{ $experience->id ?? 'N/A' }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Company Name</span>
                    <span class="detail-value">{{ $experience->company_name }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Job Title</span>
                    <span class="detail-value text-break">{{ $experience->job_title }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Designation</span>
                    <span class="detail-value text-break">{{ $experience->designation ?? 'N/A' }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Duration</span>
                    <span class="detail-value text-break">{{ $experience->start_year }} - {{ $experience->end_year }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Description</span>
                    <span class="detail-value text-break text-start">{{ Str::limit($experience->description, 100) }}</span>
                </div>

                <div class="detail-row">
                    <span class="detail-label">Logo Status</span>
                    @if(!empty($experience->company_logo))
                        <span class="badge bg-success-subtle text-success rounded-pill px-3">Uploaded</span>
                    @else
                        <span class="badge bg-light text-secondary border rounded-pill px-3">Not Added</span>
                    @endif
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <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">{{ isset($experience->created_at) ? $experience->created_at->format('d M, Y h:i A') : 'Not available' }}</span>
                    <span class="text-secondary small">{{ isset($experience->created_at) ? $experience->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">{{ isset($experience->updated_at) ? $experience->updated_at->format('d M, Y h:i A') : 'Not available' }}</span>
                    <span class="text-secondary small">{{ isset($experience->updated_at) ? $experience->updated_at->diffForHumans() : '' }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .experience-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 i {
        font-size: 1rem;
    }
    .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;
    }
    .hero-preview {
        min-height: 500px;
        background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    }
    .company-logo-preview {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fallback-icon {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        background-color: #dbeafe;
        color: #2563eb;
        font-size: 3rem;
        border: 1px solid rgba(37, 99, 235, 0.1);
    }
    .hero-heading {
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 0.5rem;
    }
    .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;
    }
    .bg-success-subtle {
        background-color: #ecfdf5 !important;
    }
    .text-success {
        color: #10b981 !important;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: "\2022";
        color: #cbd5e1;
    }
    @media (max-width: 767.98px) {
        .experience-actions {
            flex-direction: column;
        }
        .action-btn {
            width: 100%;
        }
        .hero-preview {
            min-height: 420px;
        }
        .detail-row {
            flex-direction: column;
        }
        .detail-value {
            text-align: left;
        }
    }
</style>
@endsection
