@extends('layout.store_layout.master')
@section('content')
    <!--begin::Products-->
    <div class="card card-flush">

        <!--begin::Card body-->
        <div class="card-body">

            @include('pages.store_admin.settings.account_settings._nav')

            <!--begin::Form-->
            <form enctype="multipart/form-data" id="settings_form" class="form" method="post"
                  action="{{ route('admin.settings_account_store') }}">
                @csrf
                <!--begin::Card body-->
                <div class="card-body border-top p-9">
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <!--begin::Label-->
                        <div class="col-lg-4">
                            <label class=" col-form-label fw-semibold fs-6">@lang('general.store_logo')</label>
                            <div
                                class="form-text">@lang('general.allowed_files_types',['types'=>'png, jpg, jpeg'])</div>

                        </div>

                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-8">
                            <!--begin::Image input-->
                            <style>.image-input-placeholder {
                                    background-image: url({{ asset('assets/media/svg/files/blank-image.svg') }});
                                }

                                [data-theme="dark"] .image-input-placeholder {
                                    background-image: url({{ asset('assets/media/svg/files/blank-image-dark.svg') }});
                                }</style>

                            <div
                                class="image-input image-input-outline image-input-placeholder @if(empty($store->logo)) image-input-empty @endif"
                                data-kt-image-input="true">
                                <!--begin::Preview existing avatar-->
                                <div class="image-input-wrapper w-125px h-125px"
                                     @if(!empty($store->logo)) style="background-image: url('{{asset($store->logo)}}')" @endif></div>
                                <!--end::Preview existing avatar-->
                                <!--begin::Label-->
                                <label
                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                    data-kt-image-input-action="change" data-bs-toggle="tooltip" title="رفع صورة جديدة">
                                    <i class="bi bi-pencil-fill fs-7"></i>
                                    <!--begin::Inputs-->
                                    <input type="file" name="logo" accept=".png, .jpg, .jpeg"/>
                                    <input type="hidden" name="avatar_remove"/>
                                    <!--end::Inputs-->
                                </label>
                                <!--end::Label-->
                                <!--begin::Cancel-->
                                <span
                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                    data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                    title="الغاء رفع الصورة">
                        <i class="bi bi-x fs-2"></i>
                    </span>
                                <!--end::Cancel-->
                                <!--begin::Remove-->
                                <span
                                    class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                    data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="حذف الصورة">
                        <i class="bi bi-x fs-2"></i>
                    </span>
                                <!--end::Remove-->
                            </div>
                            <!--end::Image input-->
                            <!--begin::Hint-->
                            {{--<div class="form-text"> الصيغ المدعومة: png, jpg, jpeg.</div>--}}
                            <!--end::Hint-->
                            <span id="logo_error" class="invalid-feedback custom-error"></span>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <!--begin::Label-->
                        <label class="col-lg-4 col-form-label  fw-semibold fs-6">@lang('general.store_name_ar')</label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-8 fv-row">
                            <input type="text" name="name_ar" class="form-control form-control-lg form-control-solid"
                                   placeholder="@lang('general.store_name_ar')"
                                   value="{{ !empty($store) ? $store->name_ar : '' }}"/>
                            <span id="name_ar_error" class="invalid-feedback custom-error"></span>
                        </div>
                        <!--end::Col-->
                    </div>
                    <div class="row mb-6">
                        <!--begin::Label-->
                        <label class="col-lg-4 col-form-label  fw-semibold fs-6">@lang('general.store_name_en')</label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-8 fv-row">
                            <input type="text" name="name_en" class="form-control form-control-lg form-control-solid"
                                   placeholder="@lang('general.store_name_en')"
                                   value="{{ !empty($store) ? $store->name_en : '' }}"/>
                            <span id="name_en_error" class="invalid-feedback custom-error"></span>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <!--begin::Label-->
                        <label
                            class="col-lg-4 col-form-label  fw-semibold fs-6">@lang('general.store_main_color')</label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-8">
                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Col-->
                                <div class="col-lg-6 fv-row form-group">
                                    <input type="color" name="primary_color" class="form-control mb-2"
                                           placeholder="@lang('general.store_main_color')"
                                           value="{{ !empty($store) && $store->storeSetting ? $store->storeSetting->primary_color : '' }}"/>
                                    <span id="primary_color_error" class="invalid-feedback custom-error"></span>
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <!--begin::Label-->
                        <label
                            class="col-lg-4 col-form-label  fw-semibold fs-6">@lang('general.store_secondary_color')</label>
                        <!--end::Label-->
                        <!--begin::Col-->
                        <div class="col-lg-8">
                            <!--begin::Row-->
                            <div class="row">
                                <!--begin::Col-->
                                <div class="col-lg-6 fv-row form-group">
                                    <input type="color" name="secondary_color" class="form-control mb-2"
                                           placeholder="@lang('general.store_secondary_color')"
                                           value="{{ !empty($store) && $store->storeSetting ? $store->storeSetting->secondary_color : '' }}"/>
                                    <span id="secondary_color_error" class="invalid-feedback custom-error"></span>
                                </div>
                                <!--end::Col-->
                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->
                    <div class="row mb-6">
                        <div class="col-lg-4">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold form-label">
                                <label
                                    class=" col-form-label  fw-semibold fs-6">@lang('general.store_display_slider')</label>
                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                   title="@lang('general.store_display_slider_hint')"></i>
                            </label>
                            <!--end::Label-->
                        </div>
                        <div class="col-lg-8">
                            <div class="d-flex mt-3">
                                <!--begin::Radio-->
                                <div class="form-check form-check-custom form-check-solid me-5">
                                    <input class="form-check-input" type="radio" value="1" name="show_slider"
                                           id="customers_online_yes"
                                           @if( !empty($store) && $store->storeSetting->show_slider == '1' ) checked="checked" @endif />
                                    <label class="form-check-label"
                                           for="customers_online_yes">@lang('general.yes')</label>
                                </div>
                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="radio" value="0" name="show_slider"
                                           id="customers_online_no"
                                           @if( !empty($store) && $store->storeSetting->show_slider == '0' ) checked="checked" @endif />
                                    <label class="form-check-label"
                                           for="customers_online_no">@lang('general.no')</label>
                                </div>
                                <!--end::Radio-->
                            </div>
                            <span id="show_slider_error" class="invalid-feedback custom-error"></span>
                        </div>
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <label class="col-lg-4 col-form-label  fw-semibold fs-6">@lang('general.country')</label>
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-lg-6 fv-row form-group">
                                    <select name="country_id" aria-label="@lang('general.select_country')" data-control="select2" required
                                            data-placeholder="@lang('general.select_country')..."
                                            class="form-select form-select-solid form-select-lg fw-semibold">
                                        <option value="">@lang('general.select_country')...</option>
                                        @foreach($countries as  $id => $country)
                                            <option  value="{{ $id }}" {{ $id == $store->storeSetting->country_id ? 'selected': '' }}>{{ $country }}</option>
                                        @endforeach
                                    </select>
                                    <span id="country_id_error" class="invalid-feedback custom-error"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="row mb-6">
                        <label class="col-lg-4 col-form-label  fw-semibold fs-6">
                            @lang('general.store_cities')
                            <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                               title="@lang('general.store_cities_hint')"></i>
                        </label>
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-lg-12 fv-row form-group">
                                    <select id="store_cities" name="store_cities[]" multiple aria-label="@lang('general.select_cities')" data-control="select2" required
                                            data-placeholder="@lang('general.select_cities')..."
                                            class="form-select form-select-solid form-select-lg fw-semibold">
                                        <option value="">@lang('general.select_city')...</option>

                                        @foreach($cities as  $id => $city)
                                            <option  value="{{ $id }}" {{ in_array($id,$storeCities) ? 'selected': '' }}>{{ $city }}</option>
                                        @endforeach
                                    </select>
                                    <span id="store_cities_error" class="invalid-feedback custom-error"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Input group-->
                </div>
                <!--end::Card body-->
                <!--begin::Actions-->
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    {{--<button type="reset" class="btn btn-light btn-active-light-primary me-2">الغاء</button>--}}
                    <button type="submit" class="btn btn-primary" id="settings_form_submit">
                        <span class="indicator-label">@lang('general.save')</span>
                        <span class="indicator-progress">@lang('general.please_wait')
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </div>
                <!--end::Actions-->
            </form>
            <!--end::Form-->


        </div>
        <!--end::Card body-->
    </div>

