@extends('admin.layouts.base')

@section('contents')
    <div class="loading_disp loading_hide"></div>
    <div class="mt5">
        @include('admin.objects.components.facility-tab', ['title' => '施設管理'])
        @include('admin.objects.components.regist-band', ['title' => '施設登録'])
        <form method="POST" action="{{ route('facility-regist') }}" enctype="multipart/form-data" id="enter-off">
            {{ csrf_field() }}
            @include('admin.objects.components.hidden', ['name' => 'not_save_img_id'])
            @include('admin.objects.projects.facility-upload-3')
            <div class="regist__div mb10">
                <div class="regist__div">
                    <a style="min-width: 220px" href="{{ route('facility-top') }}" class="c-linkbtn d-inline-block c-tab__backbtn mr-0 ml-0 btn-close-modal">戻る</a>
                    <input type="submit" style="min-width: 220px" class="c-registbtn ml10 mr10" id="" value="登録・保存" autocomplete="off">
                    <a href="" class="c-base-tab__image saved_to_review un-required">保存して口コミページへ</a>
                </div>
                <span class="regist__div--facility">画像がない場合、登録・保存ボタンクリックで、新規登録画面が表示されます。</span>
            </div>
        </form>
    </div>
    @include('admin.objects.projects.modal-map', ['no' => 2])
    <script>
        var API_KEY = "AIzaSyAvLqHslDD75YM0_3ZZYv_C9lYVKNLR_i0";
        $(document).on('click', '#image_list .addressToZip', function () {
            var address = "";
            if ($('#image_list .address1 option:selected').val() != "") {
                address += $('#image_list .address1 option:selected').text();
            }
            if ($('#image_list .address2 option:selected').val() != "") {
                address += $('#image_list .address2 option:selected').text();
            }
            if ($('#image_list .address3 option:selected').val() != "") {
                address += $('#image_list .address3 option:selected').text();
            }
            if ($('#image_list .address4 option:selected').val() != "") {
                address += $('#image_list .address4 option:selected').text();
            }
            if (address != "") {
                $.ajax({
                    url: 'https://maps.googleapis.com/maps/api/geocode/json',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        key: API_KEY,
                        address: address,
                        language: 'ja'
                    }
                }).done(function (data) {
                    if (data.status == "OK") {
                        $.each(data["results"][0]["address_components"], function (k, v) {
                            if ($(this)[0]["types"][0] == "postal_code") {
                                $('#image_list .zip').val($(this)[0]["long_name"]);
                            }
                        });
                        $('[name=lat_0]').val(data["results"][0]["geometry"]["location"]["lat"]);
                        $('[name=lng_0]').val(data["results"][0]["geometry"]["location"]["lng"]);
                        $('[name=lat_text]').text(data["results"][0]["geometry"]["location"]["lat"]);
                        $('[name=lng_text]').text(data["results"][0]["geometry"]["location"]["lng"]);
                    }
                });
            }
        });
        $(document).on('click', '#image_list .zipToAddress', function () {
            var address_name1;
            var address_name2;
            var address_name3;

            var zip = $('[name=zip]').val();
            if(zip == ""){
                zip = $('[name=zip_0]').val();
            }

            if (zip != "") {
                $.ajax({
                    url: 'https://maps.googleapis.com/maps/api/geocode/json',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        key: API_KEY,
                        address: zip,
                        language: 'ja'
                    }
                }).done(function (data) {
                    if (data.status == "OK") {
                        if (data["results"][0]["address_components"].length == 4) {
                            address_name1 = data["results"][0]["address_components"][2]["long_name"];
                            address_name2 = data["results"][0]["address_components"][1]["long_name"];
                            address_name3 = data["results"][0]["address_components"][3]["long_name"];
                        } else if (data["results"][0]["address_components"].length == 5) {
                            address_name1 = data["results"][0]["address_components"][3]["long_name"];
                            address_name2 = data["results"][0]["address_components"][2]["long_name"];
                            address_name3 = data["results"][0]["address_components"][1]["long_name"];
                        } else if (data["results"][0]["address_components"].length == 7) {
                            address_name1 = data["results"][0]["address_components"][5]["long_name"];
                            address_name2 = data["results"][0]["address_components"][4]["long_name"] + data["results"][0]["address_components"][3]["long_name"];
                            address_name3 = data["results"][0]["address_components"][2]["long_name"];
                        } else {
                            address_name1 = data["results"][0]["address_components"][4]["long_name"];
                            address_name2 = data["results"][0]["address_components"][3]["long_name"] + data["results"][0]["address_components"][2]["long_name"];
                            address_name3 = data["results"][0]["address_components"][1]["long_name"];
                        }

                        $('[name=lat_text]').text(data["results"][0]["geometry"]["location"]["lat"]);
                        $('[name=lng_text]').text(data["results"][0]["geometry"]["location"]["lng"]);
                        $('[name=lat]').val(data["results"][0]["geometry"]["location"]["lat"]);
                        $('[name=lng]').val(data["results"][0]["geometry"]["location"]["lng"]);

                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'POST',
                            datatype: 'json',
                            url: '/admin/city_name',
                            data: {
                                prefName: address_name1,
                                cityName: address_name2,
                                townName: address_name3
                            }
                        })
                            .done(function (data) { //ajaxの通信に成功した場合
                                var obj = $('[name^=address2]');
                                obj.closest(".p-search-common__tbl").find(".filter-list-address3").val("");
                                $(obj).val(data[2]);
                                if (obj.closest(".p-search-common__tbl").find(".data-list-address2").length > 0) {
                                    obj.closest(".p-search-common__tbl").find(".filter-list-address2").val(obj.find('option:selected').text());
                                    $('.data-list-address2 li').removeAttr('selected');
                                    $('.scroll-address').val("");
                                    $('.data-list-address2 li').each(function () {
                                        if ($(this).attr('code') == obj.val()) {
                                            $(this).attr('selected', 'selected')
                                        }
                                    });
                                }

                                $('[name^=address1] option').removeAttr('selected');
                                $('[name^=address1] option').each(function () {
                                    if ($(this).val() == data[3]) {
                                        $(this).remove();
                                        $('[name^=address1]').prepend('<option selected value="' + data[3] + '">' + address_name1 + '</option>');
                                        $(this).attr('selected', 'selected');
                                    }
                                });

                                $(obj).closest(".p-search-common__tbl").find('[name^=address3]').children('option').remove();
                                $(obj).closest(".p-search-common__tbl").find('[name^=address3]').append($('<option>').text('町村を選択').attr('value', ''));
                                if (obj.closest(".p-search-common__tbl").find(".data-list-address3").length > 0) {
                                    $(obj).closest(".p-search-common__tbl").find('.data-list-address3').children('li').remove();
                                }

                                $('[name=primary_school_city] option').remove();
                                $('[name=primary_school_city]').append($('<option>').text('町村を選択').attr('value', ''));
                                $('[name=primary_school2_city] option').remove();
                                $('[name=primary_school2_city]').append($('<option>').text('町村を選択').attr('value', ''));
                                $('[name=primary_school3_city] option').remove();
                                $('[name=primary_school3_city]').append($('<option>').text('町村を選択').attr('value', ''));

                                $('[name=secondary_school_city] option').remove();
                                $('[name=secondary_school_city]').append($('<option>').text('町村を選択').attr('value', ''));
                                $('[name=secondary_school2_city] option').remove();
                                $('[name=secondary_school2_city]').append($('<option>').text('町村を選択').attr('value', ''));
                                $('[name=secondary_school3_city] option').remove();
                                $('[name=secondary_school3_city]').append($('<option>').text('町村を選択').attr('value', ''));

                                $('[name^=address3] option').remove();
                                $('[name^=address3]').append($('<option>').text('町村を選択').attr('value', ''));
                                $(".data-list-address3").append($('<li>').text('町村を選択').attr('code', ''));

                                $.each(data[0], function (row, value) {
                                    if (address_name3 == value['name'] ||
                                        (value['name'].indexOf(address_name3) !== -1 &&
                                            (address_name3.length + 3) == value['name'].length &&
                                            value['name'].indexOf('丁目') !== -1)) {
                                        if (address_name3 == value['name']) {
                                            $(obj).closest(".p-search-common__tbl").find('[name^=address3]').append($('<option selected>').text(value['name']).attr('value', value['code']));
                                            if (obj.closest(".p-search-common__tbl").find(".data-list-address3").length > 0) {
                                                obj.closest(".p-search-common__tbl").find(".data-list-address3").append($('<li selected="selected">').text(value['name']).attr('code', value['code']));
                                                obj.closest(".p-search-common__tbl").find(".filter-list-address3").val(value['name']);
                                            }
                                        } else {
                                            $(obj).closest(".p-search-common__tbl").find('[name^=address3]').append($('<option>').text(value['name']).attr('value', value['code']));
                                            if (obj.closest(".p-search-common__tbl").find(".data-list-address3").length > 0) {
                                                obj.closest(".p-search-common__tbl").find(".data-list-address3").append($('<li>').text(value['name']).attr('code', value['code']));
                                            }
                                        }
                                    }
                                });

                                var cityName = $('[name^=address2]').children("option:selected").text();
                                var optionCity = '<option value="' + cityName + '">' + cityName + '</option>';

                                $('[name=primary_school_city]').append(optionCity);
                                $('[name=primary_school2_city]').append(optionCity);
                                $('[name=primary_school3_city]').append(optionCity);
                                $('[name=secondary_school_city]').append(optionCity);
                                $('[name=secondary_school2_city]').append(optionCity);
                                $('[name=secondary_school3_city]').append(optionCity);
                            })
                            .fail(function (data) { //ajaxの通信に失敗した場合
                                alert("error!");
                            });
                    } else {
                        var obj = $('[name^=address2]');
                        $(obj).val("");
                        $('.data-list-address2 li').removeAttr('selected');
                        $('.scroll-address').val("");
                        obj.closest(".p-search-common__tbl").find(".filter-list-address3").val("");
                        $(obj).closest(".p-search-common__tbl").find('[name^=address3]').children('option').remove();
                        $(obj).closest(".p-search-common__tbl").find('[name^=address3]').append($('<option>').text('町村を選択').attr('value', ''));
                        if (obj.closest(".p-search-common__tbl").find(".data-list-address3").length > 0) {
                            $(obj).closest(".p-search-common__tbl").find('.data-list-address3').children('li').remove();
                        }
                    }
                });
            }
        });
    </script>
    @if (session('message'))
        @include('admin.objects.projects.modal-message')
        <script type="text/javascript">
            window.onload = function () {
                var message = '登録・保存しました。';
                $('#saved_message').text(message);
                openMessageModal();
            };

        </script>
    @endif
@endsection
@section('footer-script')
    @if(isset($user) && $user->company_id == 3)
        <script src="/admin/js/add-cp3.js"></script>
    @endif
@endsection