@extends('layout.default')
@section('content')
    <div class="card card-custom">
        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Metrics | <span style="color: green">create</span></h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ url('/admin/campaign-analyzer/platform/' . $platform->id . '/metrics') }}" class="btn btn-primary font-weight-bolder">Back</a>
            </div>
        </div>
        <form action="{{ url('/admin/campaign-analyzer/platform/' . $platform->id . '/metrics') }}" method="POST">
            @csrf
            <div class="card-body">
                @if ($errors->any())
                    <div class="form-group mb-8">
                        <div class="alert alert-custom alert-default" role="alert">
                            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
                            <div class="alert-t">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="form-group">
                    <label>Title<span class="text-danger">*</span></label>
                    <input required type="text" name="title" value="{{ old('title') }}" class="form-control"/>
                </div>
                <div class="form-group">
                    <label>Type<span class="text-danger">*</span></label>
                    <div>
                        <div class="radio-inline">
                            <label class="radio">
                                <input type="radio" name="type" value="Dropdown" checked {{ (old('type') == "Dropdown") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                Dropdown
                            </label>
                            <label class="radio">
                                <input type="radio" name="type" value="Numeric" {{ (old('type') == "Numeric") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                Numeric
                            </label>
                            <label class="radio">
                                <input type="radio" name="type" value="Hidden" {{ (old('type') == "Hidden") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                Hidden
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group row mt-3 dropdown-hide-show">
                    <div id="kt_repeater_1" class="col-12">
                        <label>Dropdown Values</label>
                        <div class="row">
                            <div data-repeater-list="dropdown_values" class="col-12">
                                <div data-repeater-item class="form-group row align-items-center">
                                    <div class="col-lg-10 form-group">
                                        <input type="text" class="form-control" value="{{ old('type_value') }}" name="dropdown_value"/>
                                    </div>
                                    <div class="col-lg-2 form-group">
                                        <a href="javascript:;" data-repeater-delete="" class="btn  font-weight-bolder btn-light-danger col-12">
                                            <i class="la la-trash-o"></i>Delete
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <a href="javascript:;" data-repeater-create="" class="add-button btn btn-sm font-weight-bolder btn-light-primary col-12">
                                    <i class="la la-plus"></i>Add
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group numeric-hide-show" style="display: none">
                    <label>Unit Type<span class="text-danger">*</span></label>
                    <div>
                        <div class="radio-inline">
                            <label class="radio">
                                <input type="radio" name="numeric_value" value="number" checked {{ (old('numeric_value') == "number") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                number
                            </label>
                            <label class="radio">
                                <input type="radio" name="numeric_value" value="percent" {{ (old('numeric_value') == "percent") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                percent
                            </label>
                            <label class="radio">
                                <input type="radio" name="numeric_value" value="money" {{ (old('numeric_value') == "money") ? 'checked' : ''}}>
                                <span class="ml-3"></span>
                                money
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group row mt-3 hidden-hide-show" style="display: none">
                    <div class="form-group col-4">
                    <label>Numeric List</label>
                    <select class="form-control" name="metric_id_1">
                        <option value="">Click to Select</option>
                        @foreach($platform->metrics->where('type', 'Numeric') as $metric)
                            <option value="{{ $metric->id }}">{{$metric->title}}</option>
                        @endforeach
                    </select>
                    </div>
                    <div class="form-group col-4">
                        <label>Math Operators</label>
                        <select class="form-control" name="math_operator">
                            <option value="">Click to Select</option>
                            <option value="*">* (multiplication)</option>
                            <option value="/">/ (division)</option>
                            <option value="+">+ (addition)</option>
                            <option value="-">- (subtraction)</option>
                        </select>
                    </div>
                    <div class="form-group col-4">
                    <label>Numeric List</label>
                    <select class="form-control" name="metric_id_2">
                        <option value="">Click to Select</option>
                        @foreach($platform->metrics->where('type', 'Numeric') as $metric)
                            <option value="{{ $metric->id }}">{{$metric->title}}</option>
                        @endforeach
                    </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Description<span class="text-danger">*</span></label>
                    <input required type="text" name="description" value="{{ old('description') }}" class="form-control"/>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary mr-2">Send</button>
                <a href="{{ url('/admin/campaign-analyzer/platform/' . $platform->id . '/metrics') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('#kt_repeater_1').repeater({
                initEmpty: false,

                defaultValues: {
                    'text-input': 'foo'
                },

                show: function () {
                    $(this).slideDown();
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });

            $('#kt_repeater_2').repeater({
                initEmpty: false,

                defaultValues: {
                    'text-input': 'foo'
                },

                show: function () {
                    $(this).slideDown();
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
        });

        $('input[type=radio][name=type]').change(function() {
            if (this.value == 'Dropdown') {
                $('.dropdown-hide-show').show('fast');
                $('.numeric-hide-show').hide('fast');
                $('.hidden-hide-show').hide('fast');
            }
            else if (this.value == 'Numeric') {
                $('.numeric-hide-show').show('fast');
                $('.dropdown-hide-show').hide('fast');
                $('.hidden-hide-show').hide('fast');
            }
            else if(this.value == 'Hidden') {
                $('.hidden-hide-show').show('fast');
                $('.dropdown-hide-show').hide('fast');
                $('.numeric-hide-show').hide('fast');
            }
        });
    </script>
@endsection