@extends('layouts.admin')

@section('content')
    <div class="container-fluid">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Hero Slider</h4>
            <a href="{{ route('hero.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-circle"></i> Tambah Hero
            </a>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="width:120px">Foto</th>
                        <th>Judul</th>
                        <th class="d-none d-md-table-cell">Status</th>
                        <th style="width:160px">Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($heroes as $item)
                        <tr>
                            <td>
                                <img src="{{ asset('storage/' . $item->image) }}" class="img-fluid rounded"
                                    style="max-height:70px">
                            </td>

                            <td>
                                <strong>{{ $item->judul }}</strong>

                                {{-- Status muncul di HP --}}
                                <div class="d-md-none mt-1">
                                    <span class="badge {{ $item->status ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $item->status ? 'Aktif' : 'Nonaktif' }}
                                    </span>
                                </div>
                            </td>

                            <td class="d-none d-md-table-cell">
                                <span class="badge {{ $item->status ? 'bg-success' : 'bg-secondary' }}">
                                    {{ $item->status ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </td>

                            <td>
                                <div class="d-flex flex-column flex-md-row gap-1">
                                    <a href="{{ route('hero.edit', $item->id) }}" class="btn btn-warning btn-sm w-100">
                                        Edit
                                    </a>

                                    <form action="{{ route('hero.destroy', $item->id) }}" method="POST">
                                        @csrf @method('DELETE')
                                        <button onclick="return confirm('Hapus hero?')" class="btn btn-danger btn-sm w-100">
                                            Hapus
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
@endsection