@extends('admin.layout.admin')
@section('content')

<div class="content-page">
    <!-- Start content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0" style="font-size: 2.5rem; color: #333; font-weight: bold;">Home Page
                        Details</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" style="color: #666;">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page" style="color: #333; font-weight: bold;">
                            Dashboard
                        </li>
                    </ol>
                </div>
            </div>
            <form action="{{ route('home.update') }}" method="post" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="slug" value="">
                <input type="hidden" name="media_collections[]" value="background_banner_image">
                <input type="hidden" name="media_collections[]" value="mouse_image">
                <input type="hidden" name="media_collections[]" value="home_about_sec_rig_img">
                <input type="hidden" name="media_collections[]" value="home_about_sec_img">
                <input type="hidden" name="media_collections[]" value="home_up_coming_img">
                <input type="hidden" name="media_collections[]" value="antic_image">




                <div class="row mt-5">
                    <label for="title" style="font-size:2.5rem; color: #555; font-weight: bold;">---------------Home
                        Page
                        Banner Section-------------------</label>


                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="background_banner_image" style="font-size: 1.2rem; color: #555; font-weight: bold;">Banner Image</label>
                            <input type="file" class="form-control" name="background_banner_image" id="background_banner_image" value="">

                            <img id="background_banner_image_preview"
                                 src="{{ $data->CmsImage('background_banner_image') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                            </img>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                Image 1</label>
                            <input type="file" class="form-control" name="banner_image_1" id="banner_image_1">
                            <img id="banner_image_1_preview"
                                 src="{{ $data->CmsImage('banner_image_1') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">

                        </div>

                    </div>
              <div class="col-md-6">

                        <div class="form-group">
                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                Image 2
                            </label>
                            <input type="file" class="form-control" name="banner_image_2" id="banner_image_2">
                            <img id="banner_image_2_preview"
                                 src="{{ $data->CmsImage('banner_image_2') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                 Image 3</label>
                            <input type="file" class="form-control" name="banner_image_3" id="banner_image_3">
                            <img id="banner_image_3_preview"
                                 src="{{ $data->CmsImage('banner_image_3') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                        </div>

                    </div>
                <div class="col-md-6">

                        <div class="form-group">
                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                Image 4
                            </label>
                            <input type="file" class="form-control" name="banner_image_4" id="banner_image_4">
                            <img id="banner_image_4_preview"
                                 src="{{ $data->CmsImage('banner_image_4') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                               Image 5</label>
                            <input type="file" class="form-control" name="banner_image_5" id="banner_image_5">
                            <img id="banner_image_5_preview"
                                 src="{{ $data->CmsImage('banner_image_5') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                        </div>

                    </div>

                        <div class="form-group">
                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                               Image 6</label>
                            <input type="file" class="form-control" name="banner_image_6" id="banner_image_6">
                            <img id="banner_image_6_preview"
                                 src="{{ $data->CmsImage('banner_image_6') }}"
                                 alt=" Preview"
                                 style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">


                    </div>

                    <div class="row mt-5">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Banner
                                    Title
                                </label>

                            </div>     <textarea class="form-control" name="banner_title">{{ old('banner_title', $content->banner_title ?? '') }}</textarea>
                        </div>
                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Banner
                                    Button
                                </label>
                                <textarea class="form-control" name="banner_btn">{{ old('banner_btn', $content->banner_btn ?? '') }}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6">

                            <div class="col-md-12">

                                <div class="form-group">
                                    <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Banner
                                        Subtitle
                                    </label>
                                        <textarea class="form-control" name="banner_subtitle">{{ old('banner_subtitle',  $content->banner_subtitle ?? '') }}</textarea>
                                </div>
                            </div>


                        </div>
                        <div class="row mt-5">
                            <label for="title" style="font-size:2.5rem; color: #555; font-weight: bold;">------------
                                Home Page Heading Between Banner And About Me Section------------</label>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">

                                        <div class="form-group">
                                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Heading Between Banner And About Me Section
                                                Heading</label>
                                            <textarea class="form-control" name="heading_between_2_sec">{{ old('home_about_sec_heading', $content->heading_between_2_sec ?? '') }}</textarea>
                                        </div>
                                    </div>



                            </div>
                        </div>


                        <div class="row mt-5">
                            <label for="title" style="font-size:2.5rem; color: #555; font-weight: bold;">-----------------------
                                Home Page About Me Section----------------------</label>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">

                                        <div class="form-group">
                                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                                About Me Section
                                                Heading</label>
                                            <textarea class="form-control" name="about_me_sec_heading">{{ old('home_about_sec_heading',  $content->about_me_sec_heading ?? '') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">

                                        <div class="form-group">
                                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                                About Me Section
                                                Subtitle</label>
                                            <textarea class="form-control" name="about_me_sec_sub_title">{{ old('home_about_sec_sub_title', $content->about_me_sec_sub_title ?? '') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">

                                        <div class="form-group">
                                            <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                                About Me
                                                Description</label>
                                            <textarea class="form-control" name="about_me_sec_des">{{ old('home_about_sec_des', $content->about_me_sec_des ?? '') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;"> About Me
                                            Button</label>
                                        <textarea class="form-control" name="about_me_sec_btn">{{ old('home_about_sec_btn', $content->about_me_sec_btn ?? '') }}</textarea>
                                    </div>
                                    </div>


                                </div>


                                <div class="form-group">
                                    <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                        About Me Section Image</label>
                                    <input type="file" class="form-control" name="about_me_sec_img" id="about_me_sec_img">
                                    <img id="about_me_sec_img_preview"
                                         src="{{ $data->CmsImage('about_me_sec_img') }}"
                                         alt=" Preview"
                                         style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                                </div>


                            </div>
                        </div>

                        <div class="row mt-5">
                            <label for="title" style="font-size:2.5rem; color: #555; font-weight: bold;">-------------------------
                               Home PAge Explore the work Section
                                --------------------------</label>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                        Explore the work Section
                                        Heading
                                    </label>
                                    <textarea class="form-control" name="explore_the_work_sec_heading">{{ old('home_up_coming_title', $content->explore_the_work_sec_heading ?? '') }}</textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                        Explore the work Section
                                        SubTitle
                                    </label>
                                    <textarea class="form-control" name="explore_the_work_sec_sub_title">{{ old('home_up_coming_sub_title', $content->explore_the_work_sec_sub_title ?? '') }}</textarea>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="row mt-5">
                        <label for="title" style="font-size:2.5rem; color: #555; font-weight: bold;">------------------------------------
                            High-resolution  Section
                            -------------------------------------</label>


                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">  High-resolution  Section Description
                                </label>
                                <textarea class="form-control" name="high_resolution_sec_des">{{ old('home_view_auc_pro_title', $content->high_resolution_sec_des ?? '') }}</textarea>

                          </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                    Image 1</label>
                                <input type="file" class="form-control" name="high_resolution_sec_img_1 " id="high_resolution_sec_img_1">
                                <img id="high_resolution_sec_img_1_preview"
                                     src="{{ $data->CmsImage('high_resolution_sec_img_1') }}"
                                     alt=" Preview"
                                     style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                            </div>

                        </div>
                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                    Image 2
                                </label>
                                <input type="file" class="form-control" name="high_resolution_sec_img_2" id="high_resolution_sec_img_2">
                                <img id="high_resolution_sec_img_2_preview"
                                     src="{{ $data->CmsImage('high_resolution_sec_img_2') }}"
                                     alt=" Preview"
                                     style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                    Image 3</label>
                                <input type="file" class="form-control" name="high_resolution_sec_img_3" id="high_resolution_sec_img_3">
                                <img id="high_resolution_sec_img_3_preview"
                                     src="{{ $data->CmsImage('high_resolution_sec_img_3') }}"
                                     alt=" Preview"
                                     style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                            </div>

                        </div>
                        <div class="col-md-6">

                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;">
                                    Image 4
                                </label>
                                <input type="file" class="form-control" name="high_resolution_sec_img_4" id="high_resolution_sec_img_4">
                                <img id="high_resolution_sec_img_4_preview"
                                     src="{{ $data->CmsImage('high_resolution_sec_img_4') }}"
                                     alt=" Preview"
                                     style="max-width: 200px; max-height: 200px; margin-top: 20px; display: {{ $data->cmsImage('focused_and_future_section_image') ? 'block' : 'none' }};">
                            </div>
                        </div>
                    </div>
                        <div class="row mt-5">
                            <label for="title" style="font-size:2.5rem; color: #555; font-weight: bold;">------------------------------------
                               Instagram Section
                                -------------------------------------</label>


                            <div class="form-group">
                                <label for="title" style="font-size: 1.2rem; color: #555; font-weight: bold;"> Instagram Section heading
                                </label>
                                <textarea class="form-control" name="instagram_section_heading">{{ old('home_view_auc_pro_title', $content->instagram_section_heading ?? '') }}</textarea>

                            </div>
                        </div>



                                                   </div>


                        <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                </div>
            </form>
        </div>


        @endsection


        @section('script')

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
        <script>

 // Banner Section
            $(document).ready(function() {
                $('#background_banner_image').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#background_banner_image_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#banner_image_1').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#banner_image_1_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#banner_image_2').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#banner_image_2_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#banner_image_3').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#banner_image_3_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#banner_image_4').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#banner_image_4_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#banner_image_5').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#banner_image_5_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#banner_image_6').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#banner_image_6_preview').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
 // End Section
// About Section
            $(document).ready(function() {
                $('#about_me_sec_img_preview').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#about_me_sec_img').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
 // End Section
// High-resolution Section

            $(document).ready(function() {
                $('#high_resolution_sec_img_1_preview').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#high_resolution_sec_img_1').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#high_resolution_sec_img_2_preview').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#high_resolution_sec_img_2').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#high_resolution_sec_img_3_preview').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#high_resolution_sec_img_3').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })
            $(document).ready(function() {
                $('#high_resolution_sec_img_4_preview').change(function() {
                    var input = this;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#high_resolution_sec_img_4').attr('src', e.target.result).show();
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });
            })

            // End Section



            $(document).ready(function() {
                $('.add-button').click(function() {
                    var section = $('#testimonial').clone();
                    section.removeAttr('id');
                    section.show();
                    $('#testimonials').append(section);
                });
                $(document).on('click', '.remove-button', function() {
                    $(this).closest('.row').remove();
                });
            });
            $(document).ready(function() {
                $('.add-blog').click(function() {
                    var blog = $('#blog').clone();
                    blog.removeAttr('id');
                    blog.show();
                    $('#blogs').append(blog);
                });
                $(document).on('click', '.remove-blog', function() {
                    $(this).closest('.row').remove();
                });
            });
        </script>
        @endsection