@extends('layouts.app')
@section('content')
    <style>
        .slider_section_title {
            text-align: center;
            font-family: cursive;
        }

        .slider_one_content {
            text-align: center;
        }

        .slider_two_content {
            text-align: center;
        }

        .slider_three_content {
            text-align: center;
        }
    </style>
    <form action="{{route('admin.home.form')}}" method="post" enctype="multipart/form-data">
        @csrf
        <section class="slider-section">
            <h1 class="slider_section_title">Home Page</h1>
            <hr>
            <h3 class="slider_one_content">Home Page First Slider Content</h3>
            <hr>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <label for="slider_background_image_1">Slider Background Images</label>
                    <input id="slider_background_image_1" class="form-control" type="file"
                           name="slider_background_image_1" onchange="previewImages(event, 'previews1')">
                    <div id="previews1">
                        @if ($home->getMedia('slider_background_image_1')->isNotEmpty())
                            @foreach ($home->getMedia('slider_background_image_1') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>

                    <label>Slider Title</label>
                    <input class="form-control" name="slider_title_1" type="text" value="{{$data->slider_title_1 ?? ''}}">

                    <label>Slider Sub Title</label>
                    <input class="form-control" name="slider_sub_title_1" type="text" value="{{$data->slider_title_1 ?? ''}}">
                </div>
                <div class="col-md-9">
                    <label>Slider Description</label>
                    <textarea rows="5" class="form-control" name="slider_des_1">{{$data->slider_des_1 ?? ''}}</textarea>
                </div>
                <div class="col-md-6">
                    <label>Slider Side Image 1</label>
                    <input id="slider_image_1_1" class="form-control" name="slider_image_1_1" type="file"
                           onchange="previewImages(event, 'previews2')">
                    <div id="previews2">
                        @if ($home->getMedia('slider_image_1_1')->isNotEmpty())
                            @foreach ($home->getMedia('slider_image_1_1') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <label>Slider Side Image 2</label>
                    <input id="slider_image_1_2" class="form-control" name="slider_image_1_2" type="file"
                           onchange="previewImages(event, 'previews3')">
                    <div id="previews3">
                        @if ($home->getMedia('slider_image_1_2')->isNotEmpty())
                            @foreach ($home->getMedia('slider_image_1_2') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </section>
        <br>
        <section>
            <hr>
            <h3 class="slider_two_content">Home Page Second Slider Content</h3>
            <hr>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <label>Slider Background Image</label>
                    <input id="slider_background_image_2" class="form-control" type="file" name="slider_background_image_2" onchange="previewImages(event, 'previews4')">
                    <div id="previews4">
                        @if ($home->getMedia('slider_background_image_2')->isNotEmpty())
                            @foreach ($home->getMedia('slider_background_image_2') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                    <label>Slider Title</label>
                    <input class="form-control" name="slider_title_2" type="text" value="{{$data->slider_title_2 ?? ''}}">

                    <label>Slider Sub Title</label>
                    <input class="form-control" name="slider_sub_title_2" type="text" value="{{$data->slider_sub_title_2 ?? ''}}">
                </div>
                <div class="col-md-9">
                    <label>Slider Description</label>
                    <textarea rows="5" class="form-control" name="slider_des_2">{{$data->slider_des_2 ?? ''}}</textarea>
                </div>
                <div class="col-md-6">
                    <label>Slider Side Image</label>
                    <input id="slider_image_2_1" class="form-control" name="slider_image_2_1" type="file" onchange="previewImages(event, 'previews5')">
                    <div id="previews5">
                        @if ($home->getMedia('slider_image_2_1')->isNotEmpty())
                            @foreach ($home->getMedia('slider_image_2_1') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <label>Slider Side Image</label>
                    <input id="slider_image_2_2" class="form-control" name="slider_image_2_2" type="file" onchange="previewImages(event, 'previews6')">
                    <div id="previews6">
                        @if ($home->getMedia('slider_image_2_2')->isNotEmpty())
                            @foreach ($home->getMedia('slider_image_2_2') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </section>
        <br>
        <section>
            <hr>
            <h3 class="slider_three_content">Home Page Third Slider Content</h3>
            <hr>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <label>Slider Background Image</label>
                    <input  id="slider_background_image_3" class="form-control" type="file" name="slider_background_image_3"  onchange="previewImages(event, 'previews7')">
                    <div id="previews7">
                        @if ($home->getMedia('slider_background_image_3')->isNotEmpty())
                            @foreach ($home->getMedia('slider_background_image_3') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                    <label>Slider Title</label>
                    <input class="form-control" name="slider_title_3" type="text" value="{{$data->slider_title_3 ?? ''}}">

                    <label>Slider Sub Title</label>
                    <input class="form-control" name="slider_sub_title_3" type="text" value="{{$data->slider_sub_title_3 ?? ''}}">
                </div>
                <div class="col-md-9">
                    <label>Slider Description</label>
                    <textarea rows="5" class="form-control" name="slider_des_3">{{$data->slider_des_3 ?? ''}}</textarea>
                </div>
                <div class="col-md-6">
                    <label>Slider Side Image</label>
                    <input id="slider_image_3_1" class="form-control" name="slider_image_3_1" type="file" onchange="previewImages(event, 'previews8')">
                    <div id="previews8">
                        @if ($home->getMedia('slider_image_3_1')->isNotEmpty())
                            @foreach ($home->getMedia('slider_image_3_1') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <label>Slider Side Image</label>
                    <input id="slider_image_3_2" class="form-control" name="slider_image_3_2" type="file" onchange="previewImages(event, 'previews9')">
                    <div id="previews9">
                        @if ($home->getMedia('slider_image_3_2')->isNotEmpty())
                            @foreach ($home->getMedia('slider_image_3_2') as $media)
                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <button class="btn btn-success" type="submit">Submit</button>
    </form>
@endsection
@push('page_scripts')
    <script>
        function previewImages(event, containerId) {
            const input = event.target;
            const previewsContainer = document.getElementById(containerId);
            previewsContainer.innerHTML = ''; // Clear previous previews

            for (let i = 0; i < input.files.length; i++) {
                const reader = new FileReader();
                const img = document.createElement('img');
                img.style.maxWidth = '200px';
                img.style.marginTop = '10px';

                reader.onload = function() {
                    img.src = reader.result;
                }

                reader.readAsDataURL(input.files[i]);
                previewsContainer.appendChild(img);
            }
        }
    </script>

@endpush