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

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

<?= view('partials/workspace_hero', [
    'workspaceCrumbPill'    => 'Transport',
    'workspaceCrumbCurrent' => 'Add Route',
    'workspaceTitle'        => 'Add Route',
    'workspaceDesc'         => 'Define a transport route with origin, destination, and optional stops.',
]) ?>

<article class="enterprise-settings-card" style="max-width:860px;">
    <div class="enterprise-settings-card__head">
        <i class="fa-solid fa-route"></i>
        <h2 class="enterprise-settings-card__title">Route Details</h2>
    </div>

    <?= $this->include('Modules\Transport\Views\partials\form_errors') ?>

    <form action="<?= base_url('transport/routes') ?>" method="post" novalidate>
        <?= csrf_field() ?>
        <?= $this->include('Modules\Transport\Views\routes\_form') ?>
        <div class="enterprise-settings-card__footer">
            <a href="<?= base_url('transport/routes') ?>" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">Create Route</button>
        </div>
    </form>
</article>

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

<?= $this->section('scripts') ?>
<script>
(function () {
    'use strict';
    var container = document.getElementById('route-stops-container');
    var template = document.getElementById('route-stop-template');
    var addBtn = document.getElementById('route-add-stop');

    function bindRemove(row) {
        var btn = row.querySelector('.route-remove-stop');
        if (btn) {
            btn.addEventListener('click', function () {
                var rows = container.querySelectorAll('.route-stop-row');
                if (rows.length <= 1) {
                    row.querySelector('select').value = '';
                    row.querySelector('input').value = '';
                    return;
                }
                row.remove();
            });
        }
    }

    container.querySelectorAll('.route-stop-row').forEach(bindRemove);

    addBtn.addEventListener('click', function () {
        var clone = template.content.cloneNode(true);
        var row = clone.querySelector('.route-stop-row');
        bindRemove(row);
        container.appendChild(clone);
    });
})();
</script>
<?= $this->endSection() ?>
