@extends('layouts.app')

@section('title', 'Informasi')

@section('content')
<div class="space-y-6 animate-fade-in">
    
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Informasi</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Kelola informasi dan pengumuman</p>
        </div>
        @if(auth()->user()->isAdminOrSuperAdmin())
        <button onclick="openModal('add')" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5">
            <i data-lucide="plus" class="w-5 h-5 mr-2"></i>Tambah Informasi
        </button>
        @endif
    </div>

    <!-- Filter -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft p-4">
        @if(auth()->user()->isAdminOrSuperAdmin())
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('information.index', ['type' => 'all']) }}" 
               class="px-4 py-2 rounded-xl font-medium {{ $type == 'all' ? 'bg-gradient-to-r from-primary-600 to-primary-700 text-white shadow-md' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }} transition-all">
                Semua
            </a>
            <a href="{{ route('information.index', ['type' => 'menu']) }}" 
               class="px-4 py-2 rounded-xl font-medium {{ $type == 'menu' ? 'bg-gradient-to-r from-primary-600 to-primary-700 text-white shadow-md' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }} transition-all">
                Menu
            </a>
            <a href="{{ route('information.index', ['type' => 'catatan']) }}" 
               class="px-4 py-2 rounded-xl font-medium {{ $type == 'catatan' ? 'bg-gradient-to-r from-primary-600 to-primary-700 text-white shadow-md' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }} transition-all">
                Catatan
            </a>
            <a href="{{ route('information.index', ['type' => 'info_therapist']) }}" 
               class="px-4 py-2 rounded-xl font-medium {{ $type == 'info_therapist' ? 'bg-gradient-to-r from-primary-600 to-primary-700 text-white shadow-md' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }} transition-all">
                Info Therapist
            </a>
        </div>
        @else
        <div class="flex flex-wrap gap-3">
            <span class="px-4 py-2 rounded-xl font-medium bg-gradient-to-r from-primary-600 to-primary-700 text-white shadow-md">Info Therapist</span>
        </div>
        @endif
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($informations as $info)
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft overflow-hidden hover:shadow-soft-lg transition-all duration-300 transform hover:-translate-y-1">
                @if($info->photos->count() > 0)
                    @php
                        $photoPath = $info->photos->first()->photo_path ?? null;
                        $photoUrl = $photoPath ? (route('media.show', ['path' => ltrim($photoPath, '/')]) . '?v=' . time()) : null;
                    @endphp
                    <img src="{{ $photoUrl }}" alt="{{ $info->title }}" class="w-full h-48 object-cover">
                @else
                    <div class="w-full h-48 bg-gradient-to-br from-primary-400 to-accent-500 flex items-center justify-center">
                        <i data-lucide="image" class="w-12 h-12 text-white opacity-60"></i>
                    </div>
                @endif
                
                <div class="p-6">
                    <div class="flex items-center justify-between mb-3">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
                            {{ $info->type == 'menu' ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ($info->type == 'catatan' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300') }}">
                            {{ ucfirst($info->type) }}
                        </span>
                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ $info->created_at->format('d/m/Y') }}</span>
                    </div>
                    
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ $info->title }}</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">{{ Str::limit($info->content, 100) }}</p>
                    
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
                        <button onclick="showDetail({{ $info->id }})" class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 text-sm font-medium transition-colors">
                            <i data-lucide="eye" class="w-4 h-4 mr-1"></i> Detail
                        </button>
                        @if(auth()->user()->isAdminOrSuperAdmin())
                        <div class="flex items-center space-x-2">
                            <button onclick='openModal("edit", {{ json_encode($info) }})' class="p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-all" title="Edit">
                                <i data-lucide="pencil" class="w-4 h-4"></i>
                            </button>
                            <button onclick="deleteInfo({{ $info->id }})" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all" title="Hapus">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-16">
                <div class="flex flex-col items-center justify-center">
                    <div class="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
                        <i data-lucide="inbox" class="w-10 h-10 text-gray-400"></i>
                    </div>
                    <p class="text-gray-500 dark:text-gray-400 font-medium text-lg">Belum ada informasi</p>
                </div>
            </div>
        @endforelse
    </div>
</div>

<!-- Modal Form -->
@if(auth()->user()->isAdminOrSuperAdmin())
<div id="infoModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800">
            <h3 id="modalTitle" class="text-xl font-bold text-gray-900 dark:text-white">Tambah Informasi</h3>
            <button onclick="closeModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-all">
                <i data-lucide="x" class="w-5 h-5 text-gray-400"></i>
            </button>
        </div>
        
        <form id="infoForm" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
            @csrf
            <input type="hidden" id="method" name="_method" value="POST">
            
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Judul</label>
                <input type="text" name="title" id="title" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Jenis Informasi</label>
                <select name="type" id="type" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 appearance-none cursor-pointer transition-all">
                    <option value="">Pilih Jenis</option>
                    <option value="menu">Menu</option>
                    <option value="catatan">Catatan</option>
                    <option value="info_therapist">Info Therapist</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Konten/Deskripsi</label>
                <textarea name="content" id="content" rows="5" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border-0 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all"></textarea>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Upload Foto (Bisa lebih dari 1)</label>
                <input type="file" name="photos[]" multiple accept="image/*" class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary-50 dark:file:bg-primary-900/30 file:text-primary-700 dark:file:text-primary-300 hover:file:bg-primary-100 dark:hover:file:bg-primary-900/50">
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">JPG, PNG, WEBP, HEIC (Max 16MB per file)</p>
            </div>

            <div class="flex justify-end space-x-3 pt-4">
                <button type="button" onclick="closeModal()" class="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all">Batal</button>
                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium rounded-xl shadow-lg hover:shadow-xl transition-all">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endif

