@extends('layouts.admin-layout')
@section('title', 'Home Page')
@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 mt-5">
                        <form class="home-form" method="post" action="{{ route('admin.page.cms.contour.update') }}" enctype="multipart/form-data">
                            @csrf

                            <div class="card card-primary card-box-shadow mt-3">
                                <div class="card-body">
                                    <h4>Contour Section</h4>
                                    <div class="row">
{{--                                        <div class="col-md-12 mt-4">--}}
{{--                                            <label for="bannerHeading">Heading</label>--}}
{{--                                            <input type="text" name="contour_banner_heading" id="bannerHeading" class="form-control" value="{{ $content->personalized_nutrition_banner_heading ?? '' }}">--}}
{{--                                        </div>--}}
                                        <div class="col-md-6 mt-4">
                                            <label for="bannerImage">Image</label>
                                            <input type="file" name="contour_banner_image" id="banner_image" class="form-control">

                                            <div id="banner_image_preview_container">
                                                <img id="banner_image_preview"
                                                     src="{{ $data->getFirstMediaUrl('contour_banner_image') ?: '' }}"
                                                     alt="Image Preview"
                                                     style="display: {{ $data->getFirstMediaUrl('contour_banner_image') ? 'block' : 'none' }}; max-width: 100px; margin-top: 10px;">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading</label>
                                            <input type="text" name="contour_banner_heading" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mt-4">
                                            <label for="bannerImage">Image 1</label>
                                            <input type="file" name="contour_banner_image_5" id="contour_banner_image_5" class="form-control">

                                            <div id="contour_banner_image_5_preview_container">
                                                <img id="contour_banner_image_5_preview"
                                                     src="{{ $data->getFirstMediaUrl('contour_banner_image_5') ?: '' }}"
                                                     alt="Image Preview"
                                                     style="display: {{ $data->getFirstMediaUrl('contour_banner_image_5') ? 'block' : 'none' }}; max-width: 100px; margin-top: 10px;">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading</label>
                                            <input type="text" name="contour_banner_heading_2" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_2 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="banner_description">Description 1</label>
                                            <textarea name="contour_banner_description" id="banner_description" class="form-control" rows="3">{!! $content->contour_banner_description ?? '' !!}</textarea>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 3</label>
                                            <input type="text" name="contour_banner_heading_3" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_3 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 4</label>
                                            <input type="text" name="contour_banner_heading_4" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_4 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 5</label>
                                            <input type="text" name="contour_banner_heading_5" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_5 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="banner_description">Description 2</label>
                                            <textarea name="contour_banner_description_1" id="contour_banner_description_1" class="form-control" rows="3">{!! $content->contour_banner_description_1 ?? '' !!}</textarea>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 6</label>
                                            <input type="text" name="contour_banner_heading_6" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_6 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="banner_description">Description 3</label>
                                            <textarea name="contour_banner_description_2" id="contour_banner_description_2" class="form-control" rows="3">{!! $content->contour_banner_description_2 ?? '' !!}</textarea>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 7</label>
                                            <input type="text" name="contour_banner_heading_7" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_7 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="banner_description">Description 4</label>
                                            <textarea name="contour_banner_description_3" id="contour_banner_description_3" class="form-control" rows="3">{!! $content->contour_banner_description_3 ?? '' !!}</textarea>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 8</label>
                                            <input type="text" name="contour_banner_heading_8" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_8 ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mt-4">
                                            <label for="bannerImage">Image 1</label>
                                            <input type="file" name="contour_banner_image_1" id="contour_banner_image_1" class="form-control">

                                            <div id="contour_banner_image_1_preview_container">
                                                <img id="contour_banner_image_1_preview"
                                                     src="{{ $data->getFirstMediaUrl('contour_banner_image_1') ?: '' }}"
                                                     alt="Image Preview"
                                                     style="display: {{ $data->getFirstMediaUrl('contour_banner_image_1') ? 'block' : 'none' }}; max-width: 100px; margin-top: 10px;">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 9</label>
                                            <input type="text" name="contour_banner_heading_9" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_9 ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mt-4">
                                            <label for="bannerImage">Image 2</label>
                                            <input type="file" name="contour_banner_image_2" id="contour_banner_image_2" class="form-control">

                                            <div id="banner_image_preview_container">
                                                <img id="contour_banner_image_2_preview"
                                                     src="{{ $data->getFirstMediaUrl('contour_banner_image_2') ?: '' }}"
                                                     alt="Image Preview"
                                                     style="display: {{ $data->getFirstMediaUrl('contour_banner_image_2') ? 'block' : 'none' }}; max-width: 100px; margin-top: 10px;">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 10</label>
                                            <input type="text" name="contour_banner_heading_10" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_10 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 11</label>
                                            <input type="text" name="contour_banner_heading_11" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_11 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 12</label>
                                            <input type="text" name="contour_banner_heading_12" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_12 ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mt-4">
                                            <label for="bannerImage">Image 3</label>
                                            <input type="file" name="contour_banner_image_3" id="contour_banner_image_3" class="form-control">

                                            <div id="banner_image_preview_container">
                                                <img id="contour_banner_image_3_preview"
                                                     src="{{ $data->getFirstMediaUrl('contour_banner_image_3') ?: '' }}"
                                                     alt="Image Preview"
                                                     style="display: {{ $data->getFirstMediaUrl('contour_banner_image_3') ? 'block' : 'none' }}; max-width: 100px; margin-top: 10px;">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 13</label>
                                            <input type="text" name="contour_banner_heading_13" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_13 ?? '' }}">
                                        </div>
                                        <div class="col-md-6 mt-4">
                                            <label for="bannerImage">Image 4</label>
                                            <input type="file" name="contour_banner_image_4" id="contour_banner_image_4" class="form-control">

                                            <div id="banner_image_preview_container">
                                                <img id="contour_banner_image_4_preview"
                                                     src="{{ $data->getFirstMediaUrl('contour_banner_image_4') ?: '' }}"
                                                     alt="Image Preview"
                                                     style="display: {{ $data->getFirstMediaUrl('contour_banner_image_4') ? 'block' : 'none' }}; max-width: 100px; margin-top: 10px;">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 14</label>
                                            <input type="text" name="contour_banner_heading_14" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_14 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="bannerSubHeading">Heading 15</label>
                                            <input type="text" name="contour_banner_heading_15" id="bannerSubHeading" class="form-control" value="{{ $content->contour_banner_heading_15 ?? '' }}">
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="banner_description">Description 5</label>
                                            <textarea name="contour_banner_description_4" id="contour_banner_description_4" class="form-control" rows="3">{!! $content->contour_banner_description_4 ?? '' !!}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center mt-4">
                                <button id="submit_btn" class="btn btn-primary custom_btn">
                                    <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

    <script>
        const banner_image = document.getElementById("banner_image");
        const banner_image_preview = document.getElementById('banner_image_preview');

        window.addEventListener('DOMContentLoaded', function() {
            const existingImageUrl = banner_image_preview.src;
            if (existingImageUrl && existingImageUrl !== '') {
                banner_image_preview.style.display = 'block';
            }
        });

        banner_image.addEventListener("change", function (event) {
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    banner_image_preview.src = e.target.result;
                    banner_image_preview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });


    </script>
    <script>
        ClassicEditor
            .create(document.querySelector('#banner_description'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
        ClassicEditor
            .create(document.querySelector('#the_weight_loss_journey_description'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
        ClassicEditor
            .create(document.querySelector('#contour_banner_description_4'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
        ClassicEditor
            .create(document.querySelector('#contour_banner_description_3'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
        ClassicEditor
            .create(document.querySelector('#contour_banner_description_2'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
        ClassicEditor
            .create(document.querySelector('#contour_banner_description_1'), {
                placeholder: 'Hello Admin',
                toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote'],
                height: 100
            })
    </script>
@endsection