{{ define "dashboard.html" }}
<!DOCTYPE html>
<html>
<head>
    <title>SekiBot Dashboard</title>
    <link rel="stylesheet" href="/static/style.css">
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
</head>
<body>
    <div class="dashboard-layout">
        <div class="sidebar">
            <h2 style="color: white;">🤖 SekiBot</h2>
            <div style="margin-bottom: 20px; color: var(--text-muted);">
                User: {{ .UserEmail }} <br>
                <small>Plan: {{ .Tier }}</small>
            </div>
            <a href="#settings" class="btn-outline" style="text-align:center; border:none; text-align: left;">⚙️ Settings</a>
            <a href="#appointments" class="btn-outline" style="text-align:center; border:none; text-align: left;">📅 Appointments</a>
            <a href="/logout" style="margin-top: auto; color: var(--danger);">🚪 Logout</a>
        </div>

        <div class="main-content">
            
            <div id="settings" class="card">
                <h3 style="color: white;">Business Configuration</h3>
                <form action="/update-bot" method="POST">
                    <label style="color: var(--text-muted);">Bot Name</label>
                    <input type="text" name="bot_name" value="{{ .BotConfig.Name }}">
                    
                    <label style="color: var(--text-muted);">System Prompt</label>
                    <textarea name="system_prompt" rows="3" style="width:100%; background:var(--bg-dark); color:white; border:1px solid #40444b; padding:10px;">{{ .BotConfig.Prompt }}</textarea>

                    <h4 style="color: white; margin-top: 20px;">Open Hours</h4>
                    
                    {{ range $day := .Days }}
                    <div class="hours-grid">
                        <span style="color:white;">{{ $day }}</span>
                        <select name="{{$day}}_open">
                            <option value="">Closed</option>
                            <option value="08:00">08:00 AM</option>
                            <option value="09:00" selected>09:00 AM</option>
                            <option value="10:00">10:00 AM</option>
                        </select>
                        <select name="{{$day}}_close">
                            <option value="">Closed</option>
                            <option value="17:00" selected>05:00 PM</option>
                            <option value="18:00">06:00 PM</option>
                            <option value="19:00">07:00 PM</option>
                        </select>
                    </div>
                    {{ end }}
                    
                    <button type="submit" style="margin-top: 20px;">Save Changes</button>
                </form>
            </div>

            <div id="appointments" class="card">
                <h3 style="color: white;">Manage Appointments</h3>
                <table>
                    <thead>
                        <tr><th>Client</th><th>Date</th><th>Status</th><th>Action</th></tr>
                    </thead>
                    <tbody>
                        {{ range .Appointments }}
                        <tr>
                            <td>{{ .Phone }}</td>
                            <td>{{ .Date }}</td>
                            <td class="{{ if eq .Status "cancelled" }}status-cancelled{{ else }}status-confirmed{{ end }}">
                                {{ .Status }}
                            </td>
                            <td>
                                {{ if ne .Status "cancelled" }}
                                <form action="/admin/appointment/{{.ID}}/cancel" method="POST" style="margin:0;">
                                    <button style="background:var(--danger); padding: 5px; font-size: 0.8rem;">Cancel</button>
                                </form>
                                {{ end }}
                            </td>
                        </tr>
                        {{ else }}
                        <tr><td colspan="4" style="text-align:center; color:gray;">No appointments yet.</td></tr>
                        {{ end }}
                    </tbody>
                </table>
                <br>
                <div id="calendar" style="background: white; padding: 10px; border-radius: 8px;"></div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: '/api/my-appointments',
                height: 400
            });
            calendar.render();
        });
    </script>
</body>
</html>
{{ end }}