@extends('layouts.admin')

@section('content')
    <div>
        @if($setting_sections)

            <nav class="nav nav-tabs nav-pillV nav-fill nav-justified navbar-light" role="tablist" id="tablist-bloc-setting">
                @foreach($setting_sections as $setting_section)
                    <button class="nav-link {{$loop->first ? 'active' : ""}} text-sm-center fs-15"
                            href="#"
                            id="tab-{{$setting_section}}"
                            type="button"
                            role="tab"
                            aria-controls="tab-content-{{$setting_section}}"
                            aria-selected="true"
                            data-bs-toggle="tab"
                            {{$setting_section == "XPEEDY" ? "disabled" : ""}}
                            :disabled=""
                            data-bs-target="#tab-content-{{$setting_section}}">
                            <h6 class="m-b-0 fs-13">
{{--                                <i class="fa fa-shopping-cart"></i>--}}
                                {{ ucfirst(str_replace("_"," ",strtolower($setting_section))) }}
                            </h6>
                    </button>
                @endforeach
            </nav>

            <div class="tab-content" id="myTabContent">
                @foreach($setting_sections as $setting_section)
                    <div x-data="show_settings('{{$setting_section}}')"
                        class="tab-pane fade {{$loop->first ? 'show active' : ""}}"
                         id="tab-content-{{$setting_section}}"
                         role="tabpanel"
                         aria-labelledby="tab-{{$setting_section}}">

                        <div class="card-body p-3 bg-white border">

                            <div class="row">
                                <template x-for="(setting,i) in settings" :key="setting.id">
                                    <div class="col-12">
                                        <div class="form-group form-floatings form-check m-b-10">
                                            <template x-if="setting.type !== 'switch' && setting.type !== 'radio' && setting.type !== 'checkbox'">
                                                <span>
                                                    <span>
                                                          <label class="m-b-0" x-text="setting.display_name"></label>
                                                    </span>
                                                    <span class="float-rightd">
                                                         <template x-if="setting.description">
                                                            <span class="fs-14">
                                                                <i class="fa fa-info-circle text-blue"
                                                                   data-bs-toggle="tooltip"
                                                                   data-bs-placement="top"
                                                                   :title="setting.description">
                                                                 </i>
                                                            </span>
                                                        </template>

                                                    </span>
                                                </span>

                                            </template>

                                            {{--                                    @if(setting.type == 'text')--}}
                                            <template x-if="!setting.type || setting.type === 'text'">
                                                <input type="text" x-model="settings[i].value" class="form-control">
                                            </template>
                                            <template x-if="setting.type === 'email'">
                                                <input type="email" x-model="settings[i].value" class="form-control">
                                            </template>
                                            <template x-if="setting.type === 'number'">
                                                <input type="number" x-model="settings[i].value" class="form-control">
                                            </template>
                                            <template x-if="setting.type === 'textarea'">
                                                <textarea x-model="settings[i].value" class="form-control" cols="3" rows="5"></textarea>
                                            </template>
                                            <template x-if="setting.type === 'image' || setting.type === 'file'">
                                                <input type="file" x-model="settings[i].value" class="form-control">
                                            </template>
                                            <template x-if="setting.type === 'url' || setting.type === 'link'">
                                                <input type="url" x-model="settings[i].value" class="form-control">
                                            </template>
                                            <template x-if="setting.type === 'radio'">
                                                <input type="radio"
                                                       x-model="settings[i].value"
                                                       :id="'radio-'+setting.key"
                                                       class="form-check-input">
                                                <label class="form-check-label fs-14 cursor-pointer"
                                                       :for="'radio-'+setting.key"
                                                       x-text="setting.display_name">
                                                </label>
                                            </template>
                                            <template x-if="setting.type === 'checkbox'">
                                                <input type="checkbox"
                                                       x-model="settings[i].value"
                                                       :id="'checkbox-'+setting.key"
                                                       class="form-check-input">
                                                <label class="form-check-label fs-14 cursor-pointer"
                                                       :for="'checkbox-'+setting.key"
                                                       x-text="setting.display_name">
                                                </label>
                                            </template>
                                            <template x-if="setting.type === 'switch'">
                                                <div >
                                                    <div class="custom-control custom-switch cursor-pointer"  x-data>
                                                        <input type="checkbox"
                                                               class="custom-control-input cursor-pointer"
                                                               x-model="settings[i].value"
                                                               x-init="(setting.value === '1') ? $el.setAttribute('checked','checked') : ''"
                                                               :id="'switch-'+setting.key">
                                                        <label class="custom-control-label fs-14 cursor-pointer"
                                                               :for="'switch-'+setting.key"
                                                               x-text="setting.display_name">
                                                        </label>
                                                        <span class="float-rightd">
                                                                 <template x-if="setting.description">
                                                                    <span class="fs-14">
                                                                        <i class="fa fa-info-circle text-blue"
                                                                           data-toggle="tooltip"
                                                                           data-placement="top"
                                                                           :data-original-title="setting.description"
                                                                           :title="setting.description"
                                                                        >
                                                                         </i>
                                                                    </span>
                                                                </template>
                                                            </span>
                                                    </div>
                                                </div>
                                            </template>
                                            <template x-if="setting.type === 'select'">
                                                <select class="form-control select2" x-model="settings[i].value">
                                                    <template x-for="val in setting.value">
                                                        <option x-text="val" :value="val"></option>
                                                    </template>
                                                </select>
                                            </template>

                                            <template x-if="1===2">
                                                <small class="text-danger" x-text="'message error'"></small>
                                            </template>

                                        </div>
                                    </div>
                                </template>

                                <div class="col-lg-12 ">
                                   <div class="float-right">
                                       <button type="button"
                                               @click="edit"
                                               class="btn btn-success">
                                           {{__("Save")}}
                                           <span class="fa fa-save"></span>
                                       </button>
                                   </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        @else

        @endif
    </div>

@endsection


@push("js")
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })

        var all_settings = @json($settings)

        document.addEventListener('alpine:init', () => {

            Alpine.data("show_settings", (section)=>({
                settings : all_settings.filter(s => ( (s.section === section) && (s.type !== "file" && s.type !== "logo") )),

                edit () {
                    return confirmAction({
                                icon : "question",
                                title : section,
                                text  : "{{__("Confirm these updates ?")}}",
                                preConfirm : async () => {
                                    const body = this.settings.map( ({id,key,value}) => {
                                                    return {id, key,value}
                                                });
                                   // const body = this.settings;
                                    const data = await request("{{route("admin.settings.edit")}}",{body, method :'post'})

                                    swal.fire({
                                        icon : data.success ? 'success' : "error",
                                        title : section,
                                        html: data.message,
                                    })
                                }
                            })

                },

            }));

        });
    </script>
@endpush
