@extends('layouts.admin-layout')

@section('title', 'Admin - Manajemen Artikel')

@section('content')
    <main class="w-full flex flex-col space-y-6 px-4 sm:px-6 md:px-0">
        <nav class="text-sm text-gray-600 font-medium" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    Manajemen Artikel
                </li>
            </ol>
        </nav>
        <div class="bg-white p-6 rounded-lg shadow-md w-full ring-2 ring-gray-700">
            <h2 class="text-lg sm:text-xl font-bold mb-2 text-orangeCrayola">Data Artikel</h2>

            @if (session('status'))
                <div
                    class="p-4 mb-4 text-sm rounded-lg {{ session('status') == 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                    {{ session('message') }}
                </div>
            @endif

            <div class="overflow-x-auto">
                <table class="w-full text-center border-collapse">
                    <thead class="text-gray-600 uppercase text-sm tracking-wide">
                        <tr class="border-b-2 border-gray-700">
                            <th class="px-4 py-3">No</th>
                            <th class="px-4 py-3">Judul Artikel</th>
                            <th class="px-4 py-3">Deskripsi</th>
                            <th class="px-4 py-3">Catatan</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Gambar</th>
                            <th class="px-4 py-3">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-700 text-sm">
                        @foreach ($articles as $article)
                            <tr class="hover:bg-gray-50 border-b border-gray-200">
                                <td class="px-4 py-3">{{ $loop->iteration }}</td>
                                <td class="px-4 py-3">{{ $article->title }}</td>
                                <td class="px-4 py-3">{{ Str::limit($article->description, 100) }}</td>
                                <td class="px-4 py-3">{{ $article->catatan ? Str::limit($article->catatan, 100) : '-' }}
                                </td>
                                <td class="px-4 py-3">
                                    <span
                                        class="px-3 py-1 rounded text-xs font-semibold 
                                        {{ $article->status == 'Tertunda' ? 'bg-yellow-100 text-yellow-700' : ($article->status == 'Disetujui' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700') }}">
                                        {{ $article->status }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    @if ($article->image)
                                        <img src="{{ asset('storage/' . $article->image) }}" alt="Image"
                                            class="w-24 h-24 object-cover rounded mx-auto">
                                    @else
                                        No Image
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center justify-center gap-3">
                                        <a href="{{ route('admin.article-management.edit', $article->id) }}"
                                            class="px-2 py-2 sm:py-3 rounded font-semibold bg-gray-300 text-gray-700 flex justify-center items-center gap-2 cursor-pointer">
                                            <i class="fa-solid fa-pen-clip"></i>
                                            <span class="hidden sm:inline">Review</span>
                                        </a>
                                        <button type="button"
                                            class="swal-delete-artikel px-2 py-2 sm:px-3 rounded bg-red-100 text-red-700 flex justify-center items-center w-10 sm:w-12 h-10 sm:h-12 cursor-pointer"
                                            data-id="{{ $article->id }}"
                                            data-url="{{ route('admin.article-management.delete', $article->id) }}">
                                            <i class="fa-solid fa-trash text-lg"></i>
                                        </button>
                                    </div>
                                </td>
                                
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                {{ $articles->links('pagination::tailwind') }}
            </div>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function handleDelete(buttonClass, entityName) {
                document.querySelectorAll(buttonClass).forEach(button => {
                    button.addEventListener('click', function() {
                        let itemId = this.dataset.id;
                        let deleteUrl = this.dataset.url;
                        Swal.fire({
                            title: 'Apakah Anda yakin?',
                            text: `Data ${entityName} ini akan dihapus secara permanen!`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Ya, hapus!',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                fetch(deleteUrl, {
                                        method: 'DELETE',
                                        headers: {
                                            'X-CSRF-TOKEN': document.querySelector(
                                                'meta[name="csrf-token"]').content,
                                            'Content-Type': 'application/json'
                                        }
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            Swal.fire('Terhapus!', data.message,
                                                    'success')
                                                .then(() => location.reload());
                                        } else {
                                            Swal.fire('Gagal!', data.message, 'error');
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Error:', error);
                                        Swal.fire('Gagal!', 'Terjadi kesalahan server.',
                                            'error');
                                    });
                            }
                        });
                    });
                });
            }
            handleDelete('.swal-delete-artikel', 'Artikel');
        });
    </script>
@endsection