@extends("common.layout-popup")

@section("page-title", "[배송관리] 배송정보 변경")

@section("header")
{!! resource('js/common/kakaoPost.js') !!}
@endsection

@section("content")
<form class="default" id="delivery-form">
    <div class="layout-2-cols lb-layout">
        <section class="mb-3">
            <header>수신자정보</header>
            <main>
                <ul class="list-item-none">
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-3 required">이름</label>
                        <div class="col-9">
                            <input type="text" name="receiver" value="{{ $delivery->receiver }}" class="form-control" />
                        </div>
                    </li>
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-3 required">연락처</label>
                        <div class="col-9">
                            <input type="text" name="mobile" value="{{ $delivery->mobile }}" class="form-control number-only" />
                        </div>
                    </li>
                </ul>
            </main>
        </section>
        <section>
            <header>배송주소</header>
            <main>
                <ul class="list-item-none">
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-2 required">국가</label>
                        <div class="col-4">
                            <select class="form-select" name="country_id" id="country_id">
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}" @selected($country->id == $delivery->country_id)>{{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4 domestic">
                            <button class="btn btn-sm btn-primary" type="button" onclick="execKakaoPostcode()">주소검색</button>
                        </div>
                    </li>
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-2 required">우편번호</label>
                        <div class="col-10">
                            <input type="text" name="zip_code" value="{{ $delivery->zip_code }}" id="validationCustom07" class="form-control domestic" />
                        </div>
                    </li>
                    <li class="row mx-0 align-items-center mb-3 foreign" style="{{ $delivery->country_id == 30 ? "display: none"  : ""}}">
                        <label class="col-2 required">지역</label>
                        <div class="col-10">
                            <input type="text" name="region" value="{{ $delivery->region }}" class="form-control" />
                        </div>
                    </li>
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-2 required">주소</label>
                        <div class="col-10">
                            <input type="text" name="address" value="{{ $delivery->address }}" id="validationCustom07-1" class="form-control domestic" />
                        </div>
                    </li>
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-2 required">상세주소</label>
                        <div class="col-10">
                            <input type="text" name="address_detail" value="{{ $delivery->address_detail }}" class="form-control" />
                        </div>
                    </li>
                    <li class="row mx-0 align-items-center mb-3">
                        <label class="col-2 required">배송메세지</label>
                        <div class="col-10">
                            <textarea  name="note" class="form-control" rows="10" >{{ $delivery->note }}</textarea>
                        </div>
                    </li>
                </ul>
            </main>
        </section>
    </div>
</form>

<div class="align-right mt-3">
    <button class="btn btn-primary" onclick="onModifyDelivery({{ $delivery->id }})">변경</button>
</div>


@endsection

@push("script")
<script>
    function onModifyDelivery(id) {
        const data = $('#delivery-form').serializeArray();
        const params = {};

        data.forEach(item => {
            params[item.name] = item.value;
        })

        if ( params['country_id'] == 30 ) {
            params['zip_code'] = $('#validationCustom07').val();
            params['address'] = $('#validationCustom07-1').val();
        }


        alertify.confirm("확인", "배송정보를 수정하시겠습니까?", async () => {
            const href = "{{ route('api.delivery.modify', ':id') }}";
            const result = await customFetch(href.replace(":id", id), {
                method: "POST",
                body : JSON.stringify( params ) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "변경되었습니다.", () => { onClosePopup() });
            } else {
                alertify.alert("error", result.message);
            }
        }, () => {} )
    }

    const foreignKeyupEvent = (event) => {
        const targetName = event.target.name;
        let isTarget = ['region', 'address', 'address_detail'].indexOf(targetName) > -1;
        if (isTarget) {
            const regex = /^[A-Za-z0-9,() -]*$/;
            const inputValue = event.target.value;
            if (!regex.test(inputValue)) {
                event.target.value = inputValue.replace(/[^A-Za-z0-9,() -]/g, '')
            }
        }
    }

    $(function() {
        let isEvent = false;
        $('#country_id').val() == 30 ? isDomestic() : isForeign();
        $('#country_id').on("change", function() {
            $(this).val() == 30 ? isDomestic() : isForeign()
        })

        function isDomestic() {
            $.each($('.domestic'), function() {
                if ( $(this).attr("type") == 'text' ) {
                    $(this).attr("disabled", true);
                } else {
                    $(this).show();
                }
            })

            $('.foreign').hide();

            if ( isEvent ) {
                document.removeEventListener("keyup", foreignKeyupEvent);
            }
        }

        function isForeign() {
            $.each($('.domestic'), function() {
                if ( $(this).attr("type") == 'text' ) {
                    $(this).attr("disabled", false);
                } else {
                    $(this).hide();
                }
            })
            $('.foreign').show();

            if (! isEvent) {
                isEvent = true;
                document.addEventListener("keyup", foreignKeyupEvent);
            }
        }


    })

</script>
@endpush