@extends('layouts.app')

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

@section('content')
<!-- Breadcrumb Navigasi -->
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('products.index') }}" class="text-decoration-none">Produk</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
    </ol>
</nav>

<div class="row justify-content-center">
    <div class="col-12 col-lg-10">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
                <h5 class="card-title fw-bold text-dark mb-0">
                    <i class="bi bi-info-circle text-primary me-2"></i>Detail Informasi Produk
                </h5>
                <div class="d-flex gap-2">
                    <a href="{{ route('products.edit', $product) }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-pencil-square me-1"></i>Edit Produk
                    </a>
                    <a href="{{ route('products.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-arrow-left me-1"></i>Kembali
                    </a>
                </div>
            </div>

            <div class="card-body p-4">
                <div class="row g-4">
                    <!-- Kolom Kiri: Gambar Produk -->
                    <div class="col-12 col-md-5 text-center">
                        <div class="p-3 bg-light rounded-3 border d-flex align-items-center justify-content-center" style="min-height: 280px;">
                            @if ($product->image_url)
                                <img 
                                    src="{{ $product->image_url }}" 
                                    alt="{{ $product->name }}" 
                                    class="img-fluid rounded shadow-sm" 
                                    style="max-height: 280px; object-fit: contain;"
                                    onerror="this.onerror=null; this.src='data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Crect%20width%3D%22280%22%20height%3D%22280%22%20fill%3D%22%23f1f5f9%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20fill%3D%22%2394a3b8%22%20font-family%3D%22sans-serif%22%20font-size%3D%2216%22%3EGambar%20Tidak%20Tersedia%3C%2Ftext%3E%3C%2Fsvg%3E';"
                                >
                            @else
                                <div class="text-muted text-center py-5">
                                    <i class="bi bi-image fs-1 text-secondary opacity-50 mb-2"></i>
                                    <div class="small">Tidak ada foto produk</div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Kolom Kanan: Rincian Produk -->
                    <div class="col-12 col-md-7">
                        <!-- Kategori Badge -->
                        <div class="mb-2">
                            @if ($product->category)
                                <span class="badge bg-info bg-opacity-10 text-info-emphasis border border-info border-opacity-25 px-3 py-1.5 rounded-pill">
                                    <i class="bi bi-tag-fill me-1"></i>{{ $product->category->name }}
                                </span>
                            @else
                                <span class="badge bg-secondary">Tanpa Kategori</span>
                            @endif
                        </div>

                        <!-- Nama Produk -->
                        <h3 class="fw-bold text-dark mb-2">{{ $product->name }}</h3>

                        <!-- Slug URL -->
                        <p class="text-muted small font-monospace mb-3">
                            <i class="bi bi-link-45deg me-1"></i>slug: <span class="badge bg-light text-muted border">/products/{{ $product->slug }}</span>
                        </p>

                        <!-- Harga Produk -->
                        <div class="p-3 bg-light rounded-3 mb-3 border">
                            <span class="text-muted small d-block">Harga Satuan:</span>
                            <span class="fs-3 fw-bold text-primary">{{ $product->formatted_price }}</span>
                        </div>

                        <!-- Status Stok & Inventaris -->
                        <div class="row g-2 mb-4">
                            <div class="col-6">
                                <div class="p-2.5 border rounded bg-white">
                                    <span class="text-muted small d-block">Sisa Stok:</span>
                                    <span class="fs-5 fw-bold text-dark">{{ $product->stock }} unit</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-2.5 border rounded bg-white">
                                    <span class="text-muted small d-block">Status Ketersediaan:</span>
                                    @if ($product->stock > 0)
                                        <span class="badge bg-success-subtle text-success border border-success border-opacity-25 px-2.5 py-1 rounded-pill fw-semibold">
                                            <i class="bi bi-check-circle me-1"></i>Tersedia
                                        </span>
                                    @else
                                        <span class="badge bg-danger-subtle text-danger border border-danger border-opacity-25 px-2.5 py-1 rounded-pill fw-semibold">
                                            <i class="bi bi-x-circle me-1"></i>Stok Habis
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Deskripsi Produk -->
                        <div class="mb-4">
                            <h6 class="fw-bold text-dark border-bottom pb-2">Deskripsi Produk:</h6>
                            <p class="text-secondary small leading-relaxed mb-0" style="white-space: pre-line;">
                                {{ $product->description ?: 'Belum ada deskripsi untuk produk ini.' }}
                            </p>
                        </div>

                        <!-- Informasi Tanggal & Metadata -->
                        <div class="row g-2 small text-muted border-top pt-3">
                            <div class="col-6">
                                <i class="bi bi-calendar-plus me-1"></i>Ditambahkan: {{ $product->created_at ? $product->created_at->translatedFormat('d M Y, H:i') : '-' }}
                            </div>
                            <div class="col-6">
                                <i class="bi bi-clock-history me-1"></i>Terakhir diubah: {{ $product->updated_at ? $product->updated_at->translatedFormat('d M Y, H:i') : '-' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer Aksi -->
                <div class="d-flex justify-content-end gap-2 border-top pt-3 mt-4">
                    <button 
                        type="button" 
                        class="btn btn-outline-danger btn-sm" 
                        data-bs-toggle="modal" 
                        data-bs-target="#deleteDetailModal"
                    >
                        <i class="bi bi-trash me-1"></i>Hapus Produk
                    </button>
                    <a href="{{ route('products.edit', $product) }}" class="btn btn-primary btn-sm shadow-sm">
                        <i class="bi bi-pencil-square me-1"></i>Edit Produk Ini
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Hapus Produk -->
<div class="modal fade" id="deleteDetailModal" tabindex="-1" aria-labelledby="deleteDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-start">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold text-danger" id="deleteDetailModalLabel">
                    <i class="bi bi-exclamation-triangle me-2"></i>Konfirmasi Hapus Produk
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-3">
                <p class="mb-2">Apakah Anda yakin ingin menghapus produk <strong>{{ $product->name }}</strong>?</p>
                <small class="text-danger d-block">
                    * Tindakan ini permanen dan berkas gambar produk yang tersimpan akan dihapus dari sistem.
                </small>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <form action="{{ route('products.destroy', $product) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm">
                        <i class="bi bi-trash me-1"></i>Ya, Hapus Sekarang
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection