{* Client area DID selection template *}
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Select Your DID Number</h3>
    </div>
    <div class="panel-body">
        {include file="$template/includes/alert.tpl" type="info" msg="Please select a DID number for your VoIP service. This number will be used for incoming calls."}
        
        <form method="post" action="{$smarty.server.PHP_SELF}">
            <input type="hidden" name="a" value="productdetails" />
            <input type="hidden" name="id" value="{$serviceid}" />
            <input type="hidden" name="modop" value="custom" />
            <input type="hidden" name="ac" value="did_selection" />
            
            <!-- Search Filters -->
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Area Code</label>
                        <select name="area_code" class="form-control" onchange="this.form.submit()">
                            <option value="">All Area Codes</option>
                            {foreach $areacodes as $code}
                                <option value="{$code.code}" {if $filters.area_code eq $code.code}selected{/if}>
                                    {$code.code} - {$code.location}
                                </option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Number Pattern</label>
                        <input type="text" name="pattern" class="form-control" value="{$filters.pattern}" placeholder="e.g., *123*">
                        <small class="help-block">Use * as wildcard</small>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div>
                            <button type="submit" class="btn btn-primary">Search</button>
                            <a href="{$smarty.server.PHP_SELF}?a=productdetails&id={$serviceid}" class="btn btn-default">Clear</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        {if $availableNumbers}
            <hr>
            <h4>Available Numbers ({$availableNumbers|count} found)</h4>
            
            <form method="post" action="{$smarty.server.PHP_SELF}">
                <input type="hidden" name="a" value="productdetails" />
                <input type="hidden" name="id" value="{$serviceid}" />
                <input type="hidden" name="modop" value="custom" />
                <input type="hidden" name="ac" value="select_did" />
                
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th width="50">Select</th>
                                <th>DID Number</th>
                                <th>Location</th>
                                <th>Type</th>
                                <th>Monthly Cost</th>
                                <th>Setup Fee</th>
                                <th>RICA Required</th>
                            </tr>
                        </thead>
                        <tbody>
                            {foreach $availableNumbers as $number}
                                <tr onclick="selectDID('{$number.did}', this)" style="cursor: pointer;">
                                    <td>
                                        <input type="radio" name="selected_did" value="{$number.did}" id="did_{$number.did}">
                                    </td>
                                    <td>
                                        <strong>{$number.did}</strong>
                                        {if $number.featured}<span class="label label-warning">Featured</span>{/if}
                                    </td>
                                    <td>{$number.location}</td>
                                    <td>
                                        <span class="label label-{if $number.type eq 'local'}primary{else}default{/if}">
                                            {$number.type|ucfirst}
                                        </span>
                                    </td>
                                    <td><strong>R{$number.monthly_cost}</strong></td>
                                    <td>
                                        {if $number.setup_fee > 0}
                                            R{$number.setup_fee}
                                        {else}
                                            <span class="text-success">Free</span>
                                        {/if}
                                    </td>
                                    <td>
                                        {if $number.rica_required}
                                            <span class="label label-warning">Yes</span>
                                        {else}
                                            <span class="label label-success">No</span>
                                        {/if}
                                    </td>
                                </tr>
                            {/foreach}
                        </tbody>
                    </table>
                </div>

                <div id="selectedSummary" class="alert alert-success" style="display: none;">
                    <h4>Selected: <span id="selectedNumber"></span></h4>
                    <p><strong>Monthly Cost:</strong> R<span id="selectedCost"></span></p>
                    <div id="ricaWarning" class="alert alert-warning" style="display: none;">
                        <strong>RICA Compliance Required:</strong> You will need to upload identification documents.
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success btn-lg" id="selectBtn" disabled>
                        <i class="fa fa-check"></i> Select This Number
                    </button>
                    <a href="{$smarty.server.PHP_SELF}?a=productdetails&id={$serviceid}" class="btn btn-default btn-lg">
                        <i class="fa fa-arrow-left"></i> Back to Service
                    </a>
                </div>
            </form>
        {else}
            <div class="alert alert-warning">
                <h4><i class="fa fa-exclamation-triangle"></i> No Numbers Available</h4>
                <p>No DID numbers are currently available matching your criteria. Please try:</p>
                <ul>
                    <li>Selecting a different area code</li>
                    <li>Removing or changing the number pattern</li>
                    <li>Contacting support for assistance</li>
                </ul>
            </div>
        {/if}
    </div>
</div>

{if $availableNumbers}
<!-- DID Information Panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" href="#didInfo">
                <i class="fa fa-info-circle"></i> DID Number Information
            </a>
        </h4>
    </div>
    <div id="didInfo" class="panel-collapse collapse">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <h5>What is a DID Number?</h5>
                    <p>A DID (Direct Inward Dialing) number allows external callers to reach your extension directly without going through a main number.</p>

                    <h5>Number Types:</h5>
                    <ul>
                        <li><strong>Local:</strong> Geographic numbers tied to specific areas</li>
                        <li><strong>National:</strong> Non-geographic numbers</li>
                        <li><strong>Toll-Free:</strong> Free for callers to dial</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h5>RICA Compliance:</h5>
                    <p>In South Africa, DID numbers require RICA verification with valid identification documents.</p>
                    
                    <h5>Required Documents:</h5>
                    <ul>
                        <li>Valid South African ID or Passport</li>
                        <li>Proof of residence (not older than 3 months)</li>
                        <li>Business registration (for company accounts)</li>
                    </ul>

                    <div class="alert alert-info">
                        <small>
                            <i class="fa fa-clock-o"></i> 
                            Verification typically takes 1-3 business days.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/if}

<script>
var selectedDID = null;

function selectDID(did, row) {
    // Clear previous selections
    $('tr').removeClass('info');
    $('input[name="selected_did"]').prop('checked', false);
    
    // Select current row
    $(row).addClass('info');
    $('#did_' + did).prop('checked', true);
    
    // Get row data
    var cells = $(row).find('td');
    selectedDID = {
        number: did,
        cost: $(cells[4]).find('strong').text().replace('R', ''),
        ricaRequired: $(cells[6]).find('.label-warning').length > 0
    };
    
    // Update summary
    $('#selectedNumber').text(selectedDID.number);
    $('#selectedCost').text(selectedDID.cost);
    
    if (selectedDID.ricaRequired) {
        $('#ricaWarning').show();
    } else {
        $('#ricaWarning').hide();
    }
    
    $('#selectedSummary').show();
    $('#selectBtn').prop('disabled', false);
}

$(document).ready(function() {
    $('form').on('submit', function(e) {
        if (!selectedDID && $(this).find('input[name="ac"]').val() === 'select_did') {
            e.preventDefault();
            alert('Please select a DID number first.');
            return false;
        }
        
        if (selectedDID && selectedDID.ricaRequired) {
            if (!confirm('This number requires RICA verification. You will need to upload identification documents. Continue?')) {
                e.preventDefault();
                return false;
            }
        }
    });
});
</script>

<style>
tr.info {
    background-color: #d9edf7 !important;
}
tr:hover {
    background-color: #f5f5f5;
}
</style>