@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Edit service') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Edit service') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div style="float: left">
                <button class="btn btn-rounded btn-dark save-service"
                    style="padding: 10px 50px 10px 50px;">{{ translate('Save') }}</button>
                <button class="btn btn-rounded btn-dark update-service"
                    style="padding: 10px 50px 10px 50px;background-color: #fb763d">{{ translate('Update') }}</button>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <section class="content">

        <div class="row">
            <div class="col-lg-6 col-md-6">
                {!! Form::open(['method' => 'patch', 'action' => ['Admin\ServiceController@update', $service->id], 'files' => true, 'id' => 'edit-service-form']) !!}
                {!! Form::hidden('return_type', 'save', ['id' => 'return_type']) !!}
                <div class="box">
                    <div class="box-body">

                        <div class="form-group">
                            <label for="name">{{ translate('Price') }}<span style="color: red;font-size: 1.2em">*</span>
                            </label>
                            <div>
                                {!! Form::number('price', $service->price, ['class' => 'form-control', 'data-placeholder' => translate('Price')]) !!}
                            </div>
                            @error('price')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="name">{{ translate('Duration') }}
                                    </label>
                                    <div>
                                        {!! Form::number('duration', $service->duration, ['required' => 'required', 'class' => 'form-control', 'data-placeholder' => translate('Duration')]) !!}
                                    </div>
                                    @error('duration')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="duration_type">{{ translate('Duration type') }}
                                    </label>
                                    <div>
                                        {!! Form::select('duration_type', ['hour' => translate('Hour'), 'day' => translate('Day')], $service->duration_type, ['required' => 'required', 'id' => 'subscribtions', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                                    </div>
                                    @error('duration_type')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="title_ar">{{ translate('Arabic title') }}<span
                                            style="color: red;font-size: 1.2em">*</span>
                                    </label>
                                    <div>
                                        {!! Form::text('title_ar', $service->title_ar, ['class' => 'form-control', 'placeholder' => translate('Arabic title')]) !!}
                                    </div>
                                    @error('title_ar')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="title_en">{{ translate('English title') }}<span
                                            style="color: red;font-size: 1.2em">*</span>
                                    </label>
                                    <div>
                                        {!! Form::text('title_en', $service->title_en, ['class' => 'form-control', 'placeholder' => translate('English title')]) !!}
                                    </div>
                                    @error('title_en')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>
                        </div>


                        <div class="form-group">
                            <label for="description_ar">{{ translate('Arabic description') }}<span
                                    style="color: red;font-size: 1.2em">*</span>
                            </label>
                            <div>
                                {!! Form::textarea('description_ar', $service->description_ar, ['class' => 'form-control', 'placeholder' => translate('Arabic description')]) !!}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description_en">{{ translate('English description') }}<span
                                    style="color: red;font-size: 1.2em">*</span>
                            </label>
                            <div>
                                {!! Form::textarea('description_en', $service->description_en, ['class' => 'form-control', 'placeholder' => translate('English description')]) !!}
                            </div>
                        </div>

                    </div>
                </div>
                {!! Form::Close() !!}
            </div>
            <div class="col-lg-6 col-md-6">
                <!-- Start Multi Upload File -->
                <div class="box">
                    <div class="box-header">
                        <h4 class="box-title">{{ translate('Service attaches') }}
                        </h4>
                    </div>
                    <div class="box-body">
                        <!-- ul append images -->
                        <ul class="visualizacao sortable dropzone-previews b-dashed b-1 bg-lightest" style="display: none">
                        </ul>
                        <form action="{{ route('Service.fileupload') }}" class="dropzone" drop-zone=""
                            id="file-dropzone">
                            <div class="fallback">
                                <input name="file" type="file" multiple />
                            </div>
                        </form>
                        <div class="preview" style="display:none;">
                            <li>
                                <div>
                                    <div class="dz-preview dz-file-preview">
                                        <img data-dz-thumbnail />
                                        <div class="dz-progress"><span class="dz-upload"
                                                data-dz-uploadprogress></span>
                                        </div>
                                        <div class="dz-error-message"><span data-dz-errormessage></span></div>
                                    </div>
                                </div>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.save-service').click(function() {
                $('#return_type').val('save')
                $('#edit-service-form').submit();
            });
            $('.update-service').click(function() {
                $('#return_type').val('update')
                $('#edit-service-form').submit();
            });
        })
    </script>
    <script>
        $(document).ready(function() {
            var $sortableList = $('.sortable');
            $sortableList.sortable({
                stop: function(event, ui) {
                    $('.dz-complete').each(function(i) {
                        var data_id = $(this).data('id')
                        var id_sort = data_id + "_" + i;
                        console.log('data_id-- ' + data_id + " || sort --" + i)
                        $("input[data-id=" + data_id + "]").val(id_sort)
                    });
                }
            });

            $('.dz-default').addClass('b-dashed b-1 bg-lightest');
            $('.dropzone-previews').show();
        });
        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#file-dropzone", {
            url: "{{ route('Service.fileupload') }}",
            maxFilesize: 100,
            acceptedFiles: ".jpeg,.jpg,.png,.pdf",
            dictDefaultMessage: `<i style="font-size: 4em" class="fa fa-cloud-upload" aria-hidden="true"></i>
            <p class="ant-upload-text">{{ translate('Click and drag the file to this area to upload') }}</p>`,
            paramName: "uploadfile",
            maxThumbnailFilesize: 99999,
            previewsContainer: '.visualizacao',
            previewTemplate: $('.preview').html(),
            init: function() {
                $.ajax({
                    url: "{{ route('Service.getUploadedFiles') }}",
                    type: 'post',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: {{ $service->id }},
                    },
                    dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        $.each(response, function(key, value) {
                            var mockFile = {
                                id: value.id,
                                name: value.name,
                                size: value.size,
                                sort: value.sort
                            };
                            myDropzone.emit("addedfile", mockFile);
                            myDropzone.emit("thumbnail", mockFile, value.path);
                            myDropzone.emit("complete", mockFile);
                            $(mockFile.previewElement).attr('data-id', value.id);
                            var id_sort = value.id + "_" + value.sort;
                            $('#edit-service-form').append(
                                '<input type="hidden" name="attatches[]" data-id="' +
                                value.id + '" value="' +
                                id_sort + '">');

                        });

                    }
                });
                this.on('completemultiple', function(file, json) {
                    $sortableList.sortable('enable');
                });
                this.on('success', function(file, response) {
                    $(file.previewElement).attr('data-id', response.id);
                    var id_sort = response.id + "_" + response.sort;
                    $('#edit-service-form').append(
                        '<input type="hidden" name="attatches[]" data-id="' + response.id +
                        '" value="' +
                        id_sort + '">');
                    $('.sortable').sortable('enable');

                });

                this.on('addedfile', function(file) {
                    var _this = this;
                    var removeButton = Dropzone.createElement(
                        "<span data-dz-remove class='glyphicon glyphicon-trash del_thumbnail'></span>"
                    );
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var fileName = file.name;
                        var fileid = $(file.previewElement).attr('data-id');
                        $.post(`{{ route('Service.fileupload') }}`, {
                            _token: '{{ csrf_token() }}',
                            name: fileName,
                            id: fileid,
                            type: 'delete'
                        }, function(data) {
                            $('#edit-service-form').find(
                                    'input[name="attatches[]"][data-id="' + data.id +
                                    '"]')
                                .remove();
                        });
                        _this.removeFile(file);
                    });
                    file.previewElement.appendChild(removeButton);
                });

                this.on('drop', function(file) {});
            }
        });
        myDropzone.on("sending", function(file, xhr, formData) {
            formData.append("_token", '{{ csrf_token() }}');
            formData.append("filesize", file.size);
            formData.append("filesize", file.size);
            formData.append("type", 'add');
        });
    </script>
@endsection