@extends('backend.layouts.app')

@section('content')

    <div class="aiz-titlebar text-left mt-2 mb-3">
        <div class="row align-items-center">
            <div class="col">
                <h1 class="h3">{{ translate('Website Footer') }}</h1>
            </div>
        </div>
    </div>
    <ul class="nav nav-tabs nav-fill border-light">
        @foreach (\App\Models\Language::all() as $key => $language)
            <li class="nav-item">
                <a class="nav-link text-reset @if ($language->code == $lang) active @else bg-soft-dark border-light border-left-0 @endif py-3"
                   href="{{ route('website.footer', ['lang'=> $language->code] ) }}">
                    <img src="{{ static_asset('assets/img/flags/'.$language->code.'.png') }}" height="11" class="mr-1">
                    <span>{{$language->name}}</span>
                </a>
            </li>
        @endforeach
    </ul>
    <div class="card">
        <div class="card-header">
            <h6 class="fw-600 mb-0">{{ translate('Footer Widget') }}</h6>
        </div>
        <div class="card-body">
            <div class="row gutters-10">
                <div class="col-lg-6">
                    <div class="card shadow-none bg-light">
                        <div class="card-header">
                            <h6 class="mb-0">{{ translate('About Widget') }}</h6>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('business_settings.update') }}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label class="form-label" for="signinSrEmail">{{ translate('Footer Logo') }}</label>
                                    <div class="input-group " data-toggle="aizuploader" data-type="image">
                                        <div class="input-group-prepend">
                                            <div
                                                class="input-group-text bg-soft-secondary font-weight-medium">{{ translate('Browse') }}</div>
                                        </div>
                                        <div class="form-control file-amount">{{ translate('Choose File') }}</div>
                                        <input type="hidden" name="types[]" value="footer_logo">
                                        <input type="hidden" name="footer_logo" class="selected-files"
                                               value="{{ get_setting('footer_logo') }}">
                                    </div>
                                    <div class="file-preview"></div>
                                </div>
                                <div class="form-group">
                                    <label>{{ translate('About description') }} ({{ translate('Translatable') }}
                                        )</label>
                                    <input type="hidden" name="types[][{{ $lang }}]" value="about_us_description">
                                    <textarea class="aiz-text-editor form-control" name="about_us_description"
                                              data-buttons='[["font", ["bold", "underline", "italic"]],["para", ["ul", "ol"]],["view", ["undo","redo"]]]'
                                              placeholder="Type.." data-min-height="150">
                                        {!! get_setting('about_us_description',null,$lang); !!}
                                    </textarea>
                                </div>
                                <div class="form-group">
                                    <label>{{ translate('Play Store Link') }}</label>
                                    <input type="hidden" name="types[]" value="play_store_link">
                                    <input type="text" class="form-control" placeholder="http://" name="play_store_link"
                                           value="{{ get_setting('play_store_link') }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ translate('App Store Link') }}</label>
                                    <input type="hidden" name="types[]" value="app_store_link">
                                    <input type="text" class="form-control" placeholder="http://" name="app_store_link"
                                           value="{{ get_setting('app_store_link') }}">
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">{{ translate('Update') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card shadow-none bg-light">
                        <div class="card-header">
                            <h6 class="mb-0">{{ translate('Contact Info Widget') }}</h6>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('business_settings.update') }}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label>{{ translate('Contact address') }} ({{ translate('Translatable') }})</label>
                                    <input type="hidden" name="types[][{{ $lang }}]" value="contact_address">
                                    <input type="text" class="form-control" placeholder="{{ translate('Address') }}"
                                           name="contact_address"
                                           value="{{ get_setting('contact_address',null,$lang) }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ translate('Contact phone') }}</label>
                                    <input type="hidden" name="types[]" value="contact_phone">
                                    <input type="text" class="form-control" placeholder="{{ translate('Phone') }}"
                                           name="contact_phone" value="{{ get_setting('contact_phone') }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ translate('Contact email') }}</label>
                                    <input type="hidden" name="types[]" value="contact_email">
                                    <input type="text" class="form-control" placeholder="{{ translate('Email') }}"
                                           name="contact_email" value="{{ get_setting('contact_email') }}">
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">{{ translate('Update') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card shadow-none bg-light">
                        <div class="card-header">
                            <h6 class="mb-0">{{ translate('Link Widget One') }}</h6>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('business_settings.update') }}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label>{{ translate('Title') }} ({{ translate('Translatable') }})</label>
                                    <input type="hidden" name="types[][{{ $lang }}]" value="widget_one">
                                    <input type="text" class="form-control" placeholder="Widget title" name="widget_one"
                                           value="{{ get_setting('widget_one',null,$lang) }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ translate('Links') }} -
                                        ({{ translate('Translatable') }} {{ translate('Label') }})</label>
                                    <div class="w3-links-target">
                                        <input type="hidden" name="types[][{{ $lang }}]" value="widget_one_labels">
                                        <input type="hidden" name="types[]" value="widget_one_links">
                                        @if (get_setting('widget_one_labels',null,$lang) != null)
                                            @foreach (json_decode(get_setting('widget_one_labels',null,$lang), true) as $key => $value)
                                                <div class="row">
                                                    <div class="col-auto">
                                                        <div
                                                            class="form-check form-switch form-check-custom form-check-solid">
                                                            <input class="form-check-input " date-key="{{$key}}"
                                                                   type="checkbox" value=""
                                                                   id="flexSwitchDefault{{$key}}"/>
                                                            <label class="form-check-label"
                                                                   for="flexSwitchDefault{{$key}}">
                                                                Default switch
                                                            </label>
                                                        </div>

                                                    </div>

                                                    <div class="col-4">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control"
                                                                   placeholder="{{translate('Label')}}"
                                                                   name="widget_one_labels[]" value="{{ $value }}">
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="form-group">
                                                            <select class="form-control"></select>
                                                        </div>
                                                    </div>

                                                    <div class="col">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control"
                                                                   placeholder="http://" name="widget_one_links[]"
                                                                   value="{{ json_decode(get_setting('widget_one_links'), true)[$key] }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-auto">
                                                        <button type="button"
                                                                class="mt-1 btn btn-icon btn-circle btn-sm btn-soft-danger"
                                                                data-toggle="remove-parent" data-parent=".row">
                                                            <i class="las la-times"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <button
                                        type="button"
                                        class="btn btn-soft-secondary btn-sm"
                                        data-toggle="add-more"
                                        data-content='<div class="row gutters-5">
    										<div class="col-4">
    											<div class="form-group">
    												<input type="text" class="form-control" placeholder="{{translate('Label')}}" name="widget_one_labels[]">
    											</div>
    										</div>
    										<div class="col">
    											<div class="form-group">
    												<input type="text" class="form-control" placeholder="http://" name="widget_one_links[]">
    											</div>
    										</div>
    										<div class="col-auto">
    											<button type="button" class="mt-1 btn btn-icon btn-circle btn-sm btn-soft-danger" data-toggle="remove-parent" data-parent=".row">
    												<i class="las la-times"></i>
    											</button>
    										</div>
    									</div>'
                                        data-target=".w3-links-target">
                                        {{ translate('Add New') }}
                                    </button>
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">{{ translate('Update') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>


                {{--                ----------------------------------}}

                <div class="col-lg-12">
                    <div class="card shadow-none bg-light">
                        <div class="card-header">
                            <h6 class="mb-0">{{ translate('Footer Menu') }}</h6>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('business_settings.update') }}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="lang" value="{{request()->lang}}">
                                @if (get_setting('footer', null, $lang) != null)

                                    @foreach (json_decode(get_setting('footer', null, $lang), true) as $key => $values)

                                        <div class="row">
                                            <div class="col">
                                                <label class="form-label"> {{ $key }}</label>
                                                <input class="form-control"  value="{{ $key }}" required>
                                            </div>
                                        </div>
                                        <br>
                                        <div id="repeater-container{{ $key }}">
                                                                                            @foreach ($values as $value)
                                                    


                                                <div class="repeater-item{{ $key }} form-group row">
                                                    <div class="col mx-1">
                                                        <div class="form-check form-switch form-check-custom form-check-solid">
                                                            <input class="form-check-input status" name="footer[{{ $key }}][{{ $i }}][switch]"
                                                                   {{ $value['page'] ? 'checked' : '' }} type="checkbox" value=""
                                                                   id="flexSwitchDefault"/>
                                                            <label class="form-check-label" for="flexSwitchDefault"></label>
                                                        </div>
                                                    </div>
                                                    <div class="col select-data">
                                                        <div class="form-group">
                                                            <select class="form-select" data-control="select2"
                                                                    name="footer[{{ $key }}][{{ $i }}][page]">
                                                                <option></option>
                                                                @foreach($pages as $page)
                                                                    <option {{ $value['page'] == $page->id ? 'selected' : '' }} value="{{ $page->id }}">
                                                                        {{ $page->getTranslation('title') }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="text-data col-4">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" placeholder="{{ translate('Label') }}"
                                                                   name="footer[{{ $key }}][{{ $i }}][label]"
                                                                   value="{{ $value['label'] ?? null }}">
                                                        </div>
                                                    </div>
                                                    <div class="text-data col">
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" placeholder="http://"
                                                                   name="footer[{{ $key }}][{{ $i }}][text]"
                                                                   value="{{ $value['text'] ?? null }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-1">
                                                        <button class="remove-item{{ $key }} btn btn-danger btn-icon w-50" type="button">
                                                            <i class="fa-regular fa-trash-can"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <button id="add-item{{ $key }}" class="add-item btn btn-primary mb-5 pb-5" type="button">
                                            <i class="fa-solid fa-plus"></i>
                                        </button>
                                    @endforeach
                                @endif
                                <div class="text-right">
                                    <button type="submit"
                                            class="btn btn-primary">{{ translate('Update') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h6 class="fw-600 mb-0">{{ translate('Footer Bottom') }}</h6>
        </div>
        <form action="{{ route('business_settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">

                <div class="card shadow-none bg-light">
                    <div class="card-header">
                        <h6 class="mb-0">{{ translate('Social Link Widget ') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group row">
                            <label class="col-md-2 col-from-label">{{translate('Show Social Links?')}}</label>
                            <div class="col-md-9">
                                <label class="aiz-switch aiz-switch-success mb-0">
                                    <input type="hidden" name="types[]" value="show_social_links">
                                    <input type="checkbox" name="show_social_links"
                                           @if( get_setting('show_social_links') == 'on') checked @endif>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ translate('Social Links') }}</label>
                            <div class="input-group form-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="lab la-facebook-f"></i></span>
                                </div>
                                <input type="hidden" name="types[]" value="facebook_link">
                                <input type="text" class="form-control" placeholder="http://" name="facebook_link"
                                       value="{{ get_setting('facebook_link')}}">
                            </div>
                            <div class="input-group form-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="lab la-twitter"></i></span>
                                </div>
                                <input type="hidden" name="types[]" value="twitter_link">
                                <input type="text" class="form-control" placeholder="http://" name="twitter_link"
                                       value="{{ get_setting('twitter_link')}}">
                            </div>
                            <div class="input-group form-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="lab la-instagram"></i></span>
                                </div>
                                <input type="hidden" name="types[]" value="instagram_link">
                                <input type="text" class="form-control" placeholder="http://" name="instagram_link"
                                       value="{{ get_setting('instagram_link')}}">
                            </div>
                            <div class="input-group form-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="lab la-youtube"></i></span>
                                </div>
                                <input type="hidden" name="types[]" value="youtube_link">
                                <input type="text" class="form-control" placeholder="http://" name="youtube_link"
                                       value="{{ get_setting('youtube_link')}}">
                            </div>
                            <div class="input-group form-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="lab la-linkedin-in"></i></span>
                                </div>
                                <input type="hidden" name="types[]" value="linkedin_link">
                                <input type="text" class="form-control" placeholder="http://" name="linkedin_link"
                                       value="{{ get_setting('linkedin_link')}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card shadow-none bg-light">
                    <div class="card-header">
                        <h6 class="mb-0">{{ translate('Payment Methods Widget ') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>{{ translate('Payment Methods') }}</label>
                            <div class="input-group" data-toggle="aizuploader" data-type="image" data-multiple="true">
                                <div class="input-group-prepend">
                                    <div
                                        class="input-group-text bg-soft-secondary font-weight-medium">{{ translate('Browse')}}</div>
                                </div>
                                <div class="form-control file-amount">{{ translate('Choose File') }}</div>
                                <input type="hidden" name="types[]" value="payment_method_images">
                                <input type="hidden" name="payment_method_images" class="selected-files"
                                       value="{{ get_setting('payment_method_images')}}">
                            </div>
                            <div class="file-preview box sm">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-right">
                    <button type="submit" class="btn btn-primary">{{ translate('Update') }}</button>
                </div>
            </div>
        </form>
    </div>


@endsection

@section('script')
    <script>
        $(document).ready(function () {
            @if (get_setting('footer', null, $lang) != null)
            @foreach (json_decode(get_setting('footer', null, $lang), true) as $key => $values)

            setupRepeater('{{ $key }}');

            @foreach ($values as $value)

            var isChecked = {{ $value['page'] ? 'true' : 'false' }};
            var selectElement = $('.repeater-item{{ $key }}').find('.select-data');
            var inputElement = $('.repeater-item{{ $key }}').find('.text-data');
            if (isChecked) {
                selectElement.show();
                inputElement.hide();
            } else {
                selectElement.hide();
                inputElement.show();
            }
            @endforeach

            @endforeach
            @endif
        });

        function setupRepeater(key, values) {
            var counter = {{isset($values)? count($values):0}};
            $('#add-item' + key).click(function () {
                counter++;
                var newItem = $(".repeater-item" + key + ":first").clone();
                newItem.find('select').val('');
                newItem.find('[name^="footer[' + key + ']"][name$="[label]"]').attr('name', 'footer[' + key + '][' + counter + '][label]');
                newItem.find('[name^="footer[' + key + ']"][name$="[text]"]').attr('name', 'footer[' + key + '][' + counter + '][text]');
                newItem.find('[name^="footer[' + key + ']"][name$="[page]"]').attr('name', 'footer[' + key + '][' + counter + '][page]');
                newItem.find('[name^="footer[' + key + ']"][name$="[switch]"]').attr('name', 'footer[' + key + '][' + counter + '][switch]');

                $("#repeater-container" + key).append(newItem);
                bindEventListeners(key);
            });

            $(document).on("click", ".remove-item" + key, function () {
                if (counter > 0) {
                    $(this).closest('.repeater-item' + key).remove();
                    counter--;
                }
            });

            bindEventListeners(key);
        }

        function bindEventListeners(key) {
            $(document).off("click", ".remove-item" + key).on("click", ".remove-item" + key, function () {
                $(this).closest('.repeater-item' + key).remove();
            });

            $(document).off('change', '.status').on('change', '.status', function () {
                var isChecked = $(this).prop('checked');
                var selectElement = $(this).closest('.repeater-item' + key).find('.select-data');
                var inputElement = $(this).closest('.repeater-item' + key).find('.text-data');
                if (isChecked) {
                    selectElement.show();
                    inputElement.hide();
                } else {
                    selectElement.hide();
                    inputElement.show();
                }
            });
        }



    </script>
@endsection