@extends('admin.layouts.app')

@section('content')
@if (session('about_update_msg'))
<div class="alert alert-success">
    {{ session('about_update_msg') }}
</div>
@endif
<h2 class="mb-3">{{awtTrans('Settings Update')}}</h2>

{!! Form::open(['method' => 'POST', 'route' => 'admin.settings.store', 'files' => true]) !!}
<div class="row">



    <div class="col-2">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">{{ awtTrans('بيانات التواصل') }}</button>
            <!-- <button class="nav-link" id="v-pills-static-tab" data-toggle="pill" data-target="#v-pills-static" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">{{ awtTrans('الصفحات الثابتة') }}</button> -->
            <button class="nav-link" id="v-pills-setting-tab" data-toggle="pill" data-target="#v-pills-setting" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">{{ awtTrans('Site Setting') }}</button>
            <button class="nav-link" id="v-pills-mail-tab" data-toggle="pill" data-target="#v-pills-mail" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">{{ awtTrans('اعدادات الألوان') }}</button>
            <button class="nav-link" id="v-pills-language-tab" data-toggle="pill" data-target="#v-pills-language" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">{{ awtTrans('اللغه') }}</button>
            <button class="nav-link" id="v-pills-about_statistic-tab" data-toggle="pill" data-target="#v-pills-about_statistic" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">{{ awtTrans('ايقونات اللإحصاءات') }}</button>
        </div>
    </div>


    <div class="col-10">
        <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                <div class="row">
                    @foreach($settings as $setting)

                    @if($setting->section == 'contact')
                    @if($setting->type == 'url')
                    <div class="col-12">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="url" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>
                    @endif
                    @if($setting->type == 'email')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="email" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>
                    @endif
                    @if($setting->type == 'tel')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="tel" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>
                    @endif
                    @if($setting->key == 'address')

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="form-label" for="title">{{ $setting->neckname }} </label>
                            <input type="{{ $setting->type }}" style="width: 73%;margin: 12px 0 0;" id="{{ $setting->key }}" name="{{ $setting->key }}" value="{{ $setting->value }}" class="form-control image" aria-label="Name" aria-describedby="basic-addon-name" />
                            <div id="map" style="height: 500px;"></div>
                            <div class="">
                                @if ($errors->has('title'))
                                <span class="help-block">
                                    <strong style="color: red;">{{ $errors->first('title') }}</strong>
                                </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    @elseif($setting->key == 'lat')

                    <input type="hidden" name="{{$setting->key}}" id="{{ $setting->key }}" value="{{$setting->value}}">
                    @elseif($setting->key == 'lng')

                    <input type="hidden" name="{{$setting->key}}" id="{{ $setting->key }}" value="{{$setting->value}}">

                    @endif
                    @endif

                    @endforeach
                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-static" role="tabpanel" aria-labelledby="v-pills-static-tab">
                <div class="row">

                    @foreach($settings as $setting)

                    @if($setting->key != 'about_application_ar' && $setting->key != 'about_application_en' )
                    @if($setting->type == 'textarea')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <textarea name="{{ $setting->key }}" class="form-control" id="{{ $setting->key }}" cols="30" rows="10">{{ $setting->value }}</textarea>
                        </div>
                    </div>
                    @endif
                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-setting" role="tabpanel" aria-labelledby="v-pills-setting-tab">
                <div class="row">

                    @foreach($settings as $setting)

                    @if($setting->section == 'about')

                    @if($setting->type == 'file')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <a id="{{ $setting->key }}" data-input="{{ $setting->key }}" data-preview="{{ $setting->key }}" class="lfm btn btn-secondary text-white px-4" style="border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                    <i class="fa fa-picture-o"></i> {{ awtTrans('اختر الصورة') }}
                                </a>
                            </span>

                            <input type="text" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" readonly value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />

                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <img width="100" src="{{ $setting->value }}" alt="">
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif

                    @if($setting->type == 'text')

                    @if($setting->key == 'video')

                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                        @php
                        $url = $setting->value;
                        $url_components = parse_url($url);
                        parse_str($url_components['query'], $params);
                        $key = $params['v'];
                        @endphp
                        <iframe src="https://www.youtube.com/embed/{{$key}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    @else


                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>


                    @endif


                    @endif


                    @if($setting->type == 'textarea')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <textarea name="{{ $setting->key }}" class="form-control" id="{{ $setting->key }}" cols="30" rows="10">{{ $setting->value }}</textarea>
                        </div>
                    </div>
                    @endif


                    @if($setting->type == 'pdf')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <input type="file" accept=".pdf" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <a href="{{ url($setting->value) }}" target="_blank"><i class="fa fa-file"></i></a>
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif


                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-size" role="tabpanel" aria-labelledby="v-pills-size-tab">
                <div class="row">

                    @foreach($settings as $setting)

                    @if($setting->section == 'market')

                    @if($setting->type == 'file')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <a id="{{ $setting->key }}" data-input="{{ $setting->key }}" data-preview="{{ $setting->key }}" class="lfm btn btn-secondary text-white px-4" style="border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                    <i class="fa fa-picture-o"></i> {{ awtTrans('اختر الصورة') }}
                                </a>
                            </span>

                            <input type="text" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" readonly value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />

                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <img width="100" src="{{ $setting->value }}" alt="">
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif

                    @if($setting->type == 'text')


                    <div class=" {{ $setting->key == 'creativity' ? 'col-12' : 'col-6' }}">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>

                    @endif


                    @if($setting->type == 'textarea')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <textarea name="{{ $setting->key }}" class="form-control" id="{{ $setting->key }}" cols="30" rows="10">{{ $setting->value }}</textarea>
                        </div>
                    </div>
                    @endif
                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-timetable" role="tabpanel" aria-labelledby="v-pills-timetable-tab">
                <div class="row">

                    @foreach($settings as $setting)

                    @if($setting->section == 'timetable')

                    @if($setting->type == 'file')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <a id="{{ $setting->key }}" data-input="{{ $setting->key }}" data-preview="{{ $setting->key }}" class="lfm btn btn-secondary text-white px-4" style="border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                    <i class="fa fa-picture-o"></i> {{ awtTrans('اختر الصورة') }}
                                </a>
                            </span>

                            <input type="text" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" readonly value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />

                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <img width="100" src="{{ $setting->value }}" alt="">
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif

                    @if($setting->type == 'text')


                    <div class=" {{ $setting->key == 'creativity' ? 'col-12' : 'col-6' }}">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>

                    @endif


                    @if($setting->type == 'textarea')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <textarea name="{{ $setting->key }}" class="form-control" id="{{ $setting->key }}" cols="30" rows="10">{{ $setting->value }}</textarea>
                        </div>
                    </div>
                    @endif
                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-manufacturing_request" role="tabpanel" aria-labelledby="v-pills-manufacturing_request-tab">
                <div class="row">

                    @foreach($settings as $setting)

                    @if($setting->section == 'manufacturing_request')

                    @if($setting->type == 'file')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <a id="{{ $setting->key }}" data-input="{{ $setting->key }}" data-preview="{{ $setting->key }}" class="lfm btn btn-secondary text-white px-4" style="border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                    <i class="fa fa-picture-o"></i> {{ awtTrans('اختر الصورة') }}
                                </a>
                            </span>

                            <input type="text" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" readonly value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />

                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <img width="100" src="{{ $setting->value }}" alt="">
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif

                    @if($setting->type == 'text')


                    <div class=" {{ $setting->key == 'creativity' ? 'col-12' : 'col-6' }}">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>

                    @endif


                    @if($setting->type == 'textarea')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <textarea name="{{ $setting->key }}" class="form-control" id="{{ $setting->key }}" cols="30" rows="10">{{ $setting->value }}</textarea>
                        </div>
                    </div>
                    @endif
                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-mail" role="tabpanel" aria-labelledby="v-pills-mail-tab">
                <div class="row">


                    <div class="col-12">
                        <div class="form-group">
                            <button type="button" class="btn btn-dark btn-block" id="add-default">الوضع الافتراضي</button>

                        </div>
                    </div>

                    @foreach($settings as $setting)

                    @if($setting->section == 'color')


                    @if($setting->type == 'color')

                    <div class="col-3">
                        <div class="form-group">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="color" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>

                    @endif


                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-language" role="tabpanel" aria-labelledby="v-pills-language-tab">
                <div class="row">


                    @foreach($settings as $setting)

                    @if($setting->section == 'language')


                    @if($setting->type == 'text')

                    <div class="col-6">
                        <div class="form-group">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>

                    @endif


                    @endif

                    @endforeach

                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-about_statistic" role="tabpanel" aria-labelledby="v-pills-about_statistic-tab">
                <div class="row">

                    @foreach($settings as $setting)

                    @if($setting->section == 'about_statistic')

                    @if($setting->type == 'file')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <a id="{{ $setting->key }}" data-input="{{ $setting->key }}" data-preview="{{ $setting->key }}" class="lfm btn btn-secondary text-white px-4" style="border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                    <i class="fa fa-picture-o"></i> {{ awtTrans('اختر الصورة') }}
                                </a>
                            </span>

                            <input type="text" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" readonly value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />

                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <img width="100" src="{{ $setting->value }}" alt="">
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif

                    @if($setting->type == 'text')

                    @if($setting->key == 'video')

                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                        @php
                        $url = $setting->value;
                        $url_components = parse_url($url);
                        parse_str($url_components['query'], $params);
                        $key = $params['v'];
                        @endphp
                        <iframe src="https://www.youtube.com/embed/{{$key}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    @else


                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <input type="text" class="form-control dt-full-name-ar" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                    </div>


                    @endif


                    @endif


                    @if($setting->type == 'textarea')
                    <div class="col-6">
                        <div class="form-group" id="dis_first_title_ar">
                            <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                            <textarea name="{{ $setting->key }}" class="form-control" id="{{ $setting->key }}" cols="30" rows="10">{{ $setting->value }}</textarea>
                        </div>
                    </div>
                    @endif


                    @if($setting->type == 'pdf')
                    <div class="form-group col-lg-12">
                        <label class="form-label" for="{{$setting->key}}">{{ __($setting->neckname) }}</label>
                        <div class="input-group">
                            <input type="file" accept=".pdf" class="form-control {{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" name="{{$setting->key}}" id="{{$setting->key}}" placeholder="{{ __($setting->neckname) }}" aria-label="{{ __($setting->neckname) }}" />
                        </div>
                        <div class="mb-3 mt-3 d-block slider-holder {{ $setting->key }}">
                            <a href="{{ url($setting->value) }}" target="_blank"><i class="fa fa-file"></i></a>
                        </div>
                        <small class="text-danger">{{ $errors->first('logo') }}</small>
                    </div>
                    @endif


                    @endif

                    @endforeach

                </div>
            </div>

        </div>
        {!! Form::submit(awtTrans('Settings Update'), ['class' => 'btn btn-success']) !!}

        {!! Form::close() !!}
    </div>


