<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Data Table Viewer</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .modal-header.bg-primary {
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: white;
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 123, 255, 0.1);
        }

        .table-striped tbody tr:hover {
            background-color: #f1f1f1;
        }

        thead.thead-dark th {
            background-color: #343a40;
            color: white;
        }
    </style>
</head>

<body>
    <div id="loading">
        <div class="spinner"></div>
    </div>

    <div class="container pt-5">
        <div class="float-right pb-3">
            <!-- <h1 class="my-4">Excel Data Table Viewer</h1> -->
            <form class="form-inline" id="dataForm">
                <div id="message" class="mb-2 mr-sm-2"></div>
                <input type="date" class="form-control mb-2 mr-sm-2" id="start_date">
                <input type="date" class="form-control mb-2 mr-sm-2" id="end_date">

                <button type="button" id="getepicor" class="btn btn-outline-success mb-2 mr-sm-2">Xlsx Epicor</button>
                <button type="button" id="downloadExcel" class="btn btn-outline-success mb-2">Download Excel</button>
            </form>
        </div>
        <input type="file" id="fileInput" class="form-control mb-4" accept=".xlsx" />

        <div class="filter-container pb-3">
            <select id="monthFilter" class="form-control select2-filter">
                <option value="">Filter by Month</option>
            </select>
            <select id="dateFilter" class="form-control select2-filter">
                <option value="">Filter by Inv Date</option>
            </select>
            <select id="nameFilter" class="form-control select2-filter">
                <option value="">Filter by Name</option>
            </select>
            <select id="conditionFilter" class="form-control select2-filter">
                <option value="">Filter by Condition</option>
            </select>
        </div>

        <div class="pt-3 pb-3">
            <table id="dataTable" class="table table-striped table-bordered pb-4">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>SHP</th>
                        <th>MIS</th>
                        <th>Grand Total</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="d-flex grand-total-header justify-content-between">
            <span class="grand-total-item">Total SHP: <span id="grandTotalSHP">0</span></span>
            <span class="grand-total-item">Total MIS: <span id="grandTotalMIS">0</span></span>
            <span class="grand-total-item">Grand Total: <span id="grandTotalSum">0</span></span>
        </div>
        <div class="pt-5">
            <div class="chart-container">
                <canvas id="lineChart"></canvas>
            </div>
            <div class="chart-container">
                <canvas id="barChart"></canvas>
            </div>
        </div>
        <div id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Details for</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="d-flex justify-content-end align-items-center mb-3">
                            <div class="form-inline">
                                <label for="typeFilter" class="mr-2">Type:</label>
                                <select id="typeFilter" class="form-control mr-3">
                                    <option value="">All Types</option>
                                    <option value="SHP">SHP</option>
                                    <option value="MIS">MIS</option>
                                </select>
                            </div>
                            <button id="downloadBtn" class="btn btn-outline-success">Download Excel</button>
                        </div>

                        <table id="detailTable" class="table table-striped table-bordered" width="100%">
                            <thead>
                                <tr>
                                    <th>SO Legal Num</th>
                                    <th>INV Legal Num</th>
                                    <th>Inv Date</th>
                                    <th>Description</th>
                                    <th>Quantity</th>
                                    <th>U/M</th>
                                    <th>Total Harga</th>
                                    <th>Rep ID</th>
                                    <th>Type</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/getEpicor.js"></script>
    <script src="js/excelmain.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</body>

</html>