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

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

    <!-- Page Header -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold text-primary mb-1">
                        <i class="bi bi-file-earmark-bar-graph"></i>
                        Subcontractor Report
                    </h2>
                    <small class="text-muted">
                        View, Filter, Edit and Delete Subcontractor Records
                    </small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="card shadow-sm border-0">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">
                <i class="bi bi-funnel-fill"></i>
                Report Filters
            </h5>
        </div>

        <div class="card-body">
            <form method="POST" class="loading-form">

                <div class="row g-3">
                    <div class="col-lg-3">
                        <label class="form-label fw-semibold">
                            Subcontractor
                            <span class="text-danger">*</span>
                        </label>
                        <select name="subcontractor_id" class="form-select" required>
                            <option value="">--- Select Contractor ---</option>
                            {% for sc in subcontractors %}
                            <option value="{{ sc.id }}"
                                {% if selected_sc_id|string == sc.id|string %}selected{% endif %}>
                                {{ sc.subcontractor_name }}
                            </option>
                            {% endfor %}
                        </select>

                    </div>

                    <div class="col-lg-3">
                        <label class="form-label fw-semibold"> RA Bill No</label>
                        <input
                            type="text"
                            name="ra_bill_no"
                            class="form-control"
                            placeholder="Enter RA Bill"
                            value="{{ selected_ra_bill or '' }}">
                    </div>

                    <div class="col-lg-3">
                        <label class="form-label fw-semibold"> Location </label>
                        <input
                            type="text"
                            name="location"
                            class="form-control"
                            placeholder="Project Location"
                            value="{{ selected_location or '' }}">
                    </div>

                    <div class="col-lg-3">
                        <label class="form-label fw-semibold">Work Category</label>
                        <select name="category" class="form-select">

                            <option value="all">All Categories</option>

                            <option value="tr"
                            {% if request.form.get('category')=='tr' %}selected{% endif %}>
                                Trench Excavation
                            </option>

                            <option value="mh"
                            {% if request.form.get('category')=='mh' %}selected{% endif %}>
                                Manhole Excavation
                            </option>

                            <option value="dc"
                            {% if request.form.get('category')=='dc' %}selected{% endif %}>
                                Manhole Domestic Chamber 
                            </option>

                            <option value="laying"
                            {% if request.form.get('category')=='laying' %}selected{% endif %}>
                                Pipe Laying
                            </option>

                        </select>
                    </div>
                </div>

                <div class="mt-4 d-flex justify-content-end gap-2">

                    <!-- Preview -->
                    <button type="submit" name="action" value="preview"class="btn btn-primary">
                        <i class="bi bi-search"></i>
                        Preview Report
                    </button>

                    <!-- Download -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle"data-bs-toggle="dropdown">
                            <i class="bi bi-download"></i>
                            Download Report
                        </button>

                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <button class="dropdown-item"type="submit" name="action" value="excel">
                                    <i class="bi bi-file-earmark-excel text-success"></i>
                                    Download Excel
                                </button>
                            </li>

                            <li>
                                <button class="dropdown-item" type="submit" name="action"
                                    value="excel_all">
                                    <i class="bi bi-file-earmark-spreadsheet text-primary"></i>
                                    Download All Excel
                                </button>
                            </li>

                            <li><hr class="dropdown-divider"></li>

                            <li>
                                <button class="dropdown-item"type="submit"name="action" value="pdf">
                                    <i class="bi bi-file-earmark-pdf text-danger"></i>
                                    PDF (Coming Soon)
                                </button>
                            </li>
                        </ul>

                    </div>

                    <button type="reset" class="btn btn-secondary" id="resetBtn">
                        <i class="bi bi-arrow-clockwise"></i>
                        Reset
                    </button>

                </div>
            </form>

        </div>
    </div>

    {% if tables %}
    <!-- Tabs -->
    <div class="card shadow-sm border-0 mt-4">
        <div class="card-header bg-light">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#abstract">
                        <i class="bi bi-file-earmark-text"></i> Abstract 
                    </button>
                </li>

                <li class="nav-item">
                    <button class="nav-link "  data-bs-toggle="tab" data-bs-target="#tr">
                        <i class="bi bi-cone-striped"></i> Trench Excavation
                    </button>
                </li>

                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#mh">
                        <i class="bi bi-nut"></i> Manhole Excavation
                    </button>
                </li>

                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#dc">
                        <i class="bi bi-grid-3x3"></i> Manhole & Domestic Chambers Construction
                    </button>
                </li>

                <li class="nav-item">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#laying">
                        <i class="bi bi-bezier2"></i> Pipe Laying
                    </button>
                </li>
            </ul>
        </div>

        <div class="card-body">
            <div class="tab-content">

                <div class="tab-pane fade show active" id="abstract">
                    {{ abstract_html|safe }}
                </div>

                <!-- Trench -->
                <div class="tab-pane fade "id="tr">
                    <div class="mb-3">
                        <button onclick="deleteSelected('tr')" class="btn btn-danger">
                            <i class="bi bi-trash"></i> Delete Selected
                        </button>
                    </div>
                    <div class="table-responsive border rounded shadow-sm">
                        {{ tables.tr|safe }}
                    </div>
                </div>

                <!-- MH -->
                <div class="tab-pane fade" id="mh">
                    <div class="mb-3">
                        <button onclick="deleteSelected('mh')" class="btn btn-danger">
                            <i class="bi bi-trash"></i>Delete Selected
                        </button>
                    </div>
                    <div class="table-responsive border rounded shadow-sm">
                        {{ tables.mh|safe }}
                    </div>
                </div>

                <!-- DC -->
                <div class="tab-pane fade" id="dc">
                    <div class="mb-3">
                        <button onclick="deleteSelected('dc')"class="btn btn-danger">
                            <i class="bi bi-trash"></i>
                            Delete Selected
                        </button>
                    </div>
                    <div class="table-responsive border rounded shadow-sm">
                        {{ tables.dc|safe }}
                    </div>
                </div>  

                <!-- Laying -->
                <div class="tab-pane fade" id="laying">
                    <div class="mb-3">
                        <button onclick="deleteSelected('laying')"
                                class="btn btn-danger">
                            <i class="bi bi-trash"></i>
                            Delete Selected
                        </button>
                    </div>
                    <div class="table-responsive border rounded shadow-sm">
                        {{ tables.laying|safe }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

</div>

<script>
    // Reset 
    document.getElementById("resetBtn").addEventListener("click", function () {location.reload();});

    // DATATABLE
    $(document).ready(function () {
        $('.datatable').DataTable({
            pageLength: 10,
            dom: 'Bfrtip',
            buttons: ['copy', 'csv', 'excel', 'print']
        });

        setTimeout(() => {
            $("table thead tr th:first-child").html('<input type="checkbox" id="select-all">');
        }, 500);
    });

    // SELECT ALL
    $(document).on("change", "#select-all", function () {
        $(".row-check").prop("checked", this.checked);
    });

    // GET IDS
    function getSelectedIds() {
        let ids = [];
        $(".row-check:checked").each(function () {
            ids.push($(this).data("id"));
        });
        return ids;
    }

    // BULK DELETE
    function deleteSelected(model) {
        let ids = getSelectedIds();
        if (ids.length === 0) return alert("Select records");

        if (!confirm(`Delete ${ids.length} record(s)?`)) return;

        fetch("/file/delete_records", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ model: model, ids: ids })
        })
        .then(res => res.json().then(data => ({ ok: res.ok, data })))
        .then(({ ok, data }) => {
            if (ok && data.status === "success") {
                alert("Deleted Successfully");
                location.reload();
            } else {
                alert("Delete failed: " + (data.message || "Unknown error"));
            }
        })
        .catch(err => {
            alert("Delete request failed: " + err);
        });
    }

    // SINGLE DELETE
    $(document).on("click", ".delete-btn", function () {
        let id = $(this).data("id");
        let model = $(this).data("model");

        if (!confirm("Are you sure you want to delete this record?")) return;

        fetch("/file/delete_records", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ model: model, ids: [id] })
        })
        .then(res => res.json().then(data => ({ ok: res.ok, data })))
        .then(({ ok, data }) => {
            if (ok && data.status === "success") {
                alert("Deleted Successfully");
                location.reload();
            } else {
                alert("Delete failed: " + (data.message || "Unknown error"));
            }
        })
        .catch(err => {
            alert("Delete request failed: " + err);
        });
    });


</script>

{% endblock %}