<x-app-layout>

<x-slot name="after_style">
    <style>
        .card-actions .voyager-trash {
            cursor: pointer;
        }
    
        .card-actions .voyager-trash:hover {
            color: #e94542;
        }
    
        .settings .card-actions {
            right: 0px;
        }
    
        .card-actions {
            color: #76838f;
            z-index: 1;
            margin: auto;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    
        .card hr {
            margin-bottom: 10px;
        }
    
        .card {
            padding-bottom: 15px;
        }
    
        .sort-icons {
            font-size: 21px;
            color: #ccc;
            position: relative;
            cursor: pointer;
        }
    
        .sort-icons:hover {
            color: #37474F;
        }
    
        .voyager-sort-desc {
            margin-right: 10px;
        }
    
        .voyager-sort-asc {
            top: 10px;
        }
    
        .page-title {
            margin-bottom: 0;
        }
    
        .oanel-title code {
            border-radius: 30px;
            padding: 5px 10px;
            font-size: 11px;
            border: 0;
            position: relative;
            top: -2px;
        }
    
        .modal-open .settings .select2-container {
            z-index: 9 !important;
            width: 100% !important;
        }
    
        .new-setting {
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }
    
        .new-setting .panel-title {
            margin: 0 auto;
            display: inline-block;
            color: #999fac;
            font-weight: lighter;
            font-size: 13px;
            background: #fff;
            width: auto;
            height: auto;
            position: relative;
            padding-right: 15px;
        }
        .modal.modal-danger .modal-header {
                background-color: #fa2a00;
                color: #fff;
        }
    
        .settings .panel-title {
            padding-left: 0px;
            padding-right: 0px;
        }
    
        .new-setting hr {
            margin-bottom: 0;
            position: absolute;
            top: 7px;
            width: 96%;
            margin-left: 2%;
        }
    
        .new-setting .panel-title i {
            position: relative;
            top: 2px;
        }
    
        .new-settings-options {
            display: none;
            padding-bottom: 10px;
        }
    
        .new-settings-options label {
            margin-top: 13px;
        }
    
        .new-settings-options .alert {
            margin-bottom: 0;
        }
    
        #toggle_options {
            clear: both;
            float: right;
            font-size: 12px;
            position: relative;
            margin-top: 15px;
            margin-right: 5px;
            margin-bottom: 10px;
            cursor: pointer;
            z-index: 9;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    
        .new-setting-btn {
            position: relative;
            margin-bottom: 0;
            top: 5px;
        }
    
        .new-setting-btn i {
            position: relative;
            top: 2px;
        }
    
        textarea {
            min-height: 120px;
        }
    
        textarea.hidden {
            display: none;
        }
    
        .voyager .settings .nav-tabs {
            background: none;
            border-bottom: 0px;
        }
    
        .voyager .settings .nav-tabs .active a {
            border: 0px;
        }
    
        .select2 {
            width: 100% !important;
            border: 1px solid #f1f1f1;
            border-radius: 3px;
        }
    
        .voyager .settings input[type=file] {
            width: 100%;
        }
    
        .settings .select2 {
            margin-left: 10px;
        }
    
        .settings .select2-selection {
            height: 32px;
            padding: 2px;
        }
    
        .voyager .settings .nav-tabs>li {
            margin-bottom: -1px !important;
        }
    
        .voyager .settings .nav-tabs a {
            text-align: center;
            background: #f8f8f8;
            border: 1px solid #f1f1f1;
            position: relative;
            top: -1px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }
    
        .voyager .settings .nav-tabs a i {
            display: block;
            font-size: 22px;
        }
    
        .tab-content {
            background: #ffffff;
            border: 1px solid transparent;
        }
    
        .tab-content>div {
            padding: 10px;
        }
    
        .settings .no-padding-left-right {
            padding-left: 0px;
            padding-right: 0px;
        }
    
        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:focus,
        .nav-tabs>li.active>a:hover {
            background: #fff !important;
            color: #62a8ea !important;
            border-bottom: 1px solid #fff !important;
            top: -1px !important;
        }
    
        .nav-tabs>li a {
            transition: all 0.3s ease;
        }
    
    
        .nav-tabs>li.active>a:focus {
            top: 0px !important;
        }
    
        .voyager .settings .nav-tabs>li>a:hover {
            background-color: #fff !important;
        }
    </style>
</x-slot>
<x-slot name="header">
    <div class="row">
        <div class="col-md-6">
            <h4 class="" title><i class="circular icon fa fa-cog"></i> {{__('Settings')}} </h4>
        </div>
    </div>
</x-slot>


    <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
        {{ method_field("PUT") }}
        {{ csrf_field() }}
        <input type="hidden" name="setting_tab" class="setting_tab" value="{{ $active }}" />
        <div class="card">

            <div class="page-content settings container-fluid pt-2">
                <ul class="nav nav-tabs" role="tablist" id="myTab">
                    @foreach($settings as $group => $setting)
                    <li class="nav-item">
                        <a class="nav-link {{ $group == $active? 'active' : '' }}" data-toggle="tab"  href="#nav-{{ \Illuminate\Support\Str::slug($group) }}">{{ $group }}</a>
                    </li>
                    @endforeach
                </ul>

                <div class="tab-content">
                    @foreach($settings as $group => $group_settings)
                    <div role="tabpanel" id="nav-{{ \Illuminate\Support\Str::slug($group) }}" class="tab-pane fade @if($group == $active) show active @endif">
                        @foreach($group_settings as $setting)
                        <div class="card-heading" style="position: relative;">
                            <label class="panel-title">
                                {{ $setting->display_name }} @if(config('voyager.show_dev_tips'))<code>setting('{{ $setting->key }}')</code>@endif
                            </label>
                            <div class="card-actions float-right">
                                @can('delete', 'App/Models/Setting')
                                <i class="voyager-trash fa fa-trash" data-id="{{ $setting->id }}" data-display-key="{{ $setting->key }}" data-display-name="{{ $setting->display_name }}"></i>
                                @endcan
                            </div>
                        </div>

                        <div class="no-padding-left-right">
                            <div class="row">
                                <div class="form-group col-md-10">
                                    @if ($setting->type == "text")
                                    <input type="text" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value??config($setting->key) }}">
                                    @elseif($setting->type == "text_area")
                                    <textarea class="form-control" name="{{ $setting->key }}">{{ $setting->value ?? '' }}</textarea>
                                    @elseif($setting->type == "image" || $setting->type == "file")
                                    @if(isset( $setting->value ) && !empty( $setting->value ) && Storage::disk(config('voyager.storage.disk'))->exists($setting->value))
                                    <div class="img_settings_container">
                                        <a href="{{ route('settings.delete_value', $setting->id) }}" class="voyager-x delete_value"></a>
                                        <img src="{{ asset('storage/'.$setting->value) }}" style="width:200px; height:auto; padding:2px; border:1px solid #ddd; margin-bottom:10px;">
                                    </div>
                                    <div class="clearfix"></div>
                                    @endif
                                    <input type="file" name="{{ $setting->key }}">
                                    @endif
                                </div>
                                <div class="form-group  col-md-2">
                                    <select class="form-control group_select" name="{{ $setting->key }}_group">
                                        @foreach($groups as $group)
                                        <option value="{{ $group }}" {!! $setting->group == $group ? 'selected' : '' !!}>{{ $group }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>
                        @if(!$loop->last)
                        <hr>
                        @endif
                        @endforeach
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary float-right">{{ __('Save Settings') }}</button>

            </div>
        </div>
    </form>
    @can('delete_images')
     <a type="submit"   data-toggle="modal" href="#modaldemo9" class="btn btn-danger float-right">delete images</a>
    <div class="modal" id="modaldemo9">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content modal-content-demo">
                     
                        <div class="modal-header">
                            <h6 class="modal-title"></h6><button aria-label="Close" class="close" data-dismiss="modal"
                                type="button"><span aria-hidden="true">&times;</span></button>
                        </div>
                        
                            <div class="modal-body">
                                <p> Are you delete</p><br>
                            </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">الغاء</button>
                           <a  href="{{route('delete.image')}}" class="btn-btn-danger" >save </a>
                        </div>
                </div>
            </div>
        </div>
    @endcan    

    <div style="clear:both"></div>

    @can('add','App/Models/Setting')
    <div class="card" style="margin-top:10px;">
        <div class="card-heading new-setting">
            <hr>
            <h3 class="panel-title"><i class="fa fa-plus"></i> {{ __(' New Setting') }}</h3>
        </div>
        <div class="card-body">
            <form action="{{ route('settings.store') }}" method="POST">
                {{ csrf_field() }}
                <input type="hidden" name="setting_tab" class="setting_tab" value="{{ $active }}" />
                <div class="row ">
                    <div class="col-md-3">
                        <label for="display_name">{{ __('Name') }}</label>
                        <input type="text" class="form-control" name="display_name" placeholder="{{ __('Admin Title') }}" required="required">
                    </div>
                    <div class="col-md-3">
                        <label for="key">{{ __('key') }}</label>
                        <input type="text" class="form-control" name="key" placeholder="{{ __('admin_title') }}" required="required">
                    </div>
                    <div class="col-md-3">
                        <label for="type">{{ __('Type') }}</label>
                        <select name="type" class="form-control" required="required">
                            <option value="">{{ __('Choose Type') }}</option>
                            <option value="text">{{ __('Text Box') }}</option>
                            <option value="text_area">{{ __('Text Area') }}</option>
                            <option value="image">{{ __('Image') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="group">{{ __('Group') }}</label>
                        <select class="form-control group_select group_select_new" name="group">
                            @foreach($groups as $group)
                            <option value="{{ $group }}">{{ $group }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary float-right new-setting-btn">
                    <i class="voyager-plus"></i> {{ __('Add New Setting') }}
                </button>
                
                

            </form>
        </div>

    </div>
    @endcan

@can('delete', 'App\Models\Setting')
<div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">
                    <i class="voyager-trash"></i> {!! __('Are you sure you want to delete the :setting', ['setting' => '<span id="delete_setting_title"></span>']) !!}
                </h4>
            </div>
            <div class="modal-footer">
                <form action="#" id="delete_form" method="POST">
                    {{ method_field("DELETE") }}
                    {{ csrf_field() }}
                    <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('Confirm') }}">
                </form>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('Cancel') }}</button>
            </div>
        </div>
    </div>
</div>
@endcan

<x-slot name="after_script">
    <script>
        window.app = new Vue({
            el: '#app',
            mounted: function() {
                this.$root.load = false;
            }
        });
    </script>
    
    <script>
        $('document').ready(function() {
    
            $('[data-toggle="tab"]').click(function() {
                $(".setting_tab").val($(this).html());
            });
    
            @can('delete', 'App\Models\Setting')
                $('.card-actions .voyager-trash').click(function () {
                    var display = $(this).data('display-name') + '/' + $(this).data('display-key');
    
                    $('#delete_setting_title').text(display);
    
                    $('#delete_form')[0].action = '{{ route('settings.destroy', [ 'setting' => '__id' ]) }}'.replace('__id', $(this).data('id'));
                    $('#delete_modal').modal('show');
                });
            @endcan
    
    
            // Initiliaze rich text editor
        });
    </script>
    
</x-slot>


</x-app-layout>