@extends('layouts._admin.main')
@section('title', 'EcoFeminino - Visualizar Projectos')
@section('content')
    <div class="nxl-content">
        <!-- [ page-header ] start -->
        <div class="page-header">
            <div class="page-header-left d-flex align-items-center">
                <div class="page-header-title">
                    <h5 class="m-b-10">Projectos</h5>
                </div>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/admin/dashboard">Home</a></li>
                    <li class="breadcrumb-item">Visualização</li>
                </ul>
            </div>
            <div class="page-header-right ms-auto">
                <div class="page-header-right-items">
                    <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                        <a href="javascript:void(0);" class="btn btn-icon btn-light-brand">
                            <i class="feather-printer"></i>
                        </a>
                        <a href="{{ route('admin.project.edit', ['project' => $project]) }}"
                            class="btn btn-icon btn-light-brand">
                            <i class="feather-edit"></i>
                        </a>
                        <a href="{{ route('admin.project.index') }}" class="btn btn-danger">
                            <i class="feather-chevron-left me-2"></i>
                            <span>Voltar</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ page-header ] end -->

        <!-- Main Content -->
        <div class="container my-4">

            <!-- Project Title -->
            <div class="mb-4 text-center">
                <h1 class="publication-title">{{ $project->project_name }}</h1>
            </div>

            <!-- Destaque: Primeira Imagem -->
            @if ($project->images->count() > 0)
                <div class="text-center mb-5">
                    <a href="{{ asset('storage/' . $project->images->first()->image_path) }}" target="_blank">
                        <img src="{{ asset('storage/' . $project->images->first()->image_path) }}"
                            alt="Imagem principal do projeto" class="main-image rounded shadow">
                    </a>
                </div>
            @else
                <p class="text-muted text-center mb-5">Nenhuma imagem enviada para este projeto.</p>
            @endif

            <!-- Project Information -->
            <div class="row">
                <div class="col-md-12 mb-4">
                    <div class="info-card">
                        <h5><i class="fas fa-info-circle me-2"></i>Detalhes do Projeto</h5>

                        <div class="info-item">
                            <div class="info-label">Responsável:</div>
                            <div class="info-value">{{ $project->responsible }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Email:</div>
                            <div class="info-value">{{ $project->email }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Telefone:</div>
                            <div class="info-value">{{ $project->phone ?? '—' }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Categoria:</div>
                            <div class="info-value text-capitalize">
                                <span class="category-badge">{{ str_replace('_', ' ', $project->category) }}</span>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Criado em:</div>
                            <div class="info-value">{{ $project->created_at->format('d/m/Y H:i') }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Última Atualização:</div>
                            <div class="info-value">{{ $project->updated_at->format('d/m/Y H:i') }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Link Externo:</div>
                            <div class="info-value">
                                @if ($project->link)
                                    <a href="{{ $project->link }}" target="_blank">{{ $project->link }}</a>
                                @else
                                    <span class="text-muted">Nenhum link disponível</span>
                                @endif
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">Arquivo PDF:</div>
                            <div class="info-value">
                                @if ($project->pdf_path && file_exists(storage_path('app/public/' . $project->pdf_path)))
                                    <a href="{{ asset('storage/' . $project->pdf_path) }}" class="btn btn-sm btn-primary"
                                        download>
                                        <i class="fas fa-file-pdf me-1"></i> Baixar PDF
                                    </a>
                                @else
                                    <span class="text-muted">Nenhum arquivo PDF disponível</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Description -->
            <div class="description-container mt-4 mb-5">
                <h5><i class="fas fa-align-left me-2"></i>Descrição do Projeto</h5>
                <p>{!! nl2br(e($project->description)) !!}</p>
            </div>

            <!-- Galeria de Imagens (a partir da segunda) -->
            @if ($project->images->count() > 1)
                <h5 class="text-center mb-3"><i class="fas fa-images me-2"></i>Galeria de Imagens</h5>
                <div class="row">
                    @foreach ($project->images->skip(1) as $image)
                        <div class="col-md-3 col-sm-6 mb-4">
                            <a href="{{ asset('storage/' . $image->image_path) }}" target="_blank">
                                <img src="{{ asset('storage/' . $image->image_path) }}" alt="Imagem do projeto"
                                    class="gallery-image rounded shadow-sm">
                            </a>
                        </div>
                    @endforeach
                </div>
            @endif

        </div>

        <style>
            :root {
                --primary-color: #ff1856;
                --secondary-color: #6c757d;
                --success-color: #198754;
                --light-bg: #f8f9fa;
                --dark-bg: #212529;
                --border-color: #dee2e6;
            }

            .main-image {
                width: 80%;
                max-width: 800px;
                height: auto;
                border-radius: 0.75rem;
                transition: transform 0.3s ease;
            }

            .main-image:hover {
                transform: scale(1.03);
            }

            .publication-title {
                font-size: 2.2rem;
                font-weight: 700;
                margin-bottom: 1rem;
                color: var(--dark-bg);
            }

            .info-card {
                background-color: white;
                border-radius: 0.5rem;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                padding: 1.5rem;
            }

            .info-card h5 {
                color: var(--primary-color);
                border-bottom: 2px solid var(--border-color);
                padding-bottom: 0.75rem;
                margin-bottom: 1.25rem;
            }

            .info-item {
                margin-bottom: 1rem;
                display: flex;
                align-items: center;
            }

            .info-label {
                font-weight: 600;
                min-width: 160px;
                color: var(--secondary-color);
            }

            .category-badge {
                background-color: rgba(25, 135, 84, 0.1);
                color: var(--success-color);
                padding: 0.4rem 1rem;
                border-radius: 50px;
            }

            .description-container {
                background-color: white;
                border-radius: 0.5rem;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                padding: 2rem;
                font-size: 1.1rem;
                line-height: 1.7;
            }

            .gallery-image {
                width: 100%;
                height: 200px;
                object-fit: cover;
                border-radius: 0.5rem;
                transition: transform 0.3s ease;
            }

            .gallery-image:hover {
                transform: scale(1.05);
            }
        </style>
    </div>
@endsection