@extends('layouts.admin-apoteker')

@section('title', 'Highlight Slider')

@section('content')
<div class="p-6 space-y-6 bg-white dark:bg-gray-900 rounded-xl shadow">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">📌 Highlight Slider</h1>
        <a href="{{ route('admin.highlight-sliders.create') }}"
           class="bg-blue-600 text-white px-4 py-2 rounded hover:scale-105 transition">
            + Tambah Slider
        </a>
    </div>

    @if(session('success'))
        <div class="p-4 bg-green-100 text-green-800 rounded">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach ($highlights as $item)
            @php
                $mediaPath = asset('storage/' . $item->gambar);
                $ext = strtolower(pathinfo($mediaPath, PATHINFO_EXTENSION));
                $isVideo = in_array($ext, ['mp4', 'webm', 'mov', 'avi']);
            @endphp

            <div class="border rounded-xl p-4 shadow hover:shadow-lg transition bg-white dark:bg-gray-800">
                @if ($item->gambar)
                    <div class="relative mb-4">
                        @if ($isVideo)
                            <video src="{{ $mediaPath }}" controls muted
                                   class="w-full h-48 object-cover rounded-lg bg-black"></video>
                        @else
                            <img src="{{ $mediaPath }}"
                                 class="w-full h-48 object-cover rounded-lg">
                        @endif

                        @if ($item->ikon)
                            <img src="{{ asset('storage/' . $item->ikon) }}"
                                 class="absolute top-2 left-2 w-10 h-10 object-contain bg-white rounded-full shadow border border-gray-300">
                        @endif
                    </div>
                @endif

                <h2 class="text-xl font-semibold mb-1">{{ $item->judul }}</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">{{ $item->deskripsi }}</p>

                <div class="flex justify-between items-center mt-4">
                    <form action="{{ route('admin.highlight-sliders.toggle', $item->id) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <button type="submit"
                                class="text-xs px-3 py-1 rounded-full font-semibold transition
                                       {{ $item->aktif ? 'bg-green-200 text-green-800 hover:bg-green-300' : 'bg-red-200 text-red-800 hover:bg-red-300' }}">
                            {{ $item->aktif ? 'Nonaktifkan' : 'Aktifkan' }}
                        </button>
                    </form>

                    <div class="space-x-2">
                        <a href="{{ route('admin.highlight-sliders.edit', $item->id) }}"
                           class="text-blue-600 hover:underline">Edit</a>

                        <form id="delete-form-{{ $item->id }}" action="{{ route('admin.highlight-sliders.destroy', $item->id) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="button"
                                    onclick="confirmDelete({{ $item->id }})"
                                    class="text-red-600 hover:underline">
                                Hapus
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id) {
        Swal.fire({
            title: 'Yakin ingin menghapus?',
            text: "Data tidak dapat dikembalikan setelah dihapus.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e3342f',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    }
</script>
@endpush