@extends('admin.layout.master')

@section('style')
    <link href="{{asset('assets/admin/js/datepicker/dist/datepicker.min.css')}}" rel="stylesheet" type="text/css"/>
@stop

@section('body')
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title ">
                    {{$page_title}}
                </h3>
                <div class="tile-body">
                    <form method="POST" action="{{route('projekt.update', $job->id)}}" name="editForm" enctype="multipart/form-data">
                        {{ csrf_field() }}

                        <div class="row">
<div class="col-md-4">
    <h6>Status</h6>
    <select name="location" id="location" class="form-control">
        <option value="{{ $job->location }}" selected>{{ $job->location ?: 'Select status' }}</option>
        @if($job->location !== 'Funding')
            <option value="Funding">Funding</option>
        @endif
        @if($job->location !== 'Closed')
            <option value="Closed">Closed</option>
        @endif
    </select>
    @if ($errors->has('location'))
        <div class="error">{{ $errors->first('location') }}</div>
    @endif
</div>
                            <div class="col-md-4">
                                <h6> Title</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" value="{{ $job->title }}" name="title">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-font"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('title'))
                                    <div class="error">{{ $errors->first('title') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4">
                                <h6>Category</h6>
                                <select name="cat_id" id="cat_id" class="form-control">
                                    <option value="">Select Category</option>
                                    @foreach($category as $data)
                                        <option value="{{$data->id}}">{{$data->name}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('cat_id'))
                                    <div class="error">{{ $errors->first('cat_id') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Campaign Owner</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" value="{{ $job->campaignowner }}" name="campaignowner">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-dollar-sign"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('campaignowner'))
                                    <div class="error">{{ $errors->first('campaignowner') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Campaign Count</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" value="{{ $job->campaigncount }}" name="campaigncount">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-dollar-sign"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('campaigncount'))
                                    <div class="error">{{ $errors->first('campaigncount') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Campaign Addresse</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" value="{{ $job->campaignadddress }}" name="campaignadddress">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-dollar-sign"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('campaignadddress'))
                                    <div class="error">{{ $errors->first('campaignadddress') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Amount Sold</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" value="{{ $job->salary }}" name="salary">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-dollar-sign"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('salary'))
                                    <div class="error">{{ $errors->first('salary') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Backers</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" value="{{ $job->backers }}" name="backers">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-dollar-sign"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('backers'))
                                    <div class="error">{{ $errors->first('backers') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Campaign Percent</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" name="campaignpercent" value="{{ $job->campaignpercent }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-calendar-alt"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('campaignpercent'))
                                    <div class="error">{{ $errors->first('campaignpercent') }}</div>
                                @endif
                            </div>
                            <div class="col-md-4 mt-2">
                                <h6>Campaign End Days</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control input-lg" name="campaignende" value="{{ $job->campaignende }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="fa fa-calendar-alt"></i>
                                        </span>
                                    </div>
                                </div>
                                @if ($errors->has('campaignende'))
                                    <div class="error">{{ $errors->first('campaignende') }}</div>
                                @endif
                            </div>
                            <div class="col-md-12 mt-2">
                                <h6>Short Story</h6>
                                <textarea name="short_story" class="w-100" id="short_story">{{ $job->short_story }}</textarea>
                                @if ($errors->has('short_story'))
                                    <div class="error">{{ $errors->first('short_story') }}</div>
                                @endif
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-md-6">
                                <h6>Image</h6>
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new thumbnail" style="height: 150px;"
                                         data-trigger="fileinput">
                                        @if($job->image !=  null)
                                        <img style="height: 150px"
                                             src="{{asset('assets/images/projekt/'.$job->image)}}" alt="...">
                                        @else
                                        <img style="height: 150px" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=Image" alt="...">
                                            @endif
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-height: 150px"></div>
                                    <div>
                                                <span class="btn btn-info btn-file">
                                                    <span class="fileinput-new bold uppercase"><i class="fa fa-file-image-o"></i> Select image</span>
                                                    <span class="fileinput-exists bold uppercase"><i class="fa fa-edit"></i> Change</span>
                                                    <input type="file" name="image" accept="image/*" >
                                                </span>
                                        <a href="#" class="btn btn-danger fileinput-exists bold uppercase" data-dismiss="fileinput"><i class="fa fa-trash"></i> Remove</a>
                                    </div>
                                </div>
                                @if ($errors->has('image'))
                                    <div class="error">{{ $errors->first('image') }}</div>
                                @endif
                            </div>
							


<div class="col-md-12 mt-2">
    <label class="form-label">Additional images</label>
    <div class="row">
        @if(!empty($job->dopimage))
            @php
                $existingImages = explode(',', $job->dopimage); // Перетворюємо рядок у масив
            @endphp
            @foreach($existingImages as $img)
                <div class="me-2" style="border:1px solid #e5e5e5;padding: 5px;height: 150px;width: 150px;background:url({{ asset('assets/images/projekt/' . trim($img)) }});background-size:cover;">
                    <button type="button" class="btn btn-danger btn-sm remove-image" data-filename="{{ trim($img) }}">х</button>
                </div>
            @endforeach
        @endif
    </div>
    <input type="hidden" name="deleted_images" id="deletedImages">
</div>							

<div class="col-md-12 mt-2">
    <label class="form-label">Choose an image</label>
    <input type="file" name="dopimage[]" id="dopimage" accept="image/*" multiple class="form-control">


    <div id="imagePreview" class="row mt-2"></div>
</div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <h6>Description</h6>

                                <textarea name="description" rows="6"
                                          class="form-control my-editor">{{ $job->description }}</textarea>
                                @if ($errors->has('description'))
                                    <div class="error">{{ $errors->first('description') }}</div>
                                @endif
                            </div>

                        </div>
                        <br>
                        <div class="row">
                            <hr/>
                            <div class="col-md-12 ">
                                <button type="submit" class="btn btn-primary btn-block btn-lg">Update</button>
                            </div>
                        </div>

                        <br>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="{{ asset('assets/admin/js/bootstrap-fileinput.js') }}"></script>
    <script src="{{ asset('assets/admin/js/tinymce/tinymce.min.js') }}" type="text/javascript"></script>
    <script>
	document.forms['editForm'].elements['cat_id'].value = {{$job->cat_id}}
        var editor_config = {
            path_absolute: "/",
            selector: "textarea.my-editor",
            plugins: [
                "advlist autolink lists link image charmap print preview hr pagebreak",
                "searchreplace wordcount visualblocks visualchars code",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons paste textcolor colorpicker textpattern"
            ],
            toolbar: 'undo redo | styleselect | forecolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview',
            relative_urls: false,
            height: 250,
            language: '{{ app()->getLocale() }}',
        };

        tinymce.init(editor_config);
    </script>
    <script src="{{ asset('assets/admin/js/datepicker/dist/datepicker.min.js') }}" type="text/javascript"></script>
    <script>
        $('[data-toggle="datepicker"]').datepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1
        });
    </script>

<script>
document.getElementById('dopimage').addEventListener('change', function(event) {
    let previewContainer = document.getElementById('imagePreview');
    previewContainer.innerHTML = ''; // Очищаємо контейнер перед додаванням нових зображень

    let files = Array.from(event.target.files);
    let newFileList = new DataTransfer(); // Створюємо новий об'єкт для файлів

    files.forEach((file, index) => {
        let reader = new FileReader();
        reader.onload = function(e) {
            let imgContainer = document.createElement('div');
            imgContainer.className = 'position-relative d-inline-block m-1';

            let imgElement = document.createElement('img');
            imgElement.src = e.target.result;
            imgElement.className = 'img-thumbnail';
            imgElement.style.height = '100px';

            let removeBtn = document.createElement('button');
            removeBtn.innerHTML = '&times;';
            removeBtn.className = 'btn btn-danger btn-sm position-absolute';
            removeBtn.style.top = '5px';
            removeBtn.style.right = '5px';
            removeBtn.style.borderRadius = '50%';
            removeBtn.style.padding = '0px 7px';

            removeBtn.addEventListener('click', function() {
                imgContainer.remove(); // Видаляємо прев'ю
                updateFileList(index); // Видаляємо з DataTransfer
            });

            imgContainer.appendChild(imgElement);
            imgContainer.appendChild(removeBtn);
            previewContainer.appendChild(imgContainer);
        };
        reader.readAsDataURL(file);

        newFileList.items.add(file); // Додаємо файл у новий список
    });

    event.target.files = newFileList.files; // Оновлюємо файли у полі input

    function updateFileList(indexToRemove) {
        let tempList = new DataTransfer();
        Array.from(newFileList.files).forEach((file, index) => {
            if (index !== indexToRemove) {
                tempList.items.add(file);
            }
        });

        newFileList = tempList;
        document.getElementById('dopimage').files = newFileList.files; // Оновлюємо input
    }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    let deletedImages = [];

    document.querySelectorAll('.remove-image').forEach(button => {
        button.addEventListener('click', function () {
            let filename = this.getAttribute('data-filename'); // Отримуємо ім'я файлу
            deletedImages.push(filename); // Додаємо в масив

            document.getElementById('deletedImages').value = deletedImages.join(','); // Записуємо у приховане поле

            this.parentElement.remove(); // Видаляємо картку із зображенням
        });
    });
});
</script>
@stop