</div>

@foreach($settings as $setting)

@if($setting->section == 'default_color')
<input type="hidden" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}">
@endif
@endforeach

@endsection
@section('scripts')
<!-- <script src="{{ url('dashboard') }}/forms/settings/edit.js"></script> -->
<script src="https://cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdarVlRZOccFIGWJiJ2cFY8-Sr26ibiyY&libraries=places&callback=initAutocomplete&language=<?php echo e('ar'); ?>" defer></script>
<script src="{{ url('dashboard') }}/custom/map.js"></script>

<script>
    // CKEDITOR.replace('about_application_ar', {
    //     language: 'ar'
    // });
    // CKEDITOR.replace('about_application_en', {
    //     language: 'ar'
    // });

    // ================== emails ========================
    $(document).on('click', '.remove-email', function() {
        $(this).closest('.remove-this').remove();
    })

    $(document).on('click', '.add-email', function() {

        var html = `<div class="col-12 row remove-this">
                        <div class="col-10">
                            <div class="form-group">
                                <input type="tel" class="form-control dt-full-name-ar" value="" name="emails[]" id="emails" placeholder="Email" aria-label="emails" />
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="form-group">
                                <button type="button" class="btn btn-danger form-control remove-email"><i class="fa fa-trash"></i></button>
                            </div>
                        </div>
                    </div>`;

        $('#append-email').append(html);

    })

    // ================== phones ========================
    $(document).on('click', '.remove-phone', function() {
        $(this).closest('.remove-this').remove();
    })

    $(document).on('click', '.add-phone', function() {

        var html = `<div class="col-12 row remove-this">
                        <div class="col-10">
                            <div class="form-group">
                                <input type="tel" class="form-control dt-full-name-ar" value="" name="phones[]" id="phones" placeholder="phone" aria-label="phones" />
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="form-group">
                                <button type="button" class="btn btn-danger form-control remove-phone"><i class="fa fa-trash"></i></button>
                            </div>
                        </div>
                    </div>`;

        $('#append-phone').append(html);

    })


    $(document).on('click', '#add-default', function() {

        $('#main_first_color').val($('#default_main_first_color').val())
        $('#main_second_color').val($('#default_main_second_color').val())
        $('#main_third_color').val($('#default_main_third_color').val())
        $('#main_six_color').val($('#default_main_six_color').val())
        $('#color_header').val($('#default_color_header').val())

    })
</script>
@endsection