@extends('layout.default')
@section('content')
    <div class="card card-custom">
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <h3 class="card-label">Campaign Analyzer</h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ url('/members-area/campaign-analyzer/platforms') }}" class="btn btn-primary font-weight-bolder mr-2">Back</a>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="wizard wizard-1" id="kt_wizard" data-wizard-state="first" data-wizard-clickable="false">
                <div class="row justify-content-center my-10 px-8 my-lg-15 px-lg-10">
                    <div class="col-xl-12 col-xxl-7">
                        <form class="form fv-plugins-bootstrap fv-plugins-framework" id="kt_form">
                            <div class="pb-5" data-wizard-type="step-content" data-wizard-state="current">
                                <h2 class="mb-10 font-weight-bold text-dark">{{ $platform->title }}</h2>
                                <p class="mb-10 text-dark">{!! $platform->instructions !!}</p>
                                @foreach($platform->metrics as $key=>$metric)
                                <div class="form-group fv-plugins-icon-container">
                                    @if($metric->type != 'Hidden')
                                        <h4 class="text-center text-dark"><b>{{ $key+1 . '. ' . $metric->title }}</b></h4>
                                        <p class="text-center text-muted mb-5">{{ $metric->description }}</p>
                                    @endif
                                    @if($metric->type == 'Dropdown')
                                        <select required name="value_{{$metric->id}}" class="form-control form-control-lg">
                                            <option value="">Select value</option>
                                            @foreach($metric->type_values as $type_value)
                                                <option value="{{ $type_value }}">{{ $type_value }}</option>
                                            @endforeach
                                        </select>
{{--                                        <span class="form-text text-muted">Please select a value.</span>--}}
                                    @elseif($metric->type == 'Numeric')
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" {{ $metric->type_values == 'number' ? 'style=display:none' : '' }}>
                                                    @switch($metric->type_values)
                                                        @case('number')@break
                                                        @case('money') $ @break
                                                        @case('percent') % @break
                                                    @endswitch
                                                </span>
                                            </div>
                                            <input type="text" class="form-control form-control-lg set-mask-{{ $metric->type_values }}" aria-label="Text input with dropdown button" name="value_{{$metric->id}}">
                                        </div>
                                        @switch($metric->type_values)
                                            @case('number') <span class="form-text text-muted">You can use dot to set decimals.</span>  @break
{{--                                            @case('money') <span class="form-text text-muted">You can use negative values.</span> @break--}}
                                            @case('percent') <span class="form-text text-muted">You can use dot to set decimals.</span> @break
                                        @endswitch
                                    @else
                                        <input type="hidden" class="form-control form-control-lg" aria-label="Text input with dropdown button" name="value_{{$metric->id}}" value="0">
                                    @endif
                                    <div class="fv-plugins-message-container"></div>
                                </div>
                                @endforeach
                            </div>
                            <div class="d-flex justify-content-between border-top mt-5 pt-10">
                                <div>
                                    <button data-token="{{ csrf_token() }}" type="button" class="btn btn-success send-button font-weight-bolder text-uppercase px-9 py-4">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script type="text/javascript" src="{{ url('js/mask-negative.js') }}"></script>
    <script type="text/javascript" src="{{ url('js/mask.js') }}"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('.set-mask-number').mask("Z", {translation: {'Z': {pattern: /[0-9,.]/, recursive: true}}});
            $('.remove-number').remove();
            $('.set-mask-money').maskMoney({thousands:',', decimal:'.', allowNegative: true, allowEmpty: true});
            $('.set-mask-percent').mask("Z", {translation: {'Z': {pattern: /[0-9,.]/, recursive: true}}});

        });

        $('.send-button').on('click', function() {
            var items = $('#kt_form').serializeObject();
            $.ajax({
                url: window.location.pathname,
                type: 'post',
                data: {
                    _method: 'post',
                    _token: $(this).data('token'),
                    _data: items
                },
                success: function(res) {
                    $('.response-box').remove();
                    $('#kt_form').append(
                        '<div class="form-group response-box mt-5 p-10">' +
                        '<h2 class="text-center text-dark"><b>Responses:</b></h4>' +
                        '</div>'
                    );
                    if(Array.isArray(res)) {
                        res.forEach(element => {
                            $('.response-box').append(
                                '<div class="bg-light-o-100 form-group fv-plugins-icon-container mt-10 p-10">' +
                                '<h4 class="text-center text-dark"><b>' + element + '</b></h4>' +
                                '</div>'
                            );
                        });
                    } else {
                        $('.response-box').append(
                            '<div class="bg-light-o-100 form-group fv-plugins-icon-container mt-10 p-10">' +
                            '<h4 class="text-center text-dark"><b>' + res + '</b></h4>' +
                            '</div>'
                        );
                    }
                },
                error: function(){
                    console.log('error');
                },
            });
        });

//serialize json
        (function($){
            $.fn.serializeObject = function(){

                var self = this,
                    json = {},
                    push_counters = {},
                    patterns = {
                        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                        "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                        "push":     /^$/,
                        "fixed":    /^\d+$/,
                        "named":    /^[a-zA-Z0-9_]+$/
                    };


                this.build = function(base, key, value){
                    base[key] = value;
                    return base;
                };

                this.push_counter = function(key){
                    if(push_counters[key] === undefined){
                        push_counters[key] = 0;
                    }
                    return push_counters[key]++;
                };

                $.each($(this).serializeArray(), function(){

                    // Skip invalid keys
                    if(!patterns.validate.test(this.name)){
                        return;
                    }

                    var k,
                        keys = this.name.match(patterns.key),
                        merge = this.value,
                        reverse_key = this.name;

                    while((k = keys.pop()) !== undefined){

                        // Adjust reverse_key
                        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                        // Push
                        if(k.match(patterns.push)){
                            merge = self.build([], self.push_counter(reverse_key), merge);
                        }

                        // Fixed
                        else if(k.match(patterns.fixed)){
                            merge = self.build([], k, merge);
                        }

                        // Named
                        else if(k.match(patterns.named)){
                            merge = self.build({}, k, merge);
                        }
                    }

                    json = $.extend(true, json, merge);
                });

                return json;
            };
        })(jQuery);
    </script>
@endsection