@extends('layouts.admin')

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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}" class="text-decoration-none">Produk</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
@endsection

@section('content')
<div class="row g-4">
    <!-- Kolom Kiri: Foto & Status Ringkas -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm sticky-top" style="top: 80px;">
            <div class="card-body p-4 text-center">
                <!-- Foto Produk -->
                @if ($product->image_url)
                    <img src="{{ $product->image_url }}" 
                         alt="{{ $product->name }}" 
                         class="rounded-4 border shadow-sm object-fit-cover mb-3 w-100" 
                         style="max-height: 280px; object-fit: cover;">
                @else
                    <div class="rounded-4 bg-light border text-muted d-flex flex-column align-items-center justify-content-center mx-auto mb-3" style="height: 220px;">
                        <i class="bi bi-image text-secondary fs-1 mb-2"></i>
                        <span class="small text-secondary">Tidak ada gambar</span>
                    </div>
                @endif

                <!-- Nama & Slug -->
                <h4 class="fw-bold text-dark mb-1">{{ $product->name }}</h4>
                <div class="d-flex justify-content-center gap-1 mb-3 flex-wrap">
                    <span class="badge bg-light text-secondary border font-monospace">/{{ $product->slug }}</span>
                    <span class="badge bg-light text-secondary border font-monospace">{{ $product->sku }}</span>
                </div>

                <!-- Harga Utama -->
                <div class="bg-primary-subtle rounded-3 p-3 mb-3 border border-primary-subtle">
                    <span class="small text-primary fw-semibold text-uppercase d-block" style="font-size: 11px;">Harga Jual Satuan</span>
                    <h3 class="fw-bold text-primary mb-0">Rp {{ number_format($product->price, 0, ',', '.') }}</h3>
                </div>

                <!-- Status Badges -->
                <div class="d-flex justify-content-center gap-2 mb-4">
                    @if ($product->is_active)
                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1.5">
                            <i class="bi bi-check-circle-fill me-1"></i>Status Aktif
                        </span>
                    @else
                        <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-3 py-1.5">
                            <i class="bi bi-eye-slash-fill me-1"></i>Nonaktif
                        </span>
                    @endif

                    @if ($product->is_featured)
                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1.5">
                            <i class="bi bi-star-fill text-warning me-1"></i>Produk Unggulan
                        </span>
                    @endif
                </div>

                <!-- Tombol Navigasi Aksi -->
                <div class="d-grid gap-2 pt-2 border-top">
                    <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-primary btn-rounded shadow-sm">
                        <i class="bi bi-pencil-square me-1"></i>Edit Produk Ini
                    </a>
                    <button type="button" 
                            class="btn btn-outline-danger btn-rounded" 
                            onclick="confirmDelete('{{ route('admin.products.destroy', $product) }}', '{{ addslashes($product->name) }}')">
                        <i class="bi bi-trash me-1"></i>Hapus Produk
                    </button>
                    <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-rounded">
                        <i class="bi bi-arrow-left me-1"></i>Kembali ke Daftar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Kolom Kanan: Rincian Lengkap & Spesifikasi -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="fw-bold mb-0">
                    <i class="bi bi-info-circle text-primary me-2"></i>Informasi Rinci Produk
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-bordered align-middle mb-0">
                        <tbody>
                            <tr>
                                <th class="bg-light text-muted fw-semibold" style="width: 200px;">Kategori Produk</th>
                                <td>
                                    @if ($product->category)
                                        <a href="{{ route('admin.categories.show', $product->category) }}" class="text-decoration-none fw-bold">
                                            <i class="bi bi-tag-fill me-1 text-primary"></i>{{ $product->category->name }}
                                        </a>
                                        @if (!$product->category->is_active)
                                            <span class="badge bg-secondary-subtle text-secondary ms-1">Kategori Nonaktif</span>
                                        @endif
                                    @else
                                        <span class="text-muted fst-italic">Tanpa Kategori</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Kode SKU</th>
                                <td><span class="badge bg-light text-dark border font-monospace fs-6">{{ $product->sku }}</span></td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Slug URL</th>
                                <td><span class="font-monospace text-secondary">/{{ $product->slug }}</span></td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Kuantitas Stok</th>
                                <td>
                                    @if ($product->stock <= 0)
                                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1 fw-bold">
                                            Habis (0 unit)
                                        </span>
                                    @elseif ($product->stock <= 5)
                                        <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1 fw-bold">
                                            Menipis: Sisa {{ $product->stock }} unit
                                        </span>
                                    @else
                                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1 fw-bold">
                                            Tersedia: {{ $product->stock }} unit
                                        </span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Harga</th>
                                <td class="fw-bold text-dark fs-5">
                                    Rp {{ number_format($product->price, 0, ',', '.') }}
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Status Visibilitas</th>
                                <td>
                                    @if ($product->is_active)
                                        <span class="text-success fw-semibold"><i class="bi bi-check-circle-fill me-1"></i>Aktif & Tayang di Toko</span>
                                    @else
                                        <span class="text-secondary fw-semibold"><i class="bi bi-eye-slash-fill me-1"></i>Disembunyikan (Nonaktif)</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Status Unggulan</th>
                                <td>
                                    @if ($product->is_featured)
                                        <span class="text-warning-emphasis fw-semibold"><i class="bi bi-star-fill text-warning me-1"></i>Ya, Produk Unggulan</span>
                                    @else
                                        <span class="text-muted">Tidak</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Waktu Dibuat</th>
                                <td class="text-muted">
                                    {{ $product->created_at ? $product->created_at->translatedFormat('d F Y, H:i') : '-' }}
                                    <span class="small fst-italic">({{ $product->created_at?->diffForHumans() }})</span>
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-muted fw-semibold">Terakhir Diperbarui</th>
                                <td class="text-muted">
                                    {{ $product->updated_at ? $product->updated_at->translatedFormat('d F Y, H:i') : '-' }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Deskripsi Produk -->
                <div class="mt-4">
                    <h6 class="fw-bold text-dark mb-2">
                        <i class="bi bi-card-text text-primary me-1"></i>Deskripsi Produk:
                    </h6>
                    <div class="p-3 bg-light rounded-3 border text-secondary" style="min-height: 100px; white-space: pre-line;">
                        {{ $product->description ?: 'Belum ada deskripsi yang ditambahkan untuk produk ini.' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Hapus Produk Bootstrap -->
<div class="modal fade" id="deleteProductModal" tabindex="-1" aria-labelledby="deleteProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-danger text-white border-0">
                <h5 class="modal-title fs-6" id="deleteProductModalLabel">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>Konfirmasi Hapus Produk
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <div class="w-16 h-16 mx-auto mb-3 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                    <i class="bi bi-trash3 fs-2"></i>
                </div>
                <h5 class="fw-bold text-dark mb-2">Hapus Produk Ini?</h5>
                <p class="text-muted small mb-0">
                    Apakah Anda yakin ingin menghapus produk <strong id="deleteProductName" class="text-dark"></strong> secara permanen?
                </p>
            </div>
            <div class="modal-footer border-0 bg-light px-4 py-3">
                <button type="button" class="btn btn-outline-secondary btn-rounded" data-bs-dismiss="modal">Batal</button>
                <form id="deleteProductForm" method="POST" action="">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-rounded px-3">
                        <i class="bi bi-trash me-1"></i>Hapus Permanen
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function confirmDelete(url, name) {
        const form = document.getElementById('deleteProductForm');
        form.action = url;
        
        document.getElementById('deleteProductName').textContent = name;

        const modal = new bootstrap.Modal(document.getElementById('deleteProductModal'));
        modal.show();
    }
</script>
@endpush