<div class="content-header row">
    <h1> 교회정보 </h1>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<style>
    .modal-dialog {
        margin: 30px auto;
    }

    .modal-body {
        position: relative;
        padding: 0px;
    }

    .close {
        position: absolute;
        right: -30px;
        top: 0;
        z-index: 999;
        font-size: 2rem;
        font-weight: normal;
        color: #fff;
        opacity: 1;
    }

    .operate-btn {
        cursor: pointer
    }
</style>
<div id="dsItemListTableTool">
    <div class="form-inline" role="form">
        <input type="text" class="form-control keyword-search-input" name="keyword">
        <button type="submit" class="btn btn-primary podbbang-search-btn">검색</button>
    </div>
</div>
<table class="order-table fill table-condensed cm-place-table" data-page-size="50" data-page-list="[50,100,250,500,1000]" data-toolbar="#dsItemListTableTool" data-method="post" data-side-pagination="server" data-pagination="true" data-show-export="true" data-export-types="['excel','sheet']" data-show-refresh="true" data-show-columns="true" data-pagination-v-align="both" data-click-to-select="true" data-single-select="true" data-sort-name="vcDateCreated" data-sort-order="desc" data-url="/crawls/place/church_table">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>            
            <th data-field="Name" data-align="left">교회명</th>
            <th data-field="Pastor" data-align="left">담임목사</th>
            <th data-field="Facebook" data-align="left" data-formatter="snsFormatter">SNS</th>
            <th data-field="RoadAddress" data-align="left" data-formatter="addressFormatter">주소</th>
            <th data-field="Phone" data-align="left">전화</th>
            <th data-field="CreatedAt" data-align="left">등록시간</th>
            <th data-field="CreatedAt" data-formatter="operateFormatter" data-event="churchEditFormatter">등록시간</th>
        </tr>
    </thead>
</table>

<div class="modal cm-modal-map" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title cm-modal-map-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="cm-map" style="width:585px;height:400px;margin-left:7px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade cm-modal-church" role="dialog" aria-labelledby="cm-modal-church">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">교회정보</h4>
            </div>
            <div class="modal-body">
                <div class="col-sm-12">
                    <form class="form-horizontal">
                        <input type="hidden" class="cm-nid">
                        <div class="form-group"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">교회명</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-name">
                            </div>
                            <label class="col-sm-2 control-label">담임목사</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-pastor">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">주소</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-address">
                            </div>
                            <label class="col-sm-2 control-label">전화</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-phone">
                            </div>
                        </div>
                        <div class="form-group">

                            <label class="col-sm-2 control-label">홈페이지</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-homepage">
                            </div>
                            <label class="col-sm-2 control-label">유튜브</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-youtube">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">트위터계정</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-twitter">
                            </div>

                            <label class="col-sm-2 control-label">페북계정</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-facebook">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">카카오계정</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-kakao">
                            </div>
                            <label class="col-sm-2 control-label">인스타계정</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-instagram">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">네이버카페</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-navercafe">
                            </div>
                            <label class="col-sm-2 control-label">다음카페</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control cm-church-daumcafe">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">예배시간 </label>
                            <a class="btn btn-default col-sm-2 pull-left cm-church-serviceinfo-add">입력추가</a>
                        </div>

                        <div class="form-group cm-church-serviceinfo" style="display:none">
                            <div class="col-sm-3">
                                <input type="text" class="form-control cm-church-servicename" placeholder="예배명">
                            </div>
                            <div class="col-sm-3">
                                <select type="btn btn-default" class="form-control cm-church-dayname">
                                    <option value="">요일</option>
                                    <option value="월">월</option>
                                    <option value="화">화</option>
                                    <option value="수">수</option>
                                    <option value="목">목</option>
                                    <option value="금">금</option>
                                    <option value="토">토</option>
                                    <option value="일">일</option>
                                </select>
                            </div>
                            <div class="col-sm-3">
                                <select type="btn btn-default" class="form-control cm-church-servicechapter">
                                    <option value="">회차</option>
                                    <option value="1부">1부</option>
                                    <option value="2부">2부</option>
                                    <option value="3부">3부</option>
                                    <option value="4부">4부</option>
                                    <option value="5부">5부</option>
                                    <option value="6부">6부</option>
                                    <option value="7부">7부</option>
                                </select>
                            </div>
                            <div class="col-sm-3" style="position: relative; z-index: 100000;">
                                <input type="text" class="form-control cm-church-servicetime">
                            </div>
                        </div>



                    </form>
                </div>
            </div>
            <div class="modal-footer selamat-text-center">
                <button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
                <button type="button" class="btn btn-primary cm-church-save">저장</button>
            </div>
        </div>
    </div>
