@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%;
            ">
                Sliders List
            </h3>

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

        </div>


        <div class="card-body">

            <!-- Search Form -->
            <form method="GET" action="{{ route('sliders.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>Title</h5>
                            </th>
                            <th class="text-white">
                                <h5>Author</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>
                    </thead>

                    <tbody>
                        @forelse($sliders as $key => $slider)
                            <tr>
                                <!-- Serial Number (Pagination Friendly) -->
                                <td>{{ $sliders->firstItem() + $key }}</td>

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

                                <!-- Data -->
                                <td>{{ $slider->title }}</td>
                                <td>{{ $slider->author }}</td>
                                <td>{{ $slider->priority }}</td>

                                <!-- Status -->
                                <td>
                                    <span
                                        class="badge {{ $slider->status == 1 ? 'bg-primary text-white' : 'bg-danger text-white' }}">
                                        {{ $slider->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('sliders.edit', $slider->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('sliders.show', $slider->id) }}">
                                                <i class="fa-solid fa-eye"></i>
                                                Show
                                            </a>

                                            <!-- Delete -->
                                            <form action="{{ route('sliders.destroy', $slider->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="7" class="text-center text-muted">
                                    No sliders found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>

                </table>
            </div>

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

        </div>
    </div>
@endsection