<x-Deshboard-layout>

    <!-- Table Section -->
    <div class=" py-10 ">
        <!-- Card -->
        <div class="flex flex-col">
            <div class="-m-1.5 overflow-x-auto">
                <div class="p-1.5 min-w-full inline-block align-middle">
                    <div
                        class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
                        <!-- Header -->
                        <div
                            class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-b border-gray-200 dark:border-gray-700">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                                    Theme Option
                                </h2>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Add Theme Option, edit and more.
                                </p>
                            </div>

                            <div>

                            </div>
                        </div>
                        <!-- End Header -->
                    </div>
                </div>
            </div>
        </div>

        <div class=" grid grid-cols-12">

            <div class=" col-span-2 bg-slate-100 w-full h-screen p-2 pt-4 ">
                <div class="w-full">
                    <button target='general' type="button"
                        class="sidebar py-2.5 w-full px-5 me-2 mb-2 text-left text-sm font-medium text-gray-600 focus:outline-none bg-gray-200 rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><i
                            class="fa-solid fa-house"></i> General</button>
                    <button target='social' type="button"
                        class="sidebar py-2.5 w-full px-5 me-2 mb-2 text-left text-sm font-medium text-gray-600 focus:outline-none bg-gray-200 rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><i
                            class="fa-solid fa-link"></i> Social Link</button>
                    <button target='logo' type="button"
                        class="sidebar py-2.5 w-full px-5 me-2 mb-2 text-left text-sm font-medium text-gray-600 focus:outline-none bg-gray-200 rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><i
                            class="fa-solid fa-image"></i> Logo</button>
                </div>
            </div>
            <div class=" col-span-10 p-3  pt-4 ">

                <div id='general' class="space-y-3  status">
                    <form action="{{ route('theme-option.contact') }}" method="post">
                        @csrf
                        <div class="">
                            <label for="for">Contact Number</label>
                            <input type="text" name="contact" value="{{ $general->contact }}"
                                class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                placeholder="Contact Number" required>
                        </div>
                        <div class="">
                            <label for="for">Email</label>
                            <input type="text" name="email" value="{{ $general->email }}"
                                class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                placeholder="Email" required>
                        </div>
                        <div class="">
                            <label for="for">Location </label>
                            <input type="text" name="location" value="{{ $general->location }}"
                                class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                placeholder="Location" required>
                        </div>
                        <div class="">
                            <label for="for">Description </label>
                            <textarea name="description"
                                class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                rows="3" placeholder="Description" required>{{ $general->description }}</textarea>
                        </div>
                        <div class="mt-2">
                            <button type="button "
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Submit</button>
                        </div>
                    </form>
                </div>
                <div id='social' class="space-y-3 hidden status">
                    <form action="{{ route('theme-option.social') }}" method="post">
                        @csrf
                        @php

                            $data = json_decode($general->social);
                        @endphp

                        <div class=" add-social space-y-10">
                            @foreach ($data as $item)
                                <div class="relative bg-gray-100 p-5">
                                    <span class=' absolute top-0 right-3 itemremove  cursor-pointer'><i
                                            class="fa-solid fa-trash"></i></span>
                                    <label for="for">Name</label>
                                    <input type="text"
                                        class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                        placeholder="Enter Name" name="name[]" value="{{ $item['2'] }}" required>
                                    <label for="for">icone</label>
                                    <input type="text" name="icone[]"
                                        class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                        placeholder="Enter icone" value="{{ $item['0'] }}" required>
                                    <label for="for">Link</label>
                                    <input type="text" name="link[]"
                                        class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                        placeholder="Enter link" value="{{ $item['1'] }}" required>
                                </div>
                            @endforeach
                        </div>


                        <div class="mt-2">
                            <button type="button"
                                class="text-white add-more bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Add
                                More</button>
                            <button type="button "
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Submit
                            </button>
                        </div>

                    </form>


                </div>
                <div id='logo' class="space-y-3 hidden status">
                    <form action="{{ route('theme-option.logo') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="p-5 ">
                            <label for="for">logo</label>
                            <input type="file" name="image"
                                class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600">

                            <img width="40" src="{{ asset('images/' . $general->image) }}" alt="">
                        </div>
                        <div class="mt-2">
                            <button type="button "
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Submit
                            </button>
                        </div>
                    </form>


                </div>

            </div>



        </div>



        <!-- End Card -->
    </div>

    @if ($message = Session::get('success'))
        <x-backend.flash-error :message="$message" :type="'success'" />
    @endif

</x-Deshboard-layout>

<script>
    $(document).on('click', '.sidebar', function() {
        let id = $(this).attr('target');

        $('.status').hide();
        $('#' + id).show();

    })
    $(document).on('click', '.add-more', function() {
        let element = `  <div class=" add-social space-y-10">
                            <div class="relative bg-gray-100 p-5">
                                <span class=' absolute top-0 right-3 itemremove  cursor-pointer'><i
                                            class="fa-solid fa-trash"></i></span>
                                <label for="for">Name</label>
                                <input type="text"
                                    class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                    placeholder="Enter Name" name="name[]" required>
                                <label for="for">icone</label>
                                <input type="text" name="icone[]"
                                    class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                    placeholder="Enter icone" required>
                                <label for="for">Link</label>
                                <input type="text" name="link[]"
                                    class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
                                    placeholder="Enter link" required>
                            </div>
                        </div>`;
        $('.add-social').append(element)

    })
    $(document).on('click', '.itemremove', function() {
        $(this).parents('.relative').remove();
    })

    $(document).on('submit', '#delete', function() {
        let con = confirm('Are you sure to Delete it')
        if (con) {

            return true;

        } else {
            return false;
        }

    })
</script>
