@{
    ViewData["Title"] = "Detail Layanan";
}

@await Html.PartialAsync("~/Views/WebNew/Shared/Section/_Helpdesk.cshtml")


<style>
    .service-btn.active {
        background-color: #0d6efd;
        color: white;
    }
</style>

<div class="container mt-5">

    <div class="service-card mb-5">
        <div class="row align-items-center g-4">

            <div class="col-md-7">
                <h3 id="judul"></h3>
                <p id="deskripsi-singkat"></p>
                <ul id="deskripsi"></ul>
                <a href="/webnew/assets/document/parameter-terakreditasi-kan.pdf"
                   target="_blank"
                   class="btn btn-primary rounded-pill px-4">

                    <i class="bi bi-file-earmark-pdf-fill me-2"></i>
                    Daftar Parameter Terakreditasi

                </a>
            </div>

            <div class="col-md-5 text-center">
                <img id="gambar" />
            </div>

        </div>
    </div>

    <div class="table-card mb-4">
        <div class="table-header">
            <h5 id="judul-table1"></h5>
            <div>
                <button onclick="exportTableToExcel('table1')" class="btn-export">
                    Download Excel
                </button>

                <input type="text" id="searchTable-harga" placeholder="Cari...">
            </div>
        </div>

        <div class="table-responsive">
            <table class="custom-table table" id="table1">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div id="pagination" class="pagination-wrapper"></div>


    <div class="table-card">
        <div class="table-header">
            <h5 id="judul-table2"></h5>
            <div>
                <button onclick="exportTableToExcel('table2')" class="btn-export">
                    Download Excel
                </button>

                <input type="text" id="searchTable-parameter" placeholder="Cari...">
            </div>
        </div>

        <div class="table-responsive">
            <table class="custom-table table" id="table2">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div id="pagination" class="pagination-wrapper"></div>

</div>

<div class="mt-2">
    <span class="text-danger">* Parameter yang <b>tebal (bold)</b> telah terakreditasi oleh KAN</span>
</div>

<script src="~/webnew/pages/layanan/detail-layanan.js"></script>