@extends('admin.layouts.layout')
@section('title', 'Content Management')
@section('content')


    <div class="py-4 px-2 mx-auto">
        <div class="flex justify-between align-center">

            <h1 class="text-[#34495E] text-2xl font-semibold Poppins mb-6">Blogs</h1>
            <button command="show-modal" commandfor="addCategory"
                class="bg-[#133754] mb-2 px-4 py-2 rounded-md text-white cursor-pointer transition-colors inline-flex items-center justify-center">
                Add Category
            </button>
        </div>

        <div class="bg-white rounded-lg  overflow-hidden">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-[#F8F9FB]">
                        <th class="px-4 py-3.5 text-[#34495E] font-semibold Poppins text-sm">Category Name</th>
                        <th class="px-6 py-3.5 text-[#34495E] font-semibold Poppins text-sm text-right">Action</th>

                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-100">
                    @foreach ($categories as $category)
                        <tr class="hover:bg-gray-50 transition-colors">
                            
                            <td class="px-4 py-2.5 text-[#636363] Poppins font-semibold text-[17px]">
                                {{ $category->category_name }}</td>

                        


                          
                            
                            
                            
                   <td class="px-8 py-2.5 text-right">
    <div class="flex justify-end gap-2">

        <button 
            command="show-modal" 
            commandfor="editContent{{ $category->id }}"
            class="w-10 h-10 bg-[#F4C701] rounded-md hover:bg-[#e5ba01] 
                   flex items-center justify-center transition-colors">
            
            <svg xmlns="http://www.w3.org/2000/svg" 
                 class="h-5 w-5 text-[#34495E]" 
                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
            </svg>
        </button>

        <button 
            type="button" 
            command="show-modal" 
            commandfor="delete{{ $category->id }}" 
            class="w-10 h-10 bg-[#B20000] rounded-md 
                   flex items-center justify-center cursor-pointer">
            
            <i class="fa-regular fa-trash-can text-white text-sm"></i>
        </button>

    </div>
</td>
                        </tr>
                    @endforeach


                </tbody>
            </table>
        </div>
        @foreach ($categories as $category)
            <el-dialog>
                <dialog id="editContent{{ $category->id }}" aria-labelledby="dialog-title"
                    class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                    <el-dialog-backdrop
                        class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                    <div tabindex="0"
                        class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                        <el-dialog-panel
                            class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[791px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                            <div class="form bg-[#FFFFFF] ">
                                <div class="py-8">


                                    <div class="bg-[#1CD8C4] w-full h-[74px] flex justify-center items-center">

                                        <h1
                                            class="text-[#34495E] Poppins  text-center fo-m sm:text-[24px] text-[20px] Poppins font-semibold">
                                            Edit Blog Category</h1>
                                    </div>
                                </div>
                                <div class="px-4 py-4">
                                    <form class="page-form" action="{{ route('admin.blogs.category.update', $category->id) }}"
                                        method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="relative mb-6 mt-6">
                                            <input type="text" id="category_name" value="{{ $category->category_name }}"
                                                name="category_name" placeholder=""
                                                class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none" />

                                            <label for="category_name"
                                                class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm  Poppins text-[#49454F]
                    peer-placeholder-shown:top-1/2
                    peer-placeholder-shown:-translate-y-1/2
                    peer-placeholder-shown:text-gray-400
                    peer-focus:top-0">
                                               Category name
                                            </label>
                                        </div>
                                       


                                        <div class="mt-3 gap-2 flex w-full">
                                            <button command="close" commandfor="editContent{{ $category->id }}"
                                                class="bg-[#6C8294] cursor-pointer px-3   rounded-[5px] w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                                Close
                                            </button>
                                            <button type="submit"
                                                class="bg-[#133754] cursor-pointer px-3  rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                                Save
                                            </button>
                                        </div>
                                    </form>
                                </div>


                            </div>

                        </el-dialog-panel>
                    </div>
                </dialog>
            </el-dialog>
            
               @include('components.deleteModal',[
                'route'=>route('admin.blogs.category.delete',$category->id),
                'id'=>$category->id
            ])
        
        @endforeach
            


            <el-dialog>
                <dialog id="addCategory" aria-labelledby="dialog-title"
                    class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                    <el-dialog-backdrop
                        class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                    <div tabindex="0"
                        class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                        <el-dialog-panel
                            class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[791px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                            <div class="form bg-[#FFFFFF] ">
                                <div class="py-8">


                                    <div class="bg-[#1CD8C4] w-full h-[74px] flex justify-center items-center">

                                        <h1
                                            class="text-[#34495E] Poppins  text-center fo-m sm:text-[24px] text-[20px] Poppins font-semibold">
                                            Add Blog Category</h1>
                                    </div>
                                </div>
                                <div class="px-4 py-4">
                                    <form class="page-form" action="{{ route('admin.blogs.category.store')}}"
                                        method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="relative mb-6 mt-6">
                                            <input type="text" id="category_name" value="{{ old('category_name') }}"
                                                name="category_name" placeholder=""
                                                class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none" />

                                            <label for="category_name"
                                                class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm  Poppins text-[#49454F]
                                                peer-placeholder-shown:top-1/2
                                                peer-placeholder-shown:-translate-y-1/2
                                                peer-placeholder-shown:text-gray-400
                                                peer-focus:top-0">
                                               Category name
                                            </label>
                                        </div>

                                        @error('category_name')
                                            <span class="text-red-600">{{ $message }}</span>
                                        @enderror
                                       


                                        <div class="mt-3 gap-2 flex w-full">
                                            <button command="close" commandfor="addCategory"
                                                class="bg-[#6C8294] cursor-pointer px-3   rounded-[5px] w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                                Close
                                            </button>
                                            <button type="submit"
                                                class="bg-[#133754] cursor-pointer px-3  rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                                Save
                                            </button>
                                        </div>
                                    </form>
                                </div>


                            </div>

                        </el-dialog-panel>
                    </div>
                </dialog>
            </el-dialog>
    </div>


    @push('script')
    <script src="{{ asset('uploader.js') }}"></script>
        
        <script>
            document.querySelectorAll('.page-form').forEach((form, index) => {
                form.addEventListener('submit', function(e) {
                    const hiddenInput = form.querySelector('.hiddenDescription');

                    // Get corresponding quill instance
                    const quill = quillEditors[index];

                    // Set HTML content
                    hiddenInput.value = quill.root.innerHTML;
                });
            });


               document.getElementById('profile-upload').addEventListener('change', function(e) {
                const file = e.target.files[0];

                if (!file) return;

                // ✅ check image type
                if (!file.type.startsWith('image/')) {
                    alert('Only image files are allowed!');
                    e.target.value = ''; // reset input
                    return;
                }

                const reader = new FileReader();

                reader.onload = function(event) {
                    document.getElementById('profilePreview').src = event.target.result;
                };

                reader.readAsDataURL(file);
            });
        </script>
    @endpush

@endsection
