{% extends "base.html" %}
{% block content %}

<div class="container-fluid mt-4">

    <div class="card shadow">

        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">

            <h4 class="mb-0">
                <i class="bi bi-currency-rupee"></i>
                Client Rate Master
            </h4>

        </div>

        <div class="card-body">

            <form method="POST" id="rateForm">

                <!-- Hidden ID -->
                <input type="hidden" id="rate_id" name="id" value="{{ rate.id if rate else '' }}">

                <div class="row">

                    <!-- Category -->
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold"> Category  </label>
                        <select id="category" name="category" class="form-select" required>
                            <option value="">-- Select Category --</option>

                            <option value="trench_excavation"
                            {% if rate and rate.category=="trench_excavation" %}selected{% endif %}>
                                Trench Excavation
                            </option>
                            <option value="manhole_excavation"
                            {% if rate and rate.category=="manhole_excavation" %}selected{% endif %}>
                                Manhole Excavation
                            </option>

                            <option value="Manhole_Domestic_Chamber"
                            {% if rate and rate.category=="Manhole_Domestic_Chamber" %}selected{% endif %}>
                                MH & Domestic Chamber
                            </option>

                            <option value="Laying"
                            {% if rate and rate.category=="Laying" %}selected{% endif %}>
                                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"
                            {% if not rate or rate.status=="Active" %}selected{% endif %}>
                                Active
                            </option>

                            <option value="Inactive"
                            {% if rate and rate.status=="Inactive" %}selected{% endif %}>
                                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" value="{{ rate.item_code if rate else '' }}" required>
                    </div>

                    <!-- Item Name -->
                    <div class="col-md-5 mb-3">
                        <label class="form-label fw-bold"> Item Name </label>
                        <input type="text"
                            id="item_name"
                            name="item_name"
                            class="form-control"
                            autocomplete="off"
                            value="{{ rate.item_name if rate else '' }}"
                            required>

                            <small id="duplicateMessage"
                                class="text-danger"
                                style="display:none;">
                            </small>
                    </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"
                            {% if not rate or rate.unit=="Cum" %}selected{% endif %}>
                                Cum
                            </option>
                            <option value="Nos"
                            {% if rate and rate.unit=="Nos" %}selected{% endif %}>
                                Nos
                            </option>
                            <option value="Rmt"
                            {% if rate and rate.unit=="Rmt" %}selected{% endif %}>
                                Rmt
                            </option>
                            <option value="Sqm"
                            {% if rate and rate.unit=="Sqm" %}selected{% endif %}>
                                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" name="rate" class="form-control" value="{{ rate.rate if rate else '' }}" required>
                    </div>
                </div>

                <div class="row">
                    <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" value="{{ rate.effective_from if rate else '' }}" required>
                    </div>

                    <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" value="{{ rate.effective_to if rate else '' }}">
                    </div>
                </div>

                <hr>

                <div class="text-end">
                    <a href="{{ url_for('engineering.client_rate_master') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </a>

                    <button type="submit" id="saveBtn" class="btn btn-success">
                        {% if rate %}
                        <i class="bi bi-pencil-square"></i>
                        Update Rate
                        {% else %}
                        <i class="bi bi-check-circle"></i>
                        Save Rate
                        {% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Table -->
    <div class="card shadow mt-4">
        <div class="card-header bg-dark text-white">
            <h5 class="mb-0">
                <i class="bi bi-table"></i>Rate List
            </h5>
        </div>

        <div class="card-body">
            <table class="table table-bordered table-hover table-striped" id="rateTable">
                <thead class="table-primary">
                    <tr>
                        <th>#</th>
                        <th>Category</th>
                        <th>Item Code</th>
                        <th>Item Name</th>
                        <th>Unit</th>
                        <th>Rate</th>
                        <th>Status</th>
                        <th width="130">Action</th>
                    </tr>
                </thead>
                <tbody>

                {% for row in rates %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ row.category }}</td>
                        <td>{{ row.item_code }}</td>
                        <td>{{ row.item_name }}</td>
                        <td>{{ row.unit }}</td>
                        <td>{{ row.rate }}</td>
                        <td>
                            {% if row.status=="Active" %}
                                <span class="badge bg-success">
                                    Active
                                </span>
                            {% else %}
                                <span class="badge bg-danger">
                                    Inactive
                                </span>
                            {% endif %}
                        </td>

                        <td>
                            <a href="{{ url_for('engineering.client_edit_rate', rate_id=row.id) }}" class="btn btn-warning btn-sm">
                                <i class="bi bi-pencil-square"></i>
                            </a>

                            <a href="{{ url_for('engineering.client_delete_rate', rate_id=row.id) }}"
                                class="btn btn-danger btn-sm" onclick="return confirm('Delete this Item:{{row.item_name}} & Rate:{{row.rate}} ?')">
                                <i class="bi bi-trash"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {

        // ----------------------------
        // DataTable
        // ----------------------------
        $("#rateTable").DataTable({
            responsive: true,
            pageLength: 10,
            destroy: true
        });

        // ----------------------------
        // Validate on field change
        // ----------------------------
        $("#subcontractor_id, #category").on("change", function () {
            clearValidation();
            checkDuplicateRate();

        });

        // ----------------------------
        // Validate while typing
        // ----------------------------
        let timer;

        $("#item_name").on("keyup input", function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                checkDuplicateRate();
            }, 300);

        });

        // Edit Mode
        checkDuplicateRate();

        // ----------------------------
        // Prevent Submit
        // ----------------------------
        $("#rateForm").submit(function (e) {

            if ($("#saveBtn").prop("disabled")) {
                e.preventDefault();
                $("#item_name").focus();
                return false;

            }

        });

    });


    //=========================================
    // Reset Validation
    //=========================================
    function clearValidation() {
        $("#duplicateMessage")
            .hide()
            .text("")
            .removeClass("text-success text-danger");

        $("#item_name")
            .removeClass("is-valid is-invalid");
        $("#saveBtn").prop("disabled", false);
    }



    //=========================================
    // Duplicate Validation
    //=========================================
    function checkDuplicateRate() {
        let subcontractor = $("#subcontractor_id").val();
        let category      = $("#category").val();
        let item_name     = $("#item_name").val().trim();
        let rate_id       = $("#rate_id").val();

        // Mandatory fields
        if (
            subcontractor == "" ||
            category == "" ||
            item_name.length < 2
        ) {
            clearValidation();
            return;
        }

        $.ajax({

            url: "{{ url_for('engineering.check_rate') }}",
            type: "GET",
            dataType: "json",
            data: {
                subcontractor_id: subcontractor,
                category: category,
                item_name: item_name,
                rate_id: rate_id
            },

            success: function (response) {
                if (response.exists) {
                    $("#duplicateMessage")
                        .text("This Item Name already exists for the selected Subcontractor and Category.")
                        .removeClass("text-success")
                        .addClass("text-danger")
                        .show();

                    $("#item_name")
                        .removeClass("is-valid")
                        .addClass("is-invalid");

                    $("#saveBtn").prop("disabled", true);

                }
                else {
                    $("#duplicateMessage")
                        .text("Item Name is available.")
                        .removeClass("text-danger")
                        .addClass("text-success")
                        .show();

                    $("#item_name")
                        .removeClass("is-invalid")
                        .addClass("is-valid");

                    $("#saveBtn").prop("disabled", false);
                }
            },

            error: function () {
                clearValidation();
            }
        });

    }

</script>

{% endblock %}