{% extends "portalheader.html" %}

{% block body %}
                <div class="container text-center">
                          {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                  {% for message in messages %}
                                  <div class="alert alert-warning alert-dismissible" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                          <span aria-hidden="true">&times;</span>
                                        </button>
                                        {{message}}
                                  </div>
                                  {% endfor %}
                                {% endif %}
                          {% endwith %}
                </div>
{% if url == '' %}
<div class="container p-1 text-center">    
<div class="bg-white">
  <h1 class="pt-4 display-4">Welcome to the Portal !!!</h1>
  <p class="lead">This is a where you will have some simple text you want to share with your users about any information regarding the reports and updates related to the Portal</p>
</div>
<div class="bg-light p-3">
<p class="lead text-dark text-left border-bottom" style="font-size:25px;">Recently Viewed</p>
<div class="d-flex justify-content-between align-items-center lead">
  <div class="p-3"><i class="fas fa-chart-pie fa-lg" style="color: Tomato;"></i>&emsp;<a href="/sampleportal/salesdashboard1" class="text-secondary">Sales Dashboard 1</a></div>
  <div class="p-3"><i class="fas fa-chart-area fa-lg" style="color: Dodgerblue;"></i>&emsp;<a href="/sampleportal/financedashboard1" class="text-secondary">Finance Dashboard 2</a></div>
  <div class="p-3"><i class="fas fa-chart-pie fa-lg" style="color: Slateblue;"></i>&emsp;<a href="/sampleportal/claimsdashboard1" class="text-secondary">Claims Dashboard 3</a></div>
</div>	
</div>
<div class="card-deck pt-2">
  <div class="card text-white bg-dark mb-3" >
    <a href="/sampleportal/salesdashboard1"><img class="card-img-top" src="{{ url_for('static', filename='images/portal-sales-final.png') }}" alt="Card image cap"></a>
    <div class="card-body">
      <h5 class="card-title">Sales Dashboards</h5>
      <p class="card-text"> Sales Summary Dashboard with the information needed to make business decisions.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last viewed 3 mins ago</small>
    </div>
  </div>
  <div class="card text-white bg-dark mb-3">
    <a href="/sampleportal/financedashboard1"><img class="card-img-top" src="{{ url_for('static', filename='images/portal-finance-final.png') }}" alt="Card image cap"></a>
    <div class="card-body">
      <h5 class="card-title">Finance Dashboards</h5>
      <p class="card-text">Finance Summary Dashboard with the information needed to make business decisions.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last viewed 3 days ago</small>
    </div>
  </div>
  <div class="card text-white bg-dark mb-3">
    <a href="/sampleportal/claimsdashboard1"><img class="card-img-top" src="{{ url_for('static', filename='images/portal-claims-final.png') }}" alt="Card image cap"></a>
    <div class="card-body">
      <h5 class="card-title">Claims Dashboards</h5>
      <p class="card-text">Claims Summary Dashboard with the information needed to make business decisions.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last viewed  16 mins ago</small>
    </div>
  </div>
</div>
<div class="bg-light p-3">
<p class="lead text-dark text-left border-bottom" style="font-size:25px;">Recently Viewed</p>
<div class="d-flex justify-content-between align-items-center lead">
  <div class="p-3"><i class="fas fa-chart-pie fa-lg" style="color: Tomato;"></i>&emsp;<a href="/sampleportal/salesdashboard1" class="text-secondary">Sales Dashboard 1</a></div>
  <div class="p-3"><i class="fas fa-chart-area fa-lg" style="color: Dodgerblue;"></i>&emsp;<a href="/sampleportal/financedashboard1" class="text-secondary">Finance Dashboard 2</a></div>
  <div class="p-3"><i class="fas fa-chart-pie fa-lg" style="color: Slateblue;"></i>&emsp;<a href="/sampleportal/claimsdashboard1" class="text-secondary">Claims Dashboard 3</a></div>
</div>	
</div>

</div>

{% else %}
<div class="container-fluid py-5 px-5">
	<div class="row border-bottom border-info">
	<div class="col-md-4">
		<p class="lead text-dark text-uppercase"><strong> {{ project }} : <span class="text-info">{{ dashname }}</span> </strong></p>
	</div>
 	<!--<div class="col-md-6 d-flex pb-3 justify-content-end">
 	<div class="d-inline px-2">
	<i class="fas fa-star " data-toggle="tooltip" data-placement="top" title="Add to Favourites" style="cursor:pointer;color:{% if fav=='Y': %}ORANGE{% endif %}" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-sync-alt" onclick="refreshData();" data-toggle="tooltip" data-placement="top" title="Refresh Data" style="cursor:pointer;" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-undo" onclick="revertAll();"  data-toggle="tooltip" data-placement="top" title="Revert Changes" style="cursor:pointer;" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-file-pdf" style="cursor:pointer;" onclick="exportToPDF();"  data-toggle="tooltip" data-placement="top" title="Export PDF" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-file-image" style="cursor:pointer;" onclick="exportImage();"  data-toggle="tooltip" data-placement="top" title="Export Image" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-table" style="cursor:pointer;" onclick="exportCrossTab();" data-toggle="tooltip" data-placement="top" title="Export CrossTab" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-file-download" style="cursor:pointer;" onclick="exportData();" data-toggle="tooltip" data-placement="top" title="Export Data" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-download" onclick="downloadWorkbook();" data-toggle="tooltip" data-placement="top" title="Download Workbook" style="cursor:pointer;" onmouseover=""></i>
	</div>
 	<div class="d-inline px-2">
	<i class="fas fa-share-alt" onclick="shareUrl();" data-toggle="tooltip" data-placement="top" title="Share Workbook" style="cursor:pointer;" onmouseover=""></i>
	</div>
	</div>-->
        <!--- This is testing -->
 	<div class="col-md-8 d-flex pb-3 justify-content-end">
<div class="btn-group btn-group-sm px-1" role="group" aria-label="RefreshRevert">
  <button type="button" class="btn btn-secondary" onclick="refreshData();" data-toggle="tooltip" data-placement="top" title="Refresh Data" style="cursor:pointer;" onmouseover=""><i class="fas fa-sync-alt"></i></button>
  <button type="button" class="btn btn-secondary" onclick="revertAll();"  data-toggle="tooltip" data-placement="top" title="Revert Changes" style="cursor:pointer;" onmouseover=""><i class="fas fa-undo"></i></button>
  <button type="button" class="btn btn-secondary" onclick="querySheets();"  data-toggle="tooltip" data-placement="top" title="Worksheets" style="cursor:pointer;" onmouseover=""><i class="fas fa-folder-open"></i></button>
</div>

<div class="btn-group btn-group-sm px-1" role="group" aria-label="Export">
  <!--<button type="button" class="btn btn-warning" disabled><strong>Export</strong></button>-->
  <button type="button" class="btn btn-secondary" style="cursor:pointer;" onclick="exportData();" data-toggle="tooltip" data-placement="top" title="Export Data" onmouseover=""><i class="fas fa-file-download"></i></button>
  <button type="button" class="btn btn-secondary" style="cursor:pointer;" onclick="exportCrossTab();" data-toggle="tooltip" data-placement="top" title="Export CrossTab" onmouseover=""><i class="fas fa-table"></i></button>
  <button type="button" class="btn btn-secondary"  style="cursor:pointer;" onclick="exportImage();"  data-toggle="tooltip" data-placement="top" title="Export Image" onmouseover=""><i class="fas fa-file-image"></i></button>
  <button type="button" class="btn btn-secondary" style="cursor:pointer;" onclick="exportToPDF();"  data-toggle="tooltip" data-placement="top" title="Export PDF" onmouseover=""><i class="fas fa-file-pdf"></i></button>
  <button type="button" class="btn btn-secondary" onclick="downloadWorkbook();" data-toggle="tooltip" data-placement="top" title="Download Workbook" style="cursor:pointer;" onmouseover=""><i class="fas fa-download"></i></button>
</div>

<div class="btn-group btn-group-sm px-1" role="group" aria-label="Fav/Share">
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Add to Favourites" style="cursor:pointer;color:{% if fav=='Y': %}ORANGE{% endif %}" onmouseover=""><i class="fas fa-star"></i></button>
  <button type="button" class="btn btn-secondary" onclick="shareUrl();" data-toggle="tooltip" data-placement="top" title="Share Workbook" style="cursor:pointer;" onmouseover=""><i class="fas fa-share-alt"></i></button>
</div>
	</div>

	</div>
	
	<div class="row">
        <div id="vizContainer" style="width:100%; height:100%;"></div>
	</div>
</div>
<script type="text/javascript">
            var viz,workbook,activeSheet;	
	    var select = document.getElementById("selectds");
            var wsselect = document.getElementById("selectws");
            function initViz() {
		var containerDiv = document.getElementById("vizContainer"),
                    url = "{{ url }}",
                    options = {
                        hideTabs: true,
                        hideToolbar: true,
	    		onFirstInteractive: function () {
      				workbook = viz.getWorkbook();
      				activeSheet = workbook.getActiveSheet();
				if (activeSheet.getWroksheets) {
                                        published_sheets = activeSheet.getWorksheets();
                                        for (i=0;i<published_sheets.length;i++){
                                                wsheet = published_sheets[i].getName();
                                                var wsel = document.createElement("option");
                                                wsel.className = 'dropdown-item';
                                                wsel.textContent = wsheet;
                                                wsel.value = wsheet;
                                                wsselect.add(wsel);
                                                published_sheets[i].getDataSourcesAsync().then(
                                                        function(e){
                                                                for(j=0;j<e.length;j++){
                                                                        ds_name = e[j].getName();
                                                                        present = '';
                                                                        if (select.length > 0){
                                                                                for (i=0;i<select.lenght;i++){
                                                                                        if (select.options[i].value == ds_name){
                                                                                                var present = 'Y';
                                                                                        }
                                                                                }
                                                                        }
                                                                        if (present == ''){
                                                                                var el=document.createElement("option");
                                                                                el.textContent = ds_name;
                                                                                el.value = ds_name;
                                                                                select.add(el);
                                                                        }
                                                                }
                                                        }
                                                );

                                        }
				}
    			}
                    };
                viz = new tableau.Viz(containerDiv, url, options);
		workbook = viz.getWorkbook();
            }

	    function exportToPDF() {
            	viz.showExportPDFDialog();
        	}
	    function exportImage() {
		  viz.showExportImageDialog();
		}   


	    function exportCrossTab() {
  		viz.showExportCrossTabDialog();
		}   


	    function exportData() {
  		viz.showExportDataDialog();
		}      


	    function revertAll() {
  		viz.revertAllAsync();
		} 

	    function refreshData() {
  		viz.refreshDataAsync();
		} 

	    function shareUrl() {
  		viz.showShareDialog();
		} 

	    function downloadWorkbook() {
  		viz.showDownloadWorkbookDialog();
		} 

	    function getSheetsAlertText(sheets){
                var alertText = [];
                for (var i=0,len=sheets.length;i<len;i++){
                        var sheet = sheets[i];
                        alertText.push(sheet.getName());
                        alertText.push("\n");

                }
                return alertText.join("");

            }
	    function querySheets() {
  		var sheets = workbook.getPublishedSheetsInfo();
  		var text = getSheetsAlertText(sheets);
  		text = "Sheets in the workbook:\n" + text;
  		alert(text);
		}
	    function queryDashboard() {
 		 workbook.activateSheetAsync("GDP per Capita Dashboard")
    		.then(function (dashboard) {
      		var worksheets = dashboard.getWorksheets();
      		var text = getSheetsAlertText(worksheets);
     	 	text = "Worksheets in the dashboard:\n" + text;
  		alert(text);
    		});
		}
        </script>
{% endif %}
{% endblock %}