@extends('cms::layouts.master')

@section('title', 'Gallery Images')

@section('headerScripts')
    <style>
        .close-icon-parent {
            position: relative;
        }

        .close-icon {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 30px;
            background: #f05858;
            font-weight: bold;
            font-size: 16px;
            color: black;
            border-radius: 0 0 0 10px;
        }

        .close-icon:hover {
            background: #ff0000;
            color: white;
        }

        .image-preview {
            display: flex;
            flex-wrap: wrap;
        }

        .image-preview img {
            max-width: 100px;
            margin: 10px;
        }
    </style>
@endsection

@section('content')
    <x-page-header page-title="Add / Update Gallery Images" active-title="Add / Update Gallery Images" back-link="{{ route('galleries.index') }}" />

    <div class="block bg-white p-1 rounded">
        <div class="row">
            <div class="col-12 text-center p-3">
                <strong style="font-size:16px"> Gallery Name: {{ $gallery->title ?? '-' }} </strong><br> <br>

                @if ($gallery->slug == 'success-stories-videos')
                    <x-crud-form route="{{ route('galleries.addImagePost', ['gallery' => $gallery->id]) }}" type="edit"
                        :single-page="true">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="float-left">Youtube Video Code <span class="text-danger">(
                                            yt.com?v="Code" )</span></label>
                                    <input value="{{ old('videoCode') }}" name="videoCode" type="text"
                                        class="form-control" placeholder="Video Code" required id="videoCodePreview">
                                    <span
                                        class="text-danger float-left">{{ validationError($errors->get('videoCode')) }}</span>
                                </div>

                            </div>
                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-success" name="file_type" value="video">Save</button>
                            </div>

                            <div class="col-12 mt-2">
                                <div class="video-preview" id="videoPreview"></div>
                            </div>
                    </x-crud-form>

                    <div class="row mt-3">
                        @foreach ($galleryImages as $key => $galleryImage)
                            <div class="col-sm-4 mt-1 mb-4">
                                <div class="card close-icon-parent">
                                    <div class="text-center close-icon">
                                        <form
                                            action="{{ route('gallery-images.destroy', ['gallery_image' => $galleryImage->id]) }}"
                                            method="post" class="delForm">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                            <button type="submit" class="text-center close-icon border-0 rounded"
                                                value="Delete" data-toggle="tooltip" title="Delete"
                                                onclick="return confirm('Are you sure you want to delete this item?')">x</button>
                                        </form>
                                    </div>
                                    <iframe id="videoPreview{{ $galleryImage->id }}"
                                        src="https://www.youtube.com/embed/{{ $galleryImage->image }}" frameborder="0"
                                        height="200" width="100%" allowfullscreen></iframe>

                                    <div class="card-body">
                                        <form
                                            action="{{ route('gallery-images.update', ['gallery_image' => $galleryImage->id]) }}"
                                            method="post" enctype="multipart/form-data">
                                            @csrf
                                            @method('PATCH')
                                            <div class="row p-1">
                                                <div class="col-4 px-0">
                                                    <input type="number" name="display_order" class="form-control"
                                                        value="{{ $galleryImage->display_order }}"
                                                        placeholder="Display Order">
                                                </div>

                                                <div class="col-8 pr-0" style="padding-left:5px">

                                                    @php
                                                        $value =
                                                            old('gallery_image_id') == $galleryImage->id
                                                                ? old('singleVideoCode')
                                                                : $galleryImage->image;
                                                    @endphp

                                                    <input name="singleVideoCode" type="text" class="form-control"
                                                        value="{{ $value }}" placeholder="Video Code" id="selectedVideoCode{{ $galleryImage->id }}" required>
                                                    @if ($errors->has('singleVideoCode') && old('gallery_image_id') == $galleryImage->id)
                                                        <span
                                                            class="text-danger text-sm">{{ validationError($errors->get('singleVideoCode')) }}</span>
                                                    @endif
                                                </div>

                                                <div class="col-12 p-0">
                                                    <input type="text" name="title" placeholder="Title"
                                                        value="{{ $galleryImage->title }}" class="form-control mb-1 mt-1">
                                                    <textarea name="description" placeholder="Description" class="form-control" id="description" rows="2">{{ $galleryImage->description }}</textarea>
                                                </div>

                                                <div class="col-12 mt-1 text-left">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="is_active"
                                                            value="1" id="is_active{{ $galleryImage->id }}"
                                                            {{ $galleryImage->is_active ? 'checked' : '' }}
                                                            style="cursor: pointer !important">
                                                        <label class="form-check-label"
                                                            for="is_active{{ $galleryImage->id }}"
                                                            style="cursor: pointer !important">
                                                            Is Active
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <button class="btn btn-success" style="padding:8px" type="submit"
                                                    name="file_type" value="video"><i class="fa fa-edit"></i>
                                                    Update</button>
                                                <input type="hidden" name="gallery_image_id"
                                                    value="{{ $galleryImage->id }}">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <x-crud-form route="{{ route('galleries.addImagePost', ['gallery' => $gallery->id]) }}"
                        type="edit" :single-page="false">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="float-left">Images</label>
                                    <input type="file" name="images[]" class="form-control" id="imageUpload" multiple
                                        accept="image/*">
                                    <span class="text-danger">{{ validationError($errors->get('images')) }}</span>
                                </div>
                            </div>

                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-primary" name="file_type"
                                    value="image">Upload</button>
                            </div>

                            <div class="col-12">
                                <div class="image-preview" id="imagePreview"></div>
                            </div>
                        </div>
                    </x-crud-form>

                    <div class="row mt-3">
                        @foreach ($galleryImages as $galleryImage)
                            <div class="col-sm-4 mb-4">
                                <div class="card close-icon-parent">
                                    <div class="text-center close-icon">
                                        <form
                                            action="{{ route('gallery-images.destroy', ['gallery_image' => $galleryImage->id]) }}"
                                            method="post" class="delForm">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}
                                            <button type="submit" class="text-center close-icon border-0" value="Delete"
                                                data-toggle="tooltip" title="Delete"
                                                onclick="return confirm('Are you sure you want to delete this item?')">x</button>
                                        </form>
                                    </div>

                                    <img loading="lazy" style="width: 100%; height: 250px;"
                                        src="{{ asset('/uploads/gallery-images/' . $galleryImage->image) }}"
                                        id="photoPreview{{ $galleryImage->id }}" alt="{{ $galleryImage->title }}"
                                        title="{{ $galleryImage->title }}">
                                    <div class="card-body">
                                        <form
                                            action="{{ route('gallery-images.update', ['gallery_image' => $galleryImage->id]) }}"
                                            method="post" enctype="multipart/form-data">
                                            @csrf
                                            @method('PATCH')
                                            <div class="row p-1">
                                                <div class="col-4 px-0">
                                                    <input type="number" name="display_order" class="form-control"
                                                        value="{{ $galleryImage->display_order }}"
                                                        placeholder="Display Order">
                                                </div>

                                                <div class="col-8 pr-0" style="padding-left:5px">
                                                    <input type="file" name="galleryImage" class="form-control"
                                                        oninput="photoPreview{{ $galleryImage->id }}.src=window.URL.createObjectURL(this.files[0]);">
                                                </div>

                                                <div class="col-12 p-0">
                                                    <input type="text" name="title" placeholder="Title"
                                                        value="{{ $galleryImage->title }}"
                                                        class="form-control mb-1 mt-1">
                                                    <textarea name="description" placeholder="Description" class="form-control" id="description" rows="2">{{ $galleryImage->description }}</textarea>
                                                </div>

                                                <div class="col-12 mt-1 text-left">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="is_active"
                                                            value="1" id="is_active{{ $galleryImage->id }}"
                                                            {{ $galleryImage->is_active ? 'checked' : '' }}
                                                            style="cursor: pointer !important">
                                                        <label class="form-check-label"
                                                            for="is_active{{ $galleryImage->id }}"
                                                            style="cursor: pointer !important">
                                                            Is Active
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <button class="btn btn-success" style="padding:8px" type="submit"
                                                    name="file_type" value="image"><i class="fa fa-edit"></i>
                                                    Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const imageUpload = document.getElementById('imageUpload');
            if (imageUpload) {
                imageUpload.addEventListener('change', function(event) {
                    const imagePreviewContainer = document.getElementById('imagePreview');
                    imagePreviewContainer.innerHTML = ''; // Clear previous previews

                    const files = event.target.files;
                    if (files) {
                        for (const file of files) {
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const img = document.createElement('img');
                                img.src = e.target.result;
                                imagePreviewContainer.appendChild(img);
                            };
                            reader.readAsDataURL(file);
                        }
                    }
                });
            }

            const videoCodePreview = document.getElementById('videoCodePreview');
            if (videoCodePreview) {
                videoCodePreview.addEventListener('input', function(event) {
                    const videoCode = event.target.value;
                    const videoPreviewContainer = document.getElementById('videoPreview');
                    videoPreviewContainer.innerHTML = ''; // Clear previous previews

                    if (videoCode) {
                        const video = document.createElement('iframe');
                        video.src = `https://www.youtube.com/embed/${videoCode}`;
                        video.frameBorder = 0;
                        video.height = 200;
                        video.width = '100%';
                        video.allowFullscreen = true;
                        videoPreviewContainer.appendChild(video);
                    }
                });
            }

            @foreach ($galleryImages as $key => $galleryImage)
                const singleVideoInput{{ $galleryImage->id }} = document.getElementById('selectedVideoCode{{ $galleryImage->id }}');
                if (singleVideoInput{{ $galleryImage->id }}) {
                    singleVideoInput{{ $galleryImage->id }}.addEventListener('input', function(event) {
                        const videoCode{{ $galleryImage->id }} = event.target.value;
                        const videoPreview{{ $galleryImage->id }} = document.getElementById(
                        'videoPreview{{ $galleryImage->id }}');
                        if (videoPreview{{ $galleryImage->id }}) {
                            videoPreview{{ $galleryImage->id }}.src = `https://www.youtube.com/embed/${videoCode{{ $galleryImage->id }}}`;
                        }
                    });
                }
            @endforeach
        });
    </script>
@endpush