@section('style')
    <style>
        .image-gradient-container .form-label{
            font-size: .8rem !important;
            color: var(--gray) !important;
            /*font-weight: normal !important;*/
        }
        .masthead_image-p{
            background-size: contain !important;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            height:200px;
            transform: translateY(-25%);
            margin-top: 0;
            margin-bottom: -2rem;
        }
    </style>
@endsection

@section('script')
    @php
        $default_themes = config('admin.default_campaign_themes');
        $default_mastheads = config('admin.default_campaign_mastheads');
        $inner_class = 'w-100 bg-gray-light shadow-none border';
    @endphp
    <script>
        const DEFAULT_THEMES = @json($default_themes);
        const DEFAULT_MASTHEADS = @json($default_mastheads);

        function validateGradient(value){
            const gradientregex = /\b(radial|linear)-gradient\(([^()]*|\([^()]*\))*\)/;
            return value && value.match(gradientregex) ? value.match(gradientregex)[0] : '';
        }
        function showColorOrGradient(value,id){
            const isGradient = validateGradient(value);
            let findBtn = value && isGradient ? '.btn[data-select=gradient]' : '.btn[data-select=image], .btn[data-select=color]';
            const el = $('[name='+id+']').parents('.form-switch-group').find('.image-gradient-selector').find(findBtn);
            el.click();
            // $('[name='+id+']:visible').change();
        }
        function getColorOrGradient(id){
            const el = $('[name='+id+']:visible');
            const getType = el.parents('.image-gradient-container-type').attr('data-type');
            switch(getType){
                case 'image':
                    return el.data('value');
                case 'gradient':
                case 'color':
                    return el.val();
            }
        }
        function changeGradient(el){
            // console.log('change', el )
            let newVal =  el.val() ? validateGradient( el.val() ):''
            if(!!newVal){
                el.val( newVal );
                el.parents('.form-group').find('.file-viewer').css('background', newVal );
            }
        }

        var textFile = null,
            makeTextFile = function (text) {
                var data = new Blob([text], {type: 'text/plain'});

                // If we are replacing a previously generated file we need to
                // manually revoke the object URL to avoid memory leaks.
                if (textFile !== null) {
                    window.URL.revokeObjectURL(textFile);
                }

                textFile = window.URL.createObjectURL(data);

                return textFile;
            };


        var create = document.getElementById('downloadJSON');

        create.addEventListener('click', function () {
            var data = JSON.stringify( getThemeData('campaign_theme_gamification') );
            create.href = makeTextFile(data);
        }, false);

        $(function(){
            $('.image-gradient-selector .btn').on('click',function(){
                // console.log('click')
                const type= $(this).attr('data-select');
                $(this).parents('.btn-group').find('.btn').removeClass('btn-dark').addClass('btn-default');
                $(this).addClass('btn-dark').removeClass('btn-default');
                $(this).parents('.form-switch-group').find('.image-gradient-container-type').hide();
                // update preview
                let showel= $(this).parents('.form-switch-group').find('.image-gradient-container-type[data-type='+ type +']');
                showel.show();
                const showInput = showel.find('input, textarea');
                // console.log('❗️',showInput.length)
                $.each(showInput, function(k,v){
                    // console.log('❗❗️', v ? $(v).attr('name') :v)
                    $(v).trigger('keypress');
                })
                // showInput ?  showInput.trigger('keypress') :'';

            })

            // preview immediately
            $('.image-gradient-container-type input, .image-gradient-container-type textarea').change(function(){
                const name= $(this).attr('name');
                const $img_preview_alt = $(`[alt^=${name}]`);
                if(!$img_preview_alt) {
                    return;
                }
                switch( $(this).attr('type') ){
                    case 'file':
                        let file = $(this).files ? $(this).files[0] :null;
                        if (file) {
                            var reader = new FileReader();
                            reader.onload = () => $img_preview_alt.attr('src', reader.result).css('background','#fff');
                            reader.readAsDataURL(file);
                        } else {
                            file = $(this).data('value');
                            $img_preview_alt.attr('src',file).css('background','#fff');
                        }
                        break;
                    default:
                        const value = $(this).val();
                        if(value){
                            $img_preview_alt.attr('src', '').css('background', value);
                        }
                        break;
                }

            })

            $('#is_pre_campaign_game').change(function(){
                $('#campaign_start_msg').parent('.form-group')[$(this).prop('checked')?'removeClass':'addClass']('d-none');
            });

            // show/hide dob selection dropdown box
            $('#reg_dob_active').change(function () {
                if ($(this).is(':checked')) {
                    $('#dob-option-select').show();
                } else {
                    $('#dob-option-select').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.campaign')@endphp

    @component('admin.components.card', ['header'=>'Customize Registration Page'])
        <div class="col-sm-6">
            @php
                $id = 'reg_name_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <div class="custom-control custom-switch mr-4">
                        <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}" checked disabled>
                        <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

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

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

            @php
                $id = 'reg_dob_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <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>
                        <select id="dob-option-select" name="dob_option_select" class="form-control">
                            <option value="full-dob">Full DOB - DD/MM/YYYY</option>
                            <option value="MM/DD/YYYY">Full DOB - MM/DD/YYYY</option>
                            <option value="month-year">Month/Year - MM/YYYY</option>
                            <option value="year">Year - YYYY</option>
                        </select>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

{{--            @php--}}
{{--                $id = 'reg_year_active';--}}
{{--                $hasError = $errors->has($id);--}}
{{--            @endphp--}}
{{--            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}
{{--                <div class="form-group d-flex">--}}
{{--                    <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>--}}
{{--                </div>--}}
{{--                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
{{--            @endcomponent--}}


            @php
                $id = 'reg_address_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <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>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php
                $id = 'reg_address_state_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <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>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>
        <div class="col-sm-6">
            @php
                $id = 'otp_sms_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <div class="custom-control custom-switch mr-4">
                        <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}"
                            {{ old($id, config('sys.send_reg_sms') && config('sys.login_method') == 'otp') ? 'checked' : '' }}>
                        <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php
                $id = 'login_url_sms_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <div class="custom-control custom-switch mr-4">
                        <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}"
                            {{ old($id, config('sys.send_reg_sms') && config('sys.login_method') == 'default') ? 'checked' : '' }}>
                        <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php
                $id = 'otp_whatsapp_active';
                $hasError = $errors->has($id);
            @endphp
            @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                <div class="form-group d-flex">
                    <div class="custom-control custom-switch mr-4">
                        <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}"
                            {{ $otp_whatsapp_active_checked ? 'checked' : '' }} disabled>
                        <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>
    @endcomponent

@component('admin.components.card', ['header'=>'Campaign Setup', 'help'=>'campaign_setup'])

    @php $id = 'campaign_name'; $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
    @endcomponent

    @php $id = 'campaign_name_short'; $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"  maxlength="12" />
        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
    @endcomponent

    @php $id = 'campaign_desc'; $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" ></textarea>
        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
    @endcomponent

    @php $id = 'campaign_keywords'; $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" ></textarea>
        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
    @endcomponent

    <hr class="w-100 my-3">

    @php $id = 'client_tnc'; $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
    @endcomponent

    @php $id = 'client_privacy'; $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
    @endcomponent

    <hr class="w-100 my-3">
    <div class="col-sm-6">
        @php $id = 'campaign_duration'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt' =>$form[$id]['descr_alt'],  'hasError'=>$hasError ])
            <div class="input-group input-daterange">
                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar"></i></span></div>
                <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control drp"/>
                <div class="input-group-prepend"><span class="input-group-text">to</span></div>
                <input type="text" class="form-control drp"/>
            </div>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent

        @php $id = 'campaign_end_msg'; $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 txt-editor" rows="8"></textarea>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent
    </div>
    <div class="col-sm-6">
        @php $id = 'reward_marketplace_validity'; $hasError = $errors->has($id);
            $special_space = '<div class="small d-none d-sm-inline">'.str_repeat(" &nbsp;", 250).'<br/>'.str_repeat(" &nbsp;", 100).'</div>';
        @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt' =>$form[$id]['descr_alt'].$special_space, 'hasError'=>$hasError ])
            <div class="input-group input-daterange">
                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-calendar"></i></span></div>
                <input name="{{$id}}" id="{{$id}}" type="text" class="form-control drp"/>
                <div class="input-group-prepend"><span class="input-group-text">to</span></div>
                <input type="text" class="form-control drp"/>
            </div>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent


        @php $id = 'campaign_redeem_end_msg'; $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 txt-editor" rows="8"></textarea>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent
    </div>
    <hr class="w-100 my-3">
    @php
        $is_pre_campaign_game =  config('sys.IS_PRE_CAMPAIGN_GAME');
    @endphp
    @component('admin.components.card', ['collapse' => true, 'collapse_expand'=> $is_pre_campaign_game, 'header'=> 'Additional Settings', 'class'=>$inner_class])
        @php $id = 'is_pre_campaign_game'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_100', ['label'=>'', 'required'=>$form[$id]['req'], 'hasError'=>$hasError ])
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="{{$id}}" name="{{$id}}">
                <label class="custom-control-label" for="{{$id}}">{{$form[$id]['label']}}</label><br/>
                <small class="text-muted d-inline-block">{!! $form[$id]['descr'] !!}</small>
            </div>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent


        @php $id = 'campaign_start_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, 'class'=> $is_pre_campaign_game ? '' : 'd-none' ])
            <textarea name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" class="form-control txt-editor" rows="8"></textarea>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent
    @endcomponent

@endcomponent

@component('admin.components.card', ['header'=>'Site Images'])
        @php $id = 'social_share'; $hasError = $errors->has($id) @endphp
        @component('admin.components.form_field_50', ['help'=>'campaign_social_share','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

            <div class="input-group">
                <div class="custom-file">
                    <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                    <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                </div>
            </div>

            <div class="file-viewer">
                <img src="" alt=" ">
            </div>


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


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

            <div class="input-group">
                <div class="custom-file">
                    <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                    <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                </div>
            </div>

            <div class="file-viewer">
                @php
                    $sizes = [
                    //16, 32, 128,
                     144,];
                    $sizes = array_reverse($sizes);
                @endphp
                @foreach($sizes as $size)
                    <img src=""  width="{{$size}}" height="{{$size}}"
                         style="width: {{$size}}px !important; height: {{$size}}px!important;
                             max-width: {{$size}}px !important; max-height: {{$size}}px!important;
                             object-fit: fill;
                             ">
                @endforeach

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


    @endcomponent


@component('admin.components.card',['header'=>'Campaign Styling', 'help'=>'campaign_style'])
{{--    PREVIEW     --}}
    <div class="col-sm-12 w-100 position-relative d-block mb-3 rounded overflow-hidden" style="height: 500px">
            <div class="w-100 position-absolute" style="height:500px; top:0 ;left:0">
                <div class="float-right position-absolute btn-group" role="group" style=" top:10px; right:10px; z-index: 1;" >
                    <a class="btn btn-sm btn-default" href="javascript:void(0)" data-toggle="modal" data-target="#themeSelector"><i class="fas fa-edit mr-1"></i> Theme Selector</a>
                </div>
                <div class="float-right position-absolute btn-group" role="group" style=" bottom:10px; right:10px; z-index: 1;" >
                    {{--                    <a class="btn btn-sm btn-default" href="jasvscript:void(0)" data-toggle="tooltip" title="Upload theme"><i class="fas fa-upload"></i></a>--}}
                    <a class="btn btn-sm btn-default" download="theme_{{time()}}.txt" id="downloadJSON" data-toggle="tooltip" title="Download theme"><i class="fas fa-download"></i> </a>
                </div>
                <div alt=" " class="background_color-p background_img-p position-absolute w-100 h-100"></div>
                <div class="w-75 h-75 mx-auto rounded-lg position-relative text-center"  style=" margin-top:5rem">
                    <div class="w-100 h-100 overflow-hidden position-absolute shadow" style="border-radius: 1rem;">
                        <div alt=" " class="popup_background-p popup_img-p position-absolute w-100 h-100"></div>
                    </div>
                    <div alt=" " class="masthead_image-p position-relative w-100"></div>
                    <h5 alt=" " class="text_color-p position-relative text-center">Campaign Name</h5>
                    <a alt=" " href="javascript:void(0)" class="cta_background-p btn position-relative mx-auto">
                        <span class="cta_font_color-p">Sign up now</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-sm-6 px-0">
            @php $id = 'logo_type'; $hasError = $errors->has($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 ])
                <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="{{$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>
        <div class="col-sm-6 px-0">

            @php $id = 'theme_color'; $hasError = $errors->has($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 ])
                <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                    <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-square"></i></span>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'text_color'; $hasError = $errors->has($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 ])
                <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                    <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-square"></i></span>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>

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

            @endcomponent

            @php $id = 'popup_masthead_image'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field', ['help'=>'campaign_masthead','class'=>'col-sm-6','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

            <div class="input-group">
                <div class="custom-file">
                    <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                    <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                </div>
            </div>
            <div class="file-viewer">
                {{--                <img src="{{ asset($account['icon']) }}" alt=" ">--}}
                <img src="" alt=" ">
            </div>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent

        @endcomponent

        <hr class="w-100 my-3">

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

            <div class="form-switch-group">

                <div class="align-items-center d-flex flex-wrap image-gradient-selector justify-content-between mb-2 mt-1 mt-sm-0 mx-auto px-2">
                    <label class="mb-0">Main Background Type @include('admin.components.settings_guide',['id'=>'campaign_main_background'])</label>
                    <div class="btn-group flex-shrink-0" role="group" aria-label="Background Type">
                        <a class="btn button btn-sm btn-dark" href="javascript:void(0)" data-toggle="tooltip" title="Image" data-select="image"><i class="fas fa-image" style="width: 0.8rem; height: 0.8rem;"></i></a>
                        <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Gradient" data-select="gradient"><i class="fas fa-square" style="background: linear-gradient(45deg, black, white);color: transparent; border:.5px solid white; border-radius: 2px;  width: 0.8rem; height: 0.8rem; "></i></a>
                    </div>
                </div>
                <div class="image-gradient-container bg-light px-2 px-1 mx-1 rounded overflow-hidden">

                    <div class="image-gradient-container-type" data-type="image">
    {{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Background Image</label>--}}
                        @php $id = 'background_img'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Image', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="input-group">
                                <div class="custom-file">
                                    <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                                    <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                                </div>
                            </div>
                            <div class="file-viewer"><img src="" alt=" "></div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent


                        @php $id = 'background_color'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Solid', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                                <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fas fa-square"></i></span>
                                </div>
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    </div>
                    <div class="image-gradient-container-type" data-type="gradient" style="display: none">
    {{--                    <label class="font-weight-normal mb-0 text-muted text-sm">Background Gradient</label><br>--}}

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

                            <textarea name="{{$id}}" id="{{$id}}" class="input-gradient-css form-control" placeholder="linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,105,255,1) 100%)" style="font-size: .6rem; font-family: monospace;" ></textarea>

                            <small class="text-muted float-right">
                                <a href="https://cssgradient.io/" target="_blank">Paste CSS Gradient from here</a></small>
                            <div class="file-viewer rounded overflow-hidden" style="height: 50px; width: 100%; background:#eee; "></div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 px-0">

        <div class="form-switch-group">
            <div class="align-items-center d-flex flex-wrap image-gradient-selector justify-content-between mb-2 mt-1 mt-sm-0 mx-auto px-2">
                <label class="mb-0">Popup Background Type @include('admin.components.settings_guide',['id'=>'campaign_popup_background'])</label>
                <div class="btn-group flex-shrink-0" role="group" aria-label="Background Type">
                    <a class="btn button btn-sm btn-dark" href="javascript:void(0)" data-toggle="tooltip" title="Image" data-select="image"><i class="fas fa-image" style="width: 0.8rem; height: 0.8rem;"></i></a>
                    <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Gradient" data-select="gradient"><i class="fas fa-square" style="background: linear-gradient(45deg, black, white);color: transparent; border:.5px solid white; border-radius: 2px;  width: 0.8rem; height: 0.8rem; "></i></a>
                </div>

            </div>
            <div class="image-gradient-container bg-light px-2 px-1 mx-1 rounded overflow-hidden">

                <div class="image-gradient-container-type" data-type="image">
{{--                    <label class="font-weight-normal mb-0 text-muted text-sm">Background Image</label>--}}
                    @php $id = 'popup_img'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Image', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])

                    <div class="input-group">
                        <div class="custom-file">
                            <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                            <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                        </div>
                    </div>
                    <div class="file-viewer"><img src="" alt=" "></div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent

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


                        <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                            <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                            <div class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-square"></i></span>
                            </div>
                        </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                </div>

                <div class="image-gradient-container-type" data-type="gradient" style="display: none">
{{--                    <label class="font-weight-normal mb-0 text-muted text-sm">Background Gradient</label><br>--}}

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

                    <textarea name="{{$id}}" id="{{$id}}" class="input-gradient-css form-control" placeholder="linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,105,255,1) 100%)" style="font-size: .6rem; font-family: monospace;" ></textarea>

                    <small class="text-muted float-right">
                        <a href="https://cssgradient.io/" target="_blank">Paste CSS Gradient from here</a></small>
                    <div class="file-viewer rounded overflow-hidden" style="height: 50px; width: 100%; background:#eee; "></div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                </div>
            </div>
        </div>

        </div>
        <hr class="w-100 my-3">


        @php $id = 'cta_font_color'; $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="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-square"></i></span>
                </div>
            </div>
            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
        @endcomponent

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

        <div class="form-switch-group">
            <div class="align-items-center d-flex flex-wrap image-gradient-selector justify-content-between mb-2 mt-1 mt-sm-0 mx-auto px-2">
                <label class="mb-0">Button Background Type</label>
                <div class="btn-group flex-shrink-0" role="group" aria-label="Background Type">
                    <a class="btn button btn-sm btn-dark text-info" href="javascript:void(0)" data-toggle="tooltip" title="Color" data-select="color"><i class="fas fa-square"></i></a>
{{--                        <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Image" data-select="image"><i class="fas fa-image" style="width: 0.8rem; height: 0.8rem;"></i></a>--}}
                    <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Gradient" data-select="gradient"><i class="fas fa-square" style="background: linear-gradient(45deg, black, white);color: transparent; border:.5px solid white; border-radius: 2px;  width: 0.8rem; height: 0.8rem; "></i></a>
                </div>
            </div>
            <div class="image-gradient-container bg-light px-2 px-1 mx-1 rounded overflow-hidden">

                <div class="image-gradient-container-type" data-type="color">
                    @php $id = 'cta_background'; $hasError = $errors->has($id) @endphp
                    @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Solid', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
{{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Solid Color</label>--}}
                    <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                        <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fas fa-square"></i></span>
                        </div>
                    </div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                </div>

                <div class="image-gradient-container-type" data-type="gradient" style="display: none">

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

{{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Gradient Color</label><br>--}}
                    <textarea name="{{$id}}" id="{{$id}}" class="input-gradient-css form-control" placeholder="linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,105,255,1) 100%)" style="font-size: .6rem; font-family: monospace;" ></textarea>

                    <small class="text-muted float-right">
                        <a href="https://cssgradient.io/" target="_blank">Paste CSS Gradient from here</a></small>
                    <div class="file-viewer rounded overflow-hidden" style="height: 50px; width: 100%; background:#eee; "></div>
                        @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                    @endcomponent
                </div>
            </div>
        </div>

    </div>


@endcomponent


@component('admin.components.card', ['header'=>'Footer'])
        <div class="col-sm-6">
            @php $id = 'footer_font_color'; $hasError = $errors->has($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 ])
                <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                    <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                    <div class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-square"></i></span>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent


            <div class="form-switch-group">
                <div class="align-items-center d-flex flex-wrap image-gradient-selector justify-content-between mb-2 mt-1 mt-sm-0 mx-auto px-2">
                    <label class="mb-0">Footer Background Type</label>
                    <div class="btn-group flex-shrink-0" role="group" aria-label="Background Type">
                        <a class="btn button btn-sm btn-dark text-info" href="javascript:void(0)" data-toggle="tooltip" title="Color" data-select="color"><i class="fas fa-square"></i></a>
                        {{--                        <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Image" data-select="image"><i class="fas fa-image" style="width: 0.8rem; height: 0.8rem;"></i></a>--}}
                        <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Gradient" data-select="gradient"><i class="fas fa-square" style="background: linear-gradient(45deg, black, white);color: transparent; border:.5px solid white; border-radius: 2px;  width: 0.8rem; height: 0.8rem; "></i></a>
                    </div>
                </div>

                <div class="image-gradient-container bg-light px-2 px-1 mx-1 rounded overflow-hidden">

                    <div class="image-gradient-container-type" data-type="color">
                        @php $id = 'footer_background'; $hasError = $errors->has($id) @endphp
                        @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Solid', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
                            {{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Solid Color</label>--}}
                            <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                                <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fas fa-square"></i></span>
                                </div>
                            </div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    </div>

                    <div class="image-gradient-container-type" data-type="gradient" style="display: none">

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

                            {{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Gradient Color</label><br>--}}
                            <textarea name="{{$id}}" id="{{$id}}" class="input-gradient-css" placeholder="linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,105,255,1) 100%)" class="form-control" style="font-size: .6rem; font-family: monospace;" ></textarea>

                            <small class="text-muted float-right">
                                <a href="https://cssgradient.io/" target="_blank">Paste CSS Gradient from here</a></small>
                            <div class="file-viewer rounded overflow-hidden" style="height: 50px; width: 100%; background:#eee; "></div>
                            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                        @endcomponent
                    </div>
                </div>
            </div>

            @php $id = 'footer_campaign_license'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field', ['class'=>'col-sm-12 mt-2','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>
        <div class="col-sm-6">


{{--        @php $id = 'footer_background'; $hasError = $errors->has($id) @endphp--}}
{{--        @component('admin.components.form_field', ['class'=>'col-sm-6','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}
{{--            <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">--}}
{{--                <input name="{{$id}}" id="{{$id}}" type="text" class="form-control" data-original-title="" title="">--}}
{{--                <div class="input-group-append">--}}
{{--                    <span class="input-group-text"><i class="fas fa-square"></i></span>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
{{--        @endcomponent--}}


        @php $id = 'footer_contact_email'; $hasError = $errors->has($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="{{$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 = 'footer_facebook_link'; $hasError = $errors->has($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="{{$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 = 'footer_instagram_link'; $hasError = $errors->has($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="{{$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 = 'footer_linkedin_link'; $hasError = $errors->has($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="{{$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


</form>


<div class="modal fade" id="themeSelector" tabindex="-1" aria-labelledby="themeLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="themeLabel">Theme Selector</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <ul class="nav nav-pills nav-fill" id="custom-content-below-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="custom-content-below-home-tab" data-toggle="pill" href="#custom-content-below-home" role="tab" aria-controls="custom-content-below-home" aria-selected="false">Theme Selector</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="custom-content-below-profile-tab" data-toggle="pill" href="#custom-content-below-profile" role="tab" aria-controls="custom-content-below-profile" aria-selected="false">Masthead Selector</a>
                    </li>
                </ul>
                <div class="tab-content pt-2" id="custom-content-below-tabContent">
                    <div class="tab-pane fade active show" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                        <div class="row d-flex">
                            @foreach($default_themes as $name => $theme)
                                <a class="align-items-center btn text-muted col-4 p-0 d-inline-flex flex-column justify-content-center overflow-hidden"
                                   onclick="populatePage(DEFAULT_THEMES['{{$name}}'])" href="javascript:void(0)">
                                    <img src="{{$theme['thumbnail']}}" class="w-100 rounded mb-1"/>
                                    {{$theme['title']}}
                                </a>
                            @endforeach
                        </div>
                    </div>
                    <div class="tab-pane fade" id="custom-content-below-profile" role="tabpanel" aria-labelledby="custom-content-below-profile-tab">
                       <div class="d-flex row">
                           @foreach($default_mastheads as $name => $theme)
                               <a class="align-items-center btn text-muted col-4 p-0 d-inline-flex flex-column justify-content-center overflow-hidden"
                                  onclick="populatePage(DEFAULT_MASTHEADS['{{$name}}'])" href="javascript:void(0)">
                                   <img src="{{$theme['masthead_image']}}" class="w-100 bg-white rounded mb-1"
                                        style="height: 120px;object-fit: contain;"/>
                                   {{$theme['title']}}
                               </a>
                           @endforeach
                       </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer justify-content-end">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>