@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>
            
            <div>
                
             <button onclick="window.location.href='{{ route('admin.blogs.category') }}'"
                class="bg-[#133754] mb-2 px-4 py-2 rounded-md text-white cursor-pointer transition-colors inline-flex items-center justify-center">
                Category Management
            </button>
            <button command="show-modal" commandfor="addBlog"
                class="bg-[#133754] mb-2 px-4 py-2 rounded-md text-white cursor-pointer transition-colors inline-flex items-center justify-center">
                Add Blog
            </button>
            </div>
        </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">Blog Title</th>
                        <th class="px-4 py-3.5 text-[#34495E] font-semibold Poppins text-sm">Blog Category</th>

                        <th class="px-6 py-3.5 text-[#34495E] font-semibold Poppins text-sm">Status</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 ($blogs as $blog)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-2.5 text-[#636363] Poppins font-semibold text-[17px]">{{ $blog->blog_title }}
                            </td>
                            <td class="px-4 py-2.5 text-[#636363] Poppins font-semibold text-[17px]">
                                {{ $blog->category->category_name }}</td>

                            <!--@if ($blog->status == 1)-->
                            <!--    <td class="px-4 py-2.5 text-green-600 Poppins font-semibold text-[17px]">-->
                            <!--        Published-->
                            <!--    </td>-->
                            <!--@else-->
                            <!--    <td class="px-4 py-2.5 text-red-600 Poppins font-semibold text-[17px]">-->

                            <!--        Private-->
                            <!--    </td>-->
                            <!--@endif-->
                            <td class="px-4 py-2.5 Poppins font-semibold text-[17px]">
                                    <select name="" class="blogStatus" data-id="{{$blog->id}}">
                                        <option {{ ($blog->status==1)?"selected":"" }} value="1">Published</option>
                                        <option {{ ($blog->status==0)?"selected":"" }} value="0">Private</option>
                                        
                                    </select>
                                </td>

                   <td class="px-8 py-2.5 text-end">
    <div class="flex justify-end items-center gap-2">
        <button
            command="show-modal"
            commandfor="editContent{{ $blog->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{{ $blog->id }}"
            class="w-10 h-10 bg-[#B20000] rounded-md
                   flex items-center justify-center">

            <i class="fa-regular fa-trash-can text-white text-sm"></i>
        </button>
    </div>
</td>
                        </tr>
                    @endforeach


                </tbody>
            </table>
        </div>
        @foreach ($blogs as $blog)
            <el-dialog>
                <dialog id="editContent{{ $blog->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</h1>
                                    </div>
                                </div>
                                <div class="px-4 py-4">
                                    <form class="page-form" action="{{ route('admin.blogs.update', $blog->id) }}"
                                        method="post" enctype="multipart/form-data">
                                        @csrf

                                        <div class="relative mb-6 mt-6">
                                            <label for="">Select Category</label>
                                            <select name="category_id"
                                                class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none">
                                                <option value="">Select Category</option>
                                                @foreach ($categories as $category)
                                                    <option {{ $blog->category_id == $category->id ? 'selected' : '' }}
                                                        value="{{ $category->id }}">{{ $category->category_name }}</option>
                                                @endforeach
                                            </select>

                                        </div>

                                        <div class="relative mb-6 mt-6">
                                            <input type="text" id="blog_title" value="{{ $blog->blog_title }}"
                                                name="blog_title" 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="blog_title"
                                                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">
                                                First Name
                                            </label>
                                        </div>
                                        <div class="relative mb-6 group">

                                            <label
                                                class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-[15px] 
                                             Poppins text-[#49454F] pointer-events-none">
                                                Content
                                            </label>

                                            <div contenteditable="true" id="editor{{ $blog->id }}"
                                                class="editor w-full min-h-[70px] rounded-sm border border-[#DBDBDB]
                                        text-lg text-[#1D1B20] Poppins focus:outline-none">
                                                {!! $blog->blog_description !!}
                                            </div>
                                            <input type="hidden" class="hiddenDescription" name="blog_description"
                                                value="{{ $blog->blog_description }}"
                                                id="hiddenDescription{{ $blog->id }}">

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

                                        </div>

                                        <div class="relative mb-6 mt-6">
                                            <label for="">Blog status</label>
                                            <select name="status"
                                                class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none">
                                                <option value="">Select Status</option>
                                                <option {{ $blog->status == 1 ? 'selected' : '' }} value="1">Publish
                                                </option>
                                                <option value="0" {{ $blog->status == 0 ? 'selected' : '' }}>Private
                                                </option>

                                            </select>

                                        </div>
                                        <div class="mb-6">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                                Upload Image
                                            </label>

                                              <div id="drop-zone" class="mt-3"> <x-single-uploader name="blog_image"
                                                    :multiple="false" accept="image/*" :file="$blog->image"
                                                    deleteInputName="" />
                                            </div>
                                        </div>


                                        <div class="mt-3 gap-2 flex w-full">
                                            <button command="close" commandfor="editContent{{ $blog->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.delete',$blog->id),
                'id'=>$blog->id
            ])
        @endforeach


        <el-dialog>
            <dialog id="addBlog" 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</h1>
                                </div>
                            </div>
                            <div class="px-4 py-4">
                                <form class="page-form" action="{{ route('admin.blogs.store') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf

                                    <div class="relative mb-6 mt-6">
                                        <label for="">Select Category</label>
                                        <select name="category_id"
                                            class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none">
                                            <option value="">Select Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->category_name }}
                                                </option>
                                            @endforeach
                                        </select>

                                    </div>

                                    <div class="relative mb-6 mt-6">
                                        <input type="text" id="blog_title" value="{{ old('blog_title') }}"
                                            name="blog_title" 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="blog_title"
                                            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">
                                            Blog Title
                                        </label>
                                    </div>
                                    <div class="relative mb-6 group">

                                        <label
                                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-[15px] 
                                             Poppins text-[#49454F] pointer-events-none">
                                            Content
                                        </label>

                                        <div contenteditable="true" id="add"
                                            class="editor w-full min-h-[70px] rounded-sm border border-[#DBDBDB]
                                        text-lg text-[#1D1B20] Poppins focus:outline-none">

                                        </div>
                                        <input type="hidden" class="hiddenDescription" name="blog_description"
                                            id="hiddenDescription">

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

                                    </div>

                                    <div class="relative mb-6 group">

                                        <div class="mb-6">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                                Upload Image
                                            </label>

                                            {{-- <div
                                                class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition">

                                                <input type="file" name="blog_image"
                                                    accept="image/png,image/jpeg,image/jpg"
                                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                                    required>

                                                <div class="flex flex-col items-center justify-center space-y-2">
                                                    <svg class="w-10 h-10 text-gray-400" fill="none"
                                                        stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                            stroke-width="2"
                                                            d="M7 16V12m0 0V8m0 4h10m-5 4v4m0-4v-4m0 4h-4m4 0h4" />
                                                    </svg>

                                                    <p class="text-sm text-gray-600">
                                                        Click to upload or drag & drop
                                                    </p>

                                                    <p class="text-xs text-gray-400">
                                                        PNG, JPG, JPEG (max 2MB)
                                                    </p>
                                                </div>

                                            </div>
                                             --}}

                                            <div id="drop-zone" class="mt-3"> <x-single-uploader name="blog_image"
                                                    :multiple="false" accept="image/*" :existingFiles="[]"
                                                    deleteInputName="" />
                                            </div>
                                        </div>
                                    </div>



                                    <div class="mt-3 gap-2 flex w-full">
                                        <button command="close" commandfor="addBlog"
                                            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).ready(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('.blogStatus').on('change', function () {
    
        let blogStatus = $(this).val();
        let blogId = $(this).data('id');
        
        if (!blogId) {
            toastr.error("Blog ID missing");
            return;
        }

        $.ajax({
            url: '{{ route('admin.blogs.update.status') }}',
            type: 'POST',
            data: {
                status: blogStatus,
                blog_id: blogId
            },
            success: function (data) {
                if (data.status == true) {
                    toastr.success(data.message);
                } else {
                    toastr.error(data.message);
                }
            },
            error: function (xhr) {
                toastr.error("Something went wrong");
            }
        });

    });

});
            
        </script>
    @endpush

@endsection
