@extends('adminlte::page')

@section('title', 'Manajemen Hero Slider')

@section('content_header')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center py-3">
            <div>
                <h1 class="font-weight-bold text-dark mb-0" style="font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: #006D32 !important;">
                    Hero Slider Beranda
                </h1>
                <p class="text-muted small mb-0">Kelola gambar banner yang berputar di halaman depan (Maks tampil 5 slide aktif)</p>
            </div>
            <div>
                {{-- PERBAIKAN: Menggunakan nama rute yang benar (sekolah.website.sliders.create) --}}
                <a href="{{ route('sekolah.website.sliders.create') }}" class="btn btn-publish rounded-pill px-4 shadow-sm font-weight-bold">
                    <i class="fas fa-plus-circle mr-2"></i> Tambah Slide Baru
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">
    
    {{-- Notifikasi Sukses --}}
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong><i class="fas fa-check-circle mr-2"></i> Berhasil!</strong> {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="card border-0 shadow-sm saas-card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light text-muted text-xs text-uppercase tracking-wider">
                        <tr>
                            <th class="pl-4 py-3 border-0">Gambar Slide</th>
                            <th class="py-3 border-0">Teks Utama</th>
                            <th class="py-3 border-0">Delay</th>
                            <th class="py-3 border-0">Status</th>
                            <th class="pr-4 py-3 border-0 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($sliders as $slider)
                        <tr>
                            <td class="pl-4 py-3 border-light">
                                <div class="rounded-lg overflow-hidden shadow-sm border border-gray-200" style="width: 120px; height: 60px;">
                                    <img src="{{ asset('storage/' . $slider->image) }}" class="w-100 h-100" style="object-fit: cover;">
                                </div>
                            </td>
                            <td class="py-3 border-light">
                                <h6 class="font-weight-bold mb-1 text-dark">{{ $slider->title ?? '(Tanpa Judul)' }}</h6>
                                <p class="text-muted text-xs mb-0">{{ Str::limit($slider->subtitle, 40) }}</p>
                            </td>
                            <td class="py-3 border-light">
                                <span class="badge badge-light text-muted border px-2 py-1">
                                    <i class="far fa-clock mr-1"></i> {{ $slider->delay / 1000 }} Detik
                                </span>
                            </td>
                            <td class="py-3 border-light">
                                @if($slider->is_active)
                                    <span class="badge badge-success px-3 py-1 rounded-pill">Aktif</span>
                                @else
                                    <span class="badge badge-secondary px-3 py-1 rounded-pill">Nonaktif</span>
                                @endif
                            </td>
                            <td class="pr-4 py-3 border-light text-right">
                                {{-- PERBAIKAN: Menggunakan nama rute yang benar untuk Edit --}}
                                <a href="{{ route('sekolah.website.sliders.edit', $slider->id) }}" class="btn btn-sm btn-light text-primary border shadow-sm rounded-lg mr-1">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {{-- PERBAIKAN: Menggunakan nama rute yang benar untuk Destroy --}}
                                <form action="{{ route('sekolah.website.sliders.destroy', $slider->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus slide ini?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-light text-danger border shadow-sm rounded-lg">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="fas fa-images fa-3x mb-3 text-light"></i>
                                <h5>Belum ada slide yang ditambahkan</h5>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop

@push('css')
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    body { font-family: 'Poppins', sans-serif; background-color: #F8FAF8; }
    .saas-card { border-radius: 16px; overflow: hidden; }
    .btn-publish { background: linear-gradient(90deg, #006D32 0%, #009344 100%); color: white; border: none; }
    .btn-publish:hover { box-shadow: 0 8px 15px rgba(0, 147, 68, 0.25); color: white; transform: translateY(-2px); transition: all 0.3s; }
    table th { font-weight: 600; letter-spacing: 0.5px; }
    table td { vertical-align: middle !important; }
</style>
@endpush