@extends('layout.user')
@section('page-title', __('basic.Profile'))
@section('nav-title', __('basic.Profile'))
@section('page-js-script')
    <script type="text/javascript">
        $(function() {


            const basic_validator = $("#basic_form").validate({
                debug: false,
                rules: {
                    name: {
                        required: true,
                    },
                    mobile: {
                        required: true,
                        digits: true,
                        // minlength: 10,
                        // remote: {
                        //     url: "ajax/check_mobile",
                        //     type: "post",
                        //     dataType: "json",
                        //     data: {
                        //         mobile: function() {
                        //             return $("#mobile").val();
                        //         }
                        //     }
                        // }
                    },
                    email: {
                        required: true,
                        email: true,
                        // remote: {
                        //     url: "/ajax/check_email",
                        //     type: "post",
                        //     dataType: "json",
                        //     data: {
                        //         email: function() {
                        //             return $("#email").val();
                        //         }
                        //     }
                        // }
                    },
                },
                messages: {
                    name: {
                        required: "*{{ __('basic.PleaseInputName') }}",
                        // string: "*暱稱不可使用符號",
                        // remote: "*此暱稱已存在，請嘗試其他暱稱",
                    },
                    email: {
                        required: "*{{ __('basic.PleaseInputEmail') }}",
                        email: "*{{ __('basic.PleaseInputCorrectFormatEmail') }}",
                        // remote: "*{{ __('basic.EmailExistTryAnotherOne') }}",
                    },
                    password: {
                        required: "*{{ __('basic.PleaseInputPassword') }}",
                    },
                    confirm_password: {
                        required: "*{{ __('basic.PleaseConfirmPassword') }}",
                        equalTo: "*{{ __('basic.PasswordNotTheSame') }}",
                    },

                    mobile: {
                        required: "*{{ __('basic.PleaseInputMobile') }}",
                        // minlength: "*{{ __('basic.MobileNeedTenDigit') }}",
                        // remote: "*{{ __('basic.MobileExistTryAnotherOne') }}",
                    }
                    // verify_code: {
                    //     required: "*{{ __('basic.EnterVerifyCode') }}",
                    // }
                }
            });

            const password_validator = $("#password_fm").validate({
                debug: false,
                rules: {
                    old_password: {
                        required: true
                    },
                    password: {
                        required: true,
                        pwcheck: true,
                    },
                    confirm_password: {
                        required: true,
                        equalTo: "#password"
                    },
                    verify_code: {
                        required: true,
                    }
                },
                messages: {
                    old_password: {
                        required: "*{{ __('basic.PleaseInputPassword') }}",
                    },
                    password: {
                        required: "請輸入密碼",

                    },
                    confirm_password: {
                        required: "*{{ __('basic.PleaseConfirmPassword') }}",
                        equalTo: "*{{ __('basic.PasswordNotTheSame') }}",
                    },
                },
            });

            const address_validator = $("#address_fm").validate({
                debug: false,
                rules: {
                    recipient_name: {
                        required: true,
                    },
                    recipient_mobile: {
                        required: true,
                    },
                    store_name: {
                        required: true
                    },
                    address: {
                        required: true,
                    },
                },
                messages: {
                    recipient_name: {
                        required: "*請輸入收件人",
                    },
                    recipient_mobile: {
                        required: "*請輸入聯絡電話",
                    },
                    store_name: {
                        required: "*請輸入門市名稱",
                    },
                    address: {
                        required: "*請輸入寄送詳細地址",
                    }
                }
            });
            const mobile_validator = $("#mobile_fm").validate({
                debug: false,
                rules: {
                    verify_code: {
                        required: true,
                    }
                },
                messages: {
                    verify_code: {
                        required: "*{{ __('basic.EnterVerifyCode') }}",
                    }
                }
            });



            $('.update_btn').click(function() {
                if (!$('#basic_form').valid()) {
                    return;
                } else {
                    formData = new FormData($('#basic_form')[0]);
                }
                updateMember(formData);
            });

            // 密碼驗證
            $.validator.addMethod("pwcheck", function(value, element) {
                return this.optional(element) || /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/.test(value);
            }, "{{ __('basic.PasswordDesc') }}");
            $('input[name="password_type"]').change(function(e) {
                e.preventDefault();
                if ($(this).val() == 'simple') {
                    $('#password_help_block').text('{{ __('robot.PasswordDescSimple') }}');
                    $.validator.addMethod("pwcheck", function(value, element) {
                        return this.optional(element) || /^\d{6}$/.test(value);
                    }, "{{ __('robot.PasswordDescSimple') }}");
                } else {
                    $('#password_help_block').text('{{ __('basic.PasswordDesc') }}');
                    $.validator.addMethod("pwcheck", function(value, element) {
                        return this.optional(element) || /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/.test(value);
                    }, "{{ __('basic.PasswordDesc') }}");
                }
                $('#password_fm').valid();
            });


            $('.change_password_btn').click(function() {
                // console.log('inin'); 

                if ($('#password_fm').valid()) {
                    $('.loading').show();

                    $.ajax({
                        url: '{{ url('ajax/member_check_password') }}',
                        data: {
                            id: $('#id').val(),
                            password: $('#old_password').val(),
                        },
                        dataType: 'json',
                        // contentType: false,
                        // processData: false,
                        success: function(resp, textStatus, jqXHR) {
                            // console.log(resp);
                            $('.loading').hide();

                            if (resp.status) {

                                $.ajax({
                                    url: '{{ url('ajax/member_update_password') }}',
                                    data: {
                                        id: $('#id').val(),
                                        password: $('#password').val(),
                                    },
                                    dataType: 'json',
                                    success: function(resp, textStatus, jqXHR) {
                                        console.log(resp);
                                        if (resp.status) {
                                            Swal.fire({
                                                title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                                                // text: ,
                                                icon: 'success',
                                                confirmButtonText: '{{ __('basic.OK') }}',
                                            }).then((function() {
                                                window.location.href = '{{ route('logout') }}';
                                            }))
                                        } else {

                                        }
                                    },
                                    error: ajaxError
                                });

                            } else {
                                Swal.fire({
                                    title: '{{ __('basic.Error') }}!',
                                    text: '{{ __('basic.OldPasswordError') }}!',
                                    // html: resp.msg.replaceAll("\r\n","<BR>"),
                                    icon: 'error',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                })

                            }
                        },
                        error: ajaxError
                    });
                }
            });

            $('.bind_account_btn').click(function() {
                if ($('#bind_account_fm').valid()) {
                    $('.loading').show();

                    $.ajax({
                        url: '{{ url('ajax/member_bind_account') }}',
                        data: {
                            account: $('#bind_account').val(),
                            password: $('#bind_password').val(),
                        },
                        dataType: 'json',
                        // contentType: false,
                        // processData: false,
                        success: function(resp, textStatus, jqXHR) {
                            console.log(resp);

                            $('.loading').hide();
                            if (resp.status) {

                                Swal.fire({
                                    title: '{{ __('member.FinishBind') }}!',
                                    text: '{{ __('member.FinishBind') }}! {{ __('member.PleaseUseBindAccountLogin') }}!',
                                    // html: resp.msg.replaceAll("\r\n","<BR>"),
                                    icon: 'success',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                }).then((function() {
                                    $('.loading').show();
                                    window.location.href = '{{ route('logout', ['redirect' => 'login']) }}';
                                }))

                            } else {
                                Swal.fire({
                                    title: '{{ __('basic.Error') }}!',
                                    // text: '{{ __('basic.OldPasswordError') }}!',
                                    html: resp.msg.replaceAll("\r\n", "<BR>"),
                                    icon: 'error',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                })

                            }
                        },
                        error: ajaxError
                    });
                }
            });

            $('.save_address_btn').click(function() {
                if ($('#address_fm').valid()) {


                    let formData = new FormData($('#address_fm')[0]);
                    // formData.append('sex_id', sex_id);
                    $.ajax({
                        url: '{{ url('ajax/member_create_address') }}',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function(resp, textStatus, jqXHR) {
                            console.log(resp);
                            if (resp.status) {
                                Swal.fire({
                                    title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                                    // text: ,
                                    icon: 'success',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                }).then((function() {
                                    memberObj.getProfile($('#id').val());
                                }))
                            } else {
                                Swal.fire({
                                    title: '{{ __('basic.Error') }}!',
                                    // text: resp.msg,
                                    html: resp.msg.replaceAll("\r\n", "<BR>"),
                                    icon: 'error',
                                    confirmButtonText: '{{ __('basic.OK') }}',
                                })

                            }
                        },
                        error: ajaxError
                    });
                }

            });

            $('.btn_del_address').click(function() {

                $.ajax({
                    url: '{{ url('ajax/member_delete_address') }}',
                    data: {
                        id: $(this).attr('data-id'),
                    },
                    dataType: 'json',
                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        if (resp.status) {
                            Swal.fire({
                                title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                                // text: ,
                                icon: 'success',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            }).then((function() {
                                memberObj.getProfile($('#id').val());
                            }))
                        } else {
                            Swal.fire({
                                title: '{{ __('basic.Error') }}!',
                                // text: resp.msg,
                                html: resp.msg.replaceAll("\r\n", "<BR>"),
                                icon: 'error',
                                confirmButtonText: '{{ __('basic.OK') }}',
                            })

                        }
                    },
                    error: ajaxError
                });

            });

            $('.btn_edit').click(function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let el = $('#' + id);
                el.toggleClass("form-control-plaintext form-control");
                el.prop('readonly', function(i, v) {
                    return !v;
                });
                $('.btn_save[data-id="' + id + '"]').toggleClass('d-none');
                $('.btn_defalut[data-id="' + id + '"]').toggleClass('d-none');
                if ($(this).text() == '{{ __('robot.Edit') }}') {
                    // find .btn_save with data-id
                    $(this).text('{{ __('basic.Cancel') }}');
                } else {
                    el.val($(this).attr('data-value'));
                    $(this).text('{{ __('robot.Edit') }}');
                }

            });
            $('.btn_save').click(function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let el = $('#' + id);
                let value = el.val();
                // regex check value with 09\d{8}
                if (value.length > 0 && !value.match(/^09\d{8}$/)) {
                    Swal.fire({
                        title: '{{ __('basic.Error') }}!',
                        text: '{{ __('robot.MobileFormatError') }}',
                        icon: 'error',
                        confirmButtonText: '{{ __('basic.OK') }}',
                    })
                    return false;
                }
                let formData = new FormData();
                formData.append('id', '{{ $data['id'] }}');
                formData.append(id, value);
                updateMember(formData);


            });
            $('.btn_defalut').click(function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                $('.btn_edit').hide();
                $('.btn_defalut').hide();
                $('#div_verify_' + id).removeClass('d-none');
                let list = ['mobile', 'mobile2', 'mobile3'];
                $.each(list, function(idx, v) {
                    if (v != id) {
                        $('#div_' + v).remove();
                    }
                });
                let el = $('.btn_send_sms[data-id="' + id + '"]');
                el.removeClass('d-none');


            });
            $('.btn_send_sms').click(function(e) {
                e.preventDefault();
                $(this).prop('disabled', true);

                $.ajax({
                    url: '{{ url('ajax/send_sms_code') }}',
                    data: {
                        mobile: $('.mobile').val()
                    },
                    dataType: 'json',

                    success: function(resp, textStatus, jqXHR) {
                        console.log(resp);
                        counter(60);
                    },
                    error: ajaxError
                });

            });
            $('.btn_verify').click(function(e) {
                e.preventDefault();
                let id = $(this).attr('data-id');
                let value = $('#' + id).val();
                let ori_mobile = '{{ $data['mobile'] }}';
                let formData = new FormData();

                formData.append('id', '{{ $data['id'] }}');
                formData.append('mobile', value);
                if (id != 'mobile') {
                    formData.append(id, ori_mobile);
                }

                if ($("#mobile_fm").valid()) {
                    $.ajax({
                        url: '{{ url('ajax/check_sms_code') }}',
                        data: {
                            mobile: $('.mobile').val(),
                            verify_code: $('.verify_code').val()
                        },
                        dataType: 'json',

                        success: function(resp, textStatus, jqXHR) {
                            // console.log(resp.status);
                            if (resp.status) {
                                formData.append('is_verify', 1);
                                updateMember(formData);
                            } else {
                                mobile_validator.showErrors({
                                    "verify_code": "{{ __('basic.VerificationCodeError') }}"
                                });
                            }
                        },
                        error: ajaxError
                    });
                }
            });


        })

        function updateMember(formData) {
            $.ajax({
                url: '{{ url('ajax/member_update') }}',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(resp, textStatus, jqXHR) {
                    console.log(resp);
                    if (resp.status) {
                        Swal.fire({
                            title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                            // text: ,
                            icon: 'success',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        }).then((function() {
                            memberObj.getProfile($('#id').val());
                        }))
                    } else {
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            // text: resp.msg,
                            html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        })

                    }
                },
                error: ajaxError
            });
        }

        function counter(count) {
            var down = setInterval(CountDown, 1000); //每秒執行一次，賦值
            $('.btn_send_sms').attr('disabled', 'disabled');

            function CountDown() {
                let btn = $('.btn_send_sms');
                btn.text('{{ __('robot.Sent') }}(' + count + ')'); //寫入
                // btn.css("color", "#a4a4a4");
                if (count == 0) {
                    btn.removeAttr('disabled');
                    btn.text('{{ __('basic.Verify') }}');
                    clearInterval(down);
                    return;
                }
                count--;
            }
        }
    </script>
