@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-[#63BE9A] to-[#06B3BF] p-6">
    <div class="max-w-5xl mx-auto relative mb-8">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
            <h2 class="text-3xl font-bold text-black">Artikel Kesehatan</h2>
            <nav class="text-gray-600 text-sm bg-white/60 px-4 py-2 rounded-xl shadow border border-white/40">
                <a href="{{ route('dashboard') }}" class="text-[#06B3BF] font-semibold hover:underline">Dashboard</a> / <span>Artikel</span>
            </nav>
        </div>
    </div>

    <div class="w-full max-w-5xl bg-white/70 backdrop-blur-md rounded-2xl shadow-xl p-8 mx-auto mt-8 border border-white/40">
        <div class="flex flex-col md:flex-row items-center justify-between gap-4 mb-6">
            <button id="create-article-btn" class="flex items-center bg-gradient-to-r from-[#63BE9A] to-[#06B3BF] hover:from-[#06B3BF] hover:to-[#63BE9A] text-white font-medium px-5 py-2.5 rounded-xl transition-all duration-300 shadow-md">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                Buat Artikel Baru
            </button>
            
            <form action="{{ route('artikel.search') }}" method="GET" class="w-full md:w-auto">
                <div class="flex items-center">
                    <div class="relative w-full">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                            </svg>
                        </div>
                        <input type="text" name="keyword" placeholder="Cari artikel..." value="{{ isset($keyword) ? $keyword : '' }}" class="bg-white/80 border border-gray-300 text-gray-900 rounded-l-lg focus:ring-[#06B3BF] focus:border-[#06B3BF] block w-full pl-10 p-2.5">
                    </div>
                    <button type="submit" class="bg-[#06B3BF] hover:bg-[#05a1ac] text-white font-medium px-4 py-2.5 rounded-r-lg transition-colors duration-300">Cari</button>
                    @if(isset($keyword) && $keyword)
                        <a href="{{ route('artikel.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white font-medium px-3 py-2.5 rounded-lg ml-2 transition-colors duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </a>
                    @endif
                </div>
            </form>
        </div>

        @if(isset($keyword) && $keyword)
            <div class="mb-6 p-3 bg-blue-50 border border-blue-100 text-blue-700 rounded-xl flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Menampilkan hasil pencarian untuk: <span class="font-semibold mx-1">{{ $keyword }}</span> ({{ count($artikels) }} hasil)
            </div>
        @endif

        @if(session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-100 text-green-700 rounded-xl flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {{ session('success') }}
            </div>
        @endif

        <!-- Modal untuk menambah artikel -->
        <div id="create-article-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex justify-center items-center z-50 backdrop-blur-sm">
            <div class="bg-white p-8 rounded-2xl shadow-2xl max-w-md w-full mx-auto transform transition-all duration-300">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-2xl font-bold text-gray-800">Tambah Artikel Baru</h3>
                    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700 transition-colors duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <form action="{{ route('artikel.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="space-y-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Judul Artikel*</label>
                            <input type="text" name="judul" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#06B3BF] focus:border-transparent transition-all duration-300" placeholder="Masukkan judul artikel" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Gambar Artikel*</label>
                            <div class="flex items-center justify-center w-full">
                                <label class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-xl cursor-pointer bg-gray-50 hover:bg-gray-100">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <svg class="w-8 h-8 mb-3 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                                        </svg>
                                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Klik untuk upload</span> atau drag and drop</p>
                                        <p class="text-xs text-gray-500">SVG, PNG, JPG or GIF (Max. 2MB)</p>
                                    </div>
                                    <input type="file" name="gambar_artikel" class="hidden" required accept="image/*" />
                                </label>
                            </div> 
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Tanggal*</label>
                            <input type="date" name="tanggal" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#06B3BF] focus:border-transparent transition-all duration-300" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Isi Artikel*</label>
                            <textarea name="isi_artikel" class="w-full p-3 bg-gray-50 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#06B3BF] focus:border-transparent transition-all duration-300" rows="6" placeholder="Tulis isi artikel di sini..." required></textarea>
                        </div>
                    </div>

                    <div class="mt-8 flex justify-end space-x-3">
                        <button type="button" onclick="closeModal()" class="px-5 py-2.5 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-xl font-medium transition-colors duration-300">Batal</button>
                        <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-[#63BE9A] to-[#06B3BF] hover:from-[#06B3BF] hover:to-[#63BE9A] text-white rounded-xl font-medium transition-all duration-300 shadow-md">Terbitkan</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Daftar Artikel dengan Grid Layout -->
        <div class="max-h-[70vh] overflow-y-auto pr-2 scrollbar">
            @if(count($artikels) > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($artikels as $artikel)
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-102 border border-gray-100">
                        <div class="h-48 overflow-hidden">
                            <img src="{{ asset('storage/artikel/' . $artikel->gambar_artikel) }}" alt="Gambar Artikel" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                        </div>
                        <div class="p-5">
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-[#06B3BF]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                                <span>{{ \Carbon\Carbon::parse($artikel->tanggal)->format('d M Y') }}</span>
                            </div>
                            <h3 class="font-bold text-lg text-gray-800 mb-2 line-clamp-2">{{ $artikel->judul }}</h3>
                            <p class="text-sm text-gray-600 mb-4 line-clamp-3">{{ Str::limit($artikel->isi_artikel, 120, '...') }}</p>
                            <div class="flex justify-between items-center">
                                <a href="{{ route('artikel.show', $artikel->id) }}" class="inline-flex items-center text-sm font-medium text-[#06B3BF] hover:text-[#05a1ac] transition-colors duration-300">
                                    Baca Selengkapnya
                                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                    </svg>
                                </a>
                                <form action="{{ route('artikel.destroy', $artikel->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus artikel ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-500 hover:text-red-700 transition-colors duration-300">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                <!-- Pagination Controls -->
                <div class="mt-8">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-600">
                            Menampilkan {{ $artikels->firstItem() ?? 0 }} - {{ $artikels->lastItem() ?? 0 }} dari {{ $artikels->total() }} artikel
                        </div>
                        <div class="flex items-center space-x-1">
                            @if($artikels->onFirstPage())
                                <span class="px-3 py-1 bg-gray-100 text-gray-400 rounded-lg cursor-not-allowed">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                    </svg>
                                </span>
                            @else
                                <a href="{{ $artikels->previousPageUrl() }}" class="px-3 py-1 bg-white border border-gray-200 text-[#06B3BF] rounded-lg hover:bg-[#06B3BF]/5 transition-colors duration-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                    </svg>
                                </a>
                            @endif

                            @foreach($artikels->getUrlRange(1, $artikels->lastPage()) as $page => $url)
                                <a href="{{ $url }}" 
                                   class="{{ $page == $artikels->currentPage() 
                                             ? 'px-3 py-1 bg-[#06B3BF] text-white rounded-lg' 
                                             : 'px-3 py-1 bg-white border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 transition-colors duration-300' }}">
                                    {{ $page }}
                                </a>
                            @endforeach

                            @if($artikels->hasMorePages())
                                <a href="{{ $artikels->nextPageUrl() }}" class="px-3 py-1 bg-white border border-gray-200 text-[#06B3BF] rounded-lg hover:bg-[#06B3BF]/5 transition-colors duration-300">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                    </svg>
                                </a>
                            @else
                                <span class="px-3 py-1 bg-gray-100 text-gray-400 rounded-lg cursor-not-allowed">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                    </svg>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            @else
                <div class="bg-white/90 p-8 rounded-xl text-center border border-gray-100 shadow-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                    </svg>
                    @if(isset($keyword) && $keyword)
                        <p class="text-gray-600 mb-2">Tidak ada artikel yang sesuai dengan pencarian</p>
                        <a href="{{ route('artikel.index') }}" class="inline-flex items-center text-[#06B3BF] hover:text-[#05a1ac] font-medium transition-colors duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                            </svg>
                            Kembali ke semua artikel
                        </a>
                    @else
                        <p class="text-gray-600 mb-2">Belum ada artikel yang ditambahkan</p>
                        <button id="empty-create-btn" class="mt-2 inline-flex items-center px-4 py-2 bg-gradient-to-r from-[#63BE9A] to-[#06B3BF] text-white rounded-lg hover:from-[#06B3BF] hover:to-[#63BE9A] transition-all duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            Buat Artikel Baru
                        </button>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

<style>
    /* Custom scrollbar styling */
    .scrollbar::-webkit-scrollbar {
        width: 8px;
    }
    
    .scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .scrollbar::-webkit-scrollbar-thumb {
        background: #a8dbd9;
        border-radius: 10px;
    }
    
    .scrollbar::-webkit-scrollbar-thumb:hover {
        background: #63BE9A;
    }
    
    /* Animation for hover */
    .hover\:scale-102:hover {
        transform: scale(1.02);
    }
    
    /* Line clamping for text */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>

<script>
    document.getElementById('create-article-btn').onclick = function() {
        const modal = document.getElementById('create-article-modal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        
        // Add slight animation
        const modalContent = modal.querySelector('div');
        modalContent.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
        }, 10);
    };
    
    // For the empty state button
    if (document.getElementById('empty-create-btn')) {
        document.getElementById('empty-create-btn').onclick = function() {
            const modal = document.getElementById('create-article-modal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            
            // Add slight animation
            const modalContent = modal.querySelector('div');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
            }, 10);
        };
    }

    function closeModal() {
        const modal = document.getElementById('create-article-modal');
        const modalContent = modal.querySelector('div');
        
        // Add exit animation
        modalContent.classList.add('scale-95', 'opacity-0');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            modalContent.classList.remove('scale-95', 'opacity-0');
        }, 200);
    }
    
    // Close modal when clicking outside
    document.getElementById('create-article-modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
</script>
@endsection