@extends('template')

@section('page-title') Manage Loyalty System @endsection

@section('tag-title') Manage Loyalty System @endsection

@section('page-sub-title')

@endsection

@section('main-content')

    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <form method="POST" autocomplete="off" action="{{url('save-loyaly')}}" enctype="multipart/form-data" class="form-horizontal form-label-left input_mask form-step">
                        {{csrf_field()}}
                        <input type="hidden" value="" id="_id" name="_id">
                        <input type="hidden" value="" id="type" name="type">
                        <input type="hidden" value="" id="target" name="target">

                        
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="name" class="control-label">Name <span style="color: red">*</span></label>
                                <input required  class="form-control" value="{{$data->name}}" name="name" id="name"  type="text" >
                            </div>
                        </div>
                        
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="question_type_id" class="control-label">Question type <span style="color: red">*</span></label>
                                <select required id="question_type_id" name="question_type_id" class="form-control">
                                    <option value="">*Choose</option>
                                    @foreach($question_types as $question_type)
                                        <option data-name="{{$question_type->name}}" @if($question_type->id == $data->question_type_id) selected @endif value="{{$question_type->id}}">{{$question_type->label}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="name" class="control-label">Name <span style="color: red">*</span></label>
                                <input required  class="form-control" value="{{$data->name}}" name="name" id="name"  type="text" >
                            </div>
                        </div>

                        <div class="col-sm-12 mt-5">
                            @foreach($ruleConfigs as $question_type_name => $rules)
                                <div class="rule-param"  data-type="{{$question_type_name}}">
                                    @foreach($rules as $k => $options)
                                                                                <div class="row border-bottom py-1">
                                            <div class="col-sm-6">{{ucfirst($label)}}</div>
                                            <div class="col-sm-6">
                                                @if(is_array($options))
                                                    <select id="option_{{$question_type_name}}_{{$k}}" name="option_{{$question_type_name}}_{{$k}}" class="form-control">
                                                        <option value="">*Choose</option>
                                                        @foreach($options as $o)
                                                            <option @if(isset($rule_strategy[$k]) && $rule_strategy[$k] == $o) selected @endif value="{{$o}}">{{ucfirst(str_replace('_', ' ', $o))}}</option>
                                                        @endforeach
                                                    </select>
                                                    @else
                                                    <input value="@if(isset($rule_strategy[$k]) && $rule_strategy[$k] == $o){{$rule_strategy[$k]}}@endif" placeholder="Enter data" id="option_{{$question_type_name}}_{{$k}}" name="option_{{$question_type_name}}_{{$k}}"  class="form-control"/>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>

                        <div class="col-sm-12 mt-3">
                            <button type="submit"  class="btn btn-success action-btn  float-right btn-submit-step">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        label{
            font-weight: bold;
        }

        .table th, .table td{
            padding: 5px 10px;
        }

    </style>

@endsection

@section('page-style')

@endsection

@section('page-script')
    <script>
        $(document).on('change','#question_type_id',function (e) {
            let name = $( "#question_type_id option:selected" ).data('name');
            $('.rule-param').hide();
            $('.rule-param[data-type='+name+']').show();
        });

        $('#question_type_id').change();
    </script>
@endsection