<body class="bg-[#10181e]" style="font-family: 'Space Grotesk', sans-serif;">
  <div>
    <%- include('./components/wrapper') %>
    <div class="md:pl-64 flex flex-col flex-1 h-screen"> <%- include('./components/header') %>
      <main class="flex-1 pb-32">
        <div class="py-6">
          <% /* Skeleton loader, lasts about 0.3s to let the page content load */ %>
          <%- include('./components/skeleton') %>
          <div class="hidden max-w-screen-2xl pt-8 mx-auto px-4 sm:px-6 md:px-16" id="content">
            <div class="lg:flex lg:items-center lg:justify-between rounded-3xl mb-8">
              <div class="min-w-0 flex-1">
                <div class="flex">
                  <div class="relative">

                  </div>
                </div>
              </div>
            </div>
            <% if (req.query.err) { %>
            <div class="rounded-2xl border border-white/5 p-4 mb-5">
              <div class="flex">
                <div>
                  <div class="pl-4 text-sm text-white">
                    <p>Error code: <code><%= req.query.err %></code></p>
                  </div>
                </div>
              </div>
            </div>
            <% } %>
            <% if (req.query.success) { %>
              <div class="rounded-2xl border border-white/5 p-4 mb-5">
                <div class="flex">
                  <div>
                    <div class="pl-4 text-sm text-white">
                      <p>Action Success: <code><%= req.query.success %></code></p>
                    </div>
                  </div>
                </div>
              </div>
              <% } %>
             
              <div class="bg-[#121b21] p-8 mt-12 rounded-2xl max-w-2xl mx-auto">
                <div class="text-white mb-4">
                  <h2 class="font-semibold text-xl">Create a new server</h2>
                </div>
                <form>
                    <label class="block mb-2 text-white font-medium text-sm">
                      Server Name:
                      <span class="cursor-pointer inline-flex items-center">            
                      </span>
                    </label>
                  <input type="text" id="name" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4" placeholder="Server name" x-model="aiName">
            
                  <div class="flex space-x-4 mb-4">
                    <div>
                      <label class="block mb-2 text-white font-medium text-sm">Memory (MB):</label>
                      <input type="number" id="memory" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4" placeholder="2048">
                    </div>
                    
                    <div>
                      <label class="block mb-2 text-white font-medium text-sm">CPU Cores:</label>
                      <input type="number" id="cpu" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4" placeholder="1">
                    </div>
                    <div>
                      <label class="block mb-2 text-white font-medium text-sm">Disk:</label>
                      <input type="number" id="disk" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4" placeholder="No Need Default is 10">
                    </div>
                  </div>      
                  <label class="block mb-2 text-white font-medium text-sm">Node:</label>
                  <select style="background-color: #141d23;" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4"  id="node">
                    <% nodes.forEach(function(node) { %>
                        <option value="<%= node.id %>"><%= node.name %></option>
                      <% }); %>
                  </select>      
            
                  
                  <label class="block mb-2 text-white font-medium text-sm">Software:</label>
<select style="background-color: #141d23;" class="w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4" id="image" onchange="updateImageName()">
    <% images.forEach(function(image) { %>
        <option value="<%= image.Image %>" data-variables='<%= JSON.stringify(image.Variables) %>'><%= image.Name %></option>
    <% }); %>
</select>
<input type="hidden" id="imageName" /> <!-- Hidden input for image name -->

<div id="variablesContainer"></div>

<div x-data="{ open: false }" class="relative">
    <button 
        @mouseenter="open = true" 
        @mouseleave="open = false" 
        type="button" 
        onclick="submitForm()" 
        class="bg-<%= theme.buttoncolor %> text-white font-semibold py-2 px-4 rounded-2xl mt-4">
        Create Server
    </button>

    <div x-show="open" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-90"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-90"
         class="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-2 rounded-2xl bg-[#141d23] shadow border-t border-white/10 px-4 py-2.5 text-sm text-white font-medium tracking-tight z-10"
         style="display: none;">
        By clicking this, you are agreeing to the <%= name %> User Agreement.
    </div>
</div>

<style>
    /* Modal Content Container */
    .modal-content {
        max-height: 80vh; /* 80% of the viewport height */
        overflow-y: auto; /* Enables scrolling */
    }
    
    @media (max-height: 500px) {
        .modal-content {
            max-height: 70vh; /* Smaller max-height for very small screens */
        }
    }
    
    /* Ensuring the whole modal is always visible and centered */
    #createServerModal {
        display: flex;
        align-items: center; /* This centers the modal vertically */
        justify-content: center; /* This centers the modal horizontally */
    }
    
    .card:hover {
        transform: scale(1.03);
    }
    
    .card-selected {
        border: 1px solid #0a9875; /* Highlight for selected cards */
    }
</style>

<script>
    function updateImageName() {
        const selectedOption = document.getElementById("image").options[document.getElementById("image").selectedIndex];
        document.getElementById("imageName").value = selectedOption.text; // Capture the image name
        checkVariables();
    }

    async function submitForm() {
        let name = encodeURIComponent(document.getElementById("name").value);
        let image = encodeURIComponent(document.getElementById("image").value);
        let imageName = encodeURIComponent(document.getElementById("imageName").value);
        let memory = encodeURIComponent(document.getElementById("memory").value);
        let cpu = encodeURIComponent(document.getElementById("cpu").value);
        let node = encodeURIComponent(document.getElementById("node").value);

        // Gather variable inputs as a JSON object
        const variableInputs = Array.from(document.querySelectorAll('#variablesContainer input'))
            .reduce((acc, input) => {
                acc[input.id] = input.value; // Key: input ID, Value: input value
                return acc;
            }, {});

        // Convert the variables object to JSON string
        const variablesJSON = encodeURIComponent(JSON.stringify(variableInputs));

        document.location.href = `/create?name=${name}&image=${image}&imageName=${imageName}&ram=${memory}&cpu=${cpu}&node=${node}&variables=${variablesJSON}`; // Include JSON variables
    }

                
    function checkVariables() {
    const select = document.getElementById("image");
    const selectedOption = select.options[select.selectedIndex];
    const variables = JSON.parse(selectedOption.getAttribute('data-variables') || '{}'); // Fallback to empty object
    const container = document.getElementById("variablesContainer");

    container.innerHTML = ''; // Clear previous inputs

    // Check if there are any variables
    if (variables && Object.keys(variables).length > 0) {
        for (const [key, value] of Object.entries(variables)) {
            if (value.required) { 
                const input = document.createElement('input');
                input.type = value.type || 'text'; // Default to text if type is not specified
                input.placeholder = `${key} (default: ${value.default || ''})`; // Added default fallback
                input.className = 'w-full border border-white/5 bg-[#162027]/30 focus:ring-[#0a9875] focus:border-transparent transition font-medium pl-4 py-3 text-sm text-zinc-400 placeholder:text-zinc-500 tracking-tight rounded-2xl mb-4';
                input.id = key; // Set an id for the input
                container.appendChild(input);
            }
        }
    }
}


</script>
                
