@extends('layouts.sub')

@section('content')
<div id="chatClient" class="container">
    <div id="chatManager" class="row align-items-center">
        <div class="col">
            <i>&#128101;</i><span id="chatUserRows">0</span>
        </div>
        <div class="col text-end">
            <div class="dropdown">
                <a id="chatManageLayout" class="btn btn-link dropdown-toggle text-dark" href="#" role="button" data-bs-toggle="dropdown" data-bs-offset="1,-5" aria-expanded="false">
                    관리
                </a>
                <ul class="dropdown-menu">
                    <li><a id="btnPopupChat" class="dropdown-item" href="#"><i class="fa-solid fa-up-right-from-square"></i>새창으로</a></li>
                    <li><a id="btnTxtClear" class="dropdown-item" href="#"><i class="fa-solid fa-eraser"></i>청소하기</a></li>
                    <li><a id="btnTxtPlus" class="dropdown-item" href="#"><i class="fa-solid fa-plus"></i>글자크게</a></li>
                    <li><a id="btnTxtMinus" class="dropdown-item" href="#"><i class="fa-solid fa-minus"></i>글자작게</a></li>
                    <li><a id="btnTxtRefresh" class="dropdown-item" href="#"><i class="fa-solid fa-arrows-rotate"></i>새로고침</a></li>
                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#chatSettingModal"><i class="fa-solid fa-gear"></i>수신설정</a></li>
                </ul>
            </div>
        </div>
    </div>

    <fieldset>
        <!-- 공지사항 -->
        <legend id="chatNotice">&nbsp;</legend>

        <!-- 메시지 -->
        <div id="chatLog"></div>

        <!-- 입력창 -->
        <div id="chatPanel" class="row g-2">
            <div class="col">
                <input type="text" name="message" id="message" maxlength="200" placeholder="메시지 입력하기..."/>
            </div>
            <div class="col-auto">
                <button type="button" id="btnPushMessage" class="btn btn-link" disabled>&#8626;</button>
            </div>
        </div>
    </fieldset>

    <!-- 수신설정 -->
    <div class="modal" id="chatSettingModal" tabindex="-1" aria-labelledby="chatSettingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content bg-white">
                <div class="modal-header">
                    <h1 class="modal-title fs-6 text-dark" id="chatSettingModalLabel"><i class="fa-solid fa-gear"></i> 수신설정</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="fChatSetting" method="post" autocomplete="off" accept-charset="UTF-8">
                        @csrf
                        <div class="row mb-3">
                            <label class="col-auto col-sm-12 form-label text-dark">귓속말</label>
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="whisper_type" id="whisperType_1" value="1"/>
                                    <label class="form-check-label" for="whisperType_1">모두</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="whisper_type" id="whisperType_2" value="1"/>
                                    <label class="form-check-label" for="whisperType_2">친구만</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="whisper_type" id="whisperType_3" value="1"/>
                                    <label class="form-check-label" for="whisperType_3">거부</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-auto col-sm-12 form-label text-dark">방 초대</label>
                            <div class="col">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="room_invite_type" id="roomInviteType_1" value="1"/>
                                    <label class="form-check-label" for="roomInviteType_1">모두</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="room_invite_type" id="roomInviteType_2" value="1"/>
                                    <label class="form-check-label" for="roomInviteType_2">친구만</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="room_invite_type" id="roomInviteType_3" value="1"/>
                                    <label class="form-check-label" for="roomInviteType_3">거부</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-success ps-4 pe-4">저장</button>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" name="user_info" id="userInfo" value="{{ $userInfo }}"/>
</div>
@endsection

@push('scripts')
    <script src="{{ asset('/js/chat.js') }}"></script>
@endpush

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/chat.css') }}"/>
@endpush