{% extends 'layouts/demo-base.html' %}

{% block pageTitle %}Workbook - {{ conceptInfo.name }} Demo - BuyerKiosk{% endblock %}

{% block content %}
<div class="demo-admin">
    <!-- Demo Header Bar -->
    <nav class="navbar navbar-dark bg-{{ conceptInfo.color }} sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/demo/{{ concept }}/admin/">
                <img src="/images/buyerkiosk-logo.svg" alt="BuyerKiosk" height="30" class="d-inline-block align-text-top me-2" style="filter: brightness(0) invert(1);">
                <span class="fw-semibold">{{ conceptInfo.name }} Demo</span>
            </a>

            <div class="d-flex align-items-center gap-3">
                <span class="badge bg-light text-dark">
                    <i class="fa-solid fa-clock me-1"></i>
                    <span id="session-timer">{{ remainingTime }}</span>
                </span>
                <a href="/demo/select-concept" class="btn btn-outline-light btn-sm">
                    <i class="fa-solid fa-arrows-rotate me-1"></i>
                    Switch Store
                </a>
                <a href="/demo/logout" class="btn btn-outline-light btn-sm">
                    <i class="fa-solid fa-arrow-right-from-bracket me-1"></i>
                    End Demo
                </a>
            </div>
        </div>
    </nav>

    <!-- Demo Banner -->
    <div class="alert alert-info alert-dismissible fade show m-0 rounded-0 border-0" role="alert">
        <div class="container-fluid">
            <i class="fa-solid fa-circle-info me-2"></i>
            <strong>Demo Mode:</strong> Exploring the Workbook. Data is simulated.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>

    <!-- Sidebar + Content -->
    <div class="d-flex">
        <!-- Sidebar -->
        <nav class="demo-sidebar bg-dark text-white">
            <div class="p-3">
                <h6 class="text-uppercase text-muted small mb-3">Navigation</h6>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link text-white-50" href="/demo/{{ concept }}/admin/">
                            <i class="fa-solid fa-gauge-high me-2"></i>
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white-50" href="/demo/{{ concept }}/admin/queue">
                            <i class="fa-solid fa-cash-register me-2"></i>
                            Buy Queue
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white active" href="/demo/{{ concept }}/admin/workbook">
                            <i class="fa-solid fa-book-open me-2"></i>
                            Workbook
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="demo-content flex-grow-1 p-4">
            <div class="container-fluid">
                <!-- Page Header -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h1 class="h2 fw-bold mb-1">
                            <i class="fa-solid fa-book-open text-success me-2"></i>
                            Workbook
                        </h1>
                        <p class="text-muted mb-0">Your daily operations hub</p>
                    </div>
                    <div>
                        <span class="badge bg-secondary fs-6">
                            <i class="fa-solid fa-calendar me-1"></i>
                            {{ "now"|date("l, F j, Y") }}
                        </span>
                    </div>
                </div>

                <!-- Workbook Sections -->
                <div class="row g-4">
                    <!-- Daybook -->
                    <div class="col-lg-6">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-header bg-white border-bottom">
                                <h5 class="card-title mb-0">
                                    <i class="fa-solid fa-clipboard-list text-primary me-2"></i>
                                    Today's Daybook
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="list-group list-group-flush">
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <div>
                                            <i class="fa-solid fa-circle-check text-success me-2"></i>
                                            Opening checklist completed
                                        </div>
                                        <small class="text-muted">9:05 AM</small>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <div>
                                            <i class="fa-solid fa-circle-check text-success me-2"></i>
                                            Cash drawer verified - $200.00
                                        </div>
                                        <small class="text-muted">9:10 AM</small>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <div>
                                            <i class="fa-solid fa-circle text-warning me-2"></i>
                                            Floor reset in progress
                                        </div>
                                        <small class="text-muted">In Progress</small>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <div>
                                            <i class="fa-solid fa-circle text-secondary me-2"></i>
                                            Afternoon shipment processing
                                        </div>
                                        <small class="text-muted">Pending</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="col-lg-6">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-header bg-white border-bottom">
                                <h5 class="card-title mb-0">
                                    <i class="fa-solid fa-bolt text-warning me-2"></i>
                                    Quick Actions
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <button class="btn btn-outline-primary w-100 py-3" disabled>
                                            <i class="fa-solid fa-tag d-block fa-2x mb-2"></i>
                                            Print Tags
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button class="btn btn-outline-success w-100 py-3" disabled>
                                            <i class="fa-solid fa-box d-block fa-2x mb-2"></i>
                                            Receive Inventory
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button class="btn btn-outline-info w-100 py-3" disabled>
                                            <i class="fa-solid fa-percent d-block fa-2x mb-2"></i>
                                            Mark Downs
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button class="btn btn-outline-secondary w-100 py-3" disabled>
                                            <i class="fa-solid fa-file-lines d-block fa-2x mb-2"></i>
                                            Daily Report
                                        </button>
                                    </div>
                                </div>
                                <div class="alert alert-light mt-3 mb-0">
                                    <i class="fa-solid fa-lock me-2"></i>
                                    <small>These actions require a full account to use.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-white border-bottom">
                                <h5 class="card-title mb-0">
                                    <i class="fa-solid fa-clock-rotate-left text-info me-2"></i>
                                    Recent Activity
                                </h5>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Time</th>
                                                <th>Action</th>
                                                <th>Details</th>
                                                <th>User</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><small class="text-muted">10:45 AM</small></td>
                                                <td><span class="badge bg-success">Purchase</span></td>
                                                <td>15 items purchased - $127.50</td>
                                                <td>Sarah M.</td>
                                            </tr>
                                            <tr>
                                                <td><small class="text-muted">10:32 AM</small></td>
                                                <td><span class="badge bg-primary">Check-in</span></td>
                                                <td>Customer added to queue</td>
                                                <td>John D.</td>
                                            </tr>
                                            <tr>
                                                <td><small class="text-muted">10:15 AM</small></td>
                                                <td><span class="badge bg-info">Tagged</span></td>
                                                <td>23 items tagged and priced</td>
                                                <td>Emily R.</td>
                                            </tr>
                                            <tr>
                                                <td><small class="text-muted">9:48 AM</small></td>
                                                <td><span class="badge bg-warning text-dark">Offer</span></td>
                                                <td>Offer made - $85.00 for 12 items</td>
                                                <td>Sarah M.</td>
                                            </tr>
                                            <tr>
                                                <td><small class="text-muted">9:30 AM</small></td>
                                                <td><span class="badge bg-secondary">System</span></td>
                                                <td>Daily backup completed</td>
                                                <td>System</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    {{ include('demo/partials/cta-banner.html', { concept: concept, conceptInfo: conceptInfo }) }}
    {{ include('demo/partials/contact-form.html') }}
