@extends('layouts.admin')

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

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
                <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">Detail</li>
            </ol>
        </nav>
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <h1 class="h3 fw-bold text-dark mb-0">{{ $product->name }}</h1>
                <p class="text-muted small mb-0">Rincian spesifikasi dan informasi produk di etalase toko.</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary d-inline-flex align-items-center gap-1 shadow-sm">
                    <i class="bi bi-arrow-left"></i>
                    <span>Kembali</span>
                </a>
                <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-outline-primary d-inline-flex align-items-center gap-1 shadow-sm">
                    <i class="bi bi-pencil-square"></i>
                    <span>Edit Produk</span>
                </a>
                <button type="button" 
                        class="btn btn-outline-danger d-inline-flex align-items-center gap-1 shadow-sm"
                        data-bs-toggle="modal" 
                        data-bs-target="#deleteProductModal">
                    <i class="bi bi-trash"></i>
                    <span>Hapus</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Kolom Kiri: Foto & Status -->
    <div class="col-lg-5">
        <div class="card card-custom h-100">
            <div class="card-body p-4 d-flex flex-column align-items-center text-center">
                <div class="position-relative w-100 bg-light rounded-3 border overflow-hidden d-flex align-items-center justify-content-center mb-4 shadow-sm" style="min-height: 320px; max-height: 420px;">
                    @if ($product->image_url)
                        <img src="{{ $product->image_url }}" 
                             alt="{{ $product->name }}" 
                             class="w-100 h-100 object-fit-contain p-2"
                             onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' fill=\'%23cbd5e1\' viewBox=\'0 0 16 16\'><rect width=\'16\' height=\'16\' fill=\'%23f1f5f9\'/><path d=\'M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\'/><path d=\'M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z\'/></svg>';">
                    @else
                        <div class="p-5 text-muted">
                            <i class="bi bi-image" style="font-size: 4rem;"></i>
                            <p class="small mt-2 mb-0">Tidak ada gambar yang diunggah.</p>
                        </div>
                    @endif
                </div>

                <div class="w-100 text-start">
                    <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                        <span class="text-muted small">Status Katalog:</span>
                        @if ($product->is_active)
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">
                                <i class="bi bi-check-circle-fill me-1"></i> Aktif (Tayang)
                            </span>
                        @else
                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-3 py-1">
                                <i class="bi bi-pause-circle-fill me-1"></i> Nonaktif (Disembunyikan)
                            </span>
                        @endif
                    </div>
                    <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                        <span class="text-muted small">Status Stok:</span>
                        @if ($product->stock <= 0)
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1">
                                <i class="bi bi-x-circle-fill me-1"></i> Stok Habis (0)
                            </span>
                        @elseif ($product->stock <= 5)
                            <span class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-3 py-1">
                                <i class="bi bi-exclamation-triangle-fill me-1"></i> Stok Menipis ({{ $product->stock }})
                            </span>
                        @else
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">
                                <i class="bi bi-box-seam me-1"></i> Tersedia ({{ $product->stock }} Unit)
                            </span>
                        @endif
                    </div>
                    <div class="d-flex justify-content-between align-items-center py-2">
                        <span class="text-muted small">Kategori:</span>
                        <span class="badge bg-purple-subtle text-purple border border-purple-subtle rounded-pill px-3 py-1">
                            <i class="bi bi-tag-fill me-1"></i>{{ $product->category->name ?? 'Tanpa Kategori' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Kolom Kanan: Detail Informasi Lengkap -->
    <div class="col-lg-7">
        <div class="card card-custom h-100">
            <div class="card-header bg-white py-3 border-bottom d-flex align-items-center justify-content-between">
                <h5 class="card-title fw-bold mb-0 text-dark">Informasi Produk</h5>
                <span class="badge bg-light text-secondary border">ID: #{{ $product->id }}</span>
            </div>
            <div class="card-body p-4">
                <!-- Harga -->
                <div class="p-3 bg-light rounded-3 border mb-4">
                    <span class="text-muted small d-block mb-1">Harga Jual:</span>
                    <h2 class="text-purple fw-extrabold mb-0">{{ $product->formatted_price }}</h2>
                </div>

                <!-- Tabel Data Detail -->
                <div class="table-responsive mb-4">
                    <table class="table table-bordered mb-0">
                        <tbody>
                            <tr>
                                <th class="bg-light text-secondary" style="width: 30%;">Nama Produk</th>
                                <td class="fw-bold text-dark">{{ $product->name }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Slug URL</th>
                                <td><code class="text-primary bg-light px-2 py-1 rounded">{{ $product->slug }}</code></td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Kategori</th>
                                <td>
                                    <span class="fw-semibold text-dark">{{ $product->category->name ?? '-' }}</span>
                                    @if ($product->category)
                                        <a href="{{ route('admin.categories.edit', $product->category) }}" class="ms-2 small text-decoration-none">
                                            (Kelola Kategori &rarr;)
                                        </a>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Jumlah Stok</th>
                                <td><span class="fw-bold fs-6">{{ $product->stock }}</span> Unit</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Tanggal Dibuat</th>
                                <td class="text-muted small">
                                    {{ $product->created_at ? $product->created_at->translatedFormat('l, d F Y, H:i') : '-' }} WIB
                                </td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Terakhir Diperbarui</th>
                                <td class="text-muted small">
                                    {{ $product->updated_at ? $product->updated_at->translatedFormat('l, d F Y, H:i') : '-' }} WIB
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Deskripsi Produk -->
                <div>
                    <h6 class="fw-bold text-dark mb-2">Deskripsi Produk</h6>
                    <div class="p-3 rounded-3 border bg-white text-secondary" style="min-height: 120px; white-space: pre-line;">
                        {{ $product->description ?: 'Tidak ada deskripsi yang dicantumkan untuk produk ini.' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Hapus Produk -->
<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">
                <h5 class="modal-title d-flex align-items-center gap-2" id="deleteProductModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <span>Konfirmasi Hapus Produk</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.products.destroy', $product) }}" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-body p-4">
                    <p class="mb-3 text-secondary">Apakah Anda yakin ingin menghapus produk ini dari katalog?</p>
                    <div class="p-3 bg-light rounded border mb-3">
                        <strong class="d-block text-dark fs-5 mb-1">{{ $product->name }}</strong>
                        <div class="small text-muted">
                            Kategori: <strong>{{ $product->category->name ?? '-' }}</strong> &bull; Harga: <strong>{{ $product->formatted_price }}</strong>
                        </div>
                    </div>
                    <div class="alert alert-warning small mb-0 d-flex align-items-start gap-2">
                        <i class="bi bi-info-circle-fill text-warning fs-5 flex-shrink-0"></i>
                        <span>Gambar dan data produk akan dihapus secara permanen. Jika produk sudah pernah memiliki transaksi pesanan, sistem akan memblokir penghapusan.</span>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger d-inline-flex align-items-center gap-1">
                        <i class="bi bi-trash-fill"></i>
                        <span>Ya, Hapus Produk</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection