{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Test Plan Browser" %}{% endblock %}

{% block contents %}
<div class="container-fluid" id="test-browser-container">
    {% include "tcms_test_browser/_nav.html" %}
    <!-- Statistics Dashboard -->
    <div class="row" id="stats-panel">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title pull-left">
                        <span class="pficon pficon-trend-up"></span>
                        {% trans "Statistics Dashboard" %}
                    </h3>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fa fa-download"></span> {% trans "Export" %} <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="#" class="btn-export" data-format="csv"><span class="fa fa-file-text-o"></span> {% trans "Export CSV" %}</a></li>
                                <li><a href="#" class="btn-export" data-format="excel"><span class="fa fa-file-excel-o"></span> {% trans "Export Excel" %}</a></li>
                                <li><a href="#" class="btn-export" data-format="docx"><span class="fa fa-file-word-o"></span> {% trans "Export Word" %}</a></li>
                                <li><a href="#" class="btn-export" data-format="pdf"><span class="fa fa-file-pdf-o"></span> {% trans "Export PDF" %}</a></li>
                            </ul>
                        </div>
                        <button class="btn btn-link btn-xs" id="btn-toggle-stats" type="button">
                            <span class="fa fa-chevron-up"></span>
                        </button>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-body" id="stats-body">
                    <div class="row">
                        <!-- Total Count -->
                        <div class="col-sm-2 stat-card text-center">
                            <div class="stat-total">
                                <span class="pficon pficon-catalog" style="font-size: 24px; color: #0088ce;"></span>
                                <div id="stat-total-count" class="stat-number">--</div>
                                <div class="stat-label">{% trans "Total Test Plans" %}</div>
                            </div>
                        </div>
                        <!-- By Type Donut -->
                        <div class="col-sm-3 stat-card">
                            <strong class="stat-chart-title">{% trans "By Type" %}</strong>
                            <div id="chart-type" class="stat-chart-container"></div>
                        </div>
                        <!-- Active vs Inactive Progress -->
                        <div class="col-sm-7 stat-card">
                            <strong class="stat-chart-title">{% trans "Active vs Inactive" %}</strong>
                            <div class="automation-stats">
                                <div id="active-percent" class="stat-number" style="font-size: 28px;">--%</div>
                                <div class="progress" style="margin-top: 10px;">
                                    <div id="active-bar" class="progress-bar progress-bar-success" role="progressbar"
                                         style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                                    <div id="inactive-bar" class="progress-bar progress-bar-danger" role="progressbar"
                                         style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="small text-muted">
                                    <span class="label label-success" id="active-count">0</span> {% trans "active" %}
                                    <span class="label label-danger" id="inactive-count" style="margin-left: 5px;">0</span> {% trans "inactive" %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- By Product Bar (own row) -->
                    <div class="row">
                        <div class="col-sm-12 stat-card" style="min-height: auto;">
                            <strong class="stat-chart-title">{% trans "By Product" %}</strong>
                            <div id="chart-product" class="stat-chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Browser Panels -->
    <div class="row" id="browser-row">
        <!-- Left Panel: Tree Navigation -->
        <div class="col-md-4 col-lg-3" id="tree-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="pficon pficon-folder-open"></span>
                        {% trans "Test Plans" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- Search/Filter -->
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text"
                                   class="form-control"
                                   id="tree-search"
                                   placeholder="{% trans 'Search test plans...' %}">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="btn-search">
                                    <span class="fa fa-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="checkbox-inline tree-select-all-label">
                            <input type="checkbox" id="select-all-tree"> {% trans "Select All" %}
                        </label>
                        <span class="badge selection-count" id="selection-count" style="display: none;">0</span>
                    </div>

                    <!-- Filter Options -->
                    <div class="form-group">
                        <select id="filter-product" class="form-control">
                            <option value="">{% trans "All Products" %}</option>
                            {% for product in tree_data %}
                            <option value="{{ product.id }}">{{ product.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Tree View -->
                    <div id="tree-view" class="list-group tree-list-view-pf">
                        {% for product in tree_data %}
                        <div class="tree-node product-node" data-product-id="{{ product.id }}">
                            <div class="list-group-item tree-item" data-type="product" data-id="{{ product.id }}">
                                <span class="tree-toggle fa fa-angle-right"></span>
                                <span class="pficon pficon-folder-close"></span>
                                <span class="tree-label">{{ product.name }}</span>
                                <span class="badge">{{ product.count }}</span>
                            </div>
                            <div class="tree-children" style="display: none;">
                                {% for plan in product.plans %}
                                <div class="tree-node plan-node">
                                    <div class="list-group-item tree-item plan-item" data-type="plan" data-id="{{ plan.id }}">
                                        <input type="checkbox" class="tree-checkbox" data-id="{{ plan.id }}" title="Select for export">&nbsp;<span class="pficon pficon-catalog"></span>
                                        <span class="tree-label">{{ plan.name }}</span>
                                        {% if plan.is_active %}
                                        <span class="label label-success" style="margin-left: 5px;">Active</span>
                                        {% else %}
                                        <span class="label label-danger" style="margin-left: 5px;">Inactive</span>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-muted text-center">
                            {% trans "No products found" %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Panel: Test Plan Details -->
        <div class="col-md-8 col-lg-9" id="detail-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" id="detail-title">
                        <span class="pficon pficon-catalog"></span>
                        {% trans "Test Plan Details" %}
                    </h3>
                </div>
                <div class="panel-body">
                    <!-- Placeholder when no test plan selected -->
                    <div id="detail-placeholder" class="text-center text-muted" style="padding: 50px;">
                        <span class="pficon pficon-info" style="font-size: 48px;"></span>
                        <h4>{% trans "Select a test plan from the tree" %}</h4>
                        <p>{% trans "Click on a test plan in the left panel to view its details here." %}</p>
                    </div>

                    <!-- Test Plan Detail Content -->
                    <div id="detail-content" style="display: none;">
                        <!-- Header -->
                        <div class="row">
                            <div class="col-xs-12">
                                <h2 id="plan-name" class="page-header"></h2>
                            </div>
                        </div>

                        <!-- Quick Info -->
                        <div class="row">
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "ID" %}</dt>
                                    <dd><a id="plan-id-link" href="#" target="_blank">TP-<span id="plan-id"></span></a></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Status" %}</dt>
                                    <dd><span id="plan-status" class="label label-default"></span></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Type" %}</dt>
                                    <dd><span id="plan-type"></span></dd>
                                </dl>
                            </div>
                            <div class="col-sm-6 col-md-3">
                                <dl>
                                    <dt>{% trans "Cases / Runs" %}</dt>
                                    <dd><span id="plan-counts"></span></dd>
                                </dl>
                            </div>
                        </div>

                        <hr>

                        <!-- Main Content Tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#tab-description" role="tab" data-toggle="tab">
                                    {% trans "Description" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#tab-info" role="tab" data-toggle="tab">
                                    {% trans "Information" %}
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="#tab-related" role="tab" data-toggle="tab">
                                    {% trans "Related" %}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" style="padding-top: 15px;">
                            <!-- Description Tab -->
                            <div role="tabpanel" class="tab-pane active" id="tab-description">
                                <div id="plan-text" class="markdown-content"></div>
                            </div>

                            <!-- Information Tab -->
                            <div role="tabpanel" class="tab-pane" id="tab-info">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "Product" %}</dt>
                                            <dd id="plan-product"></dd>
                                            <dt>{% trans "Version" %}</dt>
                                            <dd id="plan-version"></dd>
                                            <dt>{% trans "Type" %}</dt>
                                            <dd id="plan-type-info"></dd>
                                        </dl>
                                    </div>
                                    <div class="col-sm-6">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "Author" %}</dt>
                                            <dd id="plan-author"></dd>
                                            <dt>{% trans "Created" %}</dt>
                                            <dd id="plan-created"></dd>
                                        </dl>
                                    </div>
                                </div>
                                <div class="row" id="plan-extra-link-row" style="display: none;">
                                    <div class="col-xs-12">
                                        <dl class="dl-horizontal">
                                            <dt>{% trans "External Link" %}</dt>
                                            <dd><a id="plan-extra-link" href="#" target="_blank"></a></dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>

                            <!-- Related Tab -->
                            <div role="tabpanel" class="tab-pane" id="tab-related">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <h4>{% trans "Test Cases" %} <small id="plan-case-count"></small></h4>
                                        <table class="table table-striped table-condensed" id="plan-cases">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "ID" %}</th>
                                                    <th>{% trans "Summary" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                    <div class="col-sm-6">
                                        <h4>{% trans "Test Runs" %} <small id="plan-run-count"></small></h4>
                                        <table class="table table-striped table-condensed" id="plan-runs">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "ID" %}</th>
                                                    <th>{% trans "Summary" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row" style="margin-top: 20px;">
                            <div class="col-xs-12">
                                <a id="btn-view-full" href="#" class="btn btn-primary" target="_blank">
                                    <span class="fa fa-external-link"></span> {% trans "View Full Details" %}
                                </a>
                                <a id="btn-edit" href="#" class="btn btn-default" target="_blank">
                                    <span class="pficon pficon-edit"></span> {% trans "Edit" %}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Search Results -->
                    <div id="search-results" style="display: none;">
                        <h4>{% trans "Search Results" %}</h4>
                        <table class="table table-striped table-hover" id="search-results-table">
                            <thead>
                                <tr>
                                    <th>{% trans "ID" %}</th>
                                    <th>{% trans "Name" %}</th>
                                    <th>{% trans "Product" %}</th>
                                    <th>{% trans "Type" %}</th>
                                    <th>{% trans "Status" %}</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="chart-filter-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="chart-filter-modal-title">Filtered Results</h4>
            </div>
            <div class="modal-body">
                <div id="chart-filter-loading" class="text-center" style="display:none;">
                    <span class="spinner spinner-lg"></span> Loading...
                </div>
                <table class="table table-striped table-hover" id="chart-filter-table" style="display:none;">
                    <thead><tr id="chart-filter-thead"></tr></thead>
                    <tbody id="chart-filter-tbody"></tbody>
                </table>
                <div class="text-muted text-center" id="chart-filter-empty" style="display:none;">No results found</div>
                <nav class="text-center" id="chart-filter-pagination"></nav>
            </div>
        </div>
    </div>
</div>

{% now "U" as cache_bust %}
<link rel="stylesheet" href="{% static 'c3/c3.min.css' %}?v={{ cache_bust }}">
<link rel="stylesheet" href="{% static 'tcms_test_browser/css/browser.css' %}?v={{ cache_bust }}">
<script src="{% static 'd3/d3.min.js' %}?v={{ cache_bust }}"></script>
<script src="{% static 'c3/c3.min.js' %}?v={{ cache_bust }}"></script>
<script src="{% static 'tcms_test_browser/js/plan_browser.js' %}?v={{ cache_bust }}"></script>
{% endblock %}