</div>



<script src="/assets/alt/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/assets/alt/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js" integrity="sha256-eXHLyyVI+v6X1wbfg9NB05IWqOqY4E9185nHZgeDIhg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-ko-KR.min.js" integrity="sha256-Yb64uCOu811SJG/6YP+DHrXfkk0cEq9FI2aDHKrXsFA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b9da5412e3022dcc1e02c67c53e6269e"></script>



<script>
    $(function() {
        $('.cm-church-serviceinfo-add').on('click', function(e) {
            var infoSample = $('.cm-church-serviceinfo').eq(0)
            var info = infoSample.clone(true)
            info.addClass('cm-church-serviceinfo-data')
            infoSample.after(info)
            info.find('.cm-church-servicetime').timepicker({
                timeFormat: 'HH:mm',
                interval: 10,
                minTime: '1',
                maxTime: '11:50pm',
                defaultTime: '10',
                startTime: '5:00',
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });
            info.show()
        })        

        tableActionButtons = $('.table-action-buttons')
        var categoryOptions = tableActionButtons.find('select option');

        addressFormatter = function(value, row, index) {
            // return '<a href="https://map.naver.com/v5/search/'+encodeURIComponent(row.Name)+'?c='+row.Y+','+row.X+'" target="_blank">' + (row.RoadAddress ? row.RoadAddress : row.Address) + '</a>'

            return '<a href="https://www.google.co.kr/maps/search/' + row.Address + '/@' + row.Y + ',' + row.X + ',20.75z?hl=ko" target="_blank" class="cm-address2map" data-place-id="' + index + '">' + row.Address + '</a>'
        }

        operateFormatter = function(value, row, index) {
            var operateBtns = [
                '<a class="edit operate-btn" title="Edit" data-place-id="' + index + '">',
                '<i class="glyphicon glyphicon-edit"></i>',
                '</a> ',
                '<a class="remove operate-btn" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ];
            return operateBtns.join('');
        }

        snsFormatter = function(value, row, index) {
            var operateBtns = [
                row.Youtube ? '<a class="btn btn-default">YT</a> ' : '',
                row.Facebook ? '<a class="btn btn-default">FB</a> ' : '',
                row.Instagram ? '<a class="btn btn-default">Inst</a> ' : '',
                row.Kakao ? '<a class="btn btn-default">Kakao</a> ' : '',
                row.Twitter ? '<a class="btn btn-default">Twit</a>' : ''
            ];
            return operateBtns.join('');
        }

        var table = $('.cm-place-table').bootstrapTable()
        table.on('load-success.bs.table', function(e, data) {
            $('.cm-address2map').on('click', function(e) {
                e.preventDefault();
                var place = table.bootstrapTable('getData')[$(this).data('place-id')];

                $('.cm-modal-map-title').html('<strong style="color:blue">' + place.Name + '</strong> : ' + $(this).text())
                $('.cm-modal-map').modal('show')

                var container = $('#cm-map').get(0); //지도를 담을 영역의 DOM 레퍼런스

                var options = { //지도를 생성할 때 필요한 기본 옵션
                    center: new kakao.maps.LatLng(place.Y, place.X), //지도의 중심좌표.
                    level: 3 //지도의 레벨(확대, 축소 정도)
                };

                var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

                var markerPosition = new kakao.maps.LatLng(place.Y, place.X);
                var marker = new kakao.maps.Marker({
                    position: markerPosition
                });
                marker.setMap(map);

            })
            $('.table-action-btn').each(function(i, n) {
                $(n).find('select').on('change', function() {
                    $.post('/crawls/podbbang/category', {
                        category: this.value,
                        id: table.bootstrapTable('getData')[$(n).parents('tr:eq(0)').data('index')].Id
                    }, function(res) {
                        table.bootstrapTable('refresh', {
                            query: {
                                keyword: searchInput.val(),
                                category: $('.podbbang-crawl-category').val()
                            }
                        })
                    })
                })
                //.find('option[value="' + (data.rows[i] != undefined && data.rows[i].Category != 0 ? data.rows[i].Category : '') + '"]').get(0).selected = true;
            })

            $('.edit.operate-btn').on('click', function() {
                var place = table.bootstrapTable('getData')[$(this).data('place-id')];
                console.log(place)
                var frm = $('.cm-modal-church').modal('show').find('.cm-nid').val(place.NId).parent()
                frm.find('.cm-church-name').val(place.Name)
                frm.find('.cm-church-phone').val(place.Phone)
                frm.find('.cm-church-address').val(place.Address)

                frm.find('.cm-church-pastor').val(place.Pastor)
                frm.find('.cm-church-homepage').val(place.Homepage)

                frm.find('.cm-church-twitter').val(place.Twitter)
                frm.find('.cm-church-facebook').val(place.Facebook)
                frm.find('.cm-church-kakao').val(place.Kakao)
                frm.find('.cm-church-instagram').val(place.Instagram)
                frm.find('.cm-church-navercafe').val(place.NaverCafe)
                frm.find('.cm-church-daumcafe').val(place.DaumCafe)
                frm.find('.cm-church-youtube').val(place.Youtube)

                for(var i in place.Services) {
                    if(i > 0) $('.cm-church-serviceinfo-add').trigger('click')
                    var info = $('.cm-church-serviceinfo').next().eq(0)
                    info.find('.cm-church-servicename').val(place.Services[i].Service)
                    info.find('.cm-church-dayname').val(place.Services[i].DayName)
                    info.find('.cm-church-servicechapter').val(place.Services[i].Chapter)
                    info.find('.cm-church-servicetime').val(place.Services[i].StartAt)
                }

            })
        })

        $('.cm-modal-church').on('show.bs.modal', function(){
            $('.cm-church-serviceinfo-add').trigger('click')
        })

        $('.cm-modal-church').on('hide.bs.modal', function(){
            $('.cm-church-serviceinfo-data').remove()
        })

        $('.cm-church-save').on('click', function(e) {
            var frm = $('.cm-modal-church form');
            var params = {
                NId: frm.find('.cm-nid').val(),
                Name: frm.find('.cm-church-name').val(),
                Phone: frm.find('.cm-church-phone').val(),
                Address: frm.find('.cm-church-address').val(),
                Pastor: frm.find('.cm-church-pastor').val(),
                Homepage: frm.find('.cm-church-homepage').val(),
                Twitter: frm.find('.cm-church-twitter').val(),
                Facebook: frm.find('.cm-church-facebook').val(),
                Kakao: frm.find('.cm-church-kakao').val(),
                Instagram: frm.find('.cm-church-instagram').val(),
                Youtube: frm.find('.cm-church-youtube').val(),
                NaverCafe: frm.find('.cm-church-navercafe').val(),
                DaumCafe: frm.find('.cm-church-daumcafe').val(),
                Services: $.map($('.cm-church-serviceinfo-data'), function(info){
                    info = $(info)
                    return {
                        Service: info.find('.cm-church-servicename').val(),
                        DayName: info.find('.cm-church-dayname').val(),
                        Chapter: info.find('.cm-church-servicechapter').val(),
                        StartAt: info.find('.cm-church-servicetime').val(),
                    }
                })
            }
            
            $.post('/crawls/place/church_save', params, function(res) {
                if (res.code == 200) {
                    alert('Saved successfully');
                    table.bootstrapTable('refresh');
                    $('.cm-modal-church').modal('hide')
                }
            }, 'json')

        })
        var searchInput = $('.keyword-search-input').keyup(function(e) {
            if (e.keyCode == 13) {
                searchBtn.trigger('click')
            }
        })

        var searchBtn = $('.podbbang-search-btn').on('click', function() {
            table.bootstrapTable('refresh', {
                query: {
                    keyword: searchInput.val(),
                    category: $('.podbbang-crawl-category').val()
                }
            })
        })

    })
</script>