@page
@model Admin.Pages.Member.List.WriteModel
@using Domain.Entities.Members.ValueObject
@{
    ViewData["Title"] = "회원 등록";
}

<div class="container">
    <h3>@ViewData["Title"]</h3>
    <hr />

    <partial name="_StatusMessage" />

    <form name="f_admin_write" id="fAdminWrite" method="post" accept-charset="utf-8" autocomplete="off" enctype="multipart/form-data">
        <input type="hidden" asp-for="QueryString" />

        <div class="row mb-2">
            <label asp-for="Input.MemberGradeID" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <select asp-for="Input.MemberGradeID" class="form-select w-auto" asp-items="Model.MemberGradeList">
                    <option value="">등급 선택</option>
                </select>
                <span asp-validation-for="Input.MemberGradeID" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Input_Email" class="col-sm-2 col-form-label"><span>*</span> 이메일</label>
            <div class="col-sm-10">
                <input type="email" asp-for="Input.Email" class="form-control" required maxlength="60" placeholder="중복 시 등록이 불가합니다. 60자 이내" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Input_Name" class="col-sm-2 col-form-label"><span>*</span> 별명</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.Name" class="form-control" required maxlength="20" placeholder="중복 시 등록이 불가합니다. 20자 이내" />
                <span asp-validation-for="Input.Name" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Input_Password" class="col-sm-2 col-form-label"><span>*</span> 비밀번호</label>
            <div class="col-sm-10">
                <input type="password" asp-for="Input.Password" class="form-control" required minlength="4" />
                <span asp-validation-for="Input.Password" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="RePassword" class="col-sm-2 col-form-label"><span>*</span> 비밀번호 확인</label>
            <div class="col-sm-10">
                <input type="password" name="RePassword" id="RePassword" class="form-control" required minlength="4" />
            </div>
        </div>
        <hr/>
        <div class="row mb-2">
            <label asp-for="Input.FirstName" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.FirstName" class="form-control" maxlength="20" placeholder="최대 20자" />
                <span asp-validation-for="Input.FirstName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.LastName" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.LastName" class="form-control" maxlength="40" placeholder="최대 40자" />
                <span asp-validation-for="Input.LastName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Intro" class="col-sm-2"></label>
            <div class="col-sm-10">
                <textarea asp-for="Input.Intro" class="form-control" placeholder="최대 1000자" rows="2" maxlength="1000"></textarea>
                <span asp-validation-for="Input.Intro" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Summary" class="col-sm-2"></label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.Summary" class="form-control" maxlength="50" placeholder="50자 이내"/>
                <span asp-validation-for="Input.Summary" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Phone" class="col-sm-2"></label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.Phone" class="form-control" maxlength="15" placeholder="010-0000-0000 형식으로 입력하세요." pattern="010-\d{4}-\d{4}" />
                <span asp-validation-for="Input.Phone" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Gender" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="radio" asp-for="Input.Gender" id="male" class="form-check-input" value="@Gender.Male" />
                    <label class="form-check-label" for="male">남자</label>
                </div>
                <div class="form-check-inline">
                    <input type="radio" asp-for="Input.Gender" id="female" class="form-check-input" value="@Gender.Female" />
                    <label class="form-check-label" for="female">여자</label>
                </div>
                <span asp-validation-for="Input.Gender" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Birthday" class="col-sm-2"></label>
            <div class="col-sm-10">
                <input type="date" asp-for="Input.Birthday" class="form-control w-auto" />
                <span asp-validation-for="Input.Birthday" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Thumb" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <div id="thumbPrev" hidden><img class="img-fluid img-thumbnail" alt="사진 미리보기" /></div>
                <input type="file" asp-for="Input.Thumb" class="form-control" accept="image/*" />
                <span asp-validation-for="Input.Thumb" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.Icon" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
                <div id="iconPrev" hidden><img class="img-fluid img-thumbnail" alt="아이콘 미리보기" /></div>
                <input type="file" asp-for="Input.Icon" class="form-control" accept="image/*" />
                <span asp-validation-for="Input.Icon" class="text-danger"></span>
            </div>
        </div>
        <hr/>
        <div class="row mb-2">
            <label asp-for="Input.IsEmailVerified" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="Input.IsEmailVerified" class="form-check-input" />
                    <label class="form-check-label" for="Input_IsEmailVerified">인증 했습니다.</label>
                    <span asp-validation-for="Input.IsEmailVerified" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.IsAuthCertified" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="Input.IsAuthCertified" class="form-check-input" />
                    <label class="form-check-label" for="Input_IsAuthCertified">인증 했습니다.</label>
                    <span asp-validation-for="Input.IsAuthCertified" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.IsDenied" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="Input.IsDenied" class="form-check-input" />
                    <label class="form-check-label" for="Input_IsDenied">차단합니다.</label>
                    <span asp-validation-for="Input.IsDenied" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.IsAdmin" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="Input.IsAdmin" class="form-check-input" />
                    <label class="form-check-label" for="Input_IsAdmin">관리자입니다.</label>
                    <span asp-validation-for="Input.IsAdmin" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.IsWithdraw" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="Input.IsWithdraw" class="form-check-input" />
                    <label class="form-check-label" for="Input_IsWithdraw">탈퇴했습니다.</label>
                    <span asp-validation-for="Input.IsWithdraw" class="text-danger"></span>
                </div>
            </div>
        </div>
        <br/>
        <h4>YouTube 채널 정보</h4>
        <hr/>
        <div class="row mb-2">
            <label for="Input_YouTubeSID" class="col-sm-2 col-form-label"><span>*</span> SID</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.YouTubeSID" class="form-control" minlength="24" maxlength="24" placeholder="중복 시 등록이 불가합니다. 24자" />
                <span asp-validation-for="Input.YouTubeSID" class="text-danger"></span>
                <div class="text-muted form-text">
                    YouTube 채널 고유 ID (예: UCxxxxxxxxxxxxxxxxxxxxxx)
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Input_YouTubeName" class="col-sm-2 col-form-label"><span>*</span> 이름</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Input.YouTubeName" class="form-control" maxlength="200" />
                <span asp-validation-for="Input.YouTubeName" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label asp-for="Input.YouTubeHandle" class="col-sm-2 col-form-label">핸들</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <span class="input-group-text">@@</span>
                    <input type="text" asp-for="Input.YouTubeHandle" class="form-control" maxlength="30" />
                </div>
                <span asp-validation-for="Input.YouTubeHandle" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Input_YouTubeUrl" class="col-sm-2 col-form-label"><span>*</span> YouTube 주소</label>
            <div class="col-sm-10">
                <input type="url" asp-for="Input.YouTubeUrl" class="form-control" maxlength="255" />
                <div class="text-muted form-text">
                    YouTube 채널 주소 (예: https://www.youtube.com/channel/UCxxxxxxxxxxxxxxxxxxxxxx)
                </div>
            </div>
        </div>
        <hr/>
        <div class="d-grid gap-2 text-center d-md-block">
            <button type="submit" class="btn btn-success">저장</button>
            <a href="/Member/List?@Model.QueryString" class="btn btn-secondary">취소</a>
        </div>
        <br/>
    </form>
</div>

@section Scripts {
    <script>
        setupImagePreview("Input_Thumb", "thumbPrev");
        setupImagePreview("Input_Icon", "iconPrev");

        $(document).on("submit", "#fAdminWrite", function(e) {
            e.preventDefault();
            const password = e.target.elements["Input.Password"].value;
            const rePassword = e.target.elements["RePassword"].value;
            if (password !== rePassword) {
                alert("비밀번호가 일치하지 않습니다.");
                return false;
            }
            this.submit();
        });
    </script>
}