@extends('layout.store_layout.master')
@section('custom_css')
@endsection
@section('content')
    <!--begin::Card-->
    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title">
                <h2>@lang('admin.update_item')</h2>
            </div>
            <!--begin::Card title-->
            <!--begin::Card toolbar-->
            <div class="card-toolbar">
                <!--begin::Toolbar-->
                <div class="d-flex justify-content-end" >
                    <!--begin::Add customer-->
                {{--                    <a href="{{ route('admin.customers.store') }}" class="btn btn-primary" >@lang('admin.save')</a>--}}
                <!--end::Add customer-->
                </div>
                <!--end::Toolbar-->

            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <form id="update_form" class="form" data-kt-redirect="{{route('admin.administrators.index')}}">
                @csrf
                <!--begin::Scroll-->
                <div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_user_scroll" data-kt-scroll="false" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">@lang('general.full_name')</label>
                                <input type="text" name="name" value="{{ $item->name }}" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="@lang('general.full_name')" />
                                <span id="name_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">@lang('general.email')</label>
                                <input type="email" name="email" value="{{ $item->email }}" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="example@domain.com" />
                                <span id="email_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">@lang('general.country')</label>
                                <select name="country_id" id="country_id" data-control="select2" data-placeholder="اختر الدولة..." class="form-select form-select-solid form-select-lg fw-semibold">
                                    <option></option>
                                    @foreach($countries as $coutnry)
                                        <option value="{{$coutnry->id}}" {{$item->country_id == $coutnry->id ? 'selected' :''}}>{{$coutnry->name}}</option>
                                    @endforeach
                                </select>
                                <span id="country_id_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">@lang('general.city')</label>
                                <select name="city_id" id="city_id" data-control="select2" data-placeholder="اختر الدولة..." class="form-select form-select-solid form-select-lg fw-semibold">
                                    <option></option>
                                    @foreach(optional($item->country)->cities as $city)
                                        <option value="{{$city->getKey()}}" {{$item->city_id == $city->getKey() ? 'selected' :''}}>{{$city->name}}</option>
                                    @endforeach
                                </select>
                                <span id="city_id_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">@lang('general.mobile')</label>
                                <input type="text" name="mobile" value="{{ $item->mobile }}" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="@lang('general.mobile')"  />
                                <span id="mobile_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="required fw-semibold fs-6 mb-2">@lang('general.roles')</label>
                                {{ Form::select('role_id', [''=>trans('general.select_role')]+$roles, $item->role_id ?? null , [
                                'class' => 'form-select form-select-solid mb-3 mb-lg-0',
                                'data-control' => 'select2',
                                'data-hide-search' => 'false',
                                'data-allow-clear' => 'false',
                                'data-placeholder' => 'الرجاء الاختيار..',
                                'required' => 'required',
                                ]) }}
                                <span id="role_id_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-lg-6">
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">@lang('general.password')</label>
                                <input type="password" name="password" autocomplete="new-password" class="form-control form-control-solid mb-3 mb-lg-0"   />
                                <span id="password_error" class="invalid-feedback custom-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">@lang('general.confirm_password')</label>
                                <input type="password" name="password_confirmation" class="form-control form-control-solid mb-3 mb-lg-0"   />
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="fv-row mb-7">
                                <label class="fw-semibold fs-6 mb-2">@lang('general.status')</label>
                                <div class="form-check form-switch form-check-custom form-check-solid ">
                                    <input class="form-check-input" name="status" type="checkbox" value="1" {{ $item->status == 1 ? 'checked' : ''}} id="flexSwitchDefault"/>
                                    <label class="form-check-label" for="flexSwitchDefault">
                                        @lang('general.enable')
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <!--begin::Input group-->
                            <div class="fv-row mb-7">
                                <label class="d-block fw-semibold fs-6 mb-5">@lang('general.image')</label>
                                <!--begin::Image input placeholder-->
                                <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>
                                <!--end::Image input placeholder-->
                                <!--begin::Image input-->
                                <div class="image-input image-input-outline image-input-placeholder mb-3 image-input-changed" data-kt-image-input="true">
                                    <!--begin::Preview existing avatar-->
                                    <div class="image-input-wrapper w-150px h-150px" style="background-image:url('{{$item->image_url}}')"></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="رفع صورة جديدة">
                                        <!--begin::Icon-->
                                        <i class="bi bi-pencil-fill fs-7"></i>
                                        <!--end::Icon-->
                                        <!--begin::Inputs-->
                                        <input type="file" name="avatar" 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>

                                <!--begin::Hint-->
                                <div class="form-text">@lang('general.allowed_files_types',['types'=>'png, jpg, jpeg'])</div>
                                <!--end::Hint-->
                            </div>
                            <!--end::Input group-->
                        </div>
                    </div>


                </div>
                <!--end::Scroll-->
                <!--begin::Actions-->

                <div class="text-end pt-15">
                    <a href="{{ route('admin.administrators.index') }}" class="btn btn-light me-3">@lang('general.cancel')</a>
                    {{--<button type="reset" class="btn btn-light me-3" data-kt-users-modal-action="cancel">Discard</button>--}}
                    <button type="submit" id="form_submit_btn" class="btn btn-primary">
                        <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>

        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