@endsection

@push('custom_js')
    <script>
        $(document).ready(function () {
            let modalForm = $('#settings_form');
            modalForm.submit(function (e) {
                e.preventDefault();
            }).validate({
                rules: {
                    // s_name: {
                    //     required: true
                    // },
                },

                submitHandler: function (form) {
                    var formData = new FormData($(form)[0]);
                    let action = $(form).attr('action');
                    let submitButton = $('#settings_form_submit');
                    submitButton.attr('data-kt-indicator', 'on');
                    submitButton.attr('disabled', 'true');
                    $.ajax({
                        url: action,
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function (data, status) {
                            submitButton.attr('data-kt-indicator', 'off');
                            submitButton.removeAttr('disabled');
                            if (data.success == false) {
                                if (data.errors && data.errors.length > 0) {
                                    var errors = data.errors;
                                    for (var error = 0; error < errors.length; error++) {
                                        var input_name = errors[error].input_name;
                                        var input_error = errors[error].errors;
                                        console.log(input_name, input_error);
                                        $('#' + input_name + '_error').html(input_error).show();

                                    }
                                }

                            } else {
                                toastr.success(data.message, {timeOut: 5000});
                            }
                        },
                        error: function (data) {
                            submitButton.attr('data-kt-indicator', 'off');
                            submitButton.removeAttr('disabled');
                            toastr.error(data.statusText, {timeOut: 5000});
                        }
                    });
                }
            });
        });
        $('select[name=country_id]').change(function () {
            var url = '{{ url('admin/country') }}/' + $(this).val() + '/cities';
            $.get(url, function (data) {
                // console.log('cities',data);
                let cities = JSON.parse(data);
                var select = $('form #store_cities');

                select.children('option:not(:first)').remove();

                $.each(cities, function (key, value) {
                    select.append('<option value=' + key + '>' + value + '</option>');
                });
            });
        });
    </script>
@endpush