<?php
$cnt = count($listDept);
$lati = 0;
$long = 0;
foreach ($listDept as $dept) {
    $lati += $dept['rcpt_y'];
    $long += $dept['rcpt_x'];
}
$lati = $lati / $cnt;
$long = $long / $cnt;
?>
<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="ko">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>지도보기</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
    <meta name="description" content="ArchitectUI HTML Bootstrap 5 Dashboard Template">

    <script defer src="/architectui/assets/scripts/vendors.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/main.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/demo.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/ladda.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/blockui.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/circle_progress.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/count_up.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/toastr.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/sweet_alerts.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/scrollbar.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/sticky_elements.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/carousel_slider.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/fullcalendar.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/treeview.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/maps.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/rating.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/image_crop.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/guided_tours.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/tables.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/form_validation.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/form_wizard.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/clipboard.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/datepicker.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/input_mask.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/input_select.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/range_slider.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/textarea_autosize.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/toggle_switch.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/chart_js.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/apex_charts.98288b227c064e6a107f.js"></script>
    <script defer src="/architectui/assets/scripts/sparklines.98288b227c064e6a107f.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="/architectui/assets/styles/vendors.98288b227c064e6a107f.css" rel="stylesheet">
    <link href="/architectui/assets/styles/main.98288b227c064e6a107f.css" rel="stylesheet">

    <style>
        .marker-label {
            position: absolute;
            transform: translate(-50%, -100%);
            background: #fff;
            border: 1px solid #333;
            border-radius: 6px;
            padding: 3px 6px;
            font-size: 12px;
            white-space: nowrap;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
            pointer-events: none;
            /* 지도 드래그 방해 안 하게 */
        }
    </style>
</head>

<body>
    <div class="my-loader-template d-none">
        <div class="loader bg-transparent no-shadow p-0">
            <div class="ball-grid-pulse">
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
                <div class="bg-white"></div>
            </div>
        </div>
    </div>
    <div class="app-container app-theme-white body-tabs-shadow">
        <div class="app-container">
            <div class="app-main__outer">
                <div class="app-main__inner px-4 py-3">
                    <div class="app-page-title">
                        <div class="page-title-wrapper d-flex align-items-center">
                            <div class="page-title-heading">
                                <div class="page-title-icon">
                                    <i class="pe-7s-map icon-gradient bg-premium-dark"></i>
                                </div>
                                <div>
                                    관할 배정 지도
                                </div>
                            </div>

                            <div class="ms-auto">
                                <button type="button" class="btn btn-primary" onclick="fn_print();">
                                    인쇄하기
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="main-card mb-3 card" id="mapArea">
                                <div class="card-body" style="height: 400px;">
                                    <div id="map_view" style="width:100%;height:700px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


    <!-- <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=kvyjyj00fp"></script> -->
    <!-- <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=dtounkwjc5"></script> -->
    <!-- <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=dtounkwjc5"></script> -->
    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=dtounkwjc5"></script>
    <script type="text/javascript">

        const tpl = document.querySelector('.my-loader-template');
        var map;


        $(function () {

            map = new naver.maps.Map('map_view', {
                center: new naver.maps.LatLng(<?= $lati ?>, <?= $long ?>), //지도의 초기 중심 좌표
                useStyleMap: true,
                zoom: 15, //지도의 초기 줌 레벨
                minZoom: 1, //지도의 최소 줌 레벨
                mapTypeControl: true, //지도 유형 컨트롤의 표시 여부
                mapTypeControlOptions: { //지도 유형 컨트롤의 옵션
                    style: naver.maps.MapTypeControlStyle.BUTTON,
                    position: naver.maps.Position.TOP_LEFT
                },
                zoomControl: true, //줌 컨트롤의 표시 여부
                zoomControlOptions: { //줌 컨트롤의 옵션
                    position: naver.maps.Position.TOP_RIGHT

                }
            });

            <?php reset($listDept);
            foreach ($listDept as $dept): ?>
                const pos_<?= $dept['dept_sq'] ?> = new naver.maps.LatLng(<?= $dept['rcpt_y'] ?>, <?= $dept['rcpt_x'] ?>);

                // 기본 마커
                new naver.maps.Marker({
                    position: pos_<?= $dept['dept_sq'] ?>,
                    map: map,
                    // icon: {
                    //     url: HOME_PATH + '/plugin/img/pin.png',
                    //     size: new naver.maps.Size(50, 52),
                    //     origin: new naver.maps.Point(0, 0),
                    //     anchor: new naver.maps.Point(25, 26)
                    // }
                });

                // 라벨 오버레이(텍스트만)
                new LabelOverlay({
                    position: pos_<?= $dept['dept_sq'] ?>,
                    text: '<?= $dept['rcpt_atclno'] ?>         <?= $dept['rsrv_date'] ?>         <?= $dept['rsrv_tm_ap'] ?>     <?= $dept['rsrv_tm_hour'] ?>시',
                    map: map
                });

            <?php endforeach; ?>
        });


        function LabelOverlay(options) {
            this._position = options.position;
            this._text = options.text;
            this._map = options.map;
            this.setMap(this._map);
        }
        LabelOverlay.prototype = new naver.maps.OverlayView();

        LabelOverlay.prototype.onAdd = function () {
            const el = document.createElement('div');
            el.className = 'marker-label';
            el.textContent = this._text;
            this._el = el;

            const overlayLayer = this.getPanes().overlayLayer;
            overlayLayer.appendChild(el);
        };

        LabelOverlay.prototype.draw = function () {
            const projection = this.getProjection();
            const point = projection.fromCoordToOffset(this._position);

            // 라벨을 마커 위로 올리기
            this._el.style.left = point.x + 'px';
            this._el.style.top = (point.y - 30) + 'px';
        };

        LabelOverlay.prototype.onRemove = function () {
            if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
            this._el = null;
        };


        // 인쇄하기
        function fn_print() {
            var initBody;
            window.onbeforeprint = function () {
                initBody = document.body.innerHTML;
                document.body.innerHTML = document.getElementById('mapArea').innerHTML;
            };
            window.onafterprint = function () {
                document.body.innerHTML = initBody;
            };
            window.print();
            return false;
        }
    </script>
</body>

</html>