@extends('backend.dashboard')
@section('content')

<div class="card card-primary">
         <div class="card-header"
            style="display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative; gap:10px;">

            <!-- Title -->
            <h3 style="
                 padding:20px;
                font-weight:700;
                font-size:30px;
                padding-bottom:6px;
                border-bottom:3px solid #a74a28;
                margin:0;
                text-align:center;
                flex:1 1 100%;
            ">
                 Kids’ Bedtime  List
            </h3>

            <!-- Button -->
            <a href="{{ route('popular.create') }}"
            class="btn btn-primary"
            style="flex:0 0 auto;">
                <i class="fas fa-plus"></i>  Add Kids’ Bedtime
            </a>

        </div>

    <div class="card-body">

        <!-- Search -->
        <form method="GET" action="{{ route('popular.index') }}" class="mb-3">
            <div class="input-group">
                <input type="text"
                       name="search"
                       class="form-control"
                       placeholder="Search by title..."
                       value="{{ request('search') }}">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover text-center align-middle">
                <thead class="table bg-primary py-2">
                    <tr>
                        <th class="text-white"><h5>SI</h5></th>
                            <th class="text-white"><h5>Image</h5></th>
                            <th class="text-white"><h5>Category Title</h5></th>
                            <th class="text-white"><h5>Title</h5></th>
                            <th class="text-white"><h5>Author</h5></th>
                            {{-- <th class="text-white"><h5>Price</h5></th> --}}
                            <th class="text-white"><h5>Priority</h5></th>
                            <th class="text-white"><h5>Status</h5></th>
                            <th class="text-white"><h5>Action</h5></th>
                        </tr>
                    </tr>
                </thead>

                <tbody>
                @forelse($populars as $key => $popular)
                    <tr>

                        <!-- Serial Number (Pagination Friendly) -->
                        <td>{{ $populars->firstItem() + $key }}</td>

                        <!-- Image -->
                        <td>
                            @if($popular->image)
                                <img src="{{ asset($popular->image) }}"
                                     style="width:60px; height:60px; object-fit:cover; border-radius:6px;">
                            @else
                                <span class="text-muted">No Image</span>
                            @endif
                        </td>

                        <!-- Category -->
                        <td>
                            {{ $popular->category->title ?? 'No Category' }}
                        </td>

                        <!-- Data -->
                        <td>{{ $popular->title }}</td>
                        <td>{{ $popular->author }}</td>
                        {{-- <td>{{ number_format($popular->price, 2) }} ৳</td> --}}
                        <td>{{ $popular->priority }}</td>

                        <!-- Status -->
                        <td>
                            <span class="badge {{ $popular->status == 1 ? 'bg-primary text-white' : 'bg-danger text-white' }}">
                                {{ $popular->status == 1 ? 'Active' : 'De-Active' }}
                            </span>
                        </td>

                        <!-- Action -->
                        <td>
                            <div class="dropdown">
                                <button class="btn btn-light dropdown-toggle"
                                        type="button"
                                        data-toggle="dropdown">
                                    <i class="fa-solid fa-ellipsis-vertical"></i>
                                </button>

                                <div class="dropdown-menu text-center">

                                    <!-- Edit -->
                                    <a class="dropdown-item bg-success text-white rounded mb-1"
                                    href="{{ route('popular.edit', $popular->id) }}">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                        Edit
                                    </a>

                                    <!-- Show -->
                                    <a class="dropdown-item bg-primary text-white rounded mb-1"
                                    href="{{ route('popular.show', $popular->id) }}">
                                        <i class="fa-solid fa-eye"></i>
                                        Show
                                    </a>

                                    <!-- Delete -->
                                    <form action="{{ route('popular.destroy', $popular->id) }}"
                                        method="POST"
                                        onsubmit="return confirm('Are you sure?');">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                class="dropdown-item bg-danger text-white rounded">
                                            <i class="fa-solid fa-trash-can"></i>
                                            Delete
                                        </button>
                                    </form>

                                </div>
                            </div>
                        </td>

                    </tr>

                @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted">
                            No popular items found.
                        </td>
                    </tr>
                @endforelse
                </tbody>

            </table>
        </div>

        <!-- Pagination -->
       <div class="mt-3">
            {{ $populars->appends(request()->query())->links() }}
        </div>

    </div>
</div>

@endsection