@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.add_delegate')</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="add_new_form" class="form" data-kt-redirect="{{route('admin.delegates.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" 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" 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}}">{{$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($cities as $city)--}}
                                    {{--<option value="{{$city->getKey()}}">{{$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" 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.visit_cost')</label>
                                <input type="text" name="visit_cost" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="@lang('general.visit_cost')" />
                                <span id="visit_cost_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"   />
                            </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">
                            <!--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-empty image-input-outline image-input-placeholder mb-3" data-kt-image-input="true">
                                    <!--begin::Preview existing avatar-->
                                    <div class="image-input-wrapper w-150px h-150px"></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 class="col-lg-6">
                            <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" id="flexSwitchDefault"/>
                                    <label class="form-check-label" for="flexSwitchDefault">
                                        @lang('general.enable')
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>


                {{--</div>--}}
                <!--end::Scroll-->
                <!--begin::Actions-->
                <div class="text-center pt-15">
                    {{--<button type="reset" class="btn btn-light me-3" data-kt-users-modal-action="cancel">Discard</button>--}}
                    <button type="submit" id="add_new_form_submit" 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>');
                });
                // 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]);
                // }
            });
        });

        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: 'هذا الحقل مطلوب'
                            },
                        }
                    },
                    'visit_cost': {
                        validators: {
                            notEmpty: {
                                message: 'هذا الحقل مطلوب'
                            },
                        }
                    },
                    'avatar': {
                        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.delegates.store')}}",
                            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;

                    }
                });
            }
        })

        // Shared variables
        // const element = document.getElementById('kt_modal_add_user');
        // const form = document.querySelector('#kt_modal_add_user_form');
        // var validator = FormValidation.formValidation(
        //     form,
        //     {
        //         fields: {
        //             'user_name': {
        //                 validators: {
        //                     notEmpty: {
        //                         message: 'هذا الحقل مطلوب'
        //                     }
        //                 }
        //             },
        //             'user_email': {
        //                 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') {
        //                 // Show loading indication
        //                 submitButton.setAttribute('data-kt-indicator', 'on');
        //
        //                 // Disable button to avoid multiple click
        //                 submitButton.disabled = true;
        //
        //                 // Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
        //                 setTimeout(function () {
        //                     // Remove loading indication
        //                     submitButton.removeAttribute('data-kt-indicator');
        //
        //                     // Enable button
        //                     submitButton.disabled = false;
        //
        //                     // Show popup confirmation
        //                     Swal.fire({
        //                         text: "تمت العملية بنجاح.",
        //                         icon: "success",
        //                         buttonsStyling: false,
        //                         confirmButtonText: "حسناً!",
        //                         customClass: {
        //                             confirmButton: "btn btn-primary"
        //                         }
        //                     }).then(function (result) {
        //                         if (result.isConfirmed) {
        //                             modal.hide();
        //                         }
        //                     });
        //
        //                     //form.submit(); // Submit form
        //                 }, 2000);
        //             } else {
        //                 // Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
        //                 Swal.fire({
        //                     text: "معذرة ، يبدو أنه تم اكتشاف بعض الأخطاء ، يرجى المحاولة مرة أخرى.",
        //                     icon: "error",
        //                     buttonsStyling: false,
        //                     confirmButtonText: "حسناً!",
        //                     customClass: {
        //                         confirmButton: "btn btn-primary"
        //                     }
        //                 });
        //             }
        //         });
        //     }
        // });
    </script>
@endsection