@extends('layouts.app')

@section('title', '作品集 | Portfolio')

@section('content')
<style>
    /* Portfolio Section */
    .portfolio {
        padding: 6rem 5% 4rem;
        background: #fafafa;
        position: relative;
        min-height: 100vh;
    }

    .portfolio::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    }

    .section-header {
        max-width: 1400px;
        margin: 0 auto 4rem;
        text-align: center;
    }

    .section-label {
        display: inline-block;
        padding: 0.5rem 1.2rem;
        background: rgba(102, 126, 234, 0.1);
        color: var(--accent-blue);
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .section-title {
        font-family: 'Playfair Display', serif;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--text-primary);
    }

    .section-description {
        color: var(--text-secondary);
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Filter Buttons */
    .filter-container {
        max-width: 1400px;
        margin: 0 auto 3rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .filter-btn {
        padding: 0.6rem 1.5rem;
        background: white;
        color: var(--text-secondary);
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-radius: 50px;
        font-weight: 500;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .filter-btn:hover,
    .filter-btn.active {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
    }

    .portfolio-grid {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
    }

    .portfolio-item {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        cursor: pointer;
        position: relative;
    }

    .portfolio-item:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .portfolio-image {
        position: relative;
        overflow: hidden;
        aspect-ratio: 4/3;
    }

    .portfolio-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .portfolio-item:hover .portfolio-image img {
        transform: scale(1.1);
    }

    .portfolio-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .portfolio-item:hover .portfolio-overlay {
        opacity: 1;
    }

    .view-btn {
        padding: 0.8rem 1.8rem;
        background: white;
        color: var(--accent-purple);
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.4s ease 0.1s;
    }

    .portfolio-item:hover .view-btn {
        transform: translateY(0);
        opacity: 1;
    }

    .portfolio-content {
        padding: 1.5rem;
    }

    .portfolio-category {
        display: inline-block;
        padding: 0.3rem 0.8rem;
        background: rgba(102, 126, 234, 0.1);
        color: var(--accent-blue);
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 0.8rem;
    }

    .portfolio-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .portfolio-description {
        color: var(--text-secondary);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Modal */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 2000;
        justify-content: center;
        align-items: center;
        padding: 2rem;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 20px;
        max-width: 900px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        animation: modalFadeIn 0.3s ease;
    }

    @keyframes modalFadeIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        border-radius: 50%;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .modal-close:hover {
        background: rgba(0, 0, 0, 0.2);
        transform: rotate(90deg);
    }

    .modal-body {
        padding: 2rem;
    }

    .modal-image {
        width: 100%;
        border-radius: 15px;
        margin-bottom: 1.5rem;
    }

    .modal-title {
        font-family: 'Playfair Display', serif;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .modal-category {
        display: inline-block;
        padding: 0.3rem 0.8rem;
        background: rgba(102, 126, 234, 0.1);
        color: var(--accent-blue);
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .modal-description {
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.8;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .portfolio-grid {
            grid-template-columns: 1fr;
        }

        .filter-container {
            gap: 0.5rem;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-title {
            font-size: 1.5rem;
        }
    }
</style>

<!-- Portfolio Section -->
<section class="portfolio">
    <div class="section-header">
        <span class="section-label">作品集</span>
        <h2 class="section-title">我的设计作品</h2>
        <p class="section-description">每一个项目都是一次创意的探索,从品牌设计到UI/UX,展现多样化的设计能力。</p>
    </div>

    <!-- Filter Buttons -->
    <div class="filter-container">
        <button class="filter-btn active" data-filter="all">全部</button>
        @foreach($categories as $category)
        <button class="filter-btn" data-filter="{{ $category->category_name }}">{{ $category->category_name }}</button>
        @endforeach
    </div>

    <div class="portfolio-grid">
        @foreach($artworks as $artwork)
        <div class="portfolio-item fade-in" data-category="{{ $artwork->category_name }}" data-id="{{ $artwork->id }}">
            <div class="portfolio-image">
                <img src="{{ $artwork->image_url }}" alt="{{ $artwork->title }}">
                <div class="portfolio-overlay">
                    <a href="#" class="view-btn" 
                       data-id="{{ $artwork->id }}"
                       data-title="{{ $artwork->title }}" 
                       data-category="{{ $artwork->category_name }}" 
                       data-image="{{ $artwork->image_url }}" 
                       data-description="{{ $artwork->full_description }}">查看详情</a>
                </div>
            </div>
            <div class="portfolio-content">
                <span class="portfolio-category">{{ $artwork->category_name }}</span>
                <h3 class="portfolio-title">{{ $artwork->title }}</h3>
                <p class="portfolio-description">{{ $artwork->description }}</p>
            </div>
        </div>
        @endforeach
    </div>
</section>

<!-- Modal -->
<div class="modal" id="portfolioModal">
    <div class="modal-content">
        <button class="modal-close" id="closeModal">&times;</button>
        <div class="modal-body">
            <img src="" alt="" class="modal-image" id="modalImage">
            <span class="modal-category" id="modalCategory"></span>
            <h2 class="modal-title" id="modalTitle"></h2>
            <p class="modal-description" id="modalDescription"></p>
        </div>
    </div>
</div>

<script>
    // Filter functionality
    const filterBtns = document.querySelectorAll('.filter-btn');
    const portfolioItems = document.querySelectorAll('.portfolio-item');

    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // Remove active class from all buttons
            filterBtns.forEach(b => b.classList.remove('active'));
            // Add active class to clicked button
            btn.classList.add('active');

            const filter = btn.getAttribute('data-filter');

            portfolioItems.forEach(item => {
                const categoryName = item.getAttribute('data-category');
                if (filter === 'all' || categoryName === filter) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });

    // Modal functionality
    const modal = document.getElementById('portfolioModal');
    const closeModal = document.getElementById('closeModal');
    const viewBtns = document.querySelectorAll('.view-btn');

    viewBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            
            // 获取作品ID
            const artworkId = btn.getAttribute('data-id');
            
            // 增加阅读量
            if (artworkId) {
                fetch(`/portfolio/${artworkId}/view`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    }
                }).then(response => response.json())
                  .then(data => {
                      if (data.success) {
                          console.log('阅读量已更新:', data.view_count);
                      }
                  })
                  .catch(error => {
                      console.error('更新阅读量失败:', error);
                  });
            }
            
            const title = btn.getAttribute('data-title');
            const category = btn.getAttribute('data-category');
            const image = btn.getAttribute('data-image');
            const description = btn.getAttribute('data-description');

            document.getElementById('modalTitle').textContent = title;
            document.getElementById('modalCategory').textContent = category;
            document.getElementById('modalImage').src = image;
            document.getElementById('modalDescription').textContent = description;

            modal.classList.add('active');
        });
    });

    closeModal.addEventListener('click', () => {
        modal.classList.remove('active');
    });

    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.remove('active');
        }
    });

    // Portfolio item click animation
    document.querySelectorAll('.portfolio-item').forEach(item => {
        item.addEventListener('click', function() {
            this.style.transform = 'scale(0.98)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
</script>
@endsection