@extends('template.body')

@section('main')
    <section class="w-full h-18 flex justify-end items-center px-10 ">
        <button @click="modal=true;newnote={'Id':null,'Title':'Titles','Text':''}"
            class="bg-[#B4DEBD]  outline-slate-500 outline-2 outline-offset-1 hover:outline-offset-3 w-30 h-14 rounded-2xl hover:bg-[#91C4C3] text-xl font-semibold hover:underline">
            Create New Note
        </button>
    </section>


    @livewire('new-note')



    <div class="w-full h-full bg-[#FFF7DD]/20 fixed top-0 flex flex-col items-center justify-center" x-show="modal">
        <section
            class="w-98 min-h-98 bg-[#91C4C3] outline-4 outline-stone-300 outline-offset-4 flex flex-col justify-center items-center rounded-3xl relative">
            <button @click="modal=false" onclick="finish()">
                <i
                    class="fa fa-solid fa-x text-white bg-red-500 p-2 rounded-xl cursor-pointer outline-2 outline-offset-2 hover:outline-stone-400 outline-transparent active:outline-4 active:bg-red-900 hover:bg-red-600 font-bolder text-2xl absolute top-4 right-4"></i>
            </button>
            <label for="Title"
                class="min-h-[15%] w-[95%] rounded-t-xl bg-[#80A1BA] flex flex-col justify-center items-center ">
                <input id="Title" x-model="newnote.Title" name="Title" type="text" class="min-w-[70%] h-[70%]">
            </label>
            <textarea class="min-h-[80%] w-[95%] rounded-b-xl  bg-[#FFF7DD] p-1" id="Text" name="Text"
                x-model="newnote.Text"></textarea>

            <input type="hidden" name="Id" x-model="newnote.id" id="Id">
        </section>

    </div>
    @livewireScripts
    <script>
        function finish() {
            var id = document.getElementById('Id').value;
            var title = document.getElementById('Title').value;
            var text = document.getElementById('Text').value;

            var formData = new FormData();
            formData.append('Id', id);
            formData.append('Title', title);
            formData.append('Text', text);

            fetch("/update", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: formData
                })
                .then(res => {
                    if (!res.ok) throw new Error('Network response was not ok');
                    return res.json();
                })
                .then(data => {
                    console.log("Success:", data);
                })
                .catch(err => {
                    console.error("Error:", err);
                });
        }
    </script>
@endsection