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


    <div class="py-4 px-2 mx-auto">
        <h1 class="text-[#34495E] text-2xl font-semibold Poppins mb-6">All Pages</h1>

        <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">Page 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 ($pages as $page)
                        
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-2.5 text-[#636363] Poppins font-semibold text-[17px]">{{$page->page_name}} Page</td>
                        <td class="px-8 py-2.5 text-right">
                            <button command="show-modal" commandfor="editContent{{$page->id}}"
                                class="bg-[#F4C701] p-3 rounded-md hover:bg-[#e5ba01] cursor-pointer transition-colors inline-flex items-center justify-center">
                                <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>
                        </td>
                    </tr>
                    @endforeach
                    

                </tbody>
            </table>
        </div>
        @foreach ($pages as $page)
            
        <el-dialog>
            <dialog id="editContent{{$page->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 Page</h1>
                                </div>
                            </div>
                            <div class="px-4 py-4">
                                <form class="page-form"  action="{{route('admin.page-content.save',$page->id)}}" method="post"     >
                                    @csrf
                                <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{{$page->id}}"
                                        class="editor w-full min-h-[70px] rounded-sm border border-[#DBDBDB]
                                        text-lg text-[#1D1B20] Poppins focus:outline-none">
                                        {!! $page->content->description !!}
                                    </div>

                                    @error('description')
                                        <span class="text-red-600">{{$message}}</span>
                                    @enderror
                                      <input type="hidden" class="hiddenDescription" name="description" value="{{$page->content->description}}" id="hiddenDescription{{$page->id}}">
                                </div>


                             
                                <div class="mt-3 gap-2 flex w-full">
                                    <button command="close" commandfor="editContent{{$page->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>
        @endforeach

    </div>


    @push('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;
        });
    });
</script>
    @endpush

@endsection
