@{

    ViewData["Title"] = "Deposit";
    var DepositCharts = ViewBag.DepositCharts;
    var fdProgressData = ViewBag.FDProgressData as List<FDMaturityViewModel> ?? new List<FDMaturityViewModel>();
    var maxAmount = ViewBag.MaxAmount as decimal? ?? 0;
    var colors = new[] { "primary", "danger", "warning", "success", "primary", "secondary" };
    var colorIndex = 0;
}
<link rel="stylesheet" href="~/css/AshishStyle.css" />

<div class="button-container mb-3">
    <a class="btn-download-pdf" id="downloadPDF" style="text-decoration: none;">Download PDF</a>
</div>

<!--begin::App Main-->
<main class="app-main">
    <div class="app-content">
        <!--begin::Container-->
        <div class="container-fluid">
            <!--start of Deposit Information-->
          <div id="depositSummarySection">
            <div class="mt-4" style="font-size:12px;">
                <div class="card shadow border-0 w-100">
                        <div class="Depositheader d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-bank2 me-2"></i>
                                <strong>Loan Information</strong>
                            </div>
                    </div>
                    <div class="card-body bg-light py-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-semibold text-muted">Total Deposit</span>
                            <span id="depo-count" class="fw-semibold text-primary">Loading...</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-semibold text-muted">Total Accounts</span>
                            <span id="acc-count" class="fw-semibold text-success">Loading...</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-semibold text-muted">Total AIP</span>
                            <span id="aip-count" class="fw-semibold text-danger">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of Deposit Information-->
            <!--Deposit Mix Heading-->
            <!--Heading-->
            <div class="mt-4" style="font-size:12px;">
                <div class="card shadow border-0" style="width: 100%;">
                    <div class="Depositheader d-flex align-items-center">
                        <i class="bi bi-bank2 me-2"></i>
                        <strong>Deposit Mix</strong>
                    </div>
                    <!--end of Heading-->
                    <!-- start of pie charts-->

                    <div class="row mt-4 px-3" style="font-size:12px;">
                        <!-- Province Wise (Amount + Count) -->
                        <div class="col-md-6 col-xl-6 mb-4">
                            <div class="card mb-4 shadow-sm border rounded" style="font-size:12px;">
                                <div class="Depositheader text-white">
                                    <h5 class="mb-0" style="font-size:12px;">Province Wise</h5>
                                </div>
                                <div class="card-body" style="font-size:12px;">
                                    <div class="row">
                                        <!-- Amount Chart -->
                                        <div class="col-md-6 d-flex flex-column align-items-center">
                                            <h6 class="text-center" style="font-size:12px;">Amount</h6>
                                            <div id="province-wise-amount-chart" class="pie-chart-container" style="width: 100%; max-width: 380px;"></div>
                                        </div>

                                        <!-- Count Chart -->
                                        <div class="col-md-6 d-flex flex-column align-items-center">
                                            <h6 class="text-center" style="font-size:12px;">Count</h6>
                                            <div id="province-wise-count-chart" class="pie-chart-container" style="width: 100%; max-width: 380px;"></div>
                                        </div>
                                    </div>

                                    <!-- Legend Row (Aligned) -->
                                    <div class="legend-row" style="display: flex;flex-wrap: wrap;justify-content: center;margin-bottom: -1.5rem;gap: 0.10rem;font-size:12px;">
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #0d6efd; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            KOSHI
                                        </div>
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #dc3545; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            MADHESH
                                        </div>
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #6c757d; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            BAGMATI
                                        </div>
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #198754; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            GANDAKI
                                        </div>
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #6610f2; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            LUMBINI
                                        </div>
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #ffc107; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            KARNALI
                                        </div>
                                        <div class="d-flex align-items-center me-3 mb-2">
                                            <span style="background-color: #fd7e14; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            SU.PA.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Customer Wise (Amount + Count) -->
                        <div class="col-md-6 col-xl-6 mb-4">
                            <div class="card mb-4 shadow-sm border rounded">
                                <div class="Depositheader text-white">
                                    <h5 class="mb-0" style="font-size:12px;">Customer Wise</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 d-flex flex-column align-items-center">
                                            <h6 class="text-center" style="font-size:12px;">Amount</h6>
                                            <div id="customer-wise-amount-chart" class="pie-chart-container" style="width: 100%; max-width: 380px;"></div>
                                        </div>
                                        <div class="col-md-6 d-flex flex-column align-items-center">
                                            <h6 class="text-center" style="font-size:12px;">Count</h6>
                                            <div id="customer-wise-count-chart" class="pie-chart-container" style="width: 100%; max-width: 380px;"></div>
                                        </div>
                                    </div>

                                    <!-- Legend Row (Aligned) -->
                                    <div class="d-flex justify-content-center mt-3" style="font-size:12px;">
                                        <div class="d-flex align-items-center me-4">
                                            <span style="background-color: #00E396; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            Corporate
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span style="background-color: #FF4560; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 5px;"></span>
                                            Retail
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Deposit Bar Chart and FD Maturity-->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="row">
                        <!-- FD Bar Chart -->
                        <div class="col-md-8 d-flex flex-column">
                            <div class="card mb-4">
                                <div class="Depositheader">
                                    <h5 class="card-title" style="font-size:12px;">Deposit Composition</h5>
                                </div>
                                <div id="fdBar" height="100"></div>
                            </div>
                        </div>

                        <!-- FD Maturity Card -->
                        <div class="col-md-4 d-flex flex-column" style="font-size:12px;">
                            <div class="card border-light shadow-sm ms-md-2">
                                <div class="card-body px-3">
                                    <p class="text-center mb-4"><strong>FD Maturity Within 1 Year</strong></p>

                                    @foreach (var item in fdProgressData)
                                    {
                                        var percentage = (item.Amount / maxAmount) * 100;
                                        var color = colors[colorIndex % colors.Length];
                                        colorIndex++;
                                        <div class="progress-group mb-4">
                                            <span class="progress-text">@item.Remark</span>
                                            <span class="float-end"><b>@item.Amount.ToString("N2")</b></span>
                                            <div class="progress progress-sm rounded border border-1">
                                                <div class="progress-bar text-bg-@color rounded"
                                                     style="width: @percentage.ToString("0.##")%"
                                                     role="progressbar"
                                                     aria-valuenow="@percentage.ToString("0.##")"
                                                     aria-valuemin="0"
                                                     aria-valuemax="100">
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <!-- end of Depoist Composition and FD --->
         </div>

            <!--Top 10 Clients-->

        <div id="topTenDepoSection">
            <div class="row mt-4">
                <!--10 Deposit Corporate-->
                <div class="col-lg-6 col-md-12 mb-3">
                    <div class="table-responsive">
                        <table id="topDepositorsCorporateTable" class="table table-bordered text-center soft-table">
                            <thead>
                                <tr>
                                        <th colspan="6" class="Depositheader" style="color: #fff;">Top 10 Corporate Deposit Clients</th>
                                </tr>
                                <tr>
                                    <th>SN</th>
                                    <th>CIF ID</th>
                                    <th>Name</th>
                                    <th>Count</th>
                                    <th>Balance</th>
                                    <th>Weightage</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--10  Deposit Retail-->
                <div class="col-lg-6 col-md-12 mb-3">
                    <div class="table-responsive">
                        <table id="topDepositorsTable" class="table table-bordered text-center soft-table soft-table2">
                            <thead>
                                <tr>
                                        <th colspan="6" class="Depositheader" style="color: #fff;">Top 10 Retail Deposit Clients</th>
                                </tr>
                                <tr>
                                    <th>SN</th>
                                    <th>CIF ID</th>
                                    <th>Name</th>
                                    <th>Count</th>
                                    <th>Balance</th>
                                    <th>Weightage</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
            <!--end of 10 Clients-->

        </div> <!-- end .container-fluid -->
    </div> <!-- end .app-content -->
</main>
<!--end::App Main-->
@section Scripts {
    <script>
        // Declare this before loading AshishJs.js
        const chartData = @Html.Raw(ViewBag.DepositCharts);
        const currentUser = '@ViewBag.UserName';
    </script>
    <!-- JavaScript files moved to the bottom for improved page load performance -->
    <script src="~/js/apexcharts.min.js"></script>
    <script src="~/js/jquery-3.6.0.min.js"></script>
    <script src="@Url.Content("~/js/jspdf.umd.min.js")"></script>
    <script src="@Url.Content("~/js/html2canvas.min.js")"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
                    document.addEventListener('DOMContentLoaded', function () {
          document.getElementById('downloadPDF').addEventListener('click', function (e) {
            e.preventDefault();

            const element = document.getElementById('dashboard-content');
            if (!element) return alert('Export target not found!');

            // Clear any previous manual transforms
            element.style.transform = '';
            element.style.width = '';

            const opt = {
              margin: 0.2,
              filename: 'DashboardReport.pdf',
              image: { type: 'jpeg', quality: 0.98 },
              html2canvas: {
                scale: 2, // back to high quality scale
                useCORS: true,
                scrollY: 0
              },
              jsPDF: {
                unit: 'in',
                format: 'a3', // larger page size
                orientation: 'landscape'
              }
            };

            html2pdf().set(opt).from(element).save();
          });
        });


    </script>
}
will download pdf work here?