<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="jquery-3.7.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <style>
        .gradient-topper {
            background: linear-gradient(5deg, rgb(168, 20, 65), rgb(238, 83, 129));
        }

        .kanit-medium-italic {
            font-family: "Kanit", serif;
            font-weight: 400;
            font-style: italic;
        }

        .kanit-medium {
            font-family: "Kanit", serif;
            font-weight: 400;
            font-style: normal;
        }

        .create-group-image {
            background: url("assets/image/create.png") 0 0 no-repeat fixed;
            height: 100%;
            overflow: hidden;
            color: #FFFFFF
        }
    </style>
</head>

<body>
    <div class="flex flex-col min-h-screen select-none">
        <div class="flex flex-col w-[680px] h-[330px] bg-[#00000099] rounded-xl m-auto p-3">
            <div class="flex w-auto h-[40px] gradient-topper rounded-xl items-center justify-between">
                <span class="ml-3 text-white kanit-medium-italic">Benefit</span>
                <div class="flex items-center">
                  <img class="w-[150px] h-[150px] mb-10" src="assets/image/devil_logo.png" alt="logo">
                </div>
                <span class="mr-3 text-white kanit-medium-italic">Menu</span>
            </div>
              
            <!-- <div class="flex mt-3" id="lobby">
                <img class="w-[430px] h-[250px] bg-[#00000099] rounded-xl" src="assets/image/425 X 350.png" alt="poster">
                <div class="flex flex-col gap-3 ml-3">
                    <div class="flex flex-col justify-center items-center w-[215px] h-[120px] bg-[#00000099] rounded-xl cursor-pointer hover:bg-[#c4246799] duration-300" onclick="callFunction.createGroup()">
                        <span class="text-white text-2xl kanit-medium">Create <span class="text-[#c42467]">Group</span></span>
                        <span class="text-white text-l kanit-medium">สร้างกลุ่ม</span>
                    </div>
                    <div class="flex flex-col justify-center items-center w-[215px] h-[120px] bg-[#00000099] rounded-xl cursor-pointer hover:bg-[#c4246799] duration-300" onclick="callFunction.joinGroup()">
                        <span class="text-white text-2xl kanit-medium">Join <span class="text-[#c42467]">Group</span></span>
                        <span class="text-white text-l kanit-medium">เข้าร่วมกลุ่ม</span>
                    </div>
                </div>
            </div> -->

            <div class="flex mt-3 gap-3" id="create">
                <div class="flex flex-col items-center w-[325px] h-[252px] bg-[#00000099] rounded-xl p-2 gap-2">
                    <div class="flex w-full items-center h-[40px] bg-[#00000099] rounded-xl kanit-medium text-white justify-between p-2">
                        <img class="w-[20px] h-[20px]" src="assets/image/devil_logo.png" alt="profile">
                        <span class="text-s">Miso js</span>
                        <img class="w-[20px] h-[20px]" src="assets/image/leader.png" alt="leader">
                    </div>
                </div>

                <div class="grid gap-2">
                    <div class="flex w-auto items-center h-[40px] bg-[#00000099] rounded-xl kanit-medium text-white justify-between">
                        <span class="ml-3 text-s">โค้ดเชิญเพื่อน : </span>
                        <span class="flex items-center mr-3 text-s"><span id="visible">ABC123</span> <img class="ml-2 w-[15px] h-[15px] cursor-pointer" id="visible-image" src="assets/image/unvisible.png" alt="visible" onclick="callFunction.codeVisible()"></span>
                    </div>

                    <div class="flex flex-col items-center w-[325px] h-[155px] bg-[#00000099] rounded-xl p-2 gap-2">
                        <div class="flex w-full items-center h-[40px] bg-[#00000099] rounded-xl kanit-medium text-white p-2">
                            <input type="text" name="search" id="search" placeholder="Search ID" class="w-full bg-[#00000000] outline-none">
                            <img class="ml-2 w-[20px] h-[20px]" src="assets/image/search.png" alt="search">
                        </div>

                        <div class="flex w-full items-center h-[40px] bg-[#00000099] rounded-xl kanit-medium text-white justify-between p-1">
                            <span class="ml-2 text-sm">1</span>
                            <span class="text-sm">Miso js</span>
                            <div class="flex w-[40px] h-[30px] gradient-topper rounded-xl items-center justify-center cursor-pointer text-xs">
                                เชิญ
                            </div>
                        </div>
                        
                    </div>

                    <div class="flex justify-between">
                        <div class="flex w-[50px] h-[40px] gradient-topper rounded-xl items-center justify-center cursor-pointer mr-1" onclick="callFunction.back()">
                            <img class="w-[20px] h-[20px]" src="assets/image/back.png" alt="back">
                        </div>

                        <div class="flex w-[50px] h-[40px] gradient-topper rounded-xl items-center justify-center cursor-pointer mr-1">
                            <img class="w-[20px] h-[20px]" src="assets/image/gift.png" alt="reward">
                        </div>

                        <div class="flex w-[210px] h-[40px] gradient-topper rounded-xl items-center justify-center cursor-pointer">
                            <span class="text-white kanit-medium-italic">Confirm</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex mt-3" id="join">
                
            </div>
        </div>
    </div>
</body>

<script>

    $('document').ready(function () {
        var visible = false
        callFunction = {};

        callFunction.createGroup = function() {
            $('#lobby').fadeOut()
            setTimeout(() => {
                $('#create').fadeIn()
            }, 500);
        }

        callFunction.joinGroup = function() {
            $('#lobby').fadeOut()
            $('#join').fadeIn()
        }

        callFunction.back = function() {
            $('#lobby').fadeIn()
            $('#join').fadeOut()
            $('#create').fadeOut()
        }
        
        callFunction.codeVisible = function() {
            if (!visible) {
                visible = true
                $('#visible').html("******")
                $('#visible-image').attr("src", "assets/image/visible.png")
            } else {
                visible = false
                $('#visible').html("ABC123")
                $('#visible-image').attr("src", "assets/image/unvisible.png")
            }
        }

        window.addEventListener('message', function (event) {
            switch (event.data.action) {
                case 'openMenu':
                    
                    break
            }
        })

        document.onkeyup = function (data) {
            if (data.which == 27) {
                $('.container').fadeOut()
                $.post('https://pt_benefit/close');
            }
        };

        // $('#create').hide()
        $('#join').hide()
    })

</script>

</html