@extends('admin.layout')
@section('content')
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title">{{ translate('Add product') }}</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"><a
                                    href="{{ route('Product.index') }}">{{ translate('Products') }}</a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Add digital product') }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    @php
    $currency_name = currency_sympol()['name'];
    @endphp
    <!-- Main content -->
    <section class="content">
        {!! Form::open(['method' => 'post', 'action' => 'Admin\ProductController@storeDigital', 'id' => 'choice_form', 'files' => true, 'class' => 'form_to_submit']) !!}
        <div class="row">
            <div class="col-xl-12 col-12">
                <div class="box box-slided-up box box-solid bg-warning orang-bg">
                    <div class="box-header with-border with-border orang-bg">
                        <h4 class="box-title">
                            {{ translate('basic information') }}
                        </h4>
                        <ul class="box-controls pull-right">
                            <li><a class="box-btn-slide" href="#"></a></li>
                        </ul>
                    </div>
                    <div class="box-body" style="display: block;">
                        <div class="row">
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="title">
                                        {{ translate('Title') }}
                                        <span class="text-danger">*</span>
                                    </label>

                                    <div>
                                        {!! Form::text('title', null, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Title')]) !!}
                                    </div>
                                    @error('title')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-lg-5 col-12">
                                <div class="form-group">
                                    <label for="sku">{{ translate('Sku') }}

                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        {!! Form::text('sku', null, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Sku')]) !!}
                                    </div>
                                    @error('sku')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-1 col-12">
                                <div class="form-group">
                                    <label for="sku">{{ translate('arrangement') }}


                                    </label>
                                    <div>
                                        {!! Form::text('arrangement', 1, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('arrangement')]) !!}
                                    </div>
                                    @error('sku')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>


                            @if (Session::get('tenant_subscribtion_data')['product_label']['belongs_to_subscribtion'] == true && Session::get('tenant_controle_modules')['product_label'] == 1)
                                <div class="col-lg-8 col-12">
                                    <div class="form-group">
                                        <label for="label_text">{{ translate('Label text') }}

                                        </label>
                                        <div>
                                            {!! Form::text('label_text', null, ['class' => 'form-control', 'placeholder' => translate('Label text')]) !!}
                                        </div>
                                        @error('label_text')
                                            <div class="badge badge-danger text-center" style="width: 100%">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-4 col-12">
                                    <div class="form-group">
                                        <label for="label_color">{{ translate('Label color') }}
                                        </label>
                                        <div>
                                            {!! Form::color('label_color', null, ['class' => 'form-control', 'placeholder' => translate('Label color')]) !!}
                                        </div>
                                        @error('label_color')
                                            <div class="badge badge-danger text-center" style="width: 100%">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            @endif



                            <div class="col-lg-6 col-6">
                                <div class="form-group" id="category">
                                    <label for="name">{{ translate('Categories') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        <select class="form-control select2" name="categories[]" id="category-id" required
                                            multiple>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">
                                                    {{ $category->getTranslation('title') }}
                                                </option>
                                                @foreach ($category->childrenCategories as $childCategory)
                                                    @include('categories.child_category', ['child_category' =>
                                                    $childCategory , 'category_id' => null])
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('category_id')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror

                                </div>
                            </div>


                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label for="name">{{ translate('Select Offer Group') }}
                                    </label>
                                    <div>
                                        <select class="form-control select2" name="offer_group_id" id="offer_group_id">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-3">
                                <div class="form-group text-center" style="margin-top: 3em">
                                    <div class="checkbox">
                                        {!! Form::checkbox('published', null, 0, ['id' => 'Checkbox_2']) !!}
                                        <label for="Checkbox_2">{{ translate('Published') }}</label>
                                    </div>

                                </div>
                            </div>
                            
                            <div class="col-lg-12 col-12">
                                <div class="form-group">
                                    <label for="short_desc">{{ translate('Short description') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        {!! Form::textarea('short_desc', null, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Short description')]) !!}
                                    </div>
                                    @error('short_desc')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-12 col-12">
                                <div class="form-group">
                                    <label for="description">{{ translate('Description') }}
                                    </label>
                                    <div>
                                        {!! Form::textarea('description', null, ['id' => 'e1', 'class' => 'form-control', 'placeholder' => translate('Description')]) !!}
                                    </div>
                                    @error('description')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md col-12">
                        <div class="box box-slided-up box box-solid bg-warning orang-bg">
                            <div class="box-header with-border with-border orang-bg">
                                <h4 class="box-title">
                                    {{ translate('price + stock') }}
                                </h4>
                                <ul class="box-controls pull-right">
                                    <li><a class="box-btn-slide" href="#"></a></li>
                                </ul>
                            </div>
                            <div class="box-body" style="display: block;">
                                <div class="row">
                                    <div class="col-lg-6 col-6 ">
                                        <div class="form-group">
                                            <label for="short_desc_en">{{ translate('Unit price') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group">
                                                {!! Form::number('unit_price', null, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Unit price')]) !!}
                                                <span class="input-group-append">
                                                    <div class="btn bg-secondary btn-rounded btn-sm"
                                                        style="color: #757575;">
                                                        {{ $currency_name }}</div>
                                                </span>
                                            </div>
                                            @error('unit_price')
                                                <div class="badge badge-danger text-center" style="width: 100%">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-6">
                                        <div class="form-group">
                                            <label for="cost_price">{{ translate('Cost Price') }}
                                            </label>
                                            <div class="input-group">
                                                {!! Form::number('cost_price', null, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Cost Price')]) !!}
                                                <span class="input-group-append">
                                                    <div class="btn bg-secondary btn-rounded btn-sm "
                                                        style="color: #757575;">
                                                        {{ $currency_name }}</div>
                                                </span>
                                            </div>
                                            @error('cost_price')
                                                <div class="badge badge-danger text-center" style="width: 100%">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-6">
                                        <div class="form-group">
                                            <label for="market_price">{{ translate('Market Price') }}
                                            </label>
                                            <div class="input-group">
                                                {!! Form::number('market_price', null, ['min' => '0', 'step' => '0.01', 'required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Cost Price')]) !!}
                                                <span class="input-group-append">
                                                    <div class="btn bg-secondary btn-rounded btn-sm "
                                                        style="color: #757575;">
                                                        {{ $currency_name }}</div>
                                                </span>
                                            </div>
                                            @error('market_price')
                                                <div class="badge badge-danger text-center" style="width: 100%">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-12 ">
                                        <div class="">
                                            <div class="row ">
                                                <div class="col-9">
                                                    <div class="form-group">
                                                        <label for="short_desc_en">{{ translate('Discount') }}
                                                        </label>
                                                        <div>
                                                            {!! Form::number('discount', 0, ['min' => '0', 'step' => '0.01', 'class' => 'form-control', 'placeholder' => translate('Discount')]) !!}
                                                        </div>
                                                        @error('discount')
                                                            <div class="badge badge-danger text-center" style="width: 100%">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <label for="short_desc_en">
                                                        {{ translate('Discount type') }}
                                                    </label>
                                                    <div>
                                                        {!! Form::select('discount_type', ['amount' => translate('Amount'), 'percent' => translate('Percent')], null, ['class' => 'form-control']) !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="col-md col-12">
                        <div class="box box-slided-up box box-solid bg-warning orang-bg">
                            <div class="box-header with-border with-border orang-bg">
                                <h4 class="box-title">
                                    {{ translate('Digital Source') }}
                                </h4>
                                <ul class="box-controls pull-right">
                                    <li><a class="box-btn-slide" href="#"></a></li>
                                </ul>
                            </div>
                            <div class="box-body" style="display: block;">
                                <div class="row">
                                    <div class="col-md-5 col-6 mx-auto">
                                        <div class="form-group">
                                            <label for="meta_description">{{ translate('Digital Source') }}
                                            </label>
                                            <div class="custom-file-container">
                                                <div class="custom-file">
                                                    <input type="file" name="digital_source"
                                                        class="custom-file-input-source" id="digital_source">
                                                    <label class="custom-file-label"
                                                        for="digital_source">{{ translate('Digital Source') }}</label>
                                                </div>
                                                <div class="bg-lightest p-10 rounded5 dvPreview text-center"
                                                    style="width: 100%;margin-top: 1em;height: 10em;">
                                                    <img style="max-width: 100%;height: 100%"
                                                        src="{{ url('/images/noimg.png') }}" alt="">
                                                </div>
                                            </div>
                                            @error('digital_source')
                                                <div class="badge badge-danger text-center" style="width: 100%">
                                                    {{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                @if (Session::get('tenant_subscribtion_data')['meta_data']['belongs_to_subscribtion'] == true && Session::get('tenant_controle_modules')['meta_data'] == 1)
                    <div class="box box-slided-up box box-solid bg-warning orang-bg">
                        <div class="box-header with-border with-border orang-bg">
                            <h4 class="box-title">
                                {{ translate('Meta') }}
                                <span class="text-mute">
                                    {{ translate('SEO results control what you see when this product is displayed in a search engine') }}
                                </span>
                            </h4>
                            <ul class="box-controls pull-right">
                                <li><a class="box-btn-slide" href="#"></a></li>

                            </ul>
                        </div>
                        <div class="box-body" style="display: block;">
                            <div class="row">
                                <div class="col-md-8 col-12">
                                    <div class="row">
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label for="meta_title">{{ translate('Meta title') }}
                                                </label>
                                                <div>
                                                    {!! Form::text('meta_title', null, ['class' => 'form-control', 'placeholder' => translate('Meta title')]) !!}
                                                </div>
                                                @error('meta_title')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label for="meta_description">{{ translate('Meta description') }}
                                                </label>
                                                <div>
                                                    {!! Form::textarea('meta_description', null, ['rows' => 4, 'class' => 'form-control', 'placeholder' => translate('Meta description')]) !!}
                                                </div>
                                                @error('meta_description')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-12">
                                    <div class="row">
                                        <div class="col-md-12 col-12">
                                            <div class="form-group">
                                                <label for="meta_description">{{ translate('Meta Image') }}
                                                </label>
                                                <div class="custom-file-container">
                                                    <div class="custom-file">
                                                        <input type="file" name="meta_image" class="custom-file-input"
                                                            id="meta_image">
                                                        <label class="custom-file-label"
                                                            for="meta_image">{{ translate('Meta image') }}</label>
                                                    </div>
                                                    <div class="bg-lightest p-10 rounded5 dvPreview text-center"
                                                        style="width: 100%;margin-top: 1em;height: 10em;">
                                                        <img style="max-width: 100%;height: 100%"
                                                            src="{{ url('/images/noimg.png') }}" alt="">
                                                    </div>
                                                </div>
                                                @error('meta_image')
                                                    <div class="badge badge-danger text-center" style="width: 100%">
                                                        {{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                {!! Form::Close() !!}
                <!-- Start Multi Upload File -->
                <div class="box box-slided-up box box-solid bg-warning orang-bg">
                    <div class="box-header with-border with-border orang-bg">
                        <h4 class="box-title">{{ translate('Product attaches') }}
                            <span class="text-danger">*</span>
                        </h4>
                        <ul class="box-controls pull-right">
                            <li><a class="box-btn-slide" href="#"></a></li>
                        </ul>
                    </div>
                    <div class="box-body" style="display: block;">
                        <!-- ul append images -->
                        <ul class="visualizacao sortable dropzone-previews b-dashed b-1 bg-lightest" style="display: none">
                        </ul>
                        <form action="{{ route('Product.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('modal')
    <div class="modal modal-danger fade" id="error-modal-danger">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <div class="modal-header">
                    <h4 class="modal-title">{{ translate('Danger Modal') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    @if (count($errors) > 0)
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert"
                                    aria-hidden="true">&times;</button>
                                {{ $error }}
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div id="basic-requires-model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
        aria-hidden="true">
        <div class="modal-dialog" style="margin-top: 15em;">
            <div class="modal-content">
                <button style="width: fit-content;margin: .5em;" type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×</button>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 mx-auto text-center">
                            <h4 id="UpgradLimitModelH42" style="color: chocolate">
                                {{ translate('You should add at least one category to add product') }}
                            </h4>
                            <br>
                            <a class="btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                href="{{ route('Category.index') }}">{{ translate('Add Category') }}</a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        @if ($categoriesCount <= 0)
            $('#basic-requires-model').modal();
        @endif
        @if (count($errors) > 0)
            $('#error-modal-danger').modal();
        @endif
        CKEDITOR.replace('e1', {
            language: '{{ App::getLocale() }}'
        });
        $('#header_to_save_form').show();
        $('.select2').select2({
            allowClear: true,
            placeholder: "{{ translate('Search') }}"
        });
        var selected_categories = [];
        $('#category-id').on('select2:select', function(e) {
            selected_categories.push(e.params.data.id);
            $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                _token: '{{ csrf_token() }}',
                selected_categories: selected_categories
            }, function(data) {
                $('#offer_group_id').html(null);
                $.each(data, function(i, item) {
                    $('#offer_group_id').append($('<option>', {
                        value: i,
                        text: item
                    }));
                });
            });
        });
        $('#category-id').on("select2:unselect", function(e) {
            var removeItemIndex = selected_categories.indexOf(e.params.data.id);
            if (removeItemIndex != -1) selected_categories.splice(removeItemIndex, 1);
            console.log(selected_categories);
            $.post(`{{ route('OfferGroup.getofferGroupByCategory') }}`, {
                _token: '{{ csrf_token() }}',
                selected_categories: selected_categories
            }, function(data) {
                console.log(data);
                $('#offer_group_id').html(null);
                $.each(data, function(i, item) {
                    $('#offer_group_id').append($('<option>', {
                        value: i,
                        text: item
                    }));
                });
            });
        });
    </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('Product.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>
            <p class="ant-upload-hint">{{ translate('Single or group lift support') }}</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;
                    $('.form_to_submit').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('Product.fileupload') }}`, {
                            _token: '{{ csrf_token() }}',
                            name: fileName,
                            id: fileid,
                            type: 'delete'
                        }, function(data) {
                            $('.form_to_submit').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