@extends('layouts.app')
@section('content')
    <br>
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
            <form action="{{route('admin.about.form')}}" method="post" enctype="multipart/form-data">
        @csrf
        <section class="about">
            <h1>About Page</h1>
            <hr>
            <h3>Banner Section</h3>
            <hr>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <label>Banner Images</label>
                    <input id="about_banner_image" class="form-control" type="file"
                           name="about_banner_image" onchange="previewImages(event, 'previews1')">
                    <div id="previews1">
                        @if ($about->getMedia('about_banner_image')->isNotEmpty())
                            @foreach ($about->getMedia('about_banner_image') 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 Title</label>
                    <input class="form-control" name="about_banner_title" type="text" value="{{$data->about_banner_title ?? ''}}">
                </div>
            </div>


            <hr>
            <h3 class="slider_one_content">About Section</h3>
            <hr>
            <div class="row">

                <div class="col-md-4">
                    <label>Title</label>
                    <input class="form-control" type="text" name="title" value="{{$data->title ?? ''}}">

                </div>
               <div class="col-md-4">
                   <label>Sub Title</label>
                   <input class="form-control" type="text" name="sub_title" value="{{$data->sub_title ?? ''}}">

               </div>
                <div class="col-md-4">
                    <label>Heading</label>
                    <input class="form-control" type="text" name="heading" value="{{$data->heading ?? ''}}">
                </div>



                    <div class="col-md-6 mt-4">
                    <label>Section Main Image</label>
                    <input id="section_image_1" class="form-control" type="file"
                           name="section_image_1" onchange="previewImages(event, 'previews2')">
                    <div id="previews2">
                        @if ($about->getMedia('section_image_1')->isNotEmpty())
                            @foreach ($about->getMedia('section_image_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 mt-4">
                    <label>Section Side Image</label>
                    <input id="section_image_2" class="form-control" type="file"
                           name="section_image_2" onchange="previewImages(event, 'previews3')">
                    <div id="previews3">
                        @if ($about->getMedia('section_image_2')->isNotEmpty())
                            @foreach ($about->getMedia('section_image_2') 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-12 mt-5">
                    <label>Description</label>
                    <textarea rows="7" class="form-control" name="description">{{$data->description ?? ''}}</textarea>
                </div>
            </div>

            <hr>
            <h3 class="slider_one_content">Our Mission Section</h3>
            <hr>

            <div>
                <div class="row">
                    <div class="col-md-12">
                        <label>Title</label>
                        <input class="form-control" type="text" name="our_mission_title_1" value="{{$data->our_mission_title_1 ?? ''}}">
                    </div>
                    <div class="col-md-12 mt-5">
                        <label>Description</label>
                        <textarea class="form-control" rows="5" name="our_mission_description_1">{{$data->our_mission_description_1 ?? ''}}</textarea>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-4">
                    <label>Left Side Images</label>
                    <input id="our_mission_image_1" class="form-control" type="file"
                           name="our_mission_image_1" onchange="previewImages(event, 'previews4')">
                    <div id="previews4">
                        @if ($about->getMedia('our_mission_image_1')->isNotEmpty())
                            @foreach ($about->getMedia('our_mission_image_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-8">
                    <label>Description</label>
                    <textarea class="form-control" rows="5" name="our_mission_description_2" style="height: 258px!important;">{{$data->our_mission_description_2 ?? ''}}</textarea>
                </div>
            </div>
            <div class="row mt-5">
                <div class="col-md-6">
                    <label>Side Title</label>
                    <input class="form-control" type="text" name="our_mission_title_2" value="{{$data->our_mission_title_2 ?? ''}}">

                </div>
                <div class="col-md-6">
                    <label>Right Side Images</label>
                    <input id="our_mission_image_2" class="form-control" type="file"
                           name="our_mission_image_2" onchange="previewImages(event, 'previews5')">
                    <div id="previews5">
                        @if ($about->getMedia('our_mission_image_2')->isNotEmpty())
                            @foreach ($about->getMedia('our_mission_image_2') 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-12">
                    <label>Description</label>
                    <textarea class="form-control" rows="5" name="our_mission_description_3">{{$data->our_mission_description_3 ?? ''}}</textarea>
                </div>
            </div>


            <div class="row mt-5">
                <hr>
                <h3 class="slider_one_content">Video Section</h3>
                <hr>
                <div class="col-md-12">
                    <label>Video</label>
                    <input id="video" class="form-control" type="file" name="video" accept="video/*"
                           onchange="previewVideo()">
                    <div id="video-preview">
                        @if ($about->getMedia('video')->isNotEmpty())
                            @foreach ($about->getMedia('video') as $media)
                                <video width="200" controls>
                                    <source src="{{ $media->getUrl() }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

        </section>
        <br>
        <br>
                <div class="text-center">
        <button class="btn btn-success" type="submit">Submit</button>
                </div>
    </form>
            </div>
    </div>
    </div>
@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);
            }
        }

        function previewVideo() {
            var videoInput = document.getElementById('video');
            var videoPreviewContainer = document.getElementById('video-preview');

            // Clear previous previews
            videoPreviewContainer.innerHTML = '';

            // Check if a file is selected
            if (videoInput.files.length > 0) {
                var video = document.createElement('video');
                video.setAttribute('width', '200px');
                video.setAttribute('controls', 'true');

                var source = document.createElement('source');
                source.src = URL.createObjectURL(videoInput.files[0]);
                source.type = 'video/mp4'; // Change the type based on your video formats

                video.appendChild(source);
                videoPreviewContainer.appendChild(video);
            }
        }
    </script>

@endpush