<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<style>
    #noticeList tbody tr {
        cursor: pointer;
    }
</style>

<div class="row">
    <div class="col-md-12 col-xl-12">
        <div class="main-card mb-3 card">
            <div class="card-body">
                <form class="row g-3 align-items-center" id="frm_srch_info" onsubmit="return false;">

                    <!-- 검색타입 -->
                    <div class="col-md-2">
                        <select class="form-control" name="srchType">
                            <option value="">선택</option>
                            <option value="1">제목</option>
                            <option value="2">작성자</option>
                        </select>
                    </div>

                    <!-- 검색어 -->
                    <div class="col-md-2">
                        <input name="srchTxt" type="text" class="form-control" placeholder="검색어 입력">
                    </div>

                    <!-- 버튼 -->
                    <div class="col-md-1">
                        <button type="button" class="btn btn-success btn-transition w-100" id="btnSearch">
                            검색
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-12 col-xl-12">
        <div class="main-card mb-3 card">
            <div class="card-header">공지사항</div>
            <div class="card-body">
                <table id="noticeList" class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>번호</th>
                            <th>제목</th>
                            <th>글쓴이</th>
                            <th>날짜</th>
                            <th>조회</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 여기는 비워둠: AJAX로 채움 -->
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <button class="mb-2 me-2 btn-transition btn btn-outline-primary"
                    onclick="location.href='/board/notice/write'">글쓰기</button>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script defer src="/architectui/assets/js/datatable.kor.js"></script>
<script type="text/javascript">

    $(function () {

        // 혹시 기존 데모가 자동으로 초기화했다면 파괴 후 다시 초기화
        // if ($.fn.DataTable.isDataTable('#noticeList')) {
        //     $('#noticeList').DataTable().destroy();
        // }

        let table = $('#noticeList').DataTable({
            language: lang_kor,
            processing: true,
            serverSide: false,
            ajax: {
                url: '/board/notice/getNoticeList',
                type: 'GET',
                data: function (d) {
                    d.srchType = $("#frm_srch_info [name=srchType]").val()
                    d.srchTxt = $("#frm_srch_info [name=srchTxt]").val()

                    d.start = d.start || 0
                    d.length = d.length || 10
                }
            },
            "columnDefs": [
                { 'targets': '_all', "defaultContent": "" },
                { 'className': 'text-center', 'targets': [0, 2, 3, 4] },
            ],
            columns: [
                {
                    "data": null,
                    "width": "50px",
                    "render": function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'subject' },
                { data: 'insert_nm', "width": "100px" },
                { data: 'insert_tm', "width": "150px" },
                { data: 'hit', "width": "100px" }
            ],
            // 옵션들 예시
            paging: true,
            searching: false,
            ordering: false,
            serverSide: true,
            order: [[3, 'desc']]
        });


        $('#noticeList tbody').on('click', 'tr', function () {
            const rowData = table.row(this).data();
            if (!rowData) return;

            const id = rowData.bbs_sq;
            location.href = "<?= site_url('board/notice/detail') ?>/" + id;
        });

        // [검색] 버튼 눌렀을 때 다시 조회
        $('#btnSearch').on('click', function () {
            table.ajax.reload();
        });
    });

</script>
<?= $this->endSection() ?>