@extends('common.layout')

@section('content')

  <!-- Start Content-->
    <div class="container-fluid">
                            
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">권한관리</a></li>
                            <li class="breadcrumb-item active">관리자목록</li>
                        </ol>
                    </div>
                    <h4 class="page-title">관리자</h4>
                </div>
            </div>
        </div>     
        <!-- end page title --> 

        <div class="row">
            <div class="col-xl-6">
                <div class="card">
                    <div class="card-body">

                        <h4 class="header-title mb-3"> 관리자 등록</h4>

                        <form class="form-horizontal" id="frm" name="frm" method="post">
                            <div class="row mb-3">
                                <label for="m_id" class="col-3 col-form-label">ID</label>
                                <div class="col-9">
                                    <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-user"></i></div>
                                        <input type="text" class="form-control" id="m_id" name="m_id" placeholder="관리자 아이디">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="m_passwd" class="col-3 col-form-label">Password</label>
                                <div class="col-9">
                                    <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-lock"></i></div>
                                        <input type="password" class="form-control" id="m_passwd" name="m_passwd" placeholder="관리자 패스워드">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="m_re_passwd" class="col-3 col-form-label">Re Password</label>
                                <div class="col-9">
                                <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-lock-alt"></i></div>
                                        <input type="password" class="form-control" id="m_re_passwd" placeholder="패스워드 재입력">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="m_name" class="col-3 col-form-label">Name</label>
                                <div class="col-9">
                                    <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-smile"></i></div>
                                        <input type="text" class="form-control" id="m_name" name="m_name" placeholder="관리자 성함">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="m_email" class="col-3 col-form-label">Email</label>
                                <div class="col-9">
                                    <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-envelope"></i></div>
                                        <input type="email" class="form-control" id="m_email" name="m_email" placeholder="관리자 이메일">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="m_phone" class="col-3 col-form-label">Phone</label>
                                <div class="col-9">
                                    <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-phone"></i></div>
                                        <input type="text" class="form-control" id="m_phone" name="m_phone" placeholder="관리자 휴대폰">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="m_level" class="col-3 col-form-label">Level</label>
                                <div class="col-9">
                                    <div class="input-group mb-2">
                                        <div class="input-group-text"><i class="uil-eye"></i></div>
                                        <select class="form-select" id="m_level" name="m_level">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="row mb-3">
                                <label for="image" class="col-3 col-form-label">Image</label>
                                <div class="col-9">
                                    <input class="form-control" type="file" id="inputGroupFile04">
                                </div>
                            </div> -->
                            
                            <div class="row">
                                <div class="col-12">
                                    <ul class="list-inline wizard mb-0">
                                        <li class="next list-inline-item float-end">
                                            <a href="#" class="btn btn-info" id="btn_submit"><i class="mdi mdi-account-check"></i><span>등록</span></a>
                                            <!-- <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#centermodal">등록</button> -->
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>

                            
                        
                        </form>

                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col -->

        </div>
        
    </div> <!-- container -->

</div> <!-- content -->


<!-- Center modal content -->
<div class="modal fade" id="centermodal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-info">
                <h4 class="modal-title" id="success-header-modalLabel">등록확인</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h5 class="mt-0">Success Background</h5>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Success Alert Modal -->
<div id="centermodal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content modal-filled bg-success">
            <div class="modal-body p-4">
                <div class="text-center">
                    <i class="dripicons-checkmark h1"></i>
                    <h4 class="mt-2">Well Done!</h4>
                    <p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">Continue</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="warning-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body p-4">
                <div class="text-center">
                    <i class="dripicons-warning h1 text-warning"></i>
                    <h4 class="mt-2">Incorrect Information</h4>
                    <p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <button type="button" class="btn btn-warning my-2" data-bs-dismiss="modal">Continue</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
        
@endsection

<!-- 각페이지별 필요한 스크립트 선언 -->
@section('script')

<script>

    // 셀력터 변수 선언
    var $input_id = $('#m_id'),
        $input_pw = $('#m_passwd'),
        $input_re_pw = $('#m_re_passwd'),
        $input_name = $('#m_name'),
        $input_email = $('#m_email'),
        $input_phone = $('#m_phone'),
        $select_level = $('#m_level'),
        $btn_submit = $('#btn_submit');

    // form 정규식 
    var reg_name = /[a-z0-9]|[ \[\]{}()<>?|`~!@#$%^&*-_+=,.;:\"'\\]/g,
        reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/,
        reg_hp = /[^0-9]/gi,
        reg_hp_korean = /^01([0|1|6|7|8|9]?)([0-9]{3,4})([0-9]{4})$/;


        
    // 이벤트 설정
    $input_name.keyup(function(){ nameCheck(); });

    $input_phone.keyup(function(){ phoneCheck(); });

    $btn_submit.click(function() { formCheck(); });


// 처리 method
function nameCheck()
{
    $input_name.val($input_name.val().replace(reg_name,''));   
}

function phoneCheck()
{
    $input_phone.val($input_phone.val().replace(reg_hp,''));
    
    if($input_phone.val().length > 11) $input_phone.val($input_phone.val().substr(0, 11));
}

function formCheck()
{
    // form check 
    if(!$input_id.val()){
        alert('아이디를 입력해주세요.');
        $input_id.focus();
        return false; 
    }
    if($input_pw.val() !== $input_re_pw.val()){
        alert('비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
        $input_pw.focus();
        return false; 
    }
    if(!$input_name.val()){
        alert('이름을 입력해주세요.');
        $input_name.focus();
        return false; 
    }
    if(!reg_email.test($input_email.val())) {
        alert('이메일형식이 아닙니다.');
        $input_email.focus();
        return false;         
    }
    if(!$input_phone.val()){
        alert('휴대폰번호를 입력해주세요.');
        $input_phone.focus();
        return false; 
    }

    // submit
    if(confirm('작성한 내용으로 등록하시겠습니까?'))
    {
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: '{{ route("manager.add") }}',
            type: "post",
            datatype: 'json',
            data : $('#frm').serialize(),
            
            success : function(response)
            {
                if(response.result === 'success'){
                    console.log(response.list);
                    alert(response.msg);
                }else{
                    alert(response.msg);
                }
                
            },
            
            error : function(xhr, status, error) 
            {
                console.log(error);
            },

        });
    }
    
}
</script>

@endsection