@extends('layouts.app')

@section('content')
<div>
    <!-- Page Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">Home Page</h3>
    </div>

    <!-- Form -->
    <div class=" shadow-md rounded p-5 space-y-4">
        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Hero Section</h3>
            </div>

            @php
            $heroInfo = $results->where('section', 'hero')->first();
            $heroContent = (!empty($heroInfo->content) ? json_decode($heroInfo->content) : '');
            $heroTitle = (!empty($heroContent->title) ? $heroContent->title : '');
            $heroSubtitle = (!empty($heroContent->subtitle) ? $heroContent->subtitle : '');
            $heroButtonText = (!empty($heroContent->button_text) ? $heroContent->button_text : '');
            $heroButtonLink = (!empty($heroContent->button_link) ? $heroContent->button_link : '');
            $heroImage = (!empty($heroContent->image) ? $heroContent->image : '');
            @endphp

            <form action="{{route('admin.home-page.updateHero')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">
                                Title
                                <button data-popover-target="popover-slider-title" data-popover-placement="bottom-start"
                                    type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-slider-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                    </ol>
                                </div>
                            </label>

                            <input type="text" name="hero[title]" value="{{$heroTitle}}" id="title" placeholder="Title"
                                class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <textarea class="inputField" name="hero[subtitle]">{{$heroSubtitle}}</textarea>
                        </div>

                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="grid gap-1.5">
                                <label for="subtitle" class="inputLabel">Button Text</label>
                                <input type="text" name="hero[button_text]" value="{{$heroButtonText}}"
                                    class="inputField">
                            </div>

                            <div class="grid gap-1.5">
                                <label for="subtitle" class="inputLabel">Button Link</label>
                                <input type="text" name="hero[button_link]" value="{{$heroButtonLink}}"
                                    placeholder="https://domain.com" class="inputField">
                            </div>
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                        <div id="displayHeroImage"
                            class="relative border bg-center bg-contain bg-no-repeat bg-white aspect-[295/244] rounded w-full">
                        </div>
                        <label for="heroImage" class="button button--secondary w-full mt-3">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                                aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                            </svg>
                            Upload Image
                        </label>
                        <input type="file" name="heroImage" id="heroImage" class="hidden" />
                    </div>
                </div>
            </form>
        </div>

        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Statistics Section</h3>
            </div>

            @php
            $statisticsInfo = $results->where('section', 'statistics')->first();
            $statisticsContent = (!empty($statisticsInfo->content) ? json_decode($statisticsInfo->content) : '');
            $statisticsTitle = (!empty($statisticsContent->title) ? $statisticsContent->title : '');
            $statisticsTags = (!empty($statisticsContent->tagline) ? $statisticsContent->tagline : '');
            $statisticsSubtitle = (!empty($statisticsContent->subtitle) ? $statisticsContent->subtitle : '');
            $statisticsFoundedSince = (!empty($statisticsContent->founded_since) ? $statisticsContent->founded_since :
            '');
            $statisticsActivePost = (!empty($statisticsContent->active_post) ? $statisticsContent->active_post : '');
            $statisticsImage = (!empty($statisticsContent->image) ? $statisticsContent->image : '');
            @endphp

            <form action="{{route('admin.home-page.updateStatistics')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">Title
                                <button data-popover-target="popover-statistics-title"
                                    data-popover-placement="bottom-start" type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-statistics-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                        <li>
                                            To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt Text
                                            <code>&lt;/span&gt;</code> tags.
                                        </li>
                                    </ol>
                                </div>
                            </label>

                            <input type="text" name="statistics[title]" value="{{$statisticsTitle}}" id="title"
                                placeholder="Title" class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <input type="text" name="statistics[subtitle]" value="{{$statisticsSubtitle}}" id="subtitle"
                                placeholder="Subtitle" class="inputField" required />
                        </div>

                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="grid gap-1.5">
                                <label for="subtitle" class="inputLabel">Founded since</label>
                                <input type="text" name="statistics[founded_since]" value="{{$statisticsFoundedSince}}"
                                    class="inputField">
                            </div>

                            <div class="grid gap-1.5">
                                <label for="subtitle" class="inputLabel">Active post and running</label>
                                <input type="text" name="statistics[active_post]" value="{{$statisticsActivePost}}"
                                    class="inputField">
                            </div>
                        </div>

                        <div class="grid gap-1.5">
                            <label for="tagline" class="inputLabel">Tagline</label>

                            <div id="valueList" class="space-y-2">
                                @if (!empty($statisticsTags))
                                @foreach ($statisticsTags as $value)
                                    <div class="flex gap-2.5 group">
                                        <input id="valueTitle" type="text" name="statistics[tagline][]" value="{{$value}}" placeholder="Title"
                                            class="inputField" />

                                        <div onclick="this.parentElement.remove()"
                                            class="group-first:pointer-events-none group-first:opacity-70 w-11 shrink-0 text-2xl rounded flex items-center justify-center bg-red-600 hover:bg-red-700 cursor-pointer text-white">
                                            {!! config('icons.close') !!}
                                        </div>
                                    </div>
                                @endforeach
                                @endif
                            </div>

                            <div>
                                <button type="button" onclick="addValue()" class="button button--success text-sm gap-1">
                                    {!! config('icons.plusCircle') !!}
                                    Add New
                                </button>
                            </div>
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                        <div id="displayStatisticsImage"
                            class="relative border bg-center bg-contain bg-no-repeat bg-white aspect-[295/244] rounded w-full">
                        </div>
                        <label for="statisticsImage" class="button button--secondary w-full mt-3">
                            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
                                aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                            </svg>
                            Upload Image
                        </label>
                        <input type="file" name="statisticsImage" id="statisticsImage" class="hidden" />
                    </div>
                </div>
            </form>
        </div>

        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Choose Us Section</h3>
            </div>

            @php
            $chooseUsInfo = $results->where('section', 'chooseUs')->first();
            $chooseUsContent = (!empty($chooseUsInfo->content) ? json_decode($chooseUsInfo->content) : '');
            $chooseUsTitle = (!empty($chooseUsContent->title) ? $chooseUsContent->title : '');
            $chooseUsSubtitle = (!empty($chooseUsContent->subtitle) ? $chooseUsContent->subtitle : '');
            @endphp

            <form action="{{route('admin.home-page.updateChooseUs')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">
                                Title
                                <button data-popover-target="popover-why-choose-us-title"
                                    data-popover-placement="bottom-start" type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-why-choose-us-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                        <li>
                                            To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt Text
                                            <code>&lt;/span&gt;</code> tags.
                                        </li>
                                    </ol>
                                </div>
                            </label>
                            <input type="text" name="chooseUs[title]" value="{{$chooseUsTitle}}" id="title"
                                placeholder="Title" class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <textarea class="inputField" name="chooseUs[subtitle]">{{$chooseUsSubtitle}}</textarea>
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                    </div>
                </div>
            </form>
        </div>

        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Testimonials Section</h3>
            </div>

            @php
            $testimonialInfo = $results->where('section', 'testimonial')->first();
            $testimonialContent = (!empty($testimonialInfo->content) ? json_decode($testimonialInfo->content) : '');
            $testimonialTitle = (!empty($testimonialContent->title) ? $testimonialContent->title : '');
            $testimonialSubtitle = (!empty($testimonialContent->subtitle) ? $testimonialContent->subtitle : '');
            @endphp

            <form action="{{route('admin.home-page.updateTestimonial')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">
                                Title
                                <button data-popover-target="popover-testimonial-title"
                                    data-popover-placement="bottom-start" type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-testimonial-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                        <li>
                                            To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt Text
                                            <code>&lt;/span&gt;</code> tags.
                                        </li>
                                    </ol>
                                </div>
                            </label>
                            <input type="text" name="testimonial[title]" value="{{$testimonialTitle}}" id="title"
                                placeholder="Title" class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <input class="inputField" placeholder="Subtitle" name="testimonial[subtitle]"
                                value="{{$testimonialSubtitle}}" />
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                    </div>
                </div>
            </form>
        </div>

        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Team Section</h3>
            </div>

            @php
            $teamInfo = $results->where('section', 'team')->first();
            $teamContent = (!empty($teamInfo->content) ? json_decode($teamInfo->content) : '');
            $teamTitle = (!empty($teamContent->title) ? $teamContent->title : '');
            $teamSubtitle = (!empty($teamContent->subtitle) ? $teamContent->subtitle : '');
            @endphp

            <form action="{{route('admin.home-page.updateTeam')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">
                                Title
                                <button data-popover-target="popover-team-title" data-popover-placement="bottom-start"
                                    type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-team-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                        <li>
                                            To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt Text
                                            <code>&lt;/span&gt;</code> tags.
                                        </li>
                                    </ol>
                                </div>
                            </label>
                            <input type="text" name="team[title]" value="{{$teamTitle}}" id="title" placeholder="Title"
                                class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <input class="inputField" placeholder="Subtitle" name="team[subtitle]"
                                value="{{$teamSubtitle}}" />
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                    </div>
                </div>
            </form>
        </div>

        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Faq's Section</h3>
            </div>

            @php
            $faqInfo = $results->where('section', 'faq')->first();
            $faqContent = (!empty($faqInfo->content) ? json_decode($faqInfo->content) : '');
            $faqTitle = (!empty($faqContent->title) ? $faqContent->title : '');
            $faqSubtitle = (!empty($faqContent->subtitle) ? $faqContent->subtitle : '');
            @endphp

            <form action="{{route('admin.home-page.updateFaq')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">
                                Title
                                <button data-popover-target="popover-faq-title" data-popover-placement="bottom-start"
                                    type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-faq-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                        <li>
                                            To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt Text
                                            <code>&lt;/span&gt;</code> tags.
                                        </li>
                                    </ol>
                                </div>
                            </label>
                            <input type="text" name="faq[title]" value="{{$faqTitle}}" id="title" placeholder="Title"
                                class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <input class="inputField" placeholder="Subtitle" name="faq[subtitle]"
                                value="{{$faqSubtitle}}" />
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                    </div>
                </div>
            </form>
        </div>

        <div class="grid gap-4">
            <div class="panelHeader panelHeader--inner">
                <h3 class="panelHeaderTitle lg:text-xl">Blog Section</h3>
            </div>

            @php
            $blogInfo = $results->where('section', 'blog')->first();
            $blogContent = (!empty($blogInfo->content) ? json_decode($blogInfo->content) : '');
            $blogTitle = (!empty($blogContent->title) ? $blogContent->title : '');
            $blogSubtitle = (!empty($blogContent->subtitle) ? $blogContent->subtitle : '');
            @endphp

            <form action="{{route('admin.home-page.updateBlog')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="grid lg:grid-cols-[auto_300px] gap-10">
                    <div class="grid gap-4">
                        <div class="grid gap-1.5">
                            <label for="title" class="inputLabel">
                                Title
                                <button data-popover-target="popover-blog-title" data-popover-placement="bottom-start"
                                    type="button">
                                    {!! config('icons.questionDuotone') !!}
                                    <span class="sr-only">Show Hints</span>
                                </button>

                                <div data-popover id="popover-blog-title" role="tooltip"
                                    class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                    <ol class="p-3 space-y-2 list-decimal ml-4">
                                        <li>
                                            To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                            tag.
                                        </li>
                                        <li>
                                            To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt Text
                                            <code>&lt;/span&gt;</code> tags.
                                        </li>
                                    </ol>
                                </div>
                            </label>
                            <input type="text" name="blog[title]" value="{{$blogTitle}}" id="title" placeholder="Title"
                                class="inputField" required />
                        </div>

                        <div class="grid gap-1.5">
                            <label for="subtitle" class="inputLabel">Subtitle</label>
                            <input class="inputField" placeholder="Subtitle" name="blog[subtitle]"
                                value="{{$blogSubtitle}}" />
                        </div>

                        <div class="flex items-center justify-end">
                            <button type="submit" class="button">Update</button>
                        </div>
                    </div>

                    <div class="w-full order-first lg:order-last">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('headerPartial')
