@section('script')
    <script>
        $('.card-title input[type=checkbox]').change(function () {
            $(this).parents('.card:first').CardWidget($(this).prop('checked') ? 'expand' : 'collapse');
        });
        $('input[name="main_game_mechanism"]').on('change', function (e) {
            var txt = $(e.currentTarget).siblings('label:first').text()
            var $el = $('input[name="main_game_qty"]').parents('.form-group:first').find('.form-label:first');
            if (!$el.data('orig_label')) {
                $el.data('orig_label', $el.text());
            }
            $el.text(txt + ' ' + $el.data('orig_label'));
        }).filter(':checked').trigger('change');

        const checkboxes = ['#offline_eng', '#social_follow', '#app_install', '#take_a_picture', '#upload_receipt'];
        checkboxes.forEach(function(id){
            $(id).on('change',function(e){
                const $target = $(e.currentTarget);
                const is_checked = $target.prop('checked');
                const $card = $($target.parents('.card').get(0));
                $card[is_checked?'removeClass':'addClass']('collapsed-card');
                $card.find('.card-body')[is_checked?'show':'hide']();
            })
        })
    </script>
@endsection


<form class="form-horizontal" method="POST"
      {{--      action="{{ route('admin.settings.edit.business_account') }}"--}}
      autocomplete="off" enctype="multipart/form-data">
    @csrf

    @php $form = config('admin.settings.gamification')@endphp

    @component('admin.components.card', ['header'=> 'Home Page','help'=>'gamification' ])
        @php
            $inner_class = 'w-100 bg-gray-light shadow-none border';
        @endphp

        <div class="col-12">
            @component('admin.components.card', ['header'=> 'Main Game', 'class'=>$inner_class ])

                @php $id = 'main_game_type'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="form-group">
                        @php $games = $form['main_game_type']['input'];  @endphp
                        @foreach($games as $gid => $name)
                            <div class="custom-control custom-radio mx-2">
                                <input class="custom-control-input" type="radio" id="{{$id.'_'.$gid}}"
                                       name="{{$id}}" value="{{$gid}}" {{$loop->first? 'checked':''}}>
                                <label for="{{$id.'_'.$gid}}" class="custom-control-label">{{$name}}</label>
                            </div>
                        @endforeach
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                <div class="col-sm-6">
                    @php $id = 'main_game_mechanism'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="form-row">
                            @foreach($form[$id]['input'] ?? [] as $key => $name)
                                <div class="col-auto">
                                    <div class="custom-control custom-radio mx-2">
                                        <input class="custom-control-input" type="radio" id="{{$id.'_'.$key}}"
                                            name="{{$id}}" value="{{$key}}" {{$loop->first? 'checked':''}}>
                                        <label for="{{$id.'_'.$key}}" class="custom-control-label">{{$name}}</label>
                                    </div>
                                </div>
                            @endforeach
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        </div>
                    @endcomponent

                    @php $id = 'main_game_qty'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                </div>
            @endcomponent

        </div>

        <div class="col-12">
            @component('admin.components.card', ['collapse' => true, 'header' => 'Customize Game Chances', 'class' => $inner_class])
                @php $id = 'chance_expiration'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="form-group">
                        @foreach($form[$id]['input'] ?? [] as $key => $name)
                            <div class="custom-control custom-radio mx-2">
                                <input class="custom-control-input" type="radio" id="{{$id.'_'.$key}}"
                                    name="{{$id}}" value="{{$key}}" {{$loop->first? 'checked':''}}>
                                <label for="{{$id.'_'.$key}}" class="custom-control-label">{{$name}}</label>
                            </div>
                        @endforeach
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

            @endcomponent
        </div>

        <div class="col-sm-12">
            @component('admin.components.card', ['collapse'=>true, 'header'=> 'Daily Check-in','class'=>$inner_class ])
                @slot('header')
                    @php $id = 'daily_checkin'; $hasError = $errors->has($id) @endphp
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{$id}}" name="{{$id}}">
                        <label for="{{$id}}" class="custom-control-label font-weight-normal">
                            {{ $form[$id]['label']}} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>
                        </label>
                    </div>
                @endslot

                {{--
                @php $id = 'daily_checkin_qty'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>'col-sm-4','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent


                @php $id = 'daily_checkin_type'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>'col-sm-4','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="form-group d-flex flex-sm-column">
                        @foreach($form[$id]['input'] as $gid => $name)
                            <div class="custom-control custom-radio mx-2">
                                <input class="custom-control-input" type="radio" id="{{$id.'_'.$gid}}"
                                       name="{{$id}}" value="{{$gid}}" {{$loop->first? 'checked':''}}>
                                <label for="{{$id.'_'.$gid}}" class="custom-control-label">{{$name}}</label>
                            </div>
                        @endforeach
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                @php $id = 'daily_checkin_auto'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>'col-sm-4','label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{$id}}" name="{{$id}}">
                        <label for="{{$id}}" class="custom-control-label">{{ $form[$id]['label']}}</label>
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                --}}

                @php $id = 'daily_checkin_auto'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>'col-12 col-sm-8 col-md-6','label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="row">
                        <div class="col-10 col-sm-8 col-md-6 col-lg-6 col-xl-4">
                            <label for="{{$id}}" class="w-100">{{ $form[$id]['label']}}</label>
                        </div>
                        <div class="col-2 col-sm-4 col-md-6 col-lg-2">
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" type="checkbox" id="{{$id}}" name="{{$id}}">
                                <label for="{{$id}}" class="custom-control-label"></label>
                            </div>
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    </div>
                @endcomponent

                <hr class="w-100">

                @component('admin.setting.components.gamification_reward', [
                    'form' => $form,
                    'errors' => $errors,
                    'reward_qty_id' => 'daily_checkin_qty',
                    'reward_type_id' => 'daily_checkin_type',
                    'data_category' => 'daily_checkin',
                ])
                @endcomponent

            @endcomponent
        </div>

    @endcomponent

    @component('admin.components.card', ['header'=> 'Custom Messages' ])

        @php $id = 'game_footer_message'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent

        <hr class="w-100">

        @php $id = 'challenge_messages'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
        @endcomponent

        <div class="col-sm-6">

            @php $id = 'challenge_approve_success_title'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'challenge_approve_success_subtitle'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>

        <div class="col-sm-6">
            @php $id = 'challenge_approve_pending_title'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'challenge_approve_pending_subtitle'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>

    @endcomponent



    @component('admin.components.card', ['header'=> 'Challenges' ,'help'=>'gamification_challenges'])
        @component('admin.components.card', ['collapse'=>true,'header'=> 'QR Code/ 6 Digit Pin', 'class'=>'w-100 bg-gray-light shadow-none border' ])
            @slot('header')
                @php $id = 'offline_eng'; $hasError = $errors->has($id) @endphp
                <div class="custom-control custom-checkbox">
                    <input class="custom-control-input" type="checkbox" id="{{$id}}" name="{{$id}}">
                    <label for="{{$id}}" class="custom-control-label font-weight-normal">
                        {{ $form[$id]['label']}} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>
                    </label>
                </div>
            @endslot
            @php $cid = 'offline_eng' @endphp

            <div class="row w-100 pb-2">
                <div class="col-sm-12 text-center mb-2">
                    <label class="text-muted">Challenge Details</label>
                </div>

                @php $id = 'img_landing_path'; $hasError = $errors->has($cid.'_'.$id) @endphp
                @component('admin.components.form_field', ['help'=>'campaign_challenge_image', 'class'=>'col-sm-6','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="input-group">
                        <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}"  type="file" class="custom-file-input" accept="image/*">
                        <label class="custom-file-label mx-0" for="icon">Choose File</label>
                    </div>
                    <div class="file-viewer">
                        <img src="" alt="preview">
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                <div class="col-sm-6 px-0">

                    @php $id = 'name'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                               type="text"
                               class="form-control"/>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'description'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <textarea name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'shortcut'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>'', 'required'=>$form[$cid.'_'.$id]['req'], 'description'=>$form[$cid.'_'.$id]['descr'], 'hasError'=>$hasError ])
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="{{$cid.'_'.$id}}" name="{{$cid.'_'.$id}}">
                            <label for="{{$cid.'_'.$id}}" class="custom-control-label font-weight-normal">
                                {!! $form[$id]['label'] !!} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>

                                @php $id = 'short_name'; $hasError = $errors->has($cid.'_'.$id) @endphp
                                @component('admin.components.form_field', ['class'=>'','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                    <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                                           type="text"  maxlength="15"
                                           class="form-control w-auto"/>
                                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                @endcomponent
                            </label>
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent


                </div>
            </div>

            <hr class="w-100 py-1">

            <div class="row w-100">
                <div class="col-sm-12 text-center mb-2">
                    <label class="text-muted">Reward Mechanics</label>
                </div>

                @component('admin.components.form_field', [
                    'class'=>'col-12 col-sm-4 col-md-4 col-lg-4 col-xl-2',
                    'label'=>'Tracking Method',
                    'required'=>false,
                    'description'=>'',
                    'hasError'=>false
                ])
                @endcomponent

                @foreach(['offline_eng_qr_code', 'offline_eng_6_digit_pin'] as $id)
                    @component('admin.components.form_field', [
                        'class'=>'col-6 col-sm-4 col-md-4 col-lg-4 col-xl-2',
                        'label'=>'',
                        'required'=>false,
                        'description'=>'',
                        'hasError'=>false
                    ])
                        @php
                            $hasError = $errors->has($id);
                        @endphp
                        <div class="custom-control custom-checkbox">
                            <input id="{{$id}}" name="{{$id}}" class="custom-control-input" type="checkbox">
                            <label for="{{$id}}" class="custom-control-label font-weight-normal">
                                {{ $form[$id]['label']}} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>
                            </label>
                        </div>
                    @endcomponent
                @endforeach
            </div>

            <div class="row w-100">
                @component('admin.components.form_field', [
                    'class'=>'col-12 col-sm-4 col-md-4 col-lg-4 col-xl-2',
                    'label'=>'Outlet Selection',
                    'required'=>false,
                    'description'=>'',
                    'hasError'=>false
                ])
                @endcomponent

                @php
                    $id = 'store_types';
                    $hasError = $errors->has($cid.'_'.$id);
                @endphp
                @component('admin.components.form_field', [
                    'class'=>'col-12 col-sm-8 col-md-8 col-lg-8 col-xl-10',
                    'label'=>$form[$id]['label'],
                    'required'=>$form[$id]['req'],
                    'description'=>$form[$id]['descr'],
                    'hasError'=>$hasError,
                    'ff_classes' => [
                        'label' => 'row d-flex align-items-center',
                        'labeler' => 'col-sm-12 col-lg-6 col-xl-2',
                    ],
                ])
                    @slot('label_component')
                        <div class="col-sm-12 col-lg-6">
                            <select id="{{$cid.'_'.$id}}" name="{{$cid.'_'.$id}}" class="form-control select2 {{$errors->has($cid.'_'.$id) ? 'select2-danger':'select2bs4'}}"
                                placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;" multiple>
                                @foreach(${$id} ?? [] as $tmp)
                                    <option value="{{ data_get($tmp, 'id') }}">{{ data_get($tmp, 'name') }}</option>
                                @endforeach
                            </select>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($cid.'_'.$id) }}@endcomponent
                        </div>
                    @endslot

                    @php $scid = "{$cid}_{$id}_auto_include"; @endphp
                    <div class="custom-control custom-checkbox">
                        <input id="{{$scid}}" name="{{$scid}}" class="custom-control-input" type="checkbox">
                        <label for="{{$scid}}" class="custom-control-label font-weight-normal">
                            Automatically include new outlets within selected categories
                        </label>
                    </div>
                    {{-- <label>{{$form[$id]['label']}}</label>
                    --}}
                @endcomponent
            </div>

            @component('admin.setting.components.offline_eng_asset_config_card',[
                'form' => $form,
                'errors' => $errors,
                'reward_qty_id' => 'qty',
                'reward_type_id' => 'type',
                'challenge_id' => $cid,
                'data_category' => $cid,
            ])
            @endcomponent

            {{--
            <hr class="w-100 py-2">

            <div class="row w-100 px-2">
                @php
                    $id = 'store_types';
                    $hasError = $errors->has($cid.'_'.$id);
                @endphp

                @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <select id="{{$cid.'_'.$id}}" name="{{$cid.'_'.$id}}" class="form-control select2 {{$errors->has($cid.'_'.$id) ? 'select2-danger':'select2bs4'}} "
                        placeholder="{{$form[$id]['placeholder']}}" style="width: 100%;" multiple>
                        @foreach(${$id} ?? [] as $tmp)
                            <option value="{{ data_get($tmp, 'id') }}">{{ data_get($tmp, 'name') }}</option>
                        @endforeach
                    </select>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($cid.'_'.$id) }}@endcomponent
                @endcomponent
            </div>

            <hr class="w-100 py-2">
            <div class="row w-100 px-2">
                {{--
                @php $id = 'qty'; $hasError = $errors->has($cid.'_'.$id) @endphp
                @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                           type="text"
                           class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                @php $id = 'type'; $hasError = $errors->has($cid.'_'.$id) @endphp
                @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <div class="form-group d-flex d-sm-block">
                        @foreach( $form[$id]['input'] as $gid => $name)
                            <div class="custom-control custom-radio mx-2">
                                <input class="custom-control-input" type="radio" id="{{$cid.'_'.$id.'_'.$gid}}"
                                       name="{{$cid.'_'.$id}}" value="{{$gid}}" {{$loop->first? 'checked':''}}>
                                <label for="{{$cid.'_'.$id.'_'.$gid}}"
                                       class="custom-control-label">{{$name}}</label>
                            </div>
                        @endforeach
                    </div>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent
                -- }}

                @component('admin.setting.components.gamification_reward', [
                    'form' => $form,
                    'errors' => $errors,
                    'reward_qty_id' => 'qty',
                    'reward_type_id' => 'type',
                    'challenge_id' => $cid,
                    'data_category' => $cid,
                ])
                @endcomponent

                @php $id = 'offline_eng_daily_limit'; $hasError = $errors->has($id) @endphp
                @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
                    @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                @endcomponent

                <div class="col-sm-3">

                    <div class="form-group">
                        <label>Tracking Method</label>

                        @php $id = 'offline_eng_qr_code'; $hasError = $errors->has($id) @endphp
                        <div class="custom-control custom-checkbox">
                            <input id="{{$id}}" name="{{$id}}" class="custom-control-input" type="checkbox">
                            <label for="{{$id}}" class="custom-control-label font-weight-normal">
                                {{ $form[$id]['label']}} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>
                            </label>
                        </div>

                        @php $id = 'offline_eng_6_digit_pin'; $hasError = $errors->has($id) @endphp
                        <div class="custom-control custom-checkbox">
                            <input id="{{$id}}" name="{{$id}}" class="custom-control-input" type="checkbox">
                            <label for="{{$id}}" class="custom-control-label font-weight-normal">
                                {{ $form[$id]['label']}} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>
                            </label>
                        </div>

                    </div>
                </div>


            </div>
            --}}
        @endcomponent

        @php $challenges = [
            'social_follow', 'app_install',
            'take_a_picture', 'upload_receipt'
        ]@endphp
        @foreach($challenges as $cid)
            @component('admin.components.card', ['collapse'=>true, 'class'=>'w-100 bg-gray-light shadow-none border' ])
                @slot('header')
                    <div class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox" id="{{$cid}}" name="{{$cid}}">
                        <label for="{{$cid}}" class="custom-control-label font-weight-normal">
                            {{ $form[$cid]['label']}} <small class="text-muted ml-2">{{ $form[$cid]['descr']}}</small>
                        </label>
                    </div>
                @endslot

                <div class="row w-100 pb-2">
                    @php $id = 'img_landing_path'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['help'=>'campaign_challenge_image','class'=>'col-sm-6','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="input-group">
                            <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}"  type="file" class="custom-file-input" accept="image/*">
                            <label class="custom-file-label mx-0" for="icon">Choose File</label>
                        </div>
                        <div class="file-viewer">
                            <img src="" alt="preview">
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    <div class="col-sm-6 px-0">

                        @php $id = 'name'; $hasError = $errors->has($cid.'_'.$id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                                   type="text"
                                   class="form-control"/>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent


                        @php $id = 'description'; $hasError = $errors->has($cid.'_'.$id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <textarea name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                        @php $id = 'shortcut'; $hasError = $errors->has($cid.'_'.$id) @endphp
                        @component('admin.components.form_field', ['class'=>'col-sm-12','label'=>'', 'required'=>$form[$cid.'_'.$id]['req'], 'description'=>$form[$cid.'_'.$id]['descr'], 'hasError'=>$hasError ])
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input" type="checkbox" id="{{$cid.'_'.$id}}" name="{{$cid.'_'.$id}}">
                                <label for="{{$cid.'_'.$id}}" class="custom-control-label font-weight-normal">
                                    {!! $form[$id]['label'] !!} <small class="text-muted ml-2">{{ $form[$id]['descr']}}</small>

                                    @php $id = 'short_name'; $hasError = $errors->has($cid.'_'.$id) @endphp
                                    @component('admin.components.form_field', ['class'=>'','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                        <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                                               type="text"  maxlength="15"
                                               class="form-control w-auto"/>
                                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                                    @endcomponent
                                </label>
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent

                    </div>


                </div>


                <hr class="w-100 py-2"/>
                <div class="row w-100">

                    {{--
                    @php $id = 'qty'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                               type="text"
                               class="form-control"/>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'type'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="form-group d-flex d-sm-block">
                            @foreach($form[$id]['input'] as $gid => $name)
                                <div class="custom-control custom-radio mx-2">
                                    <input class="custom-control-input" type="radio" id="{{$cid.'_'.$id.'_'.$gid}}"
                                           name="{{$cid.'_'.$id}}" value="{{$gid}}" {{$loop->first? 'checked':''}}>
                                    <label for="{{$cid.'_'.$id.'_'.$gid}}"
                                           class="custom-control-label">{{$name}}</label>
                                </div>
                            @endforeach
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                    --}}

                    @component('admin.setting.components.gamification_reward', [
                        'form' => $form,
                        'errors' => $errors,
                        'reward_qty_id' => 'qty',
                        'reward_type_id' => 'type',
                        'challenge_id' => $cid,
                        'data_category' => $cid,
                    ])
                    @endcomponent

                    <hr class="w-100 py-2"/>

                    @php $id = ($cid=='social_follow' || $cid=='app_install') ? 'lifetime_limit' : 'daily_limit'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-3','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <input name="{{$cid.'_'.$id}}" id="{{$cid.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}"
                               type="text" class="form-control"/>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'auto_approve'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-3 ' . ($cid === 'upload_receipt' && !config('sys.enabled_ocr') ? 'd-none' : ''),'label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="{{$cid.'_'.$id}}" name="{{$cid.'_'.$id}}">
                            <label for="{{$cid.'_'.$id}}" class="custom-control-label">{{ $form[$id]['label']}}</label>
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @php $id = 'reward_on_submit'; $hasError = $errors->has($cid.'_'.$id) @endphp
                    @component('admin.components.form_field', ['class'=>'col-sm-3 ' . ($cid === 'upload_receipt'),'label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="{{$cid.'_'.$id}}" name="{{$cid.'_'.$id}}">
                            <label for="{{$cid.'_'.$id}}" class="custom-control-label">{{ $form[$id]['label']}}</label>
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

                    @if ($cid == 'upload_receipt')
                        <div class="form-group col-sm-3">
                            @php $id = 'require_merchants'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field', ['required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                <div class="custom-control custom-switch mr-4">
                                    <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}">
                                    <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label>
                                </div>
                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                            @endcomponent

                            @php $id = 'require_transaction_amount'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field', [ 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                                <div class="custom-control custom-switch mr-4">
                                    <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}">
                                    <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label>
                                </div>
                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                            @endcomponent
                        </div>
                    @endif
                </div>

                <hr class="w-100 py-2"/>
                <div class="row w-100">
                    @php $id = 'challenge_messages'; $hasError = false @endphp
                    @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                    @endcomponent

                    <div class="col-sm-6">

                        @php $id = 'challenge_approve_success_title'; $hasError = false @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$cid}}_{{$id}}" id="{{$cid}}_{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                        @endcomponent

                        @php $id = 'challenge_approve_success_subtitle'; $hasError = false @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <textarea name="{{$cid}}_{{$id}}" id="{{$cid}}_{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                        @endcomponent
                    </div>

                    <div class="col-sm-6">
                        @php $id = 'challenge_approve_pending_title'; $hasError = false @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$cid}}_{{$id}}" id="{{$cid}}_{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />
                        @endcomponent

                        @php $id = 'challenge_approve_pending_subtitle'; $hasError = false @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <textarea name="{{$cid}}_{{$id}}" id="{{$cid}}_{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" ></textarea>
                        @endcomponent
                    </div>
                </div>

                {{-- additional forms --}}

                @switch($cid)
                @case('social_follow')
                <hr class="w-100 py-2"/>
                <div class="row w-100">
                    @foreach(['facebook','instagram','tiktok'] as $url)
                        @php $id = 'link'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_50', ['label'=>ucfirst($url).' '.$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$cid.'_'.$url}}" id="{{$cid.'_'.$url}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                                   class="form-control"/>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    @endforeach
                </div>
                @break

                @case('app_install')

                <hr class="w-100 py-2"/>
                <div class="row w-100">
                    @foreach(['ios','play','huawei'] as $url)
                        @php $id = 'store'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_50', ['label'=>ucfirst($url).' '.$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$cid.'_'.$url}}" id="{{$cid.'_'.$url}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                                   class="form-control"/>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    @endforeach
                </div>
                @break

                @case('upload_receipt')
                @case('take_a_picture')
                <hr class="w-100 py-2"/>
                @component('admin.setting.components.gamification_survey', [
                    'errors' => $errors,
                    'form' => $form,
                    'cid' => $cid,
                ])
                @endcomponent
                @break
                @endswitch

                {{-- image upload examples--}}
                <hr class="w-100 py-2"/>
                <div class="row w-100">
                    @foreach([0,1,2] as $eg)
                        <div class="col-sm-4 col-6">
                        @php $id = 'eg_name'; $hasError = $errors->has($cid.'_'.$eg.'_'.$id) @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'].' '. ($eg+1), 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <input name="{{$cid.'_'.$eg.'_'.$id}}" id="{{$cid.'_'.$eg.'_'.$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text"
                                   class="form-control"/>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                        @php $id = 'eg_img'; $hasError = $errors->has($cid.'_'.$eg.'_'.$id) @endphp
                        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="input-group col-12">
                                <input name="{{$cid.'_'.$eg.'_'.$id}}" id="{{$cid.'_'.$eg.'_'.$id}}"  type="file" class="custom-file-input" accept="image/*">
                                <label class="custom-file-label mx-0" for="icon">Choose File</label>

                            </div>
                            <div class="file-viewer col-12">
                                <img src="{{ asset($account['icon']) }}" alt="preview">
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                        </div>
                    @endforeach


                </div>
            @endcomponent

        @endforeach
    @endcomponent

    @component('admin.components.card', ['header'=> 'Referral Programme', 'help'=>'gamification_referral'] )

        @php $id = 'referrer_token'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            {{--
            <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            --}}
            @component('admin.setting.components.gamification_reward', [
                'form' => $form,
                'errors' => $errors,
                'reward_qty_id' => false,
                'reward_type_id' => 'type',
                'challenge_id' => $id,
                'is_half' => 1,
                'data_category' => $id,
            ])
            @endcomponent
        @endcomponent


        @php $id = 'referee_token'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            {{--
                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            --}}
            @component('admin.setting.components.gamification_reward', [
                'form' => $form,
                'errors' => $errors,
                'reward_qty_id' => false,
                'reward_type_id' => 'type',
                'challenge_id' => $id,
                'is_half' => 1,
                'data_category' => $id,
            ])
            @endcomponent
        @endcomponent


        @php $variables= [
                ':client_name' => 'Client Name',
                ':referrer_point' => 'Referrer Point',
                ':referee_point' => 'Referee Point',
                '{referrer_link}' => 'Referral Link',
        ] @endphp
        @php $id = 'referral_share_msg'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" rows="5"></textarea>

            <div class="template_variables">
                @foreach($variables as $key => $variable)
                    <span style="cursor:pointer" class="badge badge-warning" data-tag="{{$key}}">{{$variable}}</span>
                @endforeach
            </div>

            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent
        @php $variables= [
                ':client_name' => 'Client Name',
                ':referrer_point' => 'Referrer Point',
                ':referee_point' => 'Referee Point',
        ] @endphp
        @php $id = 'referral_instructions'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control" rows="5"></textarea>

            <div class="template_variables">
                @foreach($variables as $key => $variable)
                    <span style="cursor:pointer" class="badge badge-warning" data-tag="{{$key}}">{{$variable}}</span>
                @endforeach
            </div>

        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent
    @endcomponent
</form>