<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Channel Data Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Sidebar Menu -->
    <nav id="sidebarMenu" class="sidebar">
        <div class="menu-header">
            <button id="menuClose" class="close-btn">×</button>
            <h3>Menu</h3>
        </div>
        <ul>
            <li><button id="resetAllBtn" class="btn">Reset All JSON</button></li>
            <li><button id="darkModeToggle" class="btn">🌙 Dark Mode</button></li>
            <button id="convertToM3U" class="menu-item">Convert to M3U Playlist</button><button id="viewJsonDataBtn">View Saved JSON Data</button>
        </ul>
    </nav>

    <!-- Main Content -->
    <div id="mainContent" class="content">
        <header class="header">
            <button id="menuToggle" class="menu-toggle-btn">☰</button>
        </header>

        <main class="main">
            <!-- Info Box -->
            <div id="infoBox" class="info-box">Total entries in Channels: 0</div>

            <h1 class="form-title">Channel Data Form</h1>
            <form id="dataForm" class="form">
                <!-- ID -->
                <label for="id" class="label">ID:</label>
                <input type="text" id="id" name="id" placeholder="Enter ID" required class="input-field">

                <!-- Name -->
                <label for="name" class="label">Name:</label>
                <input type="text" id="name" name="name" placeholder="Enter Name" required class="input-field">

                <!-- Logo URL -->
                <label for="logo" class="label">Logo URL:</label>
                <input type="text" id="logo" name="logo" placeholder="Enter Logo URL" required class="input-field">

                <!-- Category -->
                <label for="category" class="label">Category:</label>
                <select id="category" name="category" class="select-field">
                    <option value="news">News</option>
                    <option value="movies">Movies</option>
                    <option value="sports">Sports</option>
                    <option value="music">Music</option>
                    <option value="kids">Kids</option>
                    <option value="entertainment">Entertainment</option>
                    <option value="lifestyle">Lifestyle</option>
                    <option value="education">Education</option>
                    <option value="spiritual">Spiritual</option>
                </select>

                <!-- Language -->
                <label for="language" class="label">Language:</label>
                <select id="language" name="language" class="select-field">
                    <option value="hindi">Hindi</option>
                    <option value="english">English</option>
                    <option value="tamil">Tamil</option>
                    <option value="telugu">Telugu</option>
                    <option value="kannada">Kannada</option>
                    <option value="malayalam">Malayalam</option>
                    <option value="bengali">Bengali</option>
                    <option value="marathi">Marathi</option>
                    <option value="gujarati">Gujarati</option>
                    <option value="punjabi">Punjabi</option>
                    <option value="odia">Odia</option>
                    <option value="assamese">Assamese</option>
                    <option value="urdu">Urdu</option>
                </select>

                <!-- 4K -->
                <label for="resolution" class="label">4K:</label>
                <select id="resolution" name="resolution" class="select-field">
                    <option value="false" selected>False</option>
                    <option value="true">True</option>
                </select>

                <!-- HD -->
                <label for="quality" class="label">HD:</label>
                <select id="quality" name="quality" class="select-field">
                    <option value="sd" selected>SD</option>
                    <option value="hd">HD</option>
                </select>

                <!-- Stream URL -->
                <label for="streamUrl" class="label">Stream URL:</label>
                <input type="text" id="streamUrl" name="streamUrl" placeholder="Enter Stream URL" required class="input-field">

                <!-- Buttons -->
                <div class="buttons">
                    <button type="button" id="previewBtn" class="btn">Preview</button>
                    <button type="reset" id="resetBtn" class="btn">Reset</button>
                </div>
            </form>

            <!-- Preview Section -->
            <section id="previewSection" class="preview-section" style="display: none;">
                <h2>Preview</h2>
                <p><strong>ID:</strong> <span id="previewId"></span></p>
                <p><strong>Name:</strong> <span id="previewName"></span></p>
                <p><strong>Logo:</strong> <img id="previewLogo" alt="Logo Preview"></p>
                <p><strong>Category:</strong> <span id="previewCategory"></span></p>
                <p><strong>Language:</strong> <span id="previewLanguage"></span></p>
                <p><strong>4K:</strong> <span id="previewResolution"></span></p>
                <p><strong>HD:</strong> <span id="previewQuality"></span></p>
                <p><strong>Stream URL:</strong> <span id="previewStreamUrl"></span></p>

                <div class="buttons">
                    <button type="button" id="confirmBtn" class="btn">Confirm</button>
                    <button type="button" id="cancelBtn" class="btn">Cancel</button>
                </div>
            </section>

            <!-- JSON Output Section -->
            <section id="jsonDataSection" class="json-output" style="display: none;">
                <h1>Saved Data</h1>
                <pre id="output"></pre>
            </section>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html>
