<?= $this->extend('Modules\Admin\Views\index'); ?>
<?= $this->section('content');?>
<div class="container-fluid">
    <div class="row mb-md-3">
        <div class="col">
            <h4><?= $singleMember->fname.' '.$singleMember->lname;?></h4>
            <nav aria-label="breadcrumb"><small>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="<?= base_url('administrator') ?>">Home</a></li>
                    <li class="breadcrumb-item"><a href="<?= base_url('administrator/members') ?>">Members</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><?= esc($bcrumb) ?></li>
                </ol></small>
            </nav>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col">
            <?php if(session()->getTempdata('success')): ?>
                <div class="alert alert-success" role="alert"><?= session()->getTempdata('success');?></div>
            <?php endif;?>
            <?php if(session()->getTempdata('error')): ?>
                <div class="alert alert-danger" role="alert"><?= session()->getTempdata('error');?></div>
            <?php endif;?>
            <?php if(isset($validation)): ?>
                <div class="alert alert-danger"><?= $validation->listErrors()?></div>
            <?php endif;?>
        </div>
    </div>

    <!-- Member Profile Header -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <img src="<?= $singleMember->photo ?? base_url('assets/images/profile-holder.png') ?>" 
                         class="rounded-circle mb-3" style="height:150px;width:150px;object-fit:contain" alt="Profile Picture">
                    <h5 class="card-title fw-bold mb-3"><?= $singleMember->fname.' '.$singleMember->lname ?></h5>
                    <p>
                        <span>Entity Type:</span>
                        <span class="badge bg-primary"><?= $singleMember->entity_name ?></span>
                    </p>
                    <p class="text-muted"><small>Client since: <u><?= date('M Y', strtotime($singleMember->created_at)) ?></u></small></p>
                    
                    <div class="d-flex justify-content-center gap-2 mb-3">
                        <button class="btn btn-sm btn-outline-primary" onclick="edit_client(<?= $singleMember->id; ?>)">
                            <i class="bi bi-pencil"></i> Edit
                        </button>
                        <a href="#" class="btn btn-sm btn-outline-secondary">
                            <i class="bi bi-envelope"></i> Message
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Quick Stats -->
            <div class="card mt-3">
                <div class="card-body" >
                    <h6 class="card-subtitle mb-3 text-muted">Quick Contacts</h6>
                    <div class="table-responsive">
                        <table class="table table-sm" style="font-size:12px;">
                            <tr>
                                <th><i class="bi bi-envelope-fill"></i></th>
                                <td><?= $singleMember->email;?></td>
                            </tr>
                            <tr>
                                <th><i class="bi bi-telephone-fill"></i></th>
                                <td><?= $singleMember->phone;?></td>
                            </tr>
                            <tr>
                                <th><i class="bi bi-geo-alt-fill"></i></th>
                                <td><?= $singleMember->address;?></td>
                            </tr>
                            <tr>
                                <th><i class="bi bi-globe-europe-africa"></i></th>
                                <td><a href="<?= $singleMember->website;?>" target="_blank"><?= $singleMember->website;?></a></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <?= $singleMember->city_name;?>, 
                                    <?= $singleMember->state_name;?>,
                                    <?= $singleMember->country_name;?>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <!-- Tab Navigation -->
            <ul class="nav nav-tabs" id="memberTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link " id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Client Details</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="project-tab" data-bs-toggle="tab" data-bs-target="#project" type="button" role="tab">Projects</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="approval-tab" data-bs-toggle="tab" data-bs-target="#approval" type="button" role="tab">Approval Status</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="carbon-tab" data-bs-toggle="tab" data-bs-target="#carbon" type="button" role="tab">Carbon Data</button>
                </li>
                <li class="nav-item" role="presentation"> 
                    <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location-tab-pane"  type="button" role="tab">Location</button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="memberTabsContent">
                <!-- Profile Tab -->
                <div class="tab-pane fade  " id="profile" role="tabpanel">
                     <?= view('Modules\Redd\Views\single\partials\client-profile-tab') ?>
                </div>
                <!-- project Tab -->
                <div class="tab-pane fade show active" id="project" role="tabpanel">
                     <?= view('Modules\Redd\Views\single\partials\client-project-tab') ?>
                </div>
                <!-- Approval Tab -->
                <div class="tab-pane fade" id="approval" role="tabpanel">
                     <?= view('Modules\Redd\Views\single\partials\client-project-status-tab') ?>
                </div>
                <!-- Carbon Tab -->
                <div class="tab-pane fade" id="carbon" role="tabpanel">
                    <?= view('Modules\Redd\Views\single\partials\client-project-carbon-data-tab') ?>
                </div>

                <!-- Map Location Tab -->
                <div class="tab-pane fade" id="location-tab-pane" role="tabpanel"  tabindex="0">
                     <?= view('Modules\Redd\Views\single\partials\client-location-tab') ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
<?= view('Modules\Redd\Views\modals\edit-clientModal') ?>
<?= view('Modules\Redd\Views\modals\edit-projectModal') ?>
<?= view('Modules\Redd\Views\single\\modals\carbon-dataModal') ?>


<!-- JS -->
<script src="<?= base_url();?>assets/js/modules/members.js"></script>
<script src="<?= base_url();?>assets/js/countryselection.js"></script>

<?= $this->endSection();?>