<!DOCTYPE html>

<html>

<head>

    <title>ITR Form Entry</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">

    <style>
        /* Existing CSS here... */

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background-color: #f5f7fa;

            color: #333;

            padding: 30px 0;

        }



        .container {

            width: 90%;

            max-width: 700px;

            margin: auto;

            background-color: #fff;

            padding: 40px;

            border-radius: 12px;

            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        }



        h2 {

            text-align: center;

            margin-bottom: 30px;

            font-size: 28px;

            color: #2c3e50;

        }



        form {

            display: flex;

            flex-direction: column;

        }



        label {

            margin-top: 15px;

            margin-bottom: 6px;

            font-weight: 600;

        }



        input[type="number"] {

            padding: 10px 12px;

            border: 1px solid #ccc;

            border-radius: 6px;

            font-size: 16px;

            transition: border-color 0.3s ease;

        }



        input[type="number"]:focus {

            border-color: #007BFF;

            outline: none;

        }



        button[type="submit"] {

            margin-top: 30px;

            padding: 12px;

            background-color: #007BFF;

            border: none;

            border-radius: 6px;

            color: white;

            font-size: 18px;

            cursor: pointer;

            transition: background-color 0.3s ease;

        }



        button[type="submit"]:hover {

            background-color: #0056b3;

        }



        @media (max-width: 600px) {

            .container {

                padding: 20px;

            }



            h2 {

                font-size: 22px;

            }



            input[type="number"] {

                font-size: 15px;

            }



            button[type="submit"] {

                font-size: 16px;

            }

        }
    </style>

</head>

<body>

    <div class="container">

        <h2>Income Tax Return Form</h2>

        <form method="POST" onsubmit="showSuccessMessage()">

            <label>Year:</label>

            <input type="number" name="year" required>



            {% for field in [

            "gross_total_income", "disallowance_14a", "disallowance_37",

            "deduction_80ia_business", "deduction_80ia_misc", "deduction_80ia_other",

            "deduction_sec37_disallowance", "deduction_80g", "net_taxable_income",

            "tax_30_percent", "tax_book_profit_18_5", "tax_payable", "surcharge_12",

            "edu_cess_3", "total_tax_payable", "mat_credit", "interest_234c",

            "total_tax", "advance_tax", "tds", "tcs", "tax_on_assessment", "refund"

            ] %}

            <label>{{ field.replace("_", " ").title() }}:</label>

            <input type="number" name="{{ field }}" step="0.01" required>

            {% endfor %}

            <button type="submit">Submit</button>

        </form>

    </div>



    <!-- JavaScript to show popup -->

    <script>

        function showSuccessMessage() {

            alert("Form submitted successfully!");

        }

    </script>

</body>

</html>