-@extends('backend.dashboard')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <div class="card shadow-sm">
                <!-- Card Header -->
                <div class="card-header bg-primary text-white d-flex justify-content-center">
                    <h3 class="card-title mb-0">Kids’ Bedtime Details</h3>
                </div>

                <div class="card-body">

                    <table class="table table-bordered">
                        <!-- Image Row -->
                        <tr>
                            <th width="30%">Image</th>
                            <td>
                                @if($popular->image)
                                    <img src="{{ asset($popular->image) }}" width="100" alt="popular Image">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Name -->
                        <tr>
                            <th width="30%">Alt Text</th>
                            <td>{{ $popular->alt_text ?? '—' }}</td>
                        </tr>

                        <!-- Description -->
                        <tr>
                            <th>Title</th>
                            <td>{{ $popular->title ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th>Author</th>
                            <td>{{ $popular->author ?? '—' }}</td>
                        </tr>

                        {{--
                        <tr>
                            <th>Price</th>
                            <td>{{ $popular->price ?? '—' }}</td>
                        </tr> --}}
                        <tr>
                            <th>Amazon Link</th>
                            <td>{{ $popular->amazon_link ?? '—' }}</td>
                        </tr>
                        <tr>
                            <th>Category</th>
                            <td>{{ $popular->category->title ?? '—' }}</td>
                        </tr>

                        {{-- <tr>
                            <th>Slug</th>
                            <td>{{ $popular->slug ?? '—' }}</td>
                        </tr> --}}



                        <!-- Status -->
                        <tr>
                            <th>Status</th>
                            <td>
                                @if($popular->status == 1)
                                    <span class="badge bg-primary">Active</span>
                                @else
                                    <span class="badge bg-danger">De-Active</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Priority -->
                        <tr>
                            <th>Priority</th>
                            <td>{{ $popular->priority ?? '—' }}</td>
                        </tr>
                    </table>

                </div>

                <!-- Card Footer -->
                <div class="card-footer text-end">
                    <a href="{{ route('popular.index') }}" class="btn btn-primary">
                        <i class="fa fa-arrow-left"></i> Back
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection