@extends('layouts.frontend')
@section('title_page', $gallery->image_title . ' - Rusizi Veterinary')

@section('content')

<!--Start breadcrumb area-->
<section class="breadcrumb-area style2" style="background-image: url({{asset('images/resources/breadcrumb-bg-2.jpg')}});">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content-box clearfix">
                    <div class="title-s2 text-center">
                        <span>Image Details</span>
                        <h1>{{ $gallery->image_title }}</h1>
                    </div>
                    <div class="breadcrumb-menu float-left">
                        <ul class="clearfix">
                            <li><a href="/">Home</a></li>
                            <li><a href="{{ route('gallery.index') }}">Gallery</a></li>
                            <li class="active">Details</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Gallery Detail Area-->
<section class="gallery-detail-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-8 col-lg-7">
                <div class="gallery-detail-content">
                    <!-- Gallery Header -->
                    <div class="gallery-header">
                        <div class="category-badge">{{ $gallery->category }}</div>
                        <h1 class="gallery-title">{{ $gallery->image_title }}</h1>
                        <div class="gallery-meta">
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span>By: {{ $gallery->user->name }}</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-calendar"></i>
                                <span>{{ $gallery->created_at->format('F d, Y') }}</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-clock"></i>
                                <span>{{ $gallery->created_at->format('h:i A') }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Gallery Image -->
                    <div class="gallery-image-main">
                        <img src="{{ asset('public/gallery/' . $gallery->image_path) }}" alt="{{ $gallery->image_title }}" class="main-image">
                    </div>

                    <!-- Gallery Description -->
                    @if($gallery->description)
                    <div class="gallery-description">
                        <h3 class="description-title">Description</h3>
                        <div class="description-text">
                            {!! nl2br(e($gallery->description)) !!}
                        </div>
                    </div>
                    @endif

                    <!-- Gallery Actions -->
                    <div class="gallery-actions">
                        <div class="action-buttons">
                            <a href="{{ route('gallery.index') }}" class="back-btn">
                                <i class="fas fa-arrow-left"></i>
                                Back to Gallery
                            </a>
                            @if(Auth::id() == $gallery->user_id || (Auth::check() && Auth::user()->isAdmin()))
                            <div class="edit-actions">
                                <a href="{{ route('gallery.edit', $gallery->id) }}" class="edit-btn">
                                    <i class="fas fa-edit"></i>
                                    Edit
                                </a>
                                <form action="{{ route('gallery.destroy', $gallery->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="delete-btn" onclick="return confirm('Are you sure you want to delete this image?')">
                                        <i class="fas fa-trash"></i>
                                        Delete
                                    </button>
                                </form>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-xl-4 col-lg-5">
                <div class="gallery-sidebar">
                    <!-- Related Images -->
                    @if($relatedImages->count() > 0)
                    <div class="sidebar-widget">
                        <h3 class="widget-title">
                            <i class="fas fa-images"></i>
                            Related Images
                        </h3>
                        <div class="related-images">
                            @foreach($relatedImages as $related)
                            <div class="related-item">
                                <a href="{{ route('gallery.show', $related->id) }}">
                                  
                                    <img src="{{ asset('public/gallery/thumbnails/' . $related->image_path) }}" alt="{{ $related->image_title }}">
                                    <div class="related-overlay">
                                        <span>{{ Str::limit($related->image_title, 20) }}</span>
                                    </div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <!-- Categories -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">
                            <i class="fas fa-folder"></i>
                            Categories
                        </h3>
                        <div class="category-list">
                            @foreach($categories as $category => $count)
                            <a href="{{ route('gallery.category', $category) }}" class="category-item">
                                <span class="category-name">{{ $category }}</span>
                                <span class="category-count">{{ $count }}</span>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End Gallery Detail Area-->

<style>
    .gallery-detail-area {
        padding: 80px 0;
        background: #f8fafc;
    }

    .gallery-detail-content {
        background: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
    }

    .gallery-header {
        margin-bottom: 30px;
        text-align: center;
    }

    .category-badge {
        display: inline-block;
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .gallery-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c3e50;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .gallery-meta {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #7f8c8d;
        font-size: 0.9rem;
    }

    .meta-item i {
        color: #27ae60;
    }

    .gallery-image-main {
        margin-bottom: 30px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .main-image {
        width: 100%;
        height: auto;
        display: block;
    }

    .gallery-description {
        margin-bottom: 40px;
        padding: 25px;
        background: #f8fafc;
        border-radius: 12px;
        border-left: 4px solid #27ae60;
    }

    .description-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 15px;
    }

    .description-text {
        font-size: 1rem;
        line-height: 1.6;
        color: #5d6d7e;
    }

    .gallery-actions {
        border-top: 1px solid #ecf0f1;
        padding-top: 30px;
    }

    .action-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .back-btn {
        background: #34495e;
        color: white;
        padding: 12px 25px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .back-btn:hover {
        background: #2c3e50;
        color: white;
        text-decoration: none;
        transform: translateX(-5px);
    }

    .edit-actions {
        display: flex;
        gap: 10px;
    }

    .edit-btn, .delete-btn {
        padding: 12px 20px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .edit-btn {
        background: #3498db;
        color: white;
    }

    .delete-btn {
        background: #e74c3c;
        color: white;
    }

    .edit-btn:hover {
        background: #2980b9;
        color: white;
        text-decoration: none;
    }

    .delete-btn:hover {
        background: #c0392b;
        color: white;
    }

    /* Sidebar Styles */
    .gallery-sidebar {
        position: sticky;
        top: 100px;
    }

    .sidebar-widget {
        background: white;
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
    }

    .widget-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .widget-title i {
        color: #27ae60;
    }

    .related-images {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .related-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        aspect-ratio: 1;
    }

    .related-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .related-item:hover img {
        transform: scale(1.05);
    }

    .related-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 8px;
        font-size: 0.8rem;
        text-align: center;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .related-item:hover .related-overlay {
        transform: translateY(0);
    }

    .category-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .category-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background: #f8fafc;
        border-radius: 8px;
        text-decoration: none;
        color: #2c3e50;
        transition: all 0.3s ease;
    }

    .category-item:hover {
        background: #27ae60;
        color: white;
        text-decoration: none;
        transform: translateX(5px);
    }

    .category-count {
        background: white;
        color: #27ae60;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .category-item:hover .category-count {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .gallery-detail-content {
            padding: 25px;
        }

        .gallery-title {
            font-size: 1.8rem;
        }

        .gallery-meta {
            flex-direction: column;
            gap: 10px;
        }

        .action-buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .edit-actions {
            justify-content: center;
        }

        .related-images {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 576px) {
        .related-images {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

@endsection