@extends('layouts.app')@section('title', $project->title)@section('content') @php
    $company = \App\Models\User::getCompanyProfile();
    $gallery = $project->projectFiles;
@endphp <style>
        .project-gallery-thumb {
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 2px 8px rgba(50, 43, 131, 0.07);
            cursor: pointer;
        }

        .project-gallery-thumb:hover {
            transform: scale(1.07);
            box-shadow: 0 4px 16px rgba(50, 43, 131, 0.18);
            z-index: 2;
        }

        .project-gallery-caption-card {
            background: #f4f6fa;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(92, 95, 153, 0.07);
            padding: 0.5em 0.7em;
            margin-top: 0.4em;
            min-height: 2.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.97rem;
            color: #322b83;
            font-weight: 500;
            gap: 0.5em;
        }

        .project-gallery-caption-card i {
            color: #5fa3bb;
            font-size: 1.1em;
        }

        .project-description-section {
            background: #fafbfc;
            border-radius: 10px;
            border: 1.5px solid #e5e7f0;
            padding: 2rem 1.5rem;
            margin-top: 2.5rem;
            margin-bottom: 2.5rem;
            box-shadow: 0 2px 12px rgba(92, 95, 153, 0.06);
        }

        .project-description-title {
            color: #322b83;
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 0.5em;
        }

        .project-description-title i {
            color: #5fa3bb;
            font-size: 1.3em;
        }

        .project-description-section ul {
            list-style: disc inside;
            margin-left: 1em;
        }

        .project-description-section h3,
        .project-description-section h4 {
            color: #5c5f99;
            margin-top: 1.2em;
        }

        .project-info-card {
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .project-info-card:hover {
            box-shadow: 0 4px 16px rgba(50, 43, 131, 0.13);
            transform: translateY(-2px) scale(1.02);
        }
    </style> <!-- Page Header Start -->
    <div class="container-fluid page-header">
        <h1 class="display-3 text-uppercase text-white mb-3">{{ $project->title }}</h1>
        <div class="d-inline-flex text-white">
            <h6 class="text-uppercase m-0"><a href="{{ route('home') }}">Accueil</a></h6>
            <h6 class="text-white m-0 px-3">/</h6>
            <h6 class="text-uppercase m-0"><a href="{{ route('projects.index') }}">Réalisations</a></h6>
            <h6 class="text-white m-0 px-3">/</h6>
            <h6 class="text-uppercase text-white m-0">{{ $project->title }}</h6>
        </div>
    </div> <!-- Page Header End --> <!-- Project Detail Start -->
    <div class="container-fluid py-6 px-5">
        <div class="row g-5">
            <div class="col-lg-8"> <!-- Project Detail Content -->
                <div class="mb-5"> <a href="{{ asset($project->cover_image) }}"
                        data-lightbox="project-{{ $project->id }}"> <img class="img-fluid w-100 mb-3"
                            src="{{ asset($project->cover_image) }}" alt="{{ $project->title }}"> </a>
                    @if ($gallery->count() > 0)
                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            @foreach ($gallery as $file)
                                <div class="d-flex flex-column align-items-center" style="width: 130px;"> <a
                                        href="{{ asset($file->file_path) }}" data-lightbox="project-{{ $project->id }}">
                                        <img src="{{ asset($file->file_path) }}" alt="{{ $project->title }}"
                                            class="project-gallery-thumb"
                                            style="width: 120px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid #eee;">
                                    </a>
                                    @if ($file->caption)
                                        <div class="project-gallery-caption-card mt-1"> <i class="fa fa-image"></i>
                                            <span>{{ $file->caption }}</span>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <h1 class="text-uppercase mb-4">{{ $project->title }}</h1>
                    <div class="mb-5">
                        <div class="row g-4">
                            @if ($project->client)
                                <div class="col-md-6">
                                    <div
                                        class="d-flex align-items-center p-3 mb-3 shadow-sm rounded bg-white project-info-card">
                                        <div class="me-3 d-flex align-items-center justify-content-center bg-light rounded-circle"
                                            style="width: 44px; height: 44px;">
                                            <i class="fa fa-user-tie text-primary" style="font-size: 1.3em;"></i>
                                        </div>
                                        <div>
                                            <div class="text-muted small text-uppercase fw-bold">Client</div>
                                            <div class="fw-semibold text-dark">{{ $project->client }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if ($project->completed_at)
                                <div class="col-md-6">
                                    <div
                                        class="d-flex align-items-center p-3 mb-3 shadow-sm rounded bg-white project-info-card">
                                        <div class="me-3 d-flex align-items-center justify-content-center bg-light rounded-circle"
                                            style="width: 44px; height: 44px;">
                                            <i class="fa fa-calendar-check text-primary" style="font-size: 1.3em;"></i>
                                        </div>
                                        <div>
                                            <div class="text-muted small text-uppercase fw-bold">Date d'achèvement</div>
                                            <div class="fw-semibold text-dark">
                                                {{ $project->completed_at->format('d M Y') }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if ($project->category)
                                <div class="col-md-6">
                                    <div
                                        class="d-flex align-items-center p-3 mb-3 shadow-sm rounded bg-white project-info-card">
                                        <div class="me-3 d-flex align-items-center justify-content-center bg-light rounded-circle"
                                            style="width: 44px; height: 44px;">
                                            <i class="fa fa-layer-group text-primary" style="font-size: 1.3em;"></i>
                                        </div>
                                        <div>
                                            <div class="text-muted small text-uppercase fw-bold">Catégorie</div>
                                            <div class="fw-semibold text-dark">{{ $project->category->name }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if ($project->location)
                                <div class="col-md-6">
                                    <div
                                        class="d-flex align-items-center p-3 mb-3 shadow-sm rounded bg-white project-info-card">
                                        <div class="me-3 d-flex align-items-center justify-content-center bg-light rounded-circle"
                                            style="width: 44px; height: 44px;">
                                            <i class="fa fa-map-marker-alt text-primary" style="font-size: 1.3em;"></i>
                                        </div>
                                        <div>
                                            <div class="text-muted small text-uppercase fw-bold">Localisation</div>
                                            <div class="fw-semibold text-dark">{{ $project->location }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="project-description-section">
                        <div class="project-description-title"> <i class="fa fa-info-circle"></i> À propos de ce projet
                        </div>
                        @if ($project->content)
                            {!! $project->content !!}
                        @else
                            <p>{{ $project->description }}</p>
                        @endif
                    </div>
                </div>
            </div> <!-- Sidebar Start -->
            <div class="col-lg-4"> <!-- Other Projects -->
                <div class="mb-5">
                    <h3 class="text-uppercase mb-4">Autres Projets</h3>
                    @foreach ($relatedProjects as $relatedProject)
                        <div class="d-flex align-items-center mb-3"> <img class="img-fluid"
                                src="{{ asset($relatedProject->cover_image) }}"
                                style="width: 80px; height: 80px; object-fit: cover;" alt="{{ $relatedProject->title }}">
                            <div class="d-flex flex-column ms-3"> <a
                                    href="{{ route('projects.show', $relatedProject->slug) }}"
                                    class="text-dark text-uppercase font-weight-medium">{{ $relatedProject->title }}</a>
                                <p class="text-muted mb-0">
                                    {{ $relatedProject->completed_at ? $relatedProject->completed_at->format('d M Y') : 'À venir' }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div> <!-- Contact Info -->
                <div class="mb-5">
                    <h3 class="text-uppercase mb-4">Besoin d'aide?</h3>
                    <div class="bg-light p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                                style="width: 60px; height: 60px;"> <i class="fa fa-phone text-primary"></i> </div>
                            <div class="ms-3">
                                <h5 class="text-uppercase">Appelez-nous</h5>
                                <p class="mb-0">{{ $company->company_phone }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="d-flex flex-shrink-0 align-items-center justify-content-center bg-white"
                                style="width: 60px; height: 60px;"> <i class="fa fa-envelope text-primary"></i> </div>
                            <div class="ms-3">
                                <h5 class="text-uppercase">Email</h5>
                                <p class="mb-0">{{ $company->company_email }}</p>
                            </div>
                        </div>
                    </div>
                </div> <!-- Share -->
                <div class="mb-5">
                    <h3 class="text-uppercase mb-4">Partager</h3>
                    <button class="btn btn-primary" id="open-share-modal"><i class="fa fa-share-alt me-2"></i>Partager ce
                        projet</button>
                </div>

                <!-- Modal de partage -->
                <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content" style="max-width: 400px; margin: auto;">
                            <div class="modal-header">
                                <h5 class="modal-title" id="shareModalLabel">Partager ce projet</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Fermer"></button>
                            </div>
                            <div class="modal-body">
                                <div class="d-flex flex-wrap align-items-center gap-2 mb-3 justify-content-center">
                                    <a class="btn btn-primary share-btn-modal" data-network="twitter" href="#"
                                        title="Partager sur Twitter"><i class="fab fa-twitter"></i></a>
                                    <a class="btn btn-primary share-btn-modal" data-network="facebook" href="#"
                                        title="Partager sur Facebook"><i class="fab fa-facebook-f"></i></a>
                                    <a class="btn btn-primary share-btn-modal" data-network="linkedin" href="#"
                                        title="Partager sur LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                                    <a class="btn btn-primary share-btn-modal" data-network="pinterest" href="#"
                                        title="Partager sur Pinterest"><i class="fab fa-pinterest"></i></a>
                                </div>
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control text-center" id="share-link-input"
                                        value="{{ url()->current() }}" readonly>
                                    <button class="btn btn-secondary" type="button" id="copy-link-btn-modal"><i
                                            class="fa fa-link"></i></button>
                                </div>
                                <div class="text-center">
                                    <span id="copy-feedback-modal" class="text-success"
                                        style="display:none; font-size:0.95em;">Lien copié !</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- Sidebar End -->
        </div>
    </div> <!-- Project Detail End -->
    @push('scripts')
        <script>
            // Ouvre la modal de partage
            document.getElementById('open-share-modal').addEventListener('click', function() {
                var modal = new bootstrap.Modal(document.getElementById('shareModal'));
                modal.show();
            });
            // Boutons de partage réseaux dans la modal
            document.querySelectorAll('.share-btn-modal').forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    var url = encodeURIComponent(window.location.href);
                    var title = encodeURIComponent(document.title);
                    var network = btn.getAttribute('data-network');
                    var shareUrl = '';
                    switch (network) {
                        case 'twitter':
                            shareUrl = 'https://twitter.com/intent/tweet?url=' + url + '&text=' + title;
                            break;
                        case 'facebook':
                            shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + url;
                            break;
                        case 'linkedin':
                            shareUrl = 'https://www.linkedin.com/shareArticle?mini=true&url=' + url +
                                '&title=' + title;
                            break;
                        case 'pinterest':
                            shareUrl = 'https://pinterest.com/pin/create/button/?url=' + url + '&description=' +
                                title;
                            break;
                    }
                    window.open(shareUrl, 'Partager', 'width=600,height=500');
                });
            });
            // Copier le lien dans la modal
            document.getElementById('copy-link-btn-modal').addEventListener('click', function() {
                var input = document.getElementById('share-link-input');
                input.select();
                document.execCommand('copy');
                var feedback = document.getElementById('copy-feedback-modal');
                feedback.style.display = 'inline';
                setTimeout(function() {
                    feedback.style.display = 'none';
                }, 1800);
            });
        </script>
    @endpush
@endsection