@extends('landing.template.layout')

@section('content')
<!-- Hero Section -->
<section class="bg-gradient-to-br from-primary to-primary-subtle py-5">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('family') }}" class="breadcrumb-link text-white">
                        <i class="fas fa-home me-1"></i>Keluarga
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">
                    {{ $product->nama_product }}
                </li>
            </ol>
        </nav>
    </div>
</section>

<!-- Product Detail Section -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <!-- Product Image -->
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="card border-0 shadow-lg overflow-hidden">
                    <div class="position-relative" style="height: 400px;">
                        @if($product->img)
                            <img class="img-fluid w-100 h-100 object-fit-cover" src="{{ asset('storage/uploads/product/' . $product->img) }}" alt="{{ $product->nama_product }}" />
                        @else
                            <div class="w-100 h-100 bg-gradient-to-br from-primary to-primary-subtle d-flex align-items-center justify-content-center">
                                <i class="fas fa-box text-white fs-1"></i>
                            </div>
                        @endif>
                        <div class="position-absolute top-3 start-3">
                            <span class="badge bg-white bg-opacity-90 text-primary rounded-pill px-3 py-2">
                                <i class="fas fa-tag me-1"></i>Produk
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Product Information -->
            <div class="col-lg-6">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-body p-5">
                        <!-- Product Title -->
                        <div class="mb-4">
                            <h1 class="display-6 fw-bold text-primary mb-3">{{ $product->nama_product }}</h1>
                            <div class="d-flex align-items-center text-muted mb-4">
                                <i class="fas fa-calendar me-2"></i>
                                <span>Ditambahkan pada {{ \Carbon\Carbon::parse($product->created_at)->format('d F Y') }}</span>
                            </div>
                        </div>
                        
                        <!-- Product Description -->
                        <div class="mb-4">
                            <h5 class="fw-bold mb-3">
                                <i class="fas fa-align-left me-2 text-primary"></i>Deskripsi Produk
                            </h5>
                            <div class="text-muted" style="line-height: 1.8;">
                                @if($product->deskripsi)
                                    <p>{{ nl2br(e($product->deskripsi)) }}</p>
                                @else
                                    <p class="text-muted">Tidak ada deskripsi tersedia untuk produk ini.</p>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Additional Information -->
                        <div class="mb-4">
                            <h5 class="fw-bold mb-3">
                                <i class="fas fa-info-circle me-2 text-primary"></i>Informasi Tambahan
                            </h5>
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="bg-light rounded-3 p-3">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                <i class="fas fa-box text-primary"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">Kategori</small>
                                                <span class="fw-semibold">Produk</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="bg-light rounded-3 p-3">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                                <i class="fas fa-check text-success"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted d-block">Status</small>
                                                <span class="fw-semibold">Tersedia</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="d-flex gap-3">
                            <a href="{{ route('family.detail', $product->page_family_id) }}" class="btn btn-outline-primary rounded-pill px-4">
                                <i class="fas fa-arrow-left me-2"></i>Kembali ke Detail Keluarga
                            </a>
                            <button class="btn btn-primary rounded-pill px-4">
                                <i class="fas fa-share-alt me-2"></i>Bagikan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Related Products Section -->
        @if(isset($relatedProducts) && $relatedProducts->count() > 0)
        <div class="row mt-5">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-gradient-to-r from-primary to-primary-subtle border-0 py-3">
                        <h5 class="mb-0 text-white fw-bold">
                            <i class="fas fa-th-large me-2"></i>Produk Terkait
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="row g-4">
                            @foreach($relatedProducts as $relatedProduct)
                            <div class="col-12 col-md-6 col-lg-4">
                                <div class="card border-0 shadow-sm hover-lift transition-all duration-300 h-100">
                                    <div class="position-relative overflow-hidden" style="height: 200px;">
                                        @if($relatedProduct->img)
                                            <img class="img-fluid w-100 h-100 object-fit-cover transition-transform duration-300" src="{{ asset('storage/uploads/product/' . $relatedProduct->img) }}" alt="{{ $relatedProduct->nama_product }}" />
                                        @else
                                            <div class="w-100 h-100 bg-gradient-to-br from-primary to-primary-subtle d-flex align-items-center justify-content-center">
                                                <i class="fas fa-box text-white fs-3"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="card-body p-4">
                                        <h6 class="mb-2 fw-bold text-primary">{{ $relatedProduct->nama_product }}</h6>
                                        <p class="text-muted mb-3" style="font-size: 0.9rem; line-height: 1.5;">
                                            {{ \Illuminate\Support\Str::limit($relatedProduct->deskripsi ?? 'Tidak ada deskripsi', 100) }}
                                        </p>
                                        <a href="{{ route('landing.produk.detail', $relatedProduct->id) }}" class="btn btn-sm btn-outline-primary rounded-pill">
                                            <i class="fas fa-eye me-1"></i>Lihat Detail
                                        </a>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>


@push('js')
<style>
/* Enhanced Styles */
.breadcrumb-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s ease;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: white !important;
}

.breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Card Hover Effects */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Button Enhancements */
.btn {
    transition: all 0.3s ease;
    border-width: 2px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Image Hover Effect */
.card img.transition-transform {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover img.transition-transform {
    transform: scale(1.1);
}

/* Info Box Enhancement */
.bg-light {
    transition: all 0.3s ease;
}

.bg-light:hover {
    background-color: #f8f9fa !important;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .display-6 {
        font-size: 2rem;
    }
    
    .card-body {
        padding: 2rem !important;
    }
}
</style>
@endsection