<style>
.space-between {
    justify-content: space-evenly;
}
</style>
<?php
$SurveyorFilterArray = array();
$clientAccess= array();

$itemData=array();
$stmt = $GLOBALS['con']->prepare("SELECT DISTINCT `client_id` FROM `surveyor_assignments` WHERE `surveyor`=? ")or die(mysqli_error($GLOBALS['con']));
$stmt->bind_param('i',$_REQUEST['id']);$stmt->execute();$ic=$stmt->get_result();$stmt->close();

// Get assignments
$stmt = $GLOBALS['con']->prepare("SELECT DISTINCT `client_id` FROM `surveyor_assignments` WHERE `surveyor` = ?  AND `status` = '1'");
$stmt->bind_param("i", $_SESSION['id']);
$stmt->execute();
$ac = $stmt->get_result();
$stmt->close();

while ($ds = mysqli_fetch_array($ac)) {
    $SurveyorFilterArray[] = $ds['client_id'];
}

$accessQuery = "SELECT clientnumbers FROM admin_access WHERE admin_id = ?";
$stmt = $con->prepare($accessQuery);
$stmt->bind_param('i', $_SESSION['userid']);
$stmt->execute();
$accessResult = $stmt->get_result()->fetch_assoc();
$clientAccessArray = json_decode($accessResult['clientnumbers']);

foreach($clientAccessArray as $client){
    $clientAccess[]=$client;

}

while($id=mysqli_fetch_array($ic)){$itemData[]=$id;}?>


<div class="row">
    <div class="col-12 col-md-3 order-md-2 order-1 text-end mb-3">
        <a data-mdb-tooltip-init data-mdb-placement="bottom" data-mdb-trigger="hover" totitle="hover" href="index.php?t=includes/master&p=surveyor.php&id=<?=$_REQUEST['id']?>&view=assign" class="btn btn-secondary noprint me-2"
           aria-label="Manage access"
           data-mdb-original-title="Manage access"><i class="fad fa-arrow-right-to-arc"></i> Manage Access</a>
    </div>
    <div class="col-12 col-md-9 order-md-1 order-2 mb-3">
        <div class="note note-secondary mb-3">
            Select directly from the list below to view all assets assigned to the surveyor or use the search box to quickly find them
        </div>
    </div>
</div>


<div class="d-flex justify-content-between align-items-center mb-3">
    <h5>Assignments</h5>
    <input type="text" id="assignmentSearch" class="form-control w-50" placeholder="Search assignments...">
</div>

<div id="cData" class="container-fluid" style="max-height:65vh; overflow: auto;">
    <div class="row" id="assignmentContainer">
        <?php foreach($itemData as $data){
             if(!in_array($data['client_id'],$SurveyorFilterArray) && $_SESSION['access']==3){}
             elseif(!in_array($data['client_id'],$clientAccess) && $_SESSION['access']==1){}
             else{
            ?>
        <div class="col-12 col-md-6 col-lg-4 mb-3 assignment-item">
            <a id="B<?= $data['client_id']?>"
               href="index.php?t=includes/master&p=surveyor.php&surveyor=<?= $_REQUEST['id']?>&client_id=<?= $data['client_id']?>&view=asset&filter=<?= getClientName($data['client_id'],'name')?>"
               class="btn btn-secondary btn-block text-truncate">
                <?= getClientName($data['client_id'],'name')?>
            </a>
        </div>
        <?php }} ?>
    </div>
</div>

<div class="d-flex justify-content-center mt-3">
    <button id="loadMore" class="btn btn-primary">Load More</button>
</div>

<script>
// Pagination logic to load more items
let itemsPerPage = 10; // Number of items to show initially
let currentPage = 1;

function showItems() {
    let items = document.querySelectorAll('.assignment-item');
    items.forEach((item, index) => {
        item.style.display = (index < itemsPerPage * currentPage) ? 'block' : 'none';
    });

    // Hide load more button if all items are shown
    if (currentPage * itemsPerPage >= items.length) {
        document.getElementById('loadMore').style.display = 'none';
    }
}

// Show initial items
showItems();

// Load more button functionality
document.getElementById('loadMore').addEventListener('click', function() {
    currentPage++;
    showItems();
});

// Search functionality
document.getElementById('assignmentSearch').addEventListener('input', function() {
    let searchValue = this.value.toLowerCase();
    let items = document.querySelectorAll('.assignment-item');

    items.forEach(item => {
        let itemName = item.querySelector('a').textContent.toLowerCase();
        if (itemName.includes(searchValue)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
});
</script>

<script>
$('#c-select').on('change', function() {
    var sel = $('#c-select').find(':selected').val();

    sel = sel.replace('R', '');
    $('.item').removeClass('btn-info')
    $('.item').addClass('btn-secondary')
    $('#B' + sel).removeClass('btn-secondary')
    $('#B' + sel).addClass('btn-info')
    $('#cData').scrollTo('#B' + sel)
})

document.getElementById('navBox').innerHTML =
    '<li class="breadcrumb-item"><a href="index.php?t=includes/master&p=surveyor.php&view=list">Surveyor</a><i class="fad fa-angle-double-right mx-2 mt-1"" aria-hidden="true"></i></li><li class="breadcrumb-item active"><?= getSurveyorName2($_REQUEST['id'])?>: Assigned Client List</li>';
</script>