@extends('layouts.admin')

@section('content')
<div class="">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Slides Management Title Section -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 bg-white border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-semibold text-gray-900">Slides Management</h1>
                        <p class="mt-2 text-sm text-gray-600">Manage your homepage carousel slides.</p>
                    </div>
                    <button
                        onclick="openSlideModal()"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150"
                    >
                        Add New Slide
                    </button>
                </div>
            </div>
        </div>

        <!-- Slides Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($slides as $slide)
            <div class="bg-white overflow-hidden shadow-sm rounded-lg">
                <div class="relative">
                    <img
                        src="{{ asset('uploads/slides/' . $slide->image_url) }}"
                        alt="{{ $slide->title }}"
                        class="w-full h-48 object-cover"
                    />
                    <div class="absolute top-2 right-2 flex space-x-2">
                        <button
                            onclick="editSlide({{ $slide->id }})"
                            class="bg-blue-500 text-white p-2 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                            </svg>
                        </button>
                        <button
                            onclick="confirmDelete({{ $slide->id }})"
                            class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="p-4">
                    <h3 class="font-semibold text-lg mb-2">{{ $slide->title ?: 'Untitled' }}</h3>
                    <p class="text-gray-600 text-sm">{{ $slide->description ?: 'No description' }}</p>
                    <div class="mt-4 flex items-center justify-between">
                        <span class="text-sm text-gray-500">Order: {{ $slide->order }}</span>
                        <span class="px-2 py-1 rounded text-sm {{ $slide->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $slide->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Slide Modal -->
<div id="slideModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden" x-data="{ show: false }">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6">
                <h2 class="text-xl font-semibold mb-4" id="modalTitle">Add New Slide</h2>
                <form id="slideForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="slideId" name="id">

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="image">
                            Image
                        </label>
                        <input
                            type="file"
                            id="image"
                            name="image"
                            accept="image/*"
                            class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                        <img
                            id="imagePreview"
                            class="mt-2 h-32 object-cover rounded hidden"
                        >
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="title">
                            Title
                        </label>
                        <input
                            type="text"
                            id="title"
                            name="title"
                            class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="description">
                            Description
                        </label>
                        <textarea
                            id="description"
                            name="description"
                            rows="3"
                            class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                        ></textarea>
                    </div>

                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="order">
                            Order
                        </label>
                        <input
                            type="number"
                            id="order"
                            name="order"
                            class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                    </div>

                    <div class="mb-4">
                        <label class="flex items-center">
                            <input
                                type="checkbox"
                                id="is_active"
                                name="is_active"
                                class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
                            >
                            <span class="ml-2 text-gray-700 text-sm font-bold">Active</span>
                        </label>
                    </div>

                    <div class="flex justify-end space-x-2">
                        <button
                            type="button"
                            onclick="closeSlideModal()"
                            class="px-4 py-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                        >
                            Cancel
                        </button>
                        <button
                            type="submit"
                            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                        >
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6">
                <h2 class="text-xl font-semibold mb-4">Confirm Delete</h2>
                <p class="mb-6">Are you sure you want to delete this slide? This action cannot be undone.</p>
                <div class="flex justify-end space-x-2">
                    <button
                        onclick="closeDeleteModal()"
                        class="px-4 py-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                    >
                        Cancel
                    </button>
                    <button
                        onclick="deleteSlide()"
                        class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                    >
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    let slideToDelete = null;

    function openSlideModal() {
        document.getElementById('modalTitle').textContent = 'Add New Slide';
        document.getElementById('slideForm').reset();
        document.getElementById('imagePreview').classList.add('hidden');
        document.getElementById('slideId').value = '';
        document.getElementById('is_active').checked = true;
        document.getElementById('slideModal').classList.remove('hidden');
    }

    function closeSlideModal() {
        document.getElementById('slideModal').classList.add('hidden');
    }

    function editSlide(id) {
        document.getElementById('modalTitle').textContent = 'Edit Slide';
        fetch(`/admin/slides/${id}`)
            .then(response => response.json())
            .then(slide => {
                document.getElementById('slideId').value = slide.id;
                document.getElementById('title').value = slide.title || '';
                document.getElementById('description').value = slide.description || '';
                document.getElementById('order').value = slide.order || 0;
                document.getElementById('is_active').checked = slide.is_active;

                const imagePreview = document.getElementById('imagePreview');
                imagePreview.src = `/uploads/slides/${slide.image_url}`;
                imagePreview.classList.remove('hidden');

                document.getElementById('slideModal').classList.remove('hidden');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error loading slide data');
            });
    }

    function confirmDelete(id) {
        slideToDelete = id;
        document.getElementById('deleteModal').classList.remove('hidden');
    }

    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
        slideToDelete = null;
    }

    function deleteSlide() {
        if (!slideToDelete) return;

        fetch(`/admin/slides/${slideToDelete}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => {
            if (response.ok) {
                window.location.reload();
            }
        });
    }

    document.getElementById('slideForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const id = document.getElementById('slideId').value;
        const url = id ? `/admin/slides/${id}` : '/admin/slides';
        const method = id ? 'PUT' : 'POST';

        formData.delete('is_active');
        formData.append('is_active', document.getElementById('is_active').checked ? '1' : '0');

        if (id && !formData.get('image').size) {
            formData.delete('image');
        }

        if (id) {
            formData.append('_method', 'PUT');
        }

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => {
            if (response.ok) {
                window.location.reload();
            } else {
                return response.json().then(data => {
                    if (data.errors) {
                        Object.keys(data.errors).forEach(key => {
                            const error = data.errors[key][0];
                            alert(error);
                        });
                    } else {
                        alert('An error occurred while saving the slide.');
                    }
                });
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while saving the slide.');
        });
    });

    document.getElementById('image').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const imagePreview = document.getElementById('imagePreview');
                imagePreview.src = e.target.result;
                imagePreview.classList.remove('hidden');
            }
            reader.readAsDataURL(file);
        }
    });
</script>
@endpush
@endsection