</div>
{% endblock %}

{% block styles %}
<style>
.demo-admin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.demo-sidebar {
    width: 240px;
    min-height: calc(100vh - 56px - 48px);
}

.demo-sidebar .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
}

.demo-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.demo-sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
}

.demo-content {
    background: var(--neutral-50);
    min-height: calc(100vh - 56px - 48px);
}

@media (max-width: 768px) {
    .demo-sidebar {
        display: none;
    }
}
</style>
{% endblock %}

{% block scripts %}
<script>
// Session timer countdown
(function() {
    let remainingSeconds = {{ remainingTime }};
    const timerEl = document.getElementById('session-timer');

    function formatTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const mins = Math.floor((seconds % 3600) / 60);
        if (hours > 0) {
            return hours + 'h ' + mins + 'm remaining';
        }
        return mins + ' min remaining';
    }

    function updateTimer() {
        if (remainingSeconds <= 0) {
            window.location.href = '/demo?message=' + encodeURIComponent('Your demo session has expired.');
            return;
        }
        timerEl.textContent = formatTime(remainingSeconds);
        remainingSeconds--;
    }

    updateTimer();
    setInterval(updateTimer, 60000);
})();
</script>

{{ include('demo/partials/flows-init.html', { sessionId: sessionId, tourProgress: tourProgress, concept: concept }) }}
{% endblock %}