<style>
    .inputField[type="file"] {
        padding: 0 !important
    }
</style>
@endpush

@push('footerPartial')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
    $('#blogDesc').summernote({
            placeholder: 'Page Description',
            tabsize: 2,
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onInit: function () {
                    $('.note-editor').addClass('prose');
                }
            }
        });


        //   Display Blog Thumbnail
        function readURL(input, selector) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(selector).style.backgroundImage = 'url(' + e.target.result + ')';
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        // Hero Image
        const heroImageUrl = "{{asset($heroImage)}}";
        document.getElementById('displayHeroImage').style.backgroundImage = 'url(' + heroImageUrl + ')';

        document.getElementById("heroImage").addEventListener("change", function () {
            readURL(this, "displayHeroImage");
        });

        // Statistics Image
        const statisticsImageUrl = "{{asset($statisticsImage)}}";
        document.getElementById('displayStatisticsImage').style.backgroundImage = 'url(' + statisticsImageUrl + ')';

        document.getElementById("statisticsImage").addEventListener("change", function () {
            readURL(this, "displayStatisticsImage");
        });

        // statistics tagline
        const valueLayout = `
        <div class="flex gap-2.5">
            <input id="valueTitle" type="text" name="statistics[tagline][]" value="" placeholder="Title" class="inputField" />
            <div onclick="this.parentElement.remove()"
                class="w-11 shrink-0 text-2xl rounded flex items-center justify-center bg-red-600 hover:bg-red-700 cursor-pointer text-white">
                {!! config('icons.close') !!}
            </div>
        </div>
        `;

        function addValue() {
            document.getElementById('valueList').insertAdjacentHTML('beforeend', valueLayout);
        }
</script>
@endpush