@php use App\Http\Controllers\web\admin\GalleryController; @endphp
@extends('layouts.admin.app')
@section('page-title')
{{ __('add-image-to-gallery') }}
@endSection
@section('page-nav-title')
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{ __('add-image-to-gallery') }}</h1>
    </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="{{ route('admin.gallery.index') }}">{{ __('gallery') }}</a></li>
        <li class="breadcrumb-item"><a href="#">{{ __('create') }}</a></li>
    </ul>
</div>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-10 m-auto">
        <div class="tile">
            <h3 class="tile-title">{{ __('create') }}</h3>
            <div class="tile-body">
                <form method="post" action="{{ route('admin.gallery.store') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="col-lg-4">
                        <label for="gallery">{{ __('gallery') }}</label>
                        <select class="form-control" id="gallery" name="type_id" style="margin-bottom: 24px">
                            @foreach ($types as $type)
                            <option value="{{ $type->id }}" @selected(old('gallery')==$type['en_name'])>
                                {{ app()->getLocale() === 'en' ? $type->en_name : $type->ar_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row mx-1">
                        <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') }}">
                            </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') }}">
                            </div>
                            @error('title_ar')
                            <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row mx-1">

                        <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') }}</textarea>
                            </div>
                        </div>

                        {{-- <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') }}</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') }}</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 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') }}</textarea>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="type" id="type" />
                    <div class="col-lg-3">
                        <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" data-upload-type="single"
                                        data-imgs-container-class="uploaded-images" type="file" name="image">
                                    <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 id="image-prev"  style="display: none">
                        <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="" alt="" width="90px" id="profile_photo_preview">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12" id="video-prev" style="display: none">
                        <div class="form-group">
                            <div class="uploaded-video">
                                <video controls style="width: 500px;">
                                    <source 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>{{
                            __('create') }}
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="{{ asset('assets/vendor/ckeditor5/build/ckeditor.js') }}"></script>
<script>
    $(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>
@endsection