@extends('common.layout')

@section("header")
    <link 
        href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" 
        rel="stylesheet" 
        integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" 
        crossorigin="anonymous" 
        referrerpolicy="no-referrer"
    />

    <style type="text/css">
        .selected {
            background-color: #80aaff !important;
        }
        div .selectize-input {
            background-color: white !important;
            background-image: none !important;
            border-color: #dee2e6 !important;
        }
    </style>

    <script src="/template/js/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/js/set/common.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
        integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
        >
    </script>
@endsection

@section('content')
    <form name="sch_form" action="{{url()->current()}}">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <div class="d-flex">
                                {{ csrf_field() }}
                                <a href="{{route('notice.index')}}" class="btn btn-primary ms-2">
                                    <i class="mdi mdi-autorenew"></i>
                                </a>
                            </div>
                        </div>
                        <h4 class="page-title"></h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->
        </div>
    </form>

    <div class="row justify-content-center">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <h4 class="header-title mt-2 mb-3">List</h4>
                            </div>

                            <div class="col-sm-8">
                                <div class="text-sm-end">
                                    <a href="{{route('notice.create')}}?page={{request()->input('page')}}" class="btn btn-danger mb-2"><i class="mdi mdi-plus-circle me-2"></i>Add </a>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <div class="dataTables_wrapper dt-bootstrap4 no-footer">
                                <!-- S: Table Data -->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table class="table table-centered w-100 dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
                                            <thead>
                                            <th style="width:10%">No.</th>
                                            <th style="width:10%">{{ trans('notice_list.유학 유형') }}</th>
                                            <th style="width:50%">{{ trans('notice_list.내용/뱃지/추가 내용') }}</th>
                                            <th style="width:10%">{{ trans('notice_list.순서') }}</th>
                                            <th style="width:10%">{{ trans('notice_list.사용 여부') }}</th>
                                            <th style="width:10%"></th>
                                            </thead>
                                            <tbody id="data_tbody">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- E: Table Data -->

                                <!-- S: Pagination -->
                                <div class="row">
                                    <div class="col-sm-12 col-md-5">
                                        <div class="dataTables_info"></div>
                                    </div>
                                    <div class="col-sm-12 col-md-7">
                                        <div class="dataTables_paginate paging_simple_numbers">
                                            <ul class="pagination pagination-rounded" id="pagination-area"></ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- E: Pagination -->
                            </div>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
    </div>
@endsection

@section('script')
    <script>
        let keyword_values = '';
        let sch_page = '{{request()->input('page')}}';
        let fm_team = '{{Auth::user()->fm_team}}';
        let useyn_list = {!! json_encode(config('var.useyn_list_notice')) !!};
        let boothTypeList = {!! json_encode(config('var.booth_type_list')) !!};
    </script>
    <script src="/template/js/jquery.number.min.js"></script>
    <script src="/js/notice/list.js?v={{ config('var.js_version') }}"></script>
@endsection