{% extends 'base.html' %}
{% load static %}

{% block content %}
    <style>
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            margin-top: 0;
        }
        .tabs {
            display: flex;
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-weight: bold;
        }
        .tab.active {
            border-bottom-color: #0066cc;
            color: #0066cc;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        select, input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .info-box {
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>

    <div class="container">
        <h1>Settings</h1>
        <div class="tabs">
            <div class="tab active" onclick="switchTab(event, 'system-preferences')">System Preferences</div>
            <div class="tab" onclick="switchTab(event, 'violation-limits')">Violation Limits</div>
            <div class="tab" onclick="switchTab(event, 'notification')">Notification</div>
            <div class="tab" onclick="switchTab(event, 'user-account')">User Account</div>
            <div class="tab" onclick="switchTab(event, 'system-maintenance')">System Maintenance</div>
        </div>

        <!-- System Preferences Tab -->
        <div id="system-preferences" class="tab-content active">
            <h2>General Setting</h2>
            <div class="form-group">
                <label for="timezone">Timezone</label>
                <select id="timezone">
                    <option>Select Time</option>
                    <!-- Add timezone options dynamically here -->
                </select>
            </div>
            <div class="form-group">
                <label for="language">Language</label>
                <select id="language">
                    <option>Select Language</option>
                    <!-- Add language options dynamically here -->
                </select>
            </div>
            <div class="form-group">
                <label for="date-time">Date and Time</label>
                <select id="date-time">
                    <option>dd-mm-yy</option>
                    <!-- Add date and time format options dynamically here -->
                </select>
            </div>
            <h2>Appearance</h2>
            <div class="form-group">
                <label>Light Theme selected currently</label>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <!-- Violation Limits Tab -->
        <div id="violation-limits" class="tab-content">
            <button class="button">Create Violation Limit</button>
            <table>
                <thead>
                    <tr>
                        <th>LOCATION NAME</th>
                        <th>OVER SPEEDING</th>
                        <th>OVER STAY</th>
                        <th>CLUSTER VIOLATION</th>
                        <th>DELAYED EXIT</th>
                        <th>EARLY ENTRY</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Gate No.4</td>
                        <td>8 Max 30km 40km 50km</td>
                        <td>4 Max 15min 100 meter</td>
                        <td>2 Max 500 meter 4 veh.</td>
                        <td>2 Max 10min</td>
                        <td>9 Max 20min</td>
                        <td>Edit Delete</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </tbody>
            </table>
        </div>

        <!-- Notification Tab -->
        <div id="notification" class="tab-content">
            <h2>Email Notifications</h2>
            <div class="form-group">
                <label for="email-frequency">Email Frequency</label>
                <select id="email-frequency">
                    <option>Daily</option>
                    <option>Weekly</option>
                    <option>Monthly</option>
                </select>
            </div>
            <div class="form-group">
                <label for="alerts">Enable Alerts</label>
                <label class="switch">
                    <input type="checkbox" checked>
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <!-- User Account Tab -->
        <div id="user-account" class="tab-content">
            <h2>Account Settings</h2>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" placeholder="Enter your username">
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" placeholder="Enter your email">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter new password">
            </div>
        </div>

        <!-- System Maintenance Tab -->
        <div id="system-maintenance" class="tab-content">
            <h2>Maintenance Tasks</h2>
            <div class="info-box">
                <p>System maintenance tasks help keep your system running smoothly.</p>
                <button class="button">Run Maintenance Now</button>
            </div>
            <h2>Backup</h2>
            <div class="info-box">
                <p>Ensure your data is safe by creating regular backups.</p>
                <button class="button">Create Backup</button>
            </div>
        </div>
    </div>

    <script>
        function switchTab(event, tabName) {
            var tabContents = document.getElementsByClassName("tab-content");
            for (var i = 0; i < tabContents.length; i++) {
                tabContents[i].classList.remove("active");
            }
            var tabs = document.getElementsByClassName("tab");
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].classList.remove("active");
            }
            document.getElementById(tabName).classList.add("active");
            event.currentTarget.classList.add("active");
        }
    </script>
{% endblock %}