@endsection
@section('custom_js')
    <script>
        $('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 select[name=city_id]');
                // console.log('cities',data);

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

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

        // Shared variables
        // const element = document.getElementById('kt_modal_add_user');
        const form = document.getElementById('update_form');
        const submitButton = document.getElementById('form_submit_btn');
        var validator = FormValidation.formValidation(
            form,
            {
                fields: {
                    'name': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                            stringLength:{
                                min:3,
                                message: 'الاسم يجب أن يكون أكثر من 3 أحرف',
                            }
                        }
                    },
                    'email': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                            emailAddress:{
                                message: 'صيغة البريد الالكتروني غير صحيحه',
                            }
                        }
                    },
                    'mobile': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                            numeric: {
                                message: 'الرجاء ادخال ارقام فقط'
                            },
                            // stringLength:{
                            //     max:14,
                            //     min:9,
                            //     message: 'رقم الجوال يجب ان يكون بين 9- 14 رقم',
                            // }
                        }
                    },
                    'country_id': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                        }
                    },

                    'city_id': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                        }
                    },
                    'role_id': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                        }
                    },
                    // 'password': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                    // 'password_confirmation': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                    // 'avatar': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                },

                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        // Submit button handler
        // const submitButton = document.querySelector('[data-kt-users-modal-action="submit"]');
        submitButton.addEventListener('click', e => {
            e.preventDefault();

            // Validate form before submit
            if (validator) {
                validator.validate().then(function (status) {
                    console.log('validated!');

                    if (status == 'Valid') {
                        var form_data = new FormData($('#update_form')[0]);
                        submitButton.setAttribute('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        submitButton.disabled = true;
                        $.ajax({
                            type: "POST",
                            url: "{{route('admin.administrators.update',[$item->getKey()])}}",
                            data: form_data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                            success: function (data) {

                                if (data.status === 0) {
                                    // Enable submit button after loading
                                    submitButton.setAttribute('data-kt-indicator', 'off');
                                    submitButton.disabled = 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 {
                                    // setTimeout(function () {
                                        submitButton.removeAttribute('data-kt-indicator');

                                        Swal.fire({
                                            text: "تمت العملية بنجاح!",
                                            icon: "success",
                                            buttonsStyling: false,
                                            confirmButtonText: "تم!",
                                            customClass: {
                                                confirmButton: "btn btn-primary"
                                            }
                                        }).then(function (result) {
                                            if (result.isConfirmed) {
                                                // Enable submit button after loading
                                                submitButton.setAttribute('data-kt-indicator', 'off');
                                                submitButton.disabled = false;

                                                // Redirect to customers list page
                                                window.location = form.getAttribute("data-kt-redirect");
                                            }
                                        });
                                    // }, 2000);
                                }
                            },
                            error: function (data) {
                                // Enable submit button after loading
                                submitButton.setAttribute('data-kt-indicator', 'off');
                                submitButton.disabled = false;
                                Swal.fire({
                                    icon: "error",
                                    title: 'حدثت خلل أثناء العملية',
                                    timer: 4000
                                });
                            }
                        });


                    } else {
                        // Enable submit button after loading
                        submitButton.setAttribute('data-kt-indicator', 'off');
                        submitButton.disabled = false;

                    }
                });
            }
        });
    </script>
@endsection