<?= $this->extend('layouts/enterprise') ?>

<?= $this->section('styles') ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
<?= $this->endSection() ?>

<?= $this->section('content') ?>

<?php
$markers = [];
foreach ($locations as $loc) {
    if (empty($loc['latitude']) || empty($loc['longitude'])) {
        continue;
    }
    $markers[] = [
        'lat'   => $loc['latitude'],
        'lng'   => $loc['longitude'],
        'title' => '[Location] ' . ($loc['name'] ?? ''),
    ];
}
foreach ($vehicles as $veh) {
    if (empty($veh['latitude']) || empty($veh['longitude'])) {
        continue;
    }
    $markers[] = [
        'lat'   => $veh['latitude'],
        'lng'   => $veh['longitude'],
        'title' => '[Vehicle] ' . ($veh['registration_number'] ?? $veh['number'] ?? ''),
    ];
}
$mapMarkersJson = json_encode($markers, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
?>

<?= view('partials/workspace_hero', [
    'workspaceCrumbPill'    => 'Transport',
    'workspaceCrumbCurrent' => 'Fleet Map',
    'workspaceTitle'        => 'Fleet Map',
    'workspaceDesc'         => 'Live view of active locations and vehicles with GPS coordinates.',
    'workspaceAction'       => [
        'href'  => base_url('transport/maps/settings'),
        'label' => 'Map Settings',
        'icon'  => 'fa-solid fa-gear',
    ],
]) ?>

<div class="row g-3 mb-4">
    <div class="col-md-4">
        <article class="enterprise-kpi-card">
            <div class="enterprise-kpi-header">
                <span class="enterprise-kpi-label">Locations on map</span>
                <span class="enterprise-kpi-icon"><i class="fa-solid fa-map-location-dot"></i></span>
            </div>
            <div class="enterprise-kpi-value"><?= count($locations) ?></div>
        </article>
    </div>
    <div class="col-md-4">
        <article class="enterprise-kpi-card">
            <div class="enterprise-kpi-header">
                <span class="enterprise-kpi-label">Active vehicles tracked</span>
                <span class="enterprise-kpi-icon"><i class="fa-solid fa-truck"></i></span>
            </div>
            <div class="enterprise-kpi-value"><?= count($vehicles) ?></div>
        </article>
    </div>
    <div class="col-md-4">
        <article class="enterprise-kpi-card">
            <div class="enterprise-kpi-header">
                <span class="enterprise-kpi-label">Map provider</span>
                <span class="enterprise-kpi-icon"><i class="fa-solid fa-layer-group"></i></span>
            </div>
            <div class="enterprise-kpi-value" style="font-size:1.1rem;">
                <?= esc(ucfirst($mapSettings['default_provider'] ?? 'openstreetmap')) ?>
            </div>
        </article>
    </div>
</div>

<article class="enterprise-settings-card">
    <div class="enterprise-settings-card__head">
        <i class="fa-solid fa-map"></i>
        <h2 class="enterprise-settings-card__title">Fleet Overview</h2>
    </div>
    <div
        data-transport-fleet-map
        data-provider="<?= esc($mapSettings['default_provider'] ?? 'openstreetmap') ?>"
        data-default-lat="<?= esc((string) ($mapSettings['default_latitude'] ?? 26.0667)) ?>"
        data-default-lng="<?= esc((string) ($mapSettings['default_longitude'] ?? 50.5577)) ?>"
        data-default-zoom="<?= esc((string) ($mapSettings['default_zoom'] ?? 12)) ?>"
        data-markers='<?= $mapMarkersJson ?>'
    >
        <div class="transport-map-canvas" style="height:520px;border-radius:8px;border:1px solid #e5e7eb;"></div>
    </div>
    <?php if (count($markers) === 0): ?>
        <p class="text-muted small mt-3 mb-0">
            No markers to display. Add coordinates to locations or vehicles, or adjust map settings.
        </p>
    <?php endif; ?>
</article>

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

<?= $this->section('scripts') ?>
<?php if (($mapSettings['default_provider'] ?? 'openstreetmap') === 'google' && ! empty($mapSettings['google_api_key'])): ?>
    <script src="https://maps.googleapis.com/maps/api/js?key=<?= esc($mapSettings['google_api_key']) ?>"></script>
<?php else: ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<?php endif; ?>
<script src="<?= base_url('assets/js/transport-map.js') ?>"></script>
<?= $this->endSection() ?>
