@extends('admin.pages.build')
@section('title','Proje Düzenle')
@push('css')
    <link href="/panel/assets/plugins/select2/select2.min.css" rel="stylesheet" />
    <link href="/panel/assets/plugins/tabs/style.css" rel="stylesheet" />
    <link href="/panel/assets/plugins/fileupload/css/fileupload.css" rel="stylesheet" type="text/css" />
    <link href="/panel/assets/plugins/wysiwyag/richtext.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview@4.1.0/dist/file-upload-with-preview.min.css"/>
@endpush
@section('content')
    <form id="mainForm" action="{{ route('admin.projects.update',$project->id) }}" method="post" enctype="multipart/form-data">@csrf @method('put')
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Proje Düzenle</h3>
                    </div>
                    <div class="card-body">
                        <div class="panel panel-primary">
                            <div class="tab_wrapper first_tab">
                                <ul class="tab_list">
                                    @foreach($languages as $locale => $lang)
                                        <li>{{ $lang }}</li>
                                    @endforeach
                                </ul>
                                <div class="content_wrapper">
                                    @foreach($languages as $locale => $lang)
                                        <div class="tab_content @if(array_key_first($languages) == $locale) active @endif">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Proje Adı ({{ $lang }})</label>
                                                        <input type="text" class="form-control" name="name[{{ $locale }}]" value="{{ $project->getTranslation('name',$locale) }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Proje Açıklaması ({{ $lang }})</label>
                                                        <textarea class="content-{{ $locale }}" name="description[{{ $locale }}]">{!! $project->getTranslation('description',$locale) !!}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Meta Başlığı ({{ $lang }})</label>
                                                        <input type="text" class="form-control" name="meta_title[{{ $locale }}]" value="{{ $project->getTranslation('meta_title',$locale) }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Meta Anahtar Kelimeler ({{ $lang }})</label>
                                                        <input type="text" class="form-control" name="meta_keywords[{{ $locale }}]" value="{{ $project->getTranslation('meta_keywords',$locale) }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label class="form-label">Meta Açıklaması ({{ $lang }})</label>
                                                        <textarea class="form-control" name="meta_description[{{ $locale }}]">{{ $project->getTranslation('meta_description',$locale) }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <button type="submit" class="btn btn-success">Kaydet</button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Proje Görseli</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12 col-sm-12">
{{--                                <input type="file" class="dropify" data-height="250" data-default-file="/storage/{{ $project->images[0]->url  ?? ''}}" name="image"/>--}}
                                <div class="custom-file-container" data-upload-id="myUniqueUploadId">
                                    <label
                                    >Resimler
                                        <a
                                            href="javascript:void(0)"
                                            class="custom-file-container__image-clear"
                                            title="Clear Image"
                                        >&times;</a
                                        ></label
                                    >
                                    <label class="custom-file-container__custom-file">
                                        <input
                                            type="file"
                                            class="custom-file-container__custom-file__custom-file-input"
                                            accept="*"
                                            name="images[]"
                                            multiple
                                            aria-label="Choose File"
                                        />
                                        <span
                                            class="custom-file-container__custom-file__custom-file-control"
                                        ></span>
                                    </label>
                                    <div class="custom-file-container__image-preview"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @foreach($project->images as $image)
            <input name="old_images[]" type="hidden" value="{{ $image->url }}">
        @endforeach
    </form>
@endsection
@push('js')
    <script src="/panel/assets/plugins/select2/select2.full.min.js"></script>
    <script src="/panel/assets/js/select2.js"></script>
    <script src="/panel/assets/plugins/tabs/jquery.multipurpose_tabcontent.js"></script>
    <script src="/panel/assets/js/tabs.js"></script>
    <script src="/panel/assets/plugins/fileupload/js/dropify.js"></script>
    <script src="/panel/assets/js/filupload.js"></script>
    <script src="/panel/assets/plugins/wysiwyag/jquery.richtext.js"></script>
    <script src="https://unpkg.com/file-upload-with-preview@4.1.0/dist/file-upload-with-preview.min.js"></script>
    <script>
        $(function(e) {
            $('.content').richText();
            @foreach($languages as $locale => $lang)
            $('.content-{{ $locale }}').richText();
            @endforeach
        });
        var upload = new FileUploadWithPreview("myUniqueUploadId", {
            showDeleteButtonOnImages: true,
            text: {
                chooseFile: "Dosya Seç",
                browse: "Göz At",
                selectedCount: "Resim Seçildi",
            },
            presetFiles: [
                @foreach($project->images as $image)
                    '/storage/{{ $image->url }}',
                @endforeach
            ],
        });

        window.addEventListener("fileUploadWithPreview:imageDeleted", function (e) {
            document.querySelectorAll('input[name="old_images[]"]').forEach(function (item){
                item.remove()
            })
            console.log(e)
            e.detail.cachedFileArray.forEach(function (item){
                console.log(item)
                if(!item.lastModified){
                    let input = document.createElement('input')
                    input.name = 'old_images[]'
                    input.value = item.name
                    input.type = 'hidden'
                    document.querySelector('#mainForm').append(input)
                }
            })
        });
    </script>
@endpush