@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('general.update_customer')</h2>
            </div>
            <!--begin::Card title-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <form id="add_new_form" class="form" method="post" data-kt-redirect="{{route('admin.customers.index')}}">
                @csrf

                <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 $country)
                                    <option value="{{$country->id}}" {{$item->country_id == $country->id ? 'selected' :''}}>{{$country->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.birth_date')</label>
                            <input type="text" name="birth_date" value="{{ $item->birth_date }}" id="birth_date" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="@lang('general.birth_date')" />
                            <span id="birth_date_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.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-6">
                        <div class="fv-row mb-7">
                            <label class="required 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>

                <div class="row">
                    <div class="col-lg-6 text-center">
                        <!--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>
                            <span id="avatar_error" class="invalid-feedback custom-error"></span>
                            <!--end::Hint-->
                        </div>
                        <!--end::Input group-->
                    </div>
                    <div class="col-lg-6 text-center">
                        <!--begin::Input group-->
                        <div class="fv-row mb-7">
                            <label class="d-block fw-semibold fs-6 mb-5">@lang('general.cover_image')</label>
                            <!--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->cover_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="cover" accept=".png, .jpg, .jpeg" />
                                    <input type="hidden" name="cover_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>
                            <span id="cover_error" class="invalid-feedback custom-error"></span>
                            <!--end::Hint-->
                        </div>
                        <!--end::Input group-->
                    </div>
                </div>
                <!--begin::Actions-->
                <div class="d-flex justify-content-end pt-15">
                    <a href="{{ route('admin.customers.index') }}" class="btn btn-light me-5">الغاء</a>

                    <button type="submit" class="btn btn-primary" id="add_new_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>

        </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>');
                });
                // for(index in data){
                //     $(select).append('<option value="' + data[index].pk_i_id + '">' + (data[index].translation != null ? data[index].translation.s_value : data[index].s_value)  + "</option>");
                //     // console.log(data[child]);
                // }
            });
        });
        $(document).ready(function () {
            $("#birth_date").flatpickr();
        });
        let validator;

        // Get elements
        const form = document.getElementById('add_new_form');
        const submitButton = document.getElementById('add_new_form_submit');

        // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
        validator = FormValidation.formValidation(
            form,
            {
                locale: 'ar_MA',
                localization: FormValidation.locales.en_US,
                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: 'هذا الحقل مطلوب'
                            },
                        }
                    },
                    // 'password': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                    // 'password_confirmation': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                    'birth_date': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                        }
                    },
                    // 'avatar': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                    // 'cover': {
                    //     validators: {
                    //         notEmpty: {
                    //             message: 'هذا الحقل مطلوب'
                    //         },
                    //     }
                    // },
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        // Handle submit button
        submitButton.addEventListener('click', e => {
            e.preventDefault();
            $('.invalid-feedback.custom-error').hide();

            // Validate form before submit
            if (validator) {
                validator.validate().then(function (status) {

                    if (status == 'Valid') {
                        var form_data = new FormData($('#add_new_form')[0]);
                        submitButton.setAttribute('data-kt-indicator', 'on');
                        // Disable submit button whilst loading
                        submitButton.disabled = true;
                        $.ajax({
                            type: "POST",
                            url: "{{route('admin.customers.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