<?= $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
$statusPill = static function (string $status): string {
    $class = $status === 'active' ? 'active' : 'inactive';

    return '<span class="enterprise-status-pill enterprise-status-pill--' . esc($class) . '">'
        . esc(ucfirst($status)) . '</span>';
};

$mapMarkers = [];
foreach ($stops as $stop) {
    if (! empty($stop['latitude']) && ! empty($stop['longitude'])) {
        $mapMarkers[] = [
            'lat'   => $stop['latitude'],
            'lng'   => $stop['longitude'],
            'title' => ($stop['stop_order'] ?? '') . '. ' . ($stop['location_name'] ?? 'Stop'),
        ];
    }
}
$hasMap = count($mapMarkers) > 0;
$mapMarkersJson = json_encode($mapMarkers, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
?>

<?= view('partials/workspace_hero', [
    'workspaceCrumbPill'    => 'Transport',
    'workspaceCrumbCurrent' => $route['name'],
    'workspaceTitle'        => esc($route['name']),
    'workspaceDesc'         => esc($route['code'] ?: $route['number']),
]) ?>

<div class="row g-4">
    <div class="col-lg-8">
        <article class="enterprise-settings-card">
            <div class="enterprise-settings-card__head">
                <i class="fa-solid fa-route"></i>
                <h2 class="enterprise-settings-card__title">Route Information</h2>
            </div>
            <dl class="row mb-0 small">
                <dt class="col-sm-4 text-muted">Number</dt>
                <dd class="col-sm-8 fw-semibold"><code><?= esc($route['number']) ?></code></dd>
                <dt class="col-sm-4 text-muted">Name</dt>
                <dd class="col-sm-8"><?= esc($route['name']) ?></dd>
                <dt class="col-sm-4 text-muted">Code</dt>
                <dd class="col-sm-8"><?= esc($route['code'] ?: '—') ?></dd>
                <dt class="col-sm-4 text-muted">Origin</dt>
                <dd class="col-sm-8"><?= esc($route['origin_name'] ?? '—') ?></dd>
                <dt class="col-sm-4 text-muted">Destination</dt>
                <dd class="col-sm-8"><?= esc($route['destination_name'] ?? '—') ?></dd>
                <dt class="col-sm-4 text-muted">Distance</dt>
                <dd class="col-sm-8"><?= $route['distance_km'] !== null && $route['distance_km'] !== '' ? esc(number_format((float) $route['distance_km'], 1)) . ' km' : '—' ?></dd>
                <dt class="col-sm-4 text-muted">Est. Duration</dt>
                <dd class="col-sm-8"><?= $route['estimated_duration_minutes'] !== null && $route['estimated_duration_minutes'] !== '' ? esc($route['estimated_duration_minutes']) . ' min' : '—' ?></dd>
                <dt class="col-sm-4 text-muted">Status</dt>
                <dd class="col-sm-8"><?= $statusPill($route['status']) ?></dd>
                <dt class="col-sm-4 text-muted">Notes</dt>
                <dd class="col-sm-8"><?= nl2br(esc($route['notes'] ?: '—')) ?></dd>
            </dl>
        </article>

        <div class="enterprise-data-panel mt-4">
            <div class="enterprise-data-panel__head">
                <h2 class="enterprise-data-panel__title">Stops</h2>
            </div>
            <div class="enterprise-data-panel__body">
                <div class="table-responsive">
                    <table class="enterprise-data-table">
                        <thead>
                            <tr>
                                <th>Order</th>
                                <th>Location</th>
                                <th>Offset (min)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($stops as $stop): ?>
                                <tr>
                                    <td><?= esc($stop['stop_order']) ?></td>
                                    <td><?= esc($stop['location_name'] ?? '—') ?></td>
                                    <td><?= esc($stop['estimated_arrival_offset_minutes'] ?? '—') ?></td>
                                </tr>
                            <?php endforeach; ?>
                            <?php if (count($stops) === 0): ?>
                                <tr><td colspan="3" class="text-center text-muted py-4">No intermediate stops defined.</td></tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <?php if ($hasMap): ?>
            <article class="enterprise-settings-card mt-4">
                <div class="enterprise-settings-card__head">
                    <i class="fa-solid fa-map"></i>
                    <h2 class="enterprise-settings-card__title">Stop Map</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:320px;border-radius:8px;border:1px solid #e5e7eb;"></div>
                </div>
            </article>
        <?php endif; ?>
    </div>

    <div class="col-lg-4">
        <article class="enterprise-settings-card">
            <div class="enterprise-settings-card__head">
                <i class="fa-solid fa-bolt"></i>
                <h2 class="enterprise-settings-card__title">Actions</h2>
            </div>
            <div class="d-grid gap-2">
                <a href="<?= base_url('transport/routes/' . $route['id'] . '/edit') ?>" class="btn btn-outline-primary btn-sm">
                    <i class="fa-solid fa-pen me-1"></i> Edit
                </a>
                <form action="<?= base_url('transport/routes/' . $route['id'] . '/delete') ?>" method="post"
                      onsubmit="return confirm('Delete this route permanently?');">
                    <?= csrf_field() ?>
                    <button type="submit" class="btn btn-outline-danger btn-sm w-100">
                        <i class="fa-solid fa-trash me-1"></i> Delete
                    </button>
                </form>
                <a href="<?= base_url('transport/routes') ?>" class="btn btn-outline-secondary btn-sm">Back to Routes</a>
            </div>
        </article>
    </div>
</div>

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

<?php if ($hasMap): ?>
<?= $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() ?>
<?php endif; ?>
