<?= $this->extend('admin/layouts/main') ?>
<?= $this->section('content') ?>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">Onboard a New Hotel</div>
            <div class="card-body">
                <?php if ($autoCreateDatabase): ?>
                <p class="text-muted small">This provisions a brand-new private database for the hotel, runs every
                    tenant-schema migration against it, and creates their first manager login — the same process
                    <code>php spark tenant:create</code> runs, just from the web.</p>
                <?php else: ?>
                <div class="alert alert-warning small">
                    <strong>Shared hosting mode is on</strong> (Config\Tenancy::$autoCreateDatabase is off) — this
                    server's database user can't create databases itself. Before submitting this form:
                    <ol class="mb-0 mt-1">
                        <li>In cPanel &rsaquo; MySQL Databases, create a new, empty database named exactly
                            <strong><code id="expectedDbName"><?= esc($dbNamePrefix) ?>&hellip;</code></strong>
                            (the slug you type below fills in the rest, live).</li>
                        <li>Add this app's database user to that new database with full privileges.</li>
                        <li>Then submit this form — it will run the tenant migrations into that database and
                            create the manager login, but will refuse to run if the database doesn't exist yet or
                            already has tables in it.</li>
                    </ol>
                </div>
                <?php endif; ?>

                <form action="<?= site_url('admin/tenants') ?>" method="post">
                    <?= csrf_field() ?>

                    <h6 class="text-muted text-uppercase small fw-bold mt-3 mb-2">Hotel Details</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-7">
                            <label class="form-label small fw-semibold">Hotel Name</label>
                            <input type="text" class="form-control" name="hotel_name" value="<?= esc(old('hotel_name')) ?>" required>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label small fw-semibold">Subdomain Slug</label>
                            <input type="text" class="form-control" id="slugInput" name="slug" value="<?= esc(old('slug')) ?>" placeholder="e.g. golden-bay" required>
                            <?php if (! $autoCreateDatabase): ?>
                            <div class="form-text">Database name: <code id="dbNamePreview"><?= esc($dbNamePrefix) ?><?= esc(old('slug')) ?></code></div>
                            <?php endif; ?>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Billing Contact Email</label>
                            <input type="email" class="form-control" name="contact_email" value="<?= esc(old('contact_email')) ?>">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Billing Contact Phone</label>
                            <input type="text" class="form-control" name="contact_phone" value="<?= esc(old('contact_phone')) ?>" placeholder="+233...">
                        </div>
                    </div>

                    <h6 class="text-muted text-uppercase small fw-bold mt-4 mb-2">First Manager Login</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Full Name</label>
                            <input type="text" class="form-control" name="admin_name" value="<?= esc(old('admin_name')) ?>" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Email</label>
                            <input type="email" class="form-control" name="admin_email" value="<?= esc(old('admin_email')) ?>" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-semibold">Temporary Password</label>
                            <input type="text" class="form-control" name="admin_password" placeholder="Min 8 characters" required>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-building-add me-1"></i>Provision Hotel</button>
                        <a href="<?= site_url('admin/tenants') ?>" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php if (! $autoCreateDatabase): ?>
<?= $this->section('scripts') ?>
<script>
(function () {
    const prefix = <?= json_encode($dbNamePrefix) ?>;
    const slugInput = document.getElementById('slugInput');
    const preview = document.getElementById('dbNamePreview');
    const expected = document.getElementById('expectedDbName');

    function update() {
        const value = prefix + (slugInput.value || '…');
        if (preview) { preview.textContent = prefix + (slugInput.value || ''); }
        if (expected) { expected.textContent = value; }
    }

    slugInput?.addEventListener('input', update);
    update();
})();
</script>
<?= $this->endSection() ?>
<?php endif; ?>

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