<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Crear Pagina de confirmacion') }}
        </h2>
    </x-slot>

    <form action="{{route('party.update', $party)}}" method="POST" class="mx-auto">
        @csrf
        @method('PUT')
        <div class="max-w-4xl px-4 py-6 sm:px-6 lg:px-8 lg:py-8 mx-auto">
            <div class="bg-white rounded-xl shadow">

                <div class="pt-0 p-4 sm:pt-0 sm:p-7">
                    <!-- Grid -->
                    <div class="space-y-4 sm:space-y-6">
                        <div>
                            <label class="sr-only">
                                Product photo
                            </label>

                            <div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-5">
                                <img class="-mt-8 relative z-10 inline-block size-24 mx-auto sm:mx-0 rounded-full ring-4 ring-white"
                                    src="https://preline.co/assets/img/160x160/img1.jpg" alt="Avatar">

                                <div class="mt-4 sm:mt-auto sm:mb-1.5 flex justify-center sm:justify-start gap-2">
                                    <button type="button"
                                        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                                            <polyline points="17 8 12 3 7 8" />
                                            <line x1="12" x2="12" y1="3" y2="15" />
                                        </svg>
                                        Upload logo
                                    </button>
                                    <button type="button"
                                        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label for="af-submit-app-project-name"
                                class="inline-block text-sm font-medium text-gray-800 mt-2.5">
                                Titulo del Post
                            </label>

                            <input id="af-submit-app-project-name" type="text" x-model="title"
                                class="py-2 px-3 pe-11 block w-full border-gray-200 shadow-sm rounded-lg text-lg font-bold focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
                                value="{{ $party->title }}" name="title">
                        </div>
                        
                        <div class="space-y-2">
                            <textarea type="text" name="content" id="editor" cols="30" rows="10"
                                class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent rounded-xl border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
                                placeholder="Que escirbiremos hoy... " required> {{ $party->content }}
                                </textarea>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="af-submit-app-category"
                            class="inline-block text-sm font-medium text-gray-800 mt-2.5">
                            Archivos
                        </label>

                        <select id="af-submit-app-category" name="path"
                            class="py-2 px-3 pe-9 block w-full border-gray-200 shadow-sm rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
                            <option selected value="{{$party->path}}">{{$party->path}}</option>
                            @foreach ($paths as $path)
                                <option  value="{{ $path->path }}">{{ $path->name }}</option>
                            @endforeach
                            <option  value="Seleccionar archivo">Quitar Archivo</option>
                        </select>
                    </div>

                    <div class="flex justify-center gap-x-2 pt-4">
                        <x-button type="submit">
                            Actualizar Pagina
                        </x-button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    @push('js')
    <script>
        function data(){
            return {
                title: '',
                slug: '',
                string_to_slug(str){
                    str = str.replace(/^\s+|\s+$/g, '');
                    str = str.toLowerCase();
                    var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
                    var to = "aaaaeeeeiiiioooouuuunc------";
                    for (var i = 0, l = from.length; i < l; i++) {
                        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
                    }
                    str = str.replace(/[^a-z0-9 -]/g, '')
                        .replace(/\s+/g, '-')
                        .replace(/-+/g, '-');
                    this.slug = str;
                }
            }
        }

        ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error=>{
            console.error(error);
        });
    </script>
    @endpush
</x-admin-layout>
