{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

    <div class="card shadow">

        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">
                <i class="bi bi-currency-rupee"></i>
                Subcontractor Rate Master
            </h4>
        </div>

        <div class="card-body">

            <form method="POST">

                <div class="row">

                    <!-- Subcontractor -->
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">
                            Subcontractor
                        </label>

                        <select name="subcontractor_id"
                                class="form-select"
                                required>

                            <option value="">
                                Select Subcontractor
                            </option>

                            {% for sub in subcontractors %}
                            <option value="{{ sub.id }}">
                                {{ sub.subcontractor_name }}
                            </option>
                            {% endfor %}

                        </select>
                    </div>

                    <!-- Category -->
                    <div class="col-md-4 mb-3">

                        <label class="form-label fw-bold">
                            Category
                        </label>

                        <select name="category"
                                class="form-select"
                                required>

                            <option value="">
                                Select Category
                            </option>

                            <option value="TR_EX">
                                Trench Excavation
                            </option>

                            <option value="MH_EX">
                                Manhole Excavation
                            </option>

                            <option value="MH_DC">
                                Manhole & Domestic Chamber
                            </option>

                            <option value="LAYING">
                                Pipe Laying
                            </option>

                        </select>

                    </div>

                    <!-- Status -->
                    <div class="col-md-4 mb-3">

                        <label class="form-label fw-bold">
                            Status
                        </label>

                        <select name="status"
                                class="form-select">

                            <option value="Active">
                                Active
                            </option>

                            <option value="Inactive">
                                Inactive
                            </option>

                        </select>

                    </div>

                </div>

                <div class="row">

                    <!-- Item Code -->
                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">
                            Item Code
                        </label>

                        <input type="text"
                               name="item_code"
                               class="form-control"
                               placeholder="SM01"
                               required>

                    </div>

                    <!-- Item Name -->
                    <div class="col-md-5 mb-3">

                        <label class="form-label fw-bold">
                            Item Name
                        </label>

                        <input type="text"
                               name="item_name"
                               class="form-control"
                               placeholder="Soft Murum 0-1.5"
                               required>

                    </div>

                    <!-- Unit -->
                    <div class="col-md-2 mb-3">

                        <label class="form-label fw-bold">
                            Unit
                        </label>

                        <select name="unit"
                                class="form-select">

                            <option value="Cum">Cum</option>
                            <option value="Nos">Nos</option>
                            <option value="Rmt">Rmt</option>
                            <option value="Sqm">Sqm</option>

                        </select>

                    </div>

                    <!-- Rate -->
                    <div class="col-md-2 mb-3">

                        <label class="form-label fw-bold">
                            Rate (₹)
                        </label>

                        <input type="number"
                               step="0.01"
                               min="0"
                               name="rate"
                               class="form-control"
                               placeholder="0.00"
                               required>

                    </div>

                </div>

                <div class="row">

                    <!-- Effective From -->
                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">
                            Effective From
                        </label>

                        <input type="date"
                               name="effective_from"
                               class="form-control"
                               required>

                    </div>

                    <!-- Effective To -->
                    <div class="col-md-3 mb-3">

                        <label class="form-label fw-bold">
                            Effective To
                        </label>

                        <input type="date"
                               name="effective_to"
                               class="form-control">

                    </div>

                </div>

                <hr>

                <div class="text-end">

                    <button type="reset"
                            class="btn btn-secondary">

                        <i class="bi bi-arrow-clockwise"></i>

                        Reset

                    </button>

                    <button type="submit"
                            class="btn btn-success">

                        <i class="bi bi-check-circle"></i>

                        Save Rate

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


{% endblock %}