<!-- Modal Detail -->
<div id="detailModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-lg md:max-w-2xl lg:max-w-4xl xl:max-w-5xl max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800">
            <h3 id="detailTitle" class="text-xl font-bold text-gray-900 dark:text-white"></h3>
            <button onclick="closeDetailModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-all">
                <i data-lucide="x" class="w-5 h-5 text-gray-400"></i>
            </button>
        </div>
        
        <div class="p-6">
            <div id="photoSlider" class="hidden mb-6">
                <div class="relative">
                    <div id="sliderContainerInfo" class="overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-700">
                        <div id="sliderImagesInfo" class="flex transition-transform duration-300"></div>
                    </div>
                    <button type="button" onclick="prevPhotoInfo()" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70">&#8249;</button>
                    <button type="button" onclick="nextPhotoInfo()" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70">&#8250;</button>
                </div>
                <div id="photoIndicatorsInfo" class="flex justify-center mt-2 space-x-2"></div>
            </div>
            <div id="detailContent" class="text-gray-700 dark:text-gray-300 whitespace-pre-line"></div>
            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                <p class="text-sm text-gray-500 dark:text-gray-400">Dibuat oleh: <span id="detailCreator" class="font-medium text-gray-900 dark:text-white"></span></p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Tanggal: <span id="detailDate" class="font-medium text-gray-900 dark:text-white"></span></p>
            </div>
        </div>
    </div>
</div>

<!-- Delete Form -->
@if(auth()->user()->isAdminOrSuperAdmin())
<form id="deleteForm" method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>
@endif

@push('scripts')
<script>
const mediaPrefix = "{{ url('/media') }}/";
function openModal(mode, data = null) {
    const modal = document.getElementById('infoModal');
    const form = document.getElementById('infoForm');
    const title = document.getElementById('modalTitle');
    const method = document.getElementById('method');
    
    if (mode === 'add') {
        title.textContent = 'Tambah Informasi';
        form.action = '{{ route("information.store") }}';
        method.value = 'POST';
        form.reset();
    } else {
        title.textContent = 'Edit Informasi';
        form.action = `/information/${data.id}`;
        method.value = 'PUT';
        document.getElementById('title').value = data.title;
        document.getElementById('type').value = data.type;
        document.getElementById('content').value = data.content;
    }
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

function closeModal() {
    document.getElementById('infoModal').classList.add('hidden');
    document.getElementById('infoModal').classList.remove('flex');
}

function showDetail(id) {
    fetch(`/information/${id}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('detailTitle').textContent = data.title;
            document.getElementById('detailContent').textContent = data.content;
            document.getElementById('detailCreator').textContent = data.creator.name;
            document.getElementById('detailDate').textContent = new Date(data.created_at).toLocaleDateString('id-ID');
            
            // Slider photos
            if (data.photos && data.photos.length > 0) {
                displayPhotosInfo(data.photos);
                document.getElementById('photoSlider').classList.remove('hidden');
            } else {
                document.getElementById('photoSlider').classList.add('hidden');
            }
            
            document.getElementById('detailModal').classList.remove('hidden');
            document.getElementById('detailModal').classList.add('flex');
        });
}

function closeDetailModal() {
    document.getElementById('detailModal').classList.add('hidden');
    document.getElementById('detailModal').classList.remove('flex');
}

function deleteInfo(id) {
    if (confirm('Yakin ingin menghapus informasi ini?')) {
        const form = document.getElementById('deleteForm');
        form.action = `/information/${id}`;
        form.submit();
    }
}
// Photo slider for Information detail
let currentPhotoIndexInfo = 0;
let totalPhotosInfo = 0;

function displayPhotosInfo(photos) {
    const sliderImages = document.getElementById('sliderImagesInfo');
    const indicators = document.getElementById('photoIndicatorsInfo');
    if (!sliderImages || !indicators) return;

    sliderImages.innerHTML = '';
    indicators.innerHTML = '';
    totalPhotosInfo = photos.length;
    currentPhotoIndexInfo = 0;

    photos.forEach((photo, index) => {
        const img = document.createElement('img');
        const src = (photo.url ? photo.url : (mediaPrefix + photo.photo_path)) + `?v=${Date.now()}`;
        img.src = src;
        img.className = 'w-full h-60 md:h-80 object-contain bg-gray-50 dark:bg-gray-700 flex-shrink-0';
        img.alt = 'Foto Informasi ' + (index + 1);
        sliderImages.appendChild(img);

        const indicator = document.createElement('div');
        indicator.className = `w-2 h-2 rounded-full ${index === 0 ? 'bg-primary-600 dark:bg-primary-400' : 'bg-gray-300 dark:bg-gray-600'}`;
        indicators.appendChild(indicator);
    });

    updateSliderInfo();
}

function prevPhotoInfo() {
    if (currentPhotoIndexInfo > 0) {
        currentPhotoIndexInfo--;
        updateSliderInfo();
    }
}

function nextPhotoInfo() {
    if (currentPhotoIndexInfo < totalPhotosInfo - 1) {
        currentPhotoIndexInfo++;
        updateSliderInfo();
    }
}

function updateSliderInfo() {
    const sliderImages = document.getElementById('sliderImagesInfo');
    const indicators = document.getElementById('photoIndicatorsInfo').children;
    sliderImages.style.transform = `translateX(-${currentPhotoIndexInfo * 100}%)`;

    Array.from(indicators).forEach((indicator, index) => {
        indicator.className = `w-2 h-2 rounded-full ${index === currentPhotoIndexInfo ? 'bg-primary-600 dark:bg-primary-400' : 'bg-gray-300 dark:bg-gray-600'}`;
    });
}
</script>
@endpush
@endsection