@extends('mobile.layouts.app')

@section('content')
<div id="accountModify" class="container">
    @include('mobile.account.navTabs')

    <dl>
        <dt>회원 정보 수정</dt>
        <dd>{{ config('company_name') }}는 회원님의 개인정보를 신중히 취급하며, 안전한게 암호화하여 관리되고 있습니다.
        <dd>다양한 서비스를 받으시려면 정확한 정보를 항상 유지해 주셔야 합니다.</dd>
    </dl>

    <form name="f_account_modify" id="fAccountModify" method="post" action="{{ route('account.modify.update') }}" enctype="multipart/form-data">
        @csrf
        <hr/>
        <table class="table table-borderless">
            <colgroup>
                <col style="width: 15%;min-width: 90px;"/>
                <col style="width: auto;"/>
            </colgroup>
            <tr>
                <th id="tableRowspan" rowspan="5">계정</th>
                <td>
                    <h6>ID</h6>
                    {{ $user->sid }}
                </td>
            </tr>
            <tr>
                <td>
                    <hr/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="nickname" class="form-label">닉네임</label>
                    <div class="row">
                        <div class="col">
                            <input type="text" name="nickname" id="nickname" class="form-control" value="{{ $user->nickname }}" minlength="1" maxlength="10"/>
                        </div>
                    </div>
                   @if($changeNicknameDayLeft > 0)
                    <div class="form-text text-muted">
                        닉네임 변경은 {{ $changeNicknameDayLeft }}일이 지난 후 가능합니다.
                    </div>
                    @endif
                </td>
            </tr>
            <tr>
                <td>
                    <hr/>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="row">
                        <div class="col">
                            <label for="email" class="form-label">이메일</label>
                        </div>
                        <div class="col text-end">
                            <a href="#" id="btnChangeEmail">변경하기</a>
                        </div>
                    </div>
                    <input type="text" name="email" id="email" class="form-control" value="{{ $user->email }}"/>
                    @if($changeEmailDayLeft > 0)
                        <div class="form-text text-muted">
                            이메일 변경은 {{ $changeEmailDayLeft }}일  지난 후 가능합니다.
                        </div>
                    @endif
                </td>
            </tr>
            <tr id="emailVerifyForm" hidden>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <th colspan="2">
                    <hr/>
                </th>
            </tr>
            <tr>
                <th rowspan="5">부가 기능</th>
                <td>

                    <label for="thumbImg" class="form-label">프로필 이미지</label><br/>
                    @if($user->thumb)
                        <img src="{{ asset($user->thumb) }}" class="me-3" width="{{ $userThumbWidth }}" height="{{ $userThumbHeight }}" />
                        <div class="form-check form-check-inline">
                            <input type="checkbox" name="thumb_img_del" id="thumbImgDel" class="form-check-input" value="1" />
                            <label for="thumbImgDel" class="form-check-label">삭제</label>
                        </div>
                    @else
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <img src="{{ asset('images/default/thumb.gif') }}" id="prevThumbImg" class="me-3" width="{{ $userThumbWidth - 20 }}" height="{{ $userThumbHeight - 20 }}" />
                            </div>
                            <div class="flex-grow-1">
                                <div class="row">
                                    <div class="col">
                                        <label for="thumbImg" class="btn btn-default btn-sm">파일첨부</label>
                                        <input type="file" name="thumb_img" id="thumbImg" value="{{ old('thumb', $user->thumb) }}" accept="image/gif,image/jpeg,image/png" hidden />
                                    </div>
                                    <div class="col-auto text-end">
                                        <button type="button" id="btnCancelThumb" hidden class="btn btn-secondary btn-sm">취소</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="form-text text-muted">
                                            {{ THUMB_MAX_WIDTH }}px x {{ THUMB_MAX_HEIGHT }}px 에 최적화되어있습니다.<br/>gif, jpg, png 확장자만 첨부 가능합니다.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </td>
            </tr>
            @if($useUserThumb)
            <tr>
                <td>
                    <hr/>
                </td>
            </tr>
            @endif
            <tr>
                <td colspan="2">
                    <label for="todayMessage" class="form-label">오늘의 한마디</label>
                    <input type="text" name="today_message" id="todayMessage" class="form-control" value="{{ $user->today_message }}" maxlength="40"/>
                    <div class="form-text text-muted">
                        한글 20글자, 영문 40글자 까지 입력가능합니다.(한글, 숫자, 영문, 띄어쓰기, 마침표, 쉼표만 가능)
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <hr/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="aboutMe" class="form-label">자기소개</label>
                    <textarea name="about_me" id="aboutMe" class="form-control" rows="3" maxlength="500" placeholder="자기를 소개해주세요. (최대 500자)">{{ $user->about_me }}</textarea>
                    <div class="form-text text-muted">
                        이용 규정에 어긋나는 용도로 사용시 제재의 대상이 됩니다.
                    </div>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <hr/>
                </th>
            </tr>
            <tr>
                <th>공개 여부</th>
                <td>
                    <div class="form-check">
                        <input type="checkbox" name="is_open_profile" id="isOpenProfile" class="form-check-input" value="1" @if($user->is_open_profile) checked @endif/>
                        <label for="isOpenProfile" class="form-check-label">정보 공개 여부</label>
                    </div>
                    <small class="form-text text-muted">회원님의 이름, 이메일, 프로필 이미지, 자기소개를 타인에게 공개합니다.</small>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <hr/>
                </th>
            </tr>
            <tr>
                <th>수신 여부</th>
                <td>
                    <div class="form-check form-check-inline">
                        <input type="checkbox" name="receive_email" id="receiveEmail" class="form-check-input" value="1" @if($user->receive_email) checked @endif/>
                        <label for="receiveEmail" class="form-check-label">이메일(Email)</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input type="checkbox" name="receive_sms" id="receiveSms" class="form-check-input" value="1" @if($user->receive_sms) checked @endif/>
                        <label for="receiveSms" class="form-check-label">문자(SMS)</label>
                    </div>
                    <div class="form-text text-muted">
                        다양한 혜택과 이벤트 소식을 받아보실 수 있습니다.
                    </div>
                </td>
            </tr>
        </table>
        <hr/>
        <div class="row g-2 justify-content-center mb-4">
            <div class="col-auto">
                <button type="submit" class="btn btn-success">확인</button>
            </div>
            <div class="col-auto">
                <a href="{{ route('account.profile') }}" class="btn btn-default">취소</a>
            </div>
        </div>
    </form>
</div>
@endsection

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

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