@extends('layouts.admin')

@section('title', 'Landing Slide')

@section('content')
<div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-xl shadow space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">🎬 Landing Slides</h1>
        <a href="{{ route('admin.landing-slide.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded shadow">
            ➕ Tambah Slide
        </a>
    </div>

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

    <div class="overflow-x-auto mt-4">
        <table class="min-w-full table-auto border-collapse">
            <thead>
                <tr class="bg-gray-100 dark:bg-gray-700 text-left text-sm uppercase font-semibold text-gray-600 dark:text-gray-300">
                    <th class="p-3">Judul</th>
                    <th class="p-3">Preview</th>
                    <th class="p-3 text-center">Aktif</th>
                    <th class="p-3 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($slides as $slide)
                    <tr class="border-b dark:border-gray-700 text-sm">
                        <td class="p-3 font-medium">{{ $slide->judul }}</td>
                        <td class="p-3 space-y-2">
                            @if($slide->image_path)
                                <img src="{{ asset('storage/' . $slide->image_path) }}" class="w-32 rounded shadow">
                            @endif
                            @if($slide->video_path)
                                <video src="{{ asset('storage/' . $slide->video_path) }}" class="w-40 rounded shadow" controls></video>
                            @endif
                        </td>
                        <td class="p-3 text-center">
                            <form action="{{ route('admin.landing-slide.update', $slide->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="judul" value="{{ $slide->judul }}">
                                <input type="hidden" name="deskripsi" value="{{ $slide->deskripsi }}">
                                <input type="hidden" name="aktif" value="{{ $slide->aktif ? 0 : 1 }}">
                                <button type="submit"
                                        class="inline-block w-10 h-5 rounded-full transition duration-300
                                        {{ $slide->aktif ? 'bg-green-500' : 'bg-gray-300' }}">
                                    <div class="w-5 h-5 bg-white rounded-full shadow transform transition duration-300 {{ $slide->aktif ? 'translate-x-5' : '' }}"></div>
                                </button>
                            </form>
                        </td>
                        <td class="p-3 text-center space-x-2">
                            <a href="{{ route('admin.landing-slide.edit', $slide->id) }}" class="text-blue-600 hover:underline">Edit</a>
                            <form action="{{ route('admin.landing-slide.destroy', $slide->id) }}"
                                  method="POST"
                                  class="inline-block delete-form"
                                  data-title="{{ $slide->judul }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-600 hover:underline">Hapus</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="p-4 text-center text-gray-500 dark:text-gray-400">Belum ada data.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-6">
        {{ $slides->links() }}
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteForms = document.querySelectorAll('.delete-form');

        deleteForms.forEach(form => {
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                const title = form.getAttribute('data-title');

                Swal.fire({
                    title: 'Hapus Slide?',
                    text: `Slide "${title}" akan dihapus secara permanen.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#e3342f',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>
@endpush