@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-option"
                    style="padding: 10px 50px 10px 50px;">{{ translate('Save') }}</button>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        {!! Form::open(['method' => 'post', 'action' => 'Admin\OptionController@store', 'files' => true, 'id' => 'create-option-form']) !!}
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="box">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="name">{{ translate('Free from subscribtion') }}
                            </label>
                            <div>
                                {!! Form::select('option_module', ['option' => translate('Option'), 'module' => translate('Module'), 'option_module' => translate('Option & Module')], null, ['class' => 'form-control select2', 'data-placeholder' => translate('Option | Module')]) !!}
                            </div>
                            @error('option_module')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="name">{{ translate('Free from subscribtion') }}
                            </label>
                            <div>
                                {!! Form::select('free_from_subscribtion', $subscribtions, null, ['class' => 'form-control select2', 'placeholder' => translate('Free from subscribtion')]) !!}
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name">{{ translate('Price') }}
                            </label>
                            <div>
                                {!! Form::number('price', 0.0, ['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="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 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 class="form-group">
                            <label for="type">{{ translate('Type') }} <span style="color: red;font-size: 1.2em">*</span>
                            </label>
                            <div>
                                {!! Form::text('type', null, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Type')]) !!}
                            </div>
                            @error('type')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="subscribtions">{{ translate('Subscribtions') }}
                            </label>
                            <div>
                                {!! Form::select('subscribtions[]', $subscribtions, null, ['required' => 'required', 'id' => 'subscribtions', 'multiple' => 'multiple', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="tenants">{{ translate('Add Exclusiv Tenants') }}
                            </label>
                            <div>
                                {!! Form::select('tenants[]', $tenants, null, ['id' => 'tenants', 'multiple' => 'multiple', 'style' => 'width:100%', 'class' => 'form-control select2']) !!}
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="box">
                    <div class="box-body">
                        <br>
                        <br>
                        <div class="form-group">
                            <label for="description_ar">{{ translate('Arabic description') }}
                            </label>
                            <div>
                                {!! Form::textarea('description_ar', null, ['class' => 'form-control', 'placeholder' => translate('Arabic description')]) !!}
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="form-group">
                            <label for="description_en">{{ translate('English description') }}
                            </label>
                            <div>
                                {!! Form::textarea('description_en', null, ['class' => 'form-control', 'placeholder' => translate('English description')]) !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md">
                <div class="selected-subscribtion-container">

                </div>
            </div>
            <div class="col-md">
                <div class="selected-tenant-container">

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

        {!! Form::Close() !!}
        <!-- Start Multi Upload File -->
        <div class="box">
            <div class="box-header">
                <h4 class="box-title">{{ translate('Option 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('Option.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 -->
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            function removeA(arr) {
                var what, a = arguments,
                    L = a.length,
                    ax;
                while (L > 1 && arr.length) {
                    what = a[--L];
                    while ((ax = arr.indexOf(what)) !== -1) {
                        arr.splice(ax, 1);
                    }
                }
                return arr;
            }
            var selectedSubscribtions = [];
            var selectedtenants = [];
            $('#subscribtions').on('change', function() {
                $.each($("#subscribtions option"), function() {
                    if ($(this).is(':selected') == false) {
                        removeA(selectedSubscribtions, parseInt($(this).val()));
                    }
                });
                $.each($("#subscribtions option:selected"), function() {
                    if (selectedSubscribtions.includes(parseInt($(this).val()))) {} else {
                        selectedSubscribtions.push(parseInt($(this).val()))
                    }

                });
                console.log(selectedSubscribtions);
                updateSubscribtionValues(selectedSubscribtions);
            });
            $('#tenants').on('change', function() {
                $.each($("#tenants option"), function() {
                    if ($(this).is(':selected') == false) {
                        removeA(selectedtenants, parseInt($(this).val()));
                    }
                });
                $.each($("#tenants option:selected"), function() {
                    if (selectedtenants.includes(parseInt($(this).val()))) {} else {
                        selectedtenants.push(parseInt($(this).val()))
                    }

                });
                console.log(selectedtenants);
                updateTenantsValues(selectedtenants);
            });

            function updateSubscribtionValues(selectedSubscribtions) {
                $.ajax({
                    type: "POST",
                    url: `{{ route('Option.getSubscribtionOptionsView') }}`,
                    data: {
                        _token: '{{ csrf_token() }}',
                        selectedSubscribtions: selectedSubscribtions,
                        formData: $('#create-option-form').serializeArray(),
                        option_id: 0
                    },
                    success: function(data) {
                        $('.selected-subscribtion-container').html(data);
                        $('.select2').select2();
                    }
                });
            }

            function updateTenantsValues(selectedtenants) {
                $.ajax({
                    type: "POST",
                    url: `{{ route('Option.getTenantOptionsView') }}`,
                    data: {
                        _token: '{{ csrf_token() }}',
                        selectedtenants: selectedtenants,
                        formData: $('#create-option-form').serializeArray(),
                        option_id: 0
                    },
                    success: function(data) {
                        $('.selected-tenant-container').html(data);
                        $('.select2').select2();
                    }
                });
            }

            $('.save-option').click(function() {
                $('#create-option-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('Option.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-option-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