@endsection
@section('container')
    <style>

    </style>
    {{-- Profile --}}
    <div class="card px-6 py-4">
        <h4 class="border-bottom py-2">{{ __('basic.Profile') }}</h4>
        {{-- Content --}}
        <form class="basic_form py-6" id='basic_form'>
            <div class="row row-cols-1 row-cols-md-2 form">

                <input class="form-control" id="id" name='id' type="hidden" value='{{ $data['id'] }}' />
                <input class="form-control" id="account" name='account' type="hidden" value='{{ $data['account'] }}' />
                <input class="form-control" id="user_id" name='user_id' type="hidden" value='{{ $data['user_id'] }}' />
                <div class="col mb-3">
                    <label class="form-label" for="name">{{ __('basic.Name') }}</label>
                    <input class="form-control" id="name" name='name' type="text" value='{{ $data['name'] }}' required />
                </div>
                {{-- <div class="col mb-3">
                    <label class="form-label" for="mobile">{{ __('basic.Phone') }}</label>
                    <input class="form-control" id="mobile" name='mobile' type="phone" value="{{ $data['mobile'] }}" required />
                </div> --}}
                <div class="col mb-3">
                    <label class="form-label" for="email">{{ __('basic.Email') }}</label>
                    <input class="form-control" id="email" name="email" type="email" value='{{ $data['email'] }}' required />
                    {{-- <a class="text-primary" href="">{{ __('basic.Verify') }}</a> --}}
                </div>
                <div class="col mb-3">
                    <label class="form-label" for='sex_id'>{{ __('basic.Gender') }}</label>
                    <select class="form-control form-select" id='sex_id' name='sex_id' aria-label="Default select example" required>
                        <option value='' {!! empty($data['sex_id'] == '') ? 'selected' : '' !!}>{{ __('basic.Gender') }}</option>
                        <option value="1" {!! $data['sex_id'] == '1' ? 'selected' : '' !!}>{{ __('basic.Male') }}</option>
                        <option value="0" {!! $data['sex_id'] == '0' ? 'selected' : '' !!}>{{ __('basic.Female') }}</option>
                        <option value="99" {!! $data['sex_id'] == '99' ? 'selected' : '' !!}>{{ __('basic.Other') }}</option>
                    </select>
                </div>
                <div class="col mb-3">
                    <label class="form-label" for='country_id'>{{ __('basic.Country') }}</label>
                    <select class="form-control form-select" id='country_id' name='country_id' aria-label="Default select example" required>
                        <option value='' {!! empty($data['country_id'] == '') ? 'selected' : '' !!}>{{ __('basic.Country') }}</option>
                        <option value="tw" {!! $data['country_id'] == 'tw' ? 'selected' : '' !!}>{{ __('basic.Tw') }}</option>
                        <option value="ph" {!! $data['country_id'] == 'ph' ? 'selected' : '' !!}>{{ __('basic.Ph') }}</option>
                        <option value="id" {!! $data['country_id'] == 'id' ? 'selected' : '' !!}>{{ __('basic.Ind') }}</option>
                        <option value="vn" {!! $data['country_id'] == 'vn' ? 'selected' : '' !!}>{{ __('basic.Vn') }}</option>
                        <option value="th" {!! $data['country_id'] == 'th' ? 'selected' : '' !!}>{{ __('basic.Th') }}</option>
                    </select>
                </div>
                <div class="col mb-3">
                    <div class="md-form md-outline input-with-post-icon datepicker" id="date-picker-example" inline="true">
                        <label class="form-label" for="birthdate">{{ __('basic.Birth') }}</label>
                        <input class="form-control" id="birthdate" name='birthdate' type="date" value='{!! $data['birthdate'] !!}'>
                    </div>
                </div>
                <div class="col mb-3">
                    <label class="form-label" for="mobile_carrier_number">{{ __('robot.MobileBarcodeCarrier') }}</label>
                    <input class="form-control" id="mobile_carrier_number" name='mobile_carrier_number' type="text" value='{{ $data['mobile_carrier_number'] }}' />
                </div>

            </div>
            <div class="row">
                <div class="col mb-3 pt-6">
                    <button class="update_btn btn btn-outline-primary w-100" type="button">{{ __('basic.Update') }}</button>
                </div>
            </div>
        </form>
    </div>
    {{-- 手機 --}}
    <form id="mobile_fm" class="card px-6 py-4">
        <h4 class="border-bottom py-2">{{ __('basic.Phone') }}</h4>
        <p class="text-danger mb-3">{{ __('robot.MobileAuthDesc') }}</p>

        @php
            $col = ['mobile', 'mobile2', 'mobile3'];
        @endphp
        @foreach ($col as $k => $item)
            <div id="div_{{ $item }}" class="mb-3">
                <label for="{{ $item }}" class="form-label mb-0">
                    @if ($loop->first)
                        <span class="badge text-bg-primary">{{ __('robot.Primary') }}</span>
                        <span>{{ __('basic.Phone') }}</span>
                        @if ($data['is_verify'] == 0)
                            <span class="badge text-bg-danger">{{ __('robot.Unverified') }}</span>
                        @endif
                    @else
                        {{ __('basic.Phone') }}{{ $k + 1 }}
                    @endif
                </label>
                <div class="d-flex mb-3">
                    <input class="form-control-plaintext mobile" readonly id="{{ $item }}" name='{{ $item }}' type="phone" value="{{ $data[$item] }}" placeholder="{{ __('robot.PleaseClickEditButton') }}" />
                    @if (!empty($data[$item]) && !$loop->first)
                        <button class="btn_defalut btn btn-outline-primary text-nowrap ms-2 px-2" data-id="{{ $item }}">{{ __('robot.MakePrimary') }}</button>
                    @endif
                    @if ($loop->first && $data['is_verify'] == 0)
                        <button class="btn_defalut btn btn-outline-primary text-nowrap ms-2 px-2" data-id="{{ $item }}">{{ __('robot.Verify') }}</button>
                    @endif
                    <button class="btn_save btn btn-outline-primary text-nowrap ms-2 d-none px-2" data-id="{{ $item }}">{{ __('basic.Save') }}</button>
                    <button class="btn_edit btn btn btn-outline-primary text-nowrap ms-2 px-2" data-id="{{ $item }}" data-value="{{ $data[$item] }}">{{ __('robot.Edit') }}</button>
                    <button class="d-none btn_send_sms btn btn-outline-primary text-nowrap ms-2" data-id="{{ $item }}" type="button">{{ __('basic.Verify') }}</button>
                </div>
                <div class="row d-none" id="div_verify_{{ $item }}">
                    <div class="col-8">
                        <input class="verify_code form-control" data-id="{{ $item }}" id="verify_code_{{ $item }}" name='verify_code' type="text" placeholder="{{ __('basic.IuputVerifyCode') }}">
                    </div>
                    <div class="col p-1">
                        <button class="btn_verify btn btn-outline-primary text-nowrap ms-2" data-id="{{ $item }}" data-value="{{ $data[$item] }}" type="button">{{ __('robot.Submit') }}</button>
                    </div>
                </div>
            </div>
        @endforeach


    </form>


    <script type="text/javascript">
        $(function() {
            $('.payment_card').find('input,button').each(function(i, o) {
                $(o).prop('disabled', true);
            })

            $('#address_delivery_type').change(function() {
                $('#address_fm .home,#address_fm .store').hide()
                $($(this).find('option:selected').data('target')).show();

            })

            $('[name=address_type]').click(function() {
                $('.address_type').hide();
                $($(this).data('target')).parents('.address_type').show();
            })
        })
    </script>

    {{-- Password --}}
    <div class="card pwd_card px-6 py-4">
        <h4 class="border-bottom py-2">{{ __('basic.SettingPassword') }}</h4>
        {{-- Content --}}
        <form class="form row row-cols-1 py-6" id='password_fm'>
            <div class="col mb-3">
                <label class="form-label" for="old_password">{{ __('basic.OldPassword') }}</label>
                <input class="form-control" id="old_password" name='old_password' type="password">
            </div>

            <div class="col mb-3">
                <label class="form-label" for="password">{{ __('basic.NewPassword') }}</label>
                <div class="col mb-3">
                    <div class="form-check form-check-inline lh-base">
                        <input class="form-check-input" id="password_type_defalut" name="password_type" type="radio" value="defalut" checked>
                        <label class="form-check-label" for="password_type_defalut">{{ __('robot.AlphanumericPassword') }}</label>
                    </div>
                    <div class="form-check form-check-inline lh-base">
                        <input class="form-check-input" id="password_type_simple" name="password_type" type="radio" value="simple">
                        <label class="form-check-label" for="password_type_simple">{{ __('robot.DigitalPassword') }}</label>
                    </div>
                </div>
                <input class="form-control" id="password" name='password' type="password" aria-describedby="password_help_block">
                <div class="form-text" id="password_help_block">{{ __('basic.PasswordDesc') }}</div>
            </div>
            <div class="col mb-3">
                <label class="form-label" for="confirm_password">{{ __('basic.ConfirmPassword') }}</label>
                <input class="form-control" id="confirm_password" name='confirm_password' type="password">
            </div>
            <div class="col mb-3 pt-6">
                <button class="btn btn-outline-primary change_password_btn w-100" type="button">{{ __('basic.Update') }}</button>
            </div>
        </form>
    </div>

    {{-- 綁定帳號 --}}
    @if (!empty($data['line_id']) || !empty($data['facebook_id']))
        <div class="card bind_account_card px-6 py-4">
            @php
                $socialName = '社群媒體';
                if (!empty($data['line_id'])) {
                    $socialName = 'LINE';
                }
                if (!empty($data['facebook_id'])) {
                    $socialName = 'Facebook';
                }
            @endphp

            <h4 class="border-bottom py-2">{{ __('member.BindAccount') }}</h4>

            @if ($data['account'] != $data['line_id'] && $data['account'] != $data['facebook_id'])
                <p class="form-text" id="">{{ sprintf(__('member.YouHasFinishBind'), $socialName) }}</p>
            @else
                <p class="form-text" id="">{{ sprintf(__('member.UseSocialMediaLogin'), $socialName) }}</p>
                <p class='form-text' id=''>{{ __('member.PleaseLoginToFinishBind') }}</p>

                {{-- Content --}}
                <form class="form row row-cols-1 py-6" id='bind_account_fm'>
                    <div class="col mb-3">
                        <label class="form-label" for="account">{{ __('basic.Account') }}</label>
                        <input class="form-control" id='bind_account' name='account' type="text" value="" placeholder="{{ __('basic.LoginAccountHint') }}">
                    </div>
                    <div class="col mb-3">
                        <label class="form-label" for="password">{{ __('basic.Password') }}</label>
                        <input class="form-control" id="bind_password" name='password' type="password">
                    </div>
                    <div class="col mb-3 pt-6">
                        <button class="btn btn-outline-primary bind_account_btn w-100" type="button">{{ __('member.FinishBind') }}</button>
                    </div>
                </form>
            @endif
        </div>
    @endif

    {{-- Address --}}
    <div class="card address_card px-6 py-4">
        {{-- Title --}}
        <div class="d-flex justify-content-between border-bottom">
            <h4 class=''>{{ __('basic.Address') }}</h4>
            <div class="d-flex align-items-start gap-3">
                {{-- <button class="btn btn-sm btn-primary">{{ __('basic.AddNew') }}</button> --}}
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#address_modal" type="button">{{ __('basic.AddAddress') }}</button>
            </div>
        </div>
        {{-- Address Item --}}
        @if (empty($data['address']))
            <div class="d-flex justify-content-between align-items-start py-4">
                <span class='text-secondary'>{{ __('basic.NotSetAddress') }}</span>
            </div>
        @else
            @foreach ($data['address'] as $addr)
                <div class="d-flex align-items-start border-bottom py-4">
                    <div class="d-flex flex-column me-auto gap-3">
                        <div>
                            <span class="text-secondary">{{ __('basic.DeliveryType') }}</span>
                            @switch($addr['address_type'])
                                @case('delivery')
                                    <span>{{ __('basic.HomeDelivery') }}</span>
                                @break

                                @case('seven')
                                    <span>{{ __('basic.UniMart') }}</span>
                                @break

                                @case('family')
                                    <span>{{ __('basic.FamiMart') }}</span>
                                @break
                            @endswitch

                        </div>
                        <div>
                            <span class="text-secondary">{{ __('basic.Name') }}</span>
                            <span>{{ $addr['recipient_name'] }}</span>
                        </div>
                        <div>
                            <span class="text-secondary">{{ __('basic.Phone') }}</span>
                            <span>{{ $addr['recipient_mobile'] }}</span>

                        </div>
                        <div>
                            @switch($addr['address_type'])
                                @case('delivery')
                                    @if (!empty($addr['address']))
                                        <span class="text-secondary">{{ __('basic.Address') }}</span>
                                        <span>{{ $addr['address'] }}</span>
                                    @endif
                                @break

                                @case('seven')
                                    <span class="text-secondary">{{ __('basic.Store') }}</span>
                                    <span class="tag tag-outline">7-11</span>
                                    <span class="text-primary">{{ $addr['store_name'] }}</span>
                                @break

                                @case('family')
                                    <span class="text-secondary">{{ __('basic.Store') }}</span>
                                    <span class="tag tag-outline">全家</span>
                                    <span class="text-primary">{{ $addr['store_name'] }}</span>
                                @break
                            @endswitch

                        </div>

                    </div>
                    @if (!empty($addr['img_name']))
                        <img class="w-25 me-3" src="{{ asset('storage/member/' . $addr['member_id'] . '/address/' . $addr['img_name']) }}" alt="">
                    @endif

                    <button class="btn_del_address btn btn-link" data-id="{{ $addr['id'] }}" style="word-break: keep-all;">{{ __('basic.Delete') }}</button>
                </div>
            @endforeach
        @endif

    </div>
    <div class="modal fade" id="address_modal" data-bs-backdrop="static" aria-labelledby="address_modal" aria-hidden="true" tabindex="-1" style="display: none;">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="address_modal_title">{{ __('basic.AddNew') . __('basic.Address') }}</h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body d-flex flex-column justify-content-center gap-3 px-10">
                    <form class="form row row-cols-1 py-6" id='address_fm' enctype="multipart/form-data">
                        <input class="form-control" id="member_id" name='member_id' type="hidden" value='{{ $data['id'] }}' />
                        <div class="col mb-3">
                            <label class="form-label" for="recipient_name">{{ __('basic.Name') }}</label>
                            <input class="form-control" id="recipient_name" name='recipient_name' type="text" value='' />
                        </div>
                        <div class="col mb-3">
                            <label class="form-label" for="recipient_mobile">{{ __('basic.Phone') }}</label>
                            <input class="form-control" id="recipient_mobile" name='recipient_mobile' type="phone" value='' />
                        </div>
                        <div class="col mb-3">
                            <label class="form-label" for="address_delivery_type">{{ __('basic.DeliveryType') }}</label>
                            <select class="form-control form-select" id='address_delivery_type' name='address_delivery_type'>
                                <option data-target='.home' value='delivery'>{{ __('basic.HomeDelivery') }}</option>
                                <option data-target='.store' value='seven'>{{ __('basic.UniMart') }}</option>
                                <option data-target='.store' value='family'>{{ __('basic.FamiMart') }}</option>
                            </select>
                        </div>



                        <div class='store' style='display: none;'>
                            <div class="col mb-3">
                                <label class="col-form-label" for="address_store_name">{{ __('basic.StoreName') }}</label>
                                <input class="form-control" id="address_store_name" name='store_name' type="text" value='' />
                            </div>
                        </div>

                        <div class='home'>
                            <div class="col pt-2">
                                <div class="d-flex">
                                    <div class="form-check">
                                        <input class="form-check-input" id="address_type_1" name="address_type" data-target='#address_address_photo' type="radio" checked>
                                        <label class="form-check-label" for="address_type_1">
                                            {{ __('basic.UploadAddressPhoto') }}
                                        </label>
                                    </div>
                                    <div class="form-check ms-3">
                                        <input class="form-check-input" id="address_type_2" name="address_type" data-target='#address_address' type="radio">
                                        <label class="form-check-label" for="address_type_2">
                                            {{ __('basic.ManualInputAddressInfo') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col address_type mb-3">
                                <label class="col-form-label" for="address_address_photo">{{ __('basic.UploadAddressPhoto') }}</label>
                                <input class="form-control" id="address_address_photo" name='address_photo' type="file" />
                            </div>
                            <div class="col address_type mb-3" style='display:none;'>
                                <label class="col-form-label" for="address_address">{{ __('basic.Address') }}</label>
                                <input class="form-control" id="address_address" name='address' type="text" value="" />
                            </div>
                        </div>
                        <div class="col mb-3 pt-6">
                            <button class="save_address_btn btn btn-outline-primary w-100" type="button">{{ __('basic.Save') }}</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>


    {{-- Payment --}}
    <div class="card payment_card mb-5 px-6 py-4">
        <div class="d-flex justify-content-between border-bottom">
            <h4 class='text-secondary'>{{ __('basic.Payment') }}</h4>
            <div class="d-flex align-items-start gap-3">
                <button class="btn btn-sm btn-primary" type="button" disabled>{{ __('basic.AddNew') }}</button>
            </div>
        </div>
        {{-- Content --}}
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 py-3">
            <div class="col-12">
                <span class='text-secondary'>{{ __('basic.NotSetPayment') }}</span>
            </div>
        </div>
        {{-- <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 py-3">
            <div class="col-12 col-md-3">
                <span>玉山銀行</span>
                <span class="tag tag-outline">{{ __('basic.Default') }}</span>
            </div>
            <span>5512 34** **** 1234</span>
            <div class="col-12 col-md-4 d-flex justify-content-md-end align-items-center">
                <button class="btn btn-sm btn-link">{{ __('basic.Delete') }}</button>
            </div>
        </div>
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center py-3">
            <div class="col-12 col-md-3">
                <span>玉山銀行</span>
            </div>
            <span>5512 34** **** 1234</span>
            <div class="col-12 col-md-4 d-flex justify-content-md-end align-items-center gap-3">
                <button class="btn btn-sm btn-outline-primary">{{ __('basic.SettingDefault') }}</button>
                <button class="btn btn-sm btn-link">{{ __('basic.Delete') }}</button>
            </div>
        </div> --}}
    </div>



@endsection