@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('Add option') }}</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('Add option') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div style="float: left;width: 10%;">
                <button class="btn btn-rounded btn-dark save-service"
                    style="padding: 10px 50px 10px 50px;">{{ translate('Save') }}</button>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                {!! Form::open(['method' => 'post', 'action' => 'Admin\ServiceController@store', 'files' => true, 'id' => 'create-service-form']) !!}
                <div class="box">
                    <div class="box-body">

                        <div class="form-group">
                            <label for="name">{{ translate('Price') }}
                            </label>
                            <div>
                                {!! Form::number('price', 0.0, ['required' => 'required', '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', 0.0, ['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')], null, ['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', null, ['required' => 'required', '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', null, ['required' => 'required', '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', null, ['required' => 'required', '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', null, ['required' => 'required', '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') }}
                    </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>
                <!-- End Multi Upload File -->
            </div>
        </div>

    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.save-service').click(function() {
                $('#create-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.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() {
                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;
                    $('#create-service-form').append(
                        '<input type="hidden" name="attatches[]" data-id="' + response.id +
                        '" value="' +
                        id_sort + '">');
                    $('.sortable').sortable('enable');
                    $('.dropzone-previews').show();

                });
                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('Option.fileupload') }}`, {
                            _token: '{{ csrf_token() }}',
                            name: fileName,
                            id: fileid,
                            type: 'delete'
                        }, function(data) {
                            $('#create-option-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