<?php
// $config is available from showPage()
$pageSize = isset($config['page_size']) ? (int)$config['page_size'] : 50;
$defaultRange = isset($config['default_range']) ? (int)$config['default_range'] : 30;
?>
<div id="customcdr-wrapper" data-page-size="<?php echo $pageSize; ?>" data-default-range="<?php echo $defaultRange; ?>">

    <!-- Filter Panel -->
    <div class="cdr-filters">
        <div class="row">
            <div class="col-md-12">
                <label>Date Range</label>
                <div class="date-presets">
                    <button type="button" class="btn btn-xs btn-default" data-preset="today">Today</button>
                    <button type="button" class="btn btn-xs btn-default" data-preset="yesterday">Yesterday</button>
                    <button type="button" class="btn btn-xs btn-default" data-preset="7d">Last 7 Days</button>
                    <button type="button" class="btn btn-xs btn-default active" data-preset="30d">Last 30 Days</button>
                    <button type="button" class="btn btn-xs btn-default" data-preset="month">This Month</button>
                    <button type="button" class="btn btn-xs btn-default" data-preset="lastmonth">Last Month</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label>From</label>
                    <input type="datetime-local" class="form-control" id="cdr-date-from">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>To</label>
                    <input type="datetime-local" class="form-control" id="cdr-date-to">
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <label>Extension</label>
                    <input type="text" class="form-control" id="cdr-extension" list="cdr-extension-list" placeholder="e.g. 1001" autocomplete="off">
                    <datalist id="cdr-extension-list"></datalist>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>DID</label>
                    <input type="text" class="form-control" id="cdr-did" list="cdr-did-list" placeholder="e.g. 5551234" autocomplete="off">
                    <datalist id="cdr-did-list"></datalist>
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <label>Direction</label>
                    <select class="form-control" id="cdr-direction">
                        <option value="all">All</option>
                        <option value="inbound">Inbound</option>
                        <option value="outbound">Outbound</option>
                        <option value="internal">Internal</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Disposition</label>
                    <select class="form-control" id="cdr-disposition">
                        <option value="all">All</option>
                        <option value="ANSWERED">Answered</option>
                        <option value="NO ANSWER">No Answer</option>
                        <option value="BUSY">Busy</option>
                        <option value="FAILED">Failed</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Search</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="cdr-search" placeholder="Any field...">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-primary" id="cdr-btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button type="button" class="btn btn-default btn-sm" id="cdr-btn-reset">
                    <i class="fa fa-refresh"></i> Reset Filters
                </button>
            </div>
        </div>
    </div>

    <!-- Stats Bar -->
    <div class="cdr-stats">
        <div class="row">
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <span class="stat-value" id="stat-total">0</span>
                        <span class="stat-label">Total Calls</span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div class="panel panel-success">
                    <div class="panel-body">
                        <span class="stat-value" id="stat-answered">0</span>
                        <span class="stat-label">Answered</span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div class="panel panel-warning">
                    <div class="panel-body">
                        <span class="stat-value" id="stat-noanswer">0</span>
                        <span class="stat-label">No Answer</span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div class="panel panel-danger">
                    <div class="panel-body">
                        <span class="stat-value" id="stat-busy">0</span>
                        <span class="stat-label">Busy</span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <span class="stat-value" id="stat-failed">0</span>
                        <span class="stat-label">Failed</span>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div class="panel panel-info">
                    <div class="panel-body">
                        <span class="stat-value" id="stat-avg-duration">0s</span>
                        <span class="stat-label">Avg Duration</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toolbar -->
    <div class="cdr-toolbar">
        <button type="button" class="btn btn-sm btn-success" id="cdr-btn-csv">
            <i class="fa fa-download"></i> CSV Export
        </button>
        <button type="button" class="btn btn-sm btn-default" id="cdr-btn-print">
            <i class="fa fa-print"></i> Print Report
        </button>
        <span class="text-muted" id="cdr-result-count" style="margin-left: 10px;"></span>
    </div>

    <!-- Charts -->
    <div class="cdr-charts">
        <div class="row">
            <div class="col-md-8">
                <div class="chart-container">
                    <h4>Call Volume by Day</h4>
                    <canvas id="chart-volume"></canvas>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-container">
                    <h4>Disposition</h4>
                    <canvas id="chart-disposition"></canvas>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="chart-container">
                    <h4>Top Extensions</h4>
                    <canvas id="chart-extensions"></canvas>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-container">
                    <h4>Top DIDs</h4>
                    <canvas id="chart-dids"></canvas>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-container">
                    <h4>Hourly Distribution</h4>
                    <canvas id="chart-hourly"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- CDR Table -->
    <div class="cdr-table-wrapper">
        <table class="table table-striped table-condensed table-hover" id="cdr-table">
            <thead>
                <tr>
                    <th data-sort="calldate">Date <span class="sort-icon active">&#9660;</span></th>
                    <th data-sort="src">Source <span class="sort-icon"></span></th>
                    <th data-sort="dst">Destination <span class="sort-icon"></span></th>
                    <th data-sort="did">DID <span class="sort-icon"></span></th>
                    <th data-sort="direction">Direction <span class="sort-icon"></span></th>
                    <th data-sort="duration">Duration <span class="sort-icon"></span></th>
                    <th data-sort="billsec">Billable <span class="sort-icon"></span></th>
                    <th data-sort="disposition">Disposition <span class="sort-icon"></span></th>
                    <th>Recording</th>
                </tr>
            </thead>
            <tbody id="cdr-tbody">
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="cdr-pagination">
        <nav>
            <ul class="pagination" id="cdr-pagination">
            </ul>
        </nav>
        <div class="page-jump" id="cdr-page-jump" style="display:none;">
            <span>Go to page:</span>
            <input type="number" class="form-control input-sm" id="cdr-page-input" min="1" value="1">
            <button type="button" class="btn btn-sm btn-default" id="cdr-page-go">Go</button>
        </div>
    </div>

</div>

<!-- Recording Player Modal -->
<div class="modal fade" id="recording-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Call Recording</h4>
            </div>
            <div class="modal-body text-center">
                <p id="recording-info" class="text-muted" style="font-size:12px;margin-bottom:8px;word-break:break-all;"></p>
                <audio id="recording-player" controls style="width:100%;"></audio>
            </div>
            <div class="modal-footer">
                <a id="recording-download" class="btn btn-sm btn-primary" href="#" download>
                    <i class="fa fa-download"></i> Download
                </a>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="modules/customcdr/assets/css/customcdr.css">
<script src="modules/customcdr/assets/js/chart.min.js"></script>
<script src="modules/customcdr/assets/js/customcdr.js"></script>
