@extends('layouts.admin.app')
@section('page-title')
{{ __('Edit-Image') }}
@endsection

@section('page-nav-title')
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{ __('Gallery') }}</h1>
        <p>{{ __('Edit') }}</p>
    </div>

    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{ __('Dashboard') }}</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.gallery.index') }}">{{ __('Gallery') }}</a></li>
        <li class="breadcrumb-item"><a href="#">{{ __('Edit') }}</a></li>
    </ul>
</div>
@endsection

@section('content')
@include('includes.dialog')

<div class="row">
    <div class="col-lg-10 m-auto">
        <div class="tile">
            <h3 class="tile-title">{{ __('Edit') }}</h3>
            <div class="tile-body">
                <form method="post" action="{{ route('admin.gallery.update', ['gallery' => $image->id]) }}"
                    enctype="multipart/form-data">
                    @csrf
                    @method('put')

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('title En') }}</label>
                                <input class="form-control @if ($errors->has('title_en')) is-invalid @endif" type="text"
                                    name="title_en" placeholder={{ __('enter-title') }}
                                    value="{{ inputValue('title_en', $image) }}">
                            </div>
                            @error('title_en')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('title Ar') }}</label>
                                <input class="form-control @if ($errors->has('title_ar')) is-invalid @endif" type="text"
                                    name="title_ar" placeholder={{ __('enter-title') }}
                                    value="{{ inputValue('title_ar', $image) }}">
                            </div>
                            @error('title_ar')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        {{-- <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('description En') }}</label>
                                <textarea class="form-control @if ($errors->has('description_en')) is-invalid @endif"
                                    name="description_en"
                                    placeholder="{{ __('enter-en-description') }}">{{ inputValue('description_en', $image) }}</textarea>
                            </div>
                            @error('description_en')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('description Ar') }}</label>
                                <textarea class="form-control @if ($errors->has('description_ar')) is-invalid @endif"
                                    name="description_ar"
                                    placeholder="{{ __('enter-ar-description') }}">{{ inputValue('description_ar', $image) }}</textarea>
                            </div>
                            @error('description_ar')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div> --}}

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('description En') }}</label>
                                <textarea style="height: 40px;"
                                    class="form-control @if ($errors->has('description_en')) is-invalid @endif"
                                    id="description_en" placeholder="{{ __('enter-en-description') }}" rows="5"
                                    name="description_en">{{ inputValue('description_en', $image) }}</textarea>
                            </div>
                            @error('description_en')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('description Ar') }}</label>
                                <textarea style="height: 40px;"
                                    class="form-control @if ($errors->has('description_ar')) is-invalid @endif"
                                    id="description_ar" placeholder="{{ __('enter-ar-description') }}" rows="5"
                                    name="description_ar">{{ inputValue('description_ar', $image) }}</textarea>
                            </div>
                            @error('description_ar')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <input type="hidden" name="type" id="type" value="{{$image->type}}" />
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('image/video') }}</label>
                                <div>
                                    <button class="btn btn-primary form-control button-upload-file">
                                        <input class="input-file show-uploaded" type="file" name="image"
                                            id="photoInput">
                                        <span class="upload-file-content"><i
                                                class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                            <span class="upload-file-content-text">{{ __('Upload') }}</span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                            @error('image')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="exampleSelect1">{{ __('Type') }}</label>
                                <select class="form-control" id="exampleSelect1" name="type_id">
                                    <option value="">{{ __('None') }}</option>
                                    @foreach ($types as $type)
                                    <option value="{{ $type->id }}" {{ selected('gallery_id', $type->id, $image) }}>
                                        {{ $type->en_name }} ({{ $type->ar_name }})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('type_id')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row" id="image-prev">

                        <div class="col-lg-6">
                            <div class="col-lg-3 col-md-5 col-sm-6 mt-3 p-0">
                                <div class="images">
                                    <div class="uploaded-images">
                                        <img src="{{ $image->image ?? '' }}" alt="" width="150px" id="image_preview">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12" id="video-prev">
                        <div class="form-group">
                            <div class="uploaded-video">
                                <video controls style="width: 500px;">
                                    <source src="{{ $image->image }}" id="video_here" type="video/mp4">
                                    {{ __('Your browser does not support the video tag.') }}
                                </video>
                            </div>
                        </div>
                    </div>

                    <div class="tile-footer">
                        <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i>
                            {{ __('Edit') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.3/js/bootstrap-colorpicker.min.js">
</script>
<script>
    $(function() {
            $('#color').colorpicker({
                format: 'hex'
            });
        });
</script>

<script src="{{ asset('assets/vendor/ckeditor5/build/ckeditor.js') }}"></script>
<script>
    if($("#type").val() == "image"){
        $("#image-prev").css({'display' : '' });
         $("#video-prev").css({'display' : 'none' });
    }else{
        $("#video-prev").css({'display' : '' });
                $("#image-prev").css({'display' : 'none' });  
    }
        $(document).on("change", ".show-uploaded", function(evt) {
    const file = event.target.files[0];
        if (file) {
            // Check the file's MIME type
            if (file.type.startsWith('image/')) {
               $("#type").val("image");
               $("#image-prev").css({'display' : '' });
                $("#video-prev").css({'display' : 'none' });
            } else if (file.type.startsWith('video/')) {
                $("#type").val("video");
                var $source = $('#video_here');
                $source[0].src = URL.createObjectURL(this.files[0]);
                $source.parent()[0].load();
                $("#video-prev").css({'display' : '' });
                $("#image-prev").css({'display' : 'none' });
            }
        }
  });

</script>

<script src="/js/ckeditor.js"></script> 
<script>
    initializeCKEditor('#description_en', '#description_ar');
</script>

<script type="text/javascript">
    if (document.location.hostname == 'pratikborsadiya.in') {
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }
</script>
<script>
    document.getElementById('photoInput').addEventListener('change', function() {
            const uploadedImage = document.getElementById('image_preview');
            const fileInput = this;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    uploadedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            } else {
                uploadedImage.src = ''; // Clear the image source.
            }
        });
</script>
<script>
    $(document).ready(function() {
            $('#photoInput').change(function() {
                const uploadedImage = document.getElementById('image_preview');
                const fileInput = this;

                if (fileInput.files && fileInput.files[0]) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        uploadedImage.src = e.target.result;
                    };

                    reader.readAsDataURL(fileInput.files[0]);
                } else {
                    uploadedImage.src = ''; // Clear the image source.
                }
            });
        });
</script>
@endsection