@extends('admin.layouts.app')

@section('title', $product->name)

@section('content')
<div class="container-fluid">
    <!-- Başlık ve Butonlar -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">{{ $product->name }}</h1>
        <div>
            <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-primary">
                <i class="fas fa-edit mr-1"></i> Düzenle
            </a>
            <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left mr-1"></i> Geri
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Sol Kolon: Ürün Bilgileri -->
        <div class="col-md-8">
            <!-- Ana Bilgiler -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title">Ürün Bilgileri</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <dl>
                                <dt>Kategori</dt>
                                <dd>{{ $product->category->name }}</dd>

                                <dt>Durum</dt>
                                <dd>
                                    <span class="badge badge-{{ $product->is_available ? 'success' : 'danger' }}">
                                        {{ $product->is_available ? 'Aktif' : 'Pasif' }}
                                    </span>
                                </dd>

                                <dt>Öne Çıkan</dt>
                                <dd>
                                    <span class="badge badge-{{ $product->is_featured ? 'warning' : 'secondary' }}">
                                        {{ $product->is_featured ? 'Evet' : 'Hayır' }}
                                    </span>
                                </dd>

                                <dt>Online Sipariş</dt>
                                <dd>
                                    <span class="badge badge-{{ $product->is_online_orderable ? 'success' : 'danger' }}">
                                        {{ $product->is_online_orderable ? 'Açık' : 'Kapalı' }}
                                    </span>
                                </dd>

                                <dt>Ücretsiz Teslimat</dt>
                                <dd>
                                    <span class="badge badge-{{ $product->has_free_delivery ? 'success' : 'secondary' }}">
                                        {{ $product->has_free_delivery ? 'Evet' : 'Hayır' }}
                                    </span>
                                </dd>
                            </dl>
                        </div>
                        <div class="col-md-6">
                            <dl>
                                <dt>Güncel Fiyat</dt>
                                <dd>{{ number_format($product->price, 2) }} ₺</dd>

                                @if($product->discounted_price)
                                    <dt>İndirimli Fiyat</dt>
                                    <dd>{{ number_format($product->discounted_price, 2) }} ₺</dd>
                                @endif
                            </dl>
                        </div>
                    </div>

                    <div class="mt-4">
                        <h5>Açıklama</h5>
                        <div class="border rounded p-3 bg-light">
                            {!! $product->description !!}
                        </div>
                    </div>

                    @if($product->sub_description)
                        <div class="mt-4">
                            <h5>Alt Açıklama</h5>
                            <div class="border rounded p-3 bg-light">
                                {!! $product->sub_description !!}
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- İçindekiler -->
            @if($product->allergens->isNotEmpty())
                <div class="card mb-4">
                    <div class="card-header">
                        <h3 class="card-title">İçindekiler</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($product->allergens as $allergen)
                                <div class="col-md-3 col-sm-4 mb-2">
                                    <span class="badge badge-info p-2">
                                        {{ $allergen->name }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sağ Kolon: Görseller -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Ürün Görselleri</h3>
                </div>
                <div class="card-body">
                    @if($product->images->isNotEmpty())
                        <div id="productCarousel" class="carousel slide mb-4" data-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($product->images as $index => $image)
                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                        <img src="{{ asset('storage/' . $image->image_path) }}" 
                                             class="d-block w-100 rounded" 
                                             alt="{{ $product->name }}">
                                        @if($image->is_cover)
                                            <div class="carousel-caption">
                                                <span class="badge badge-warning">Kapak Görseli</span>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            @if($product->images->count() > 1)
                                <a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Önceki</span>
                                </a>
                                <a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Sonraki</span>
                                </a>
                            @endif
                        </div>

                        <!-- Görsel Thumbnails -->
                        <div class="row">
                            @foreach($product->images as $index => $image)
                                <div class="col-4 mb-3">
                                    <img src="{{ asset('storage/' . $image->image_path) }}" 
                                         class="img-thumbnail {{ $image->is_cover ? 'border-warning' : '' }}"
                                         alt="{{ $product->name }}"
                                         style="cursor: pointer"
                                         data-target="#productCarousel"
                                         data-slide-to="{{ $index }}">
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-muted">
                            <i class="fas fa-image fa-3x mb-3"></i>
                            <p>Ürün görseli bulunmamaktadır.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.carousel-item img {
    max-height: 400px;
    object-fit: contain;
}
.carousel-control-prev,
.carousel-control-next {
    background: rgba(0,0,0,0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.img-thumbnail {
    transition: all 0.2s;
}
.img-thumbnail:hover {
    transform: scale(1.05);
}
dt {
    font-weight: 600;
    color: #666;
}
dd {
    margin-bottom: 1rem;
}
</style>
@endpush