@extends('layouts.dashboard-layout')

@section('title', 'Tambah Artikel')

@section('content')
    <main class="flex flex-col space-y-6 w-full px-4 sm:px-6 md:px-0" x-data="{
        editMode: false,
        articleId: '',
        title: '',
        description: '',
        image: '',
        status: 'Tertunda',
        cardId: '',
        tags: []
    }" x-init="$watch('tags', value => {
        if (editMode && value.length > 0) {
            setTimeout(() => {
                document.querySelectorAll('input[name=\'tags[]\']').forEach(checkbox => {
                    checkbox.checked = value.includes(parseInt(checkbox.value));
                });
                selectedTags = [...value];
            }, 100);
        }
    })">
        @if (session('status'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    let status = "{{ session('status') }}";
                    let message = "{{ session('message') }}";

                    switch (status) {
                        case 'success':
                            toastr.success(message, "Success");
                            break;
                        case 'error':
                            toastr.error(message, "Error");
                            break;
                        default:
                            toastr.info(message, "Notification");
                    }
                });
            </script>
        @endif

        <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">
                    <a href="{{ route('add-article') }}" wire:navigate
                        class="text-gray-500 hover:text-gray-700 inline-flex items-center ease-in-out duration-300 hover:underline">
                        Grup Artikel
                    </a>
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" 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>
                </li>
                <li aria-current="page" class="text-gray-500 font-normal">
                    Artikel
                </li>
            </ol>
        </nav>

        <div class="flex flex-col p-4 sm:p-6 bg-white shadow sm:rounded-lg ring-2 ring-gray-700 border-b-gray-200">
            <h2 class="text-lg sm:text-xl font-bold mb-2 text-orangeCrayola">
                <span x-text="editMode ? 'Edit Artikel' : 'Tambah Artikel'"></span>
            </h2>
            <form method="POST"
                :action="editMode ? '{{ url('add-article-detail') }}/' + articleId : '{{ route('user-article-detail.store') }}'"
                class="space-y-6 max-full" enctype="multipart/form-data">
                @csrf
                <template x-if="editMode">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <div class="flex flex-col space-y-1">
                    <x-input-label for="card_id" :value="__('Pilih Artikel Grup')" required />
                    <select id="card_id" name="card_id" x-model="cardId"
                        class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] focus:shadow-[2px_2px_0px_2px_#374151] focus:translate-y-0.5 focus:translate-x-0.5 rounded-md focus:outline-none focus:border-none focus:ring-2 focus:ring-gray-700 text-gray-700 leading-5 transition duration-150 ease-in-out block mt-1 w-full py-2.5">
                        <option value="">-- Pilih Artikel Grup --</option>
                        @foreach ($cardArticles as $card)
                            <option value="{{ $card->id }}" @selected(old('card_id') == $card->id)>{{ $card->title }}</option>
                        @endforeach
                    </select>
                    <x-input-error :messages="$errors->get('card_id')" class="mt-1" />
                </div>

                <div class="flex flex-col space-y-1">
                    <x-input-label for="title" :value="__('Judul Artikel')" required />
                    <x-text-input id="title" name="title" type="text" class="block mt-1 w-full py-2.5"
                        x-model="title" />
                    <x-input-error :messages="$errors->get('title')" class="mt-1" />
                </div>

                <div class="flex flex-col space-y-1">
                    <x-input-label for="description" :value="__('Deskripsi Artikel')" required />
                    <textarea id="description" name="description"
                        class="block mt-1 w-full h-[100px] resize-none py-2.5 ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151]
                        focus:shadow-[2px_2px_0px_2px_#374151] focus:translate-y-0.5 focus:translate-x-0.5
                        rounded-md focus:outline-none focus:border-none focus:ring-2 focus:ring-gray-700
                        text-gray-700 leading-5 transition duration-150 ease-in-out"
                        x-model="description">
                    </textarea>
                    <x-input-error :messages="$errors->get('description')" class="mt-1" />
                </div>

                <div class="flex flex-col space-y-1">
                    <x-input-label for="image" :value="__('Gambar Artikel')" required />
                    <div x-data="{ imagePreview: null }" class="relative w-full">
                        <label for="image"
                            class="cursor-pointer flex flex-col items-center justify-center border-2 border-gray-700 shadow-[4px_4px_0px_2px_#374151] rounded-md p-6 hover:bg-gray-100 transition duration-150 ease-in-out">
                            <div x-show="!imagePreview" class="flex flex-col items-center space-y-2">
                                <i class="fa-solid fa-image text-4xl"></i>
                                <span class="text-gray-700 font-medium">Klik Gambar di Sini</span>
                            </div>
                            <div x-show="imagePreview" class="relative w-full flex justify-center">
                                <img :src="imagePreview" class="w-[250px] h-[200px] rounded-md shadow-md object-cover" />
                                <button type="button"
                                    class="absolute top-0 right-0 bg-gray-800 text-white rounded-full p-1 -mt-2 -mr-2 shadow-md hover:bg-red-600 transition w-8 h-8"
                                    @click="imagePreview = null; document.getElementById('image').value = ''">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                            <div x-show="!imagePreview && image">
                                <img :src="image" alt="Image"
                                    class="w-[250px] h-[200px] rounded-md shadow-md object-cover" />
                            </div>
                        </label>
                        <input type="file" id="image" name="image" accept="image/*" class="hidden"
                            @change="const file = $event.target.files[0]; if(file) { const reader = new FileReader(); reader.onload = (e) => imagePreview = e.target.result; reader.readAsDataURL(file); }" />
                    </div>
                    <x-input-error :messages="$errors->get('image')" class="mt-1" />
                </div>

                <input type="hidden" name="status" value="Tertunda">

                <div class="flex flex-col space-y-1">
                    <x-input-label for="tags" :value="__('Pilih 3 Tag Artikel')" required />
                    <div class="relative">
                        <button type="button"
                            class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] focus:shadow-[2px_2px_0px_2px#374151] focus:translate-y-0.5 focus:translate-x-0.5 rounded-md focus:outline-none focus:border-none focus:ring-2 focus:ring-gray-700 text-gray-700 leading-5 transition duration-150 ease-in-out block mt-1 w-full py-2.5"
                            onclick="toggleTagDropdown()">
                            Pilih 3 Tag Artikel
                            <i class="fa fa-chevron-down ml-2"></i>
                        </button>
                
                        <div id="tags-dropdown" style="display: none;"
                            class="absolute w-full mt-1 bg-white border-2 border-gray-300 rounded-md shadow-lg z-10">
                            @foreach ($tags as $tag)
                                <label class="block px-4 py-2 text-gray-700 hover:bg-gray-100 cursor-pointer">
                                    <input type="checkbox" name="tags[]" value="{{ $tag->id }}" 
                                        onchange="updateSelectedTags(this)" 
                                        class="mr-2">
                                    {{ $tag->name }}
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <x-input-error :messages="$errors->get('tags')" class="mt-1" />
                </div>

                <div class="flex justify-start">
                    <x-primary-button type="submit"
                        class="bg-orangeCrayola ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white py-2.5 px-4 rounded"
                        x-text="editMode ? 'Update Artikel' : 'Tambah Artikel'">
                    </x-primary-button>
                    <x-primary-button type="button" x-show="editMode"
                        @click="editMode = false; articleId = ''; title = ''; description = ''; status = 'Tertunda'; cardId = ''; tags = [];"
                        class="ml-5 bg-gray-500 ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 py-2.5 px-4 rounded">
                        Batal
                    </x-primary-button>
                </div>
            </form>
        </div>

        <div class="flex space-x-6 items-center justify-between">
            <div>
                <a href="{{ route('add-article-sub') }}" wire:navigate
                    class="inline-flex justify-center items-center text-center font-medium text-base tracking-widest focus:outline-none focus-visible:outline-none transition ease-in-out duration-150 bg-pewterBlue ring-2
                    ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151]
                    hover:translate-y-0.5 hover:translate-x-0.5 py-2.5 px-4 rounded">Tambah
                    Sub Artikel</a>
            </div>
            <div class="flex space-x-6 items-center">

                <div
                    class="flex flex-col justify-center items-center space-y-1 bg-orange-200 py-2 px-4 rounded-md ring-2 ring-orange-400">
                    <h3 class="font-medium text-normal text-orange-700">Total Artikel</h3>
                    <span class="font-semibold text-xl text-orange-700">{{ $totalArticles }}</span>
                </div>

                <div
                    class="flex flex-col justify-center items-center space-y-1 bg-blue-200 py-2 px-4 rounded-md ring-2 ring-blue-400">
                    <h3 class="font-medium text-normal text-blue-700">Artikel Hari Ini</h3>
                    <span class="font-semibold text-xl text-blue-700">{{ $todayArticles }}</span>
                </div>
            </div>
        </div>

        <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>
            <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">Grup Artikel</th>
                            <th class="px-4 py-3">Judul Artikel</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->cardArticle->title ?? '-' }}</td>
                                <td class="px-4 py-3">{{ $article->title }}</td>
                                <td class="px-4 py-3">-</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 gap-3 justify-center items-center">
                                        <button type="button"
                                            class="px-3 py-3 rounded text-xs font-semibold bg-blue-100 text-blue-700 flex justify-center items-center w-12 h-12 cursor-pointer"
                                            @click="editMode = true;
                                            articleId = '{{ $article->id }}';
                                            title = '{{ $article->title }}';
                                            description = '{{ $article->description }}';
                                            status = '{{ $article->status }}';
                                            cardId = '{{ $article->card_id }}';
                                            tags = {{ json_encode($article->tags->pluck('id')->toArray()) }};
                                            image = '{{ asset('storage/' . $article->image) }}';
                                        ">
                                            <i class="fa-solid fa-pen-to-square text-lg"></i>
                                        </button>

                                        <button type="button"
                                            class="swal-delete-article px-3 py-3 rounded bg-red-100 text-red-700 flex justify-center items-center w-12 h-12 cursor-pointer"
                                            data-id="{{ $article->id }}"
                                            data-url="{{ route('user-article-detail.destroy', $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: 'POST',
                                        headers: {
                                            'X-CSRF-TOKEN': document.querySelector(
                                                'meta[name="csrf-token"]').content,
                                            'Content-Type': 'application/json'
                                        },
                                        body: JSON.stringify({
                                            _method: 'DELETE'
                                        })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        console.log(
                                            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-article', 'Artikel');
        });
    </script>

    <script>
        let selectedTags = [];
        
        function toggleTagDropdown() {
            const dropdown = document.getElementById('tags-dropdown');
            dropdown.style.display = (dropdown.style.display === 'none' || dropdown.style.display === '') ? 'block' :
            'none';
        }

        function updateSelectedTags(checkbox) {
            const tagId = parseInt(checkbox.value);

            if (checkbox.checked) {
                if (selectedTags.length < 3) {
                    selectedTags.push(tagId);
                } else {
                    alert("Anda hanya dapat memilih maksimal 3 tag.");
                    checkbox.checked = false;
                }
            } else {
                selectedTags = selectedTags.filter(id => id !== tagId);
            }

            const checkboxes = document.querySelectorAll('input[name="tags[]"]');
            checkboxes.forEach(function(cb) {
                if (selectedTags.length >= 3 && !cb.checked) {
                    cb.disabled = true;
                } else {
                    cb.disabled = false;
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('button[type="button"]').forEach(button => {
                if(button.innerHTML.includes('fa-pen-to-square')) {
                    button.addEventListener('click', function() {
                        setTimeout(() => {
                            const dropdown = document.getElementById('tags-dropdown');
                            if(dropdown.style.display === 'none' || dropdown.style.display === '') {
                                dropdown.style.display = 'block';
                            }
                            
                            const tagComponent = document.querySelector('[x-data]');
                            if(tagComponent && tagComponent.__x) {
                                const tagData = tagComponent.__x.getUnobservedData();
                                if(tagData.tags && tagData.tags.length > 0) {
                                    selectedTags = [...tagData.tags];
                                    
                                    document.querySelectorAll('input[name="tags[]"]').forEach(checkbox => {
                                        checkbox.checked = selectedTags.includes(parseInt(checkbox.value));
                                        
                                        if (selectedTags.length >= 3 && !checkbox.checked) {
                                            checkbox.disabled = true;
                                        } else {
                                            checkbox.disabled = false;
                                        }
                                    });
                                }
                            }
                        }, 200);
                    });
                }
            });
        });
    </script>

@endsection