<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<meta property="og:title" content="스파르타 맛집 지도"/>
<meta property="og:description" content="mini project for Web Plus"/>
<meta property="og:image" content="{{ url_for('static', filename='og_image.jpg') }}"/>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<script type="text/javascript"
        src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=내 아이디&submodules=geocoder"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<style>
    .wrap {
        width: 90%;
        max-width: 750px;
        margin: 0 auto;
    }

    .banner {
        width: 100%;
        height: 20vh;
        background-image: url("{{ url_for('static', filename='banner.jpg') }}");
        background-position: center;
        background-size: contain;
        background-repeat: repeat;
    }


    h1.title {
        font-family: 'Jua', sans-serif;

        color: white;
        font-size: 3rem;
    }

    h5 {
        font-family: 'Jua', sans-serif;
    }

    .matjip-list {
        overflow: scroll;
        width: 100%;
        height: calc(20vh - 30px);
        position: relative;
    }

    .card-title, .card-subtitle {
        display: inline;
    }

    #map {
        width: 100%;
        height: 50vh;
        margin: 20px auto 20px auto;
    }

    .iw-inner {
        padding: 10px;
        font-size: smaller;
    }
</style>
<script>
    let y_cen = 37.4981125   // lat
    let x_cen = 127.0379399  // long
    let map;
    let markers = [];
    let infowindows = [];
    $(document).ready(function () {
        map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(y_cen, x_cen),
            zoom: 12,
            zoomControl: true,
            zoomControlOptions: {
                style: naver.maps.ZoomControlStyle.SMALL,
                position: naver.maps.Position.TOP_RIGHT
            }
        });
        get_matjips()
    });

    function make_card(i, matjip) {
        let html_temp = ``;
        if ("liked" in matjip) {
            html_temp = `<div class="card" id="card-${i}">
                            <div class="card-body">
                                <h5 class="card-title"><a href="javascript:click2center(${i})" class="matjip-title">${matjip.title}</a></h5>
                                <h6 class="card-subtitle mb-2 text-muted">${matjip.category}</h6>
                                 <i class="fas fa-bookmark"token interpolation">${matjip['title']}', '${matjip['address']}', 'unlike')"></i>
                                <p class="card-text">${matjip.address}</p>
                                <p class="card-text" style="color:blue;">${matjip.show}</p>
                            </div>


                        </div>`;
        } else {
            html_temp = `<div class="card" id="card-${i}">
                            <div class="card-body">
                                <h5 class="card-title"><a href="javascript:click2center(${i})" class="matjip-title">${matjip.title}</a></h5>
                                <h6 class="card-subtitle mb-2 text-muted">${matjip.category}</h6>
                                 <i class="far fa-bookmark"token interpolation">${matjip['title']}', '${matjip['address']}', 'like')"></i>
                                <p class="card-text">${matjip.address}</p>
                                <p class="card-text" style="color:blue;">${matjip.show}</p>
                            </div>
                            </div>`;
        }
        $('#matjip-box').append(html_temp);
    }

    function get_matjips() {
        $('#matjip-box').empty();
        $.ajax({
            type: "GET",
            url: '/matjip',
            data: {},
            success: function (response) {
                let matjips = response["matjip_list"]
                for (let i = 0; i < matjips.length; i++) {
                    let matjip = matjips[i]
                    console.log(matjip)
                    make_card(i, matjip);
                    let marker = make_marker(matjip);
                    add_info(i, marker, matjip);
                }
            }
        });
    }

    function make_marker(matjip) {
        let marker_img = '';
        if ('liked' in matjip) {
            marker_img = '{{ url_for("static", filename="marker-liked.png") }}'
        } else {
            marker_img = '{{ url_for("static", filename="marker-default.png") }}'
        }

        let marker = new naver.maps.Marker({
            position: new naver.maps.LatLng(matjip["mapy"], matjip["mapx"]),
            map: map,
            icon: marker_img
        });
        markers.push(marker);
        return marker
    }

    function add_info(i, marker, matjip) {
        let html_temp = `<div class="iw-inner">
                            <h5>${matjip['title']}</h5>
                            <p>${matjip['address']}
                            </div>`;
        let infowindow = new naver.maps.InfoWindow({
            content: html_temp,
            maxWidth: 200,
            backgroundColor: "#fff",
            borderColor: "#888",
            borderWidth: 2,
            anchorSize: new naver.maps.Size(15, 15),
            anchorSkew: true,
            anchorColor: "#fff",
            pixelOffset: new naver.maps.Point(10, -10)
        });
        infowindows.push(infowindow)
        naver.maps.Event.addListener(marker, "click", function (e) {
            if (infowindow.getMap()) {
                infowindow.close();
            } else {
                infowindow.open(map, marker);
                map.setCenter(infowindow.position)
                $("#matjip-box").animate({
                    scrollTop: $("#matjip-box").get(0).scrollTop + $(`#card-${i}`).position().top
                }, 2000);
            }
        });
    }

    function click2center(i) {
        let marker = markers[i]
        let infowindow = infowindows[i]
        if (infowindow.getMap()) {
            infowindow.close();
        } else {
            infowindow.open(map, marker);
            map.setCenter(infowindow.position)
        }
    }

    function bookmark(title, address, action) {
        $.ajax({
            type: "post",
            url: "/like_matjip",
            date: {
                title_give: title,
                address_give: address,
                action_give: action
            },
            success: function (response) {
                if (response["result"] == "success") {
                    get_matjips()
                }
            }
        })
    }
</script>

<div class="matjip-list" id="matjip-box">
    <div class="card" id="card-0">
        <div class="card-body">
            <h5 class="card-title"><a href="#" class="matjip-title">혼가츠</a></h5>
            <h6 class="card-subtitle mb-2 text-muted">일식</h6>
            <p class="card-text">서울 마포구 와우산로21길 36-6 (서교동)</p>
            <p class="card-text" style="color:blue;">생방송 투데이</p>
        </div>
    </div>
</div>