<!DOCTYPE html>
{% load static %}
<html lang="ko">

<head>
    <title>Create Cluster | sdjo web site</title>
    <link rel="stylesheet" href="{% static 'blog/bootstrap/bootstrap.min.css' %}" type="text/css">
    <script src="https://kit.fontawesome.com/77d81e5d17.js" crossorigin="anonymous"></script>
</head>

<body class="pb-5">
    {% include 'common/navbar.html' %}
    <section>
        <div class="mt-3 row">
            <div class="mt-5 col-12 text-center">Create NKS Public-Subnet
                <br>
                <samp>충돌 여부 확인 후 문제 없을시 기본값 사용 가능.</samp>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <!-- region -->
                <form name="formRegion" action="." method="post">{% csrf_token %}
                    <div class="mb-3 mt-5">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label for="region-pre">Region</label>
                            </div>
                            <div class="col-md-7">
                                <select class="form-control" name="region-pre" id="region-pre">
                                    <option value="select...">select...</option>
                                    <option value="kr1">판교</option>
                                    <option value="kr2">평촌</option>
                                </select>                                
                            </div>
                            <div class="col-md-1">
                            </div>
                        </div>        
                    </div>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="apiPw">API Password</label>
                            </div>
                            <div class="col-md-7">
                                <input type="password" class="form-control" name="apiPw" id="apiPw">
                                <input type="hidden" class="form-control" name="usrEmail" id="usrEmail" value="{{ user.nhn_id }}">
                                <input type="hidden" name="tenantId-pre" id="tenantId-pre" value="{{ user.nhn_cpt_tntid }}">
                                <input type="hidden" name="searchVpcList" id="searchVpcList" value="yes">
                            </div>
                            <div class="col-md-1">
                                <button type="submit" class="btn btn-primary float-right"><i class="fa-solid fa-magnifying-glass"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-4">
                <form method="post" action="{% url 'nhncloud:createOnlyCluster' %}">{% csrf_token %}
                    <div class="mb-3 mt-5">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label for="region-pre">Region</label>
                            </div>
                            <div class="col-md-7">
                                <select class="form-control" name="region-pre" id="region-pre">
                                    <option value="select...">select...</option>
                                    <option value="kr1">판교</option>
                                    <option value="kr2">평촌</option>
                                </select>                                
                            </div>
                            <div class="col-md-1">
                            </div>
                        </div>        
                    </div>
                    <!-- vpc -->
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label for="vpc">VPC</label>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control" name="vpc" id="vpc" onchange="vpcToSubnetList();">
                                    <option value="select...">select...</option>
                                    {% for var in vpcList %}
                                        {% for key, value in var.items %}
                                        <option value="{{ key }}">{{ key }}</option>
                                        <!-- <option value="{{ value }}">{{ key }}</option> -->
                                        {% endfor %}
                                    {% endfor %}
                                </select>                                
                            </div>
                        </div>        
                    </div>
                <!-- subnet -->
                <div class="mb-3">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label for="publicSubnet">Public subnet</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="publicSubnet" id="publicSubnet" readonly>
                        </div>
                    </div>        
                </div>
                <hr>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="clusterName">Cluster Name</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="clusterName" id="clusterName" value="demo-cluster">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label for="keyPair">KeyPair Name</label>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control" name="KeyPair" id="KeyPair" value="selectKeyPair">
                                    <option value="select...">select...</option>
                                    <option value="keyPair-kr1">keyPair-kr1</option>
                                    <option value="keyPair-kr2">keyPair-kr2</option>
                                </select>                                
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="tenantId">Tenant ID</label>
                            </div>
                            <div class="col-md-8">
                                <input type="password" class="form-control" name="tenantId" id="tenantId">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="igwId">InternetGateway ID</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="igwId" id="igwId">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="usrEmail">User Email</label>
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="usrEmail" id="usrEmail" value="{{ user.nhn_id }}">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="apiPw">API Password</label>
                            </div>
                            <div class="col-md-8">
                                <input type="password" class="form-control" name="apiPw" id="apiPw">
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary float-right" onclick="createClickMsg();">Create</button>
                </form>
            </div>
            <div class="col-lg-4"></div>
        </div>
        <!-- modal -->
        <form method="post" action="{% url 'nhncloud:removeCluster' %}">{% csrf_token %}
            <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteModalTitle">API 비밀번호를 입력해주세요.</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-4 form-group">
                                        <label for="region">Region</label>
                                    </div>
                                    <div class="col-md-8">
                                        <select class="form-control" name="region" id="region" readonly>
                                            <option value="select...">select...</option>
                                            <option value="kr1">판교</option>
                                            <option value="kr2">평촌</option>
                                        </select>                                
                                    </div>
                                </div>        
                            </div>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="clusterName">Cluster Name</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" name="clusterName" id="clusterName" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="tenantId">Tenant ID</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="password" class="form-control" name="tenantId" id="tenantId" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="usrEmail">User Email</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" name="usrEmail" id="usrEmail" value="{{ user.nhn_id }}">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="apiPw">API Password</label>
                                    </div>
                                    <div class="col-md-8">
                                        <input type="password" class="form-control" name="apiPw" id="apiPw">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info float-right" onclick="alert('삭제 명령 전송 후 Cluster 리스트가 조회됩니다...')">Request</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>
    <script>
        function selectRegion(){
            var selectRegionValue;

            if(document.getElementById('region-pre').value == ""){
                selectRegionValue = document.getElementById('region').value;
            }else{
                selectRegionValue = document.getElementById('region-pre').value;
            }
            
            console.log(selectRegionValue);

            document.getElementById('tenantId').value = "{{ user.nhn_cpt_tntid }}";
            if (selectRegionValue == "kr1") {
                document.getElementById('vpc').value = "kr1";
            }
            else if (selectRegionValue == "kr2") {
                document.getElementById('vpc').value = "kr2";
            }
            else {
                document.getElementById('KeyPair').value = "none";
            }
            console.log("다른 함수 호출");
            vpcToSubnetList();
        }

        function vpcToSubnetList(){
            let selectRegionValue = document.getElementById('vpc').value;
            var dict = {};
            var subDict = {};
            {% for x, y in subnetList.items %}
                {% for a, b in y.items %}
                    subDict["{{ a }}"] = "{{ b | safe}}";
                {% endfor %}
                dict["{{ x }}"] = subDict;
                subDict = {};
            {% endfor %}
            console.log("dict출력 : ");
            console.log(dict);
            // console.log(dict["demo2-vpc"]["name"]);
            // console.log(dict["demo2-vpc"]["id"]);
            // console.log(selectRegionValue);
            console.log(dict[selectRegionValue]["name"]);
            console.log(dict[selectRegionValue]["id"]);
            document.getElementById('publicSubnet').value = dict[selectRegionValue]["id"];

        }

        function createClickMsg(){
            alert('약 15분 이내로 Cluster가 생성됩니다.\n페이지 새로고침을 하지 말아주세요.\n생성이 완료되면 페이지가 변경됩니다.');
        }
    </script>
</body>
{% include 'blog/footer.html' %}
</html>