@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')

    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="info-cont">
                    <div class="sm:hidden">
                        <div class="form-wrapper bg-gray-light">
                            <select class="form-style bg-transparent" name="selectName" onchange="location = this.value;">
                                <option selected value="#">@lang('frontend.my_account')</option>
                                <option value="{{ mwz_route('frontend.m.repassword') }}">@lang('frontend.member_password')</option>
                                <option value="{{ mwz_route('frontend.m.purchased') }}">@lang('frontend.member_order_list')</option>
                            </select>
                        </div>
                    </div>
                    <div class="portal-switcher switcher-member">
                        <h2 class="title-text uppercase">@lang('frontend.my_account')</h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.member_password')
                            <a href="{{ mwz_route('frontend.m.repassword') }}"> </a>
                        </h2>
                        <h2 class="title-text uppercase unactives">@lang('frontend.member_order_list')
                            <a href="{{ mwz_route('frontend.m.purchased') }}"> </a>
                        </h2>
                    </div>
                    <div class="row mt-md-2 mt-lg-4 justify-center">
                        <div class="col-12 col-sm-11 col-lg-10">
                            {{-- <div class="flex items-center px-6 mb-6 mt-4 sm:justify-between">
                                <p class="text-lg mr-4">@lang('frontend.member_id') </p>
                                <p class="text-lg">{{ $member->id ?? '' }}</p>
                            </div> --}}
                            <form class="form-wrapper px-4 space-y-4" id="frm_profile" onsubmit="saveProfile(); return false;">
                                @csrf
                                <div class="form-space">
                                    <div class="col-12">
                                        <label for="firstname">@lang('frontend.frnd_13')</label>
                                        <input value="{{ explode(' ', $member->name ?? '')[0] ?? '' }}" class="form-style" type="text" id="firstname" name="firstname" placeholder="@lang('frontend.frnd_13')" />
                                    </div>
                                    <div class="col-12">
                                        <label for="lastname">@lang('frontend.frnd_14')</label>
                                        <input value="{{ explode(' ', $member->name ?? '')[1] ?? '' }}" class="form-style" type="text" id="lastname" name="lastname" placeholder="@lang('frontend.frnd_14')" />
                                    </div>
                                    <div class="col-12">
                                        <label for="Mail">@lang('frontend.register_email')</label>
                                        <input value="{{ $member->email ?? '' }}" class="form-style" type="email" placeholder="Email" disabled />
                                    </div>
                                    <div class="col-12">
                                        <label for="address">@lang('frontend.address')</label>
                                        <textarea class="form-style" id="address" name="address" rows="5" placeholder="@lang('frontend.input_address')">{!! nl2br($member->address->address ?? '') !!}</textarea>
                                    </div>
                                    <div class="col-6">
                                        <label for="province_id">@lang('frontend.province')</label>
                                        <select class="form-style" id="province_id" name="province_id">
                                            <option value="">@lang('frontend.choose_province')</option>
                                            @foreach ($Provinces as $province)
                                                <option {{ !empty($address->province->id) ? ($address->province->id == $province->id ? 'selected' : '') : '' }} value="{{ $province->id ?? '' }}">{{ $province['name_' . $pageInit['lang']] ?? '' }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="amphure_id">@lang('frontend.city')</label>
                                        <select class="form-style" id="amphure_id" name="amphure_id">
                                            <option value="">@lang('frontend.choose_city')</option>
                                            @if (!empty($address->city->id))
                                                <option selected value="{{ $address->city->id ?? '' }}">{{ $address->city->{'name_' . $pageInit['lang']} ?? '' }}</option>
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="tambon_id">@lang('frontend.district')</label>
                                        <select class="form-style" id="tambon_id" name="tambon_id">
                                            <option value="">@lang('frontend.choose_district')</option>
                                            @if (!empty($address->district->id))
                                                <option selected value="{{ $address->district->id ?? '' }}">{{ $address->district->{'name_' . $pageInit['lang']} ?? '' }}</option>
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="zipcode">@lang('frontend.zipcode')</label>
                                        <input value="{{ $address->zipcode ?? '' }}" onkeypress="InputValidateString()" maxlength="5" class="form-style" type="text" id="zipcode" name="zipcode" placeholder="@lang('frontend.input_zipcode')" />
                                    </div>
                                    <div class="col-12">
                                        <label for="phone_number">@lang('frontend.register_mobile')</label>
                                        <div class="flex">
                                            <input value="+66" class="form-style" style="width:60px!important" type="text" id="country_code" name="country_code" placeholder="+66">
                                            <input value="{{ $member->mobile ?? '' }}" onkeypress="InputValidateString()" maxlength="10" class="form-style" type="text" id="phone_number" name="phone_number" placeholder="@lang('frontend.input_mobile')">
                                        </div>
                                    </div>
                                    <div class="col-12 relative">
                                        <label for="Gender">@lang('frontend.frnd_15')</label>
                                        <div class="color-chooser morp-to-gender">
                                            <div class="color-blk">
                                                <input id="color-0undefined" type="radio" name="gender" value="1" {{ !empty($address->gender) ? ($address->gender == 1 ? 'checked' : '') : 'checked' }} />
                                                <label class="bg-gray-light" for="color-0undefined">@lang('frontend.frnd_16')</label>
                                            </div>
                                            <div class="color-blk">
                                                <input id="color-1undefined" type="radio" name="gender" value="2" {{ !empty($address->gender) ? ($address->gender == 2 ? 'checked' : '') : '' }} />
                                                <label class="bg-gray-light" for="color-1undefined">@lang('frontend.frnd_17')</label>
                                            </div>
                                            <div class="color-blk">
                                                <input id="color-2undefined" type="radio" name="gender" value="3" {{ !empty($address->gender) ? ($address->gender == 3 ? 'checked' : '') : '' }} />
                                                <label class="bg-gray-light" for="color-2undefined">@lang('frontend.frnd_18')</label>
                                            </div>
                                        </div>
                                        <div class="alert alert-success mt-3" style="display: none" id="msg-address" role="alert"></div>
                                        <div class="col-12 py-6">
                                            <button type="submit" class="account-btn butn-submit add2bag-btn uppercase px-5 py-3">@lang('frontend.member_submit')</button>
                                            <p class="text-cexter mt-1 text-danger" id="error_show"></p>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <script type="text/javascript">
        saveProfile = function() {
            let frm_data = new FormData($('#frm_profile')[0]);
            let url_webpage = $('#url_webpage').val();

            $.ajax({
                url: url_webpage + locale_lang() + "m-info/save",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function(xhr) {
                    let rules = {
                        firstname: "required",
                        lastname: "required",
                        address: "required",
                        province_id: "required",
                        amphure_id: "required",
                        tambon_id: "required",
                        zipcode: "required",
                        phone_number: "required",
                        gender: "required"
                    }

                    let messages = {
                        firstname: "{{ __('frontend.frnd_19') }}",
                        lastname: "{{ __('frontend.frnd_20') }}",
                        address: "{{ __('frontend.input_address') }}",
                        province_id: "{{ __('frontend.choose_province') }}",
                        amphure_id: "{{ __('frontend.choose_city') }}",
                        tambon_id: "{{ __('frontend.choose_district') }}",
                        zipcode: "{{ __('frontend.input_zipcode') }}",
                        phone_number: "{{ __('frontend.input_mobile') }}",
                        gender: "{{ __('frontend.frnd_22') }}"
                    }

                    mwz_frm_validate($("#frm_profile"), rules, messages)
                    return $("#frm_profile").valid();
                },
                success: function(resp) {
                    if (resp.success) {
                        $('#msg-address').html(resp.msg)
                        $('#msg-address').css('display', 'block')
                        JsReload(1500)
                    }else{
                        if(resp.msg != ''){
                            $('#error_show').html(resp.msg)
                        }
                    }
                },
            });
        }
    </script>
@endsection