{{>header}}
<title>Update Insurance Amount</title>
<style>
    .card-header {
        background-color: #083c30;
        color: white;
        padding: 15px 20px;
    }

    .card-header h3,
    .card-header h6 {
        margin: 0;
        font-weight: 500;
    }

    .form-label {
        font-weight: 500;
        color: #212529;
    }
</style>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3>Update Insurance Amount</h3>
            </div>
            <div class="card-body">
                <form action="/admin/update-insurance-amount" method="POST">
                    <div class="row align-items-end g-3">
                        <div class="col-md-6">
                            <label for="packageRange" class="form-label">Package Range</label>
                            <select id="packageRange" name="packageRange" class="form-select" required>
                                <option value="">-- Select Package Range --</option>
                                <option value="<10000">Below ₹10,000</option>
                                <option value="10000-20000">₹10,000 - ₹20,000</option>
                                <option value="20000-30000">₹20,000 - ₹30,000</option>
                                <option value=">30000">Above ₹30,000</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="insuranceAmount" class="form-label">Insurance Amount (₹)</label>
                            <input type="number" id="claimAmount" name="insuranceAmount" class="form-control"
                                placeholder="Enter Insurance amount" required>
                        </div>

                    </div>
                    <div class="col-12 text-center mt-3">
                        <button type="submit" class="btn btn-success">Save / Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{!-- <div class="card"> --}}
        {{!-- <div class="card-header" style="color:#083c30">
            <h6>Existing Insurance Amounts</h6>
        </div> --}}
        <div class="row p-2" style="margin: 0px !important;">
            <div class="col-md-12">
                <div class="card mt-2" style="border-left: 2px solid #083c30;">
                    <div class="card-header" style="background-color:white; color:#083c30;">
                        <h4><b>Existing Insurance Amounts</b></h4>
                    </div>
                    <div class="col-sm-12 table-responsive">
                        <table id="example2" class="table table-bordered datatable">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>Package Range</th>
                                    <th>Insurance Amount</th>
                                    <th>LastUpdated</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#if claims.length}}
                                {{#each claims}}
                                <tr>
                                    <td>{{inc @index}}</td>
                                    <td>{{packageRange}}</td>
                                    <td>{{insuranceAmount}}</td>
                                    <td>{{formatDate updatedAt}}</td>
                                </tr>
                                {{/each}}
                                {{else}}
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-3">
                                        No insurance claim amounts set yet.
                                    </td>
                                </tr>
                                {{/if}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>




    {{>footer}}