<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent Instructions – Voice Chat Agent</title>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
            color: #1e293b;
            padding: 2rem 1rem;
        }
        .container {
            max-width: 720px;
            margin: 0 auto;
        }
        .card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            padding: 1.5rem 2rem;
            margin-bottom: 1.5rem;
        }
        .card h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.5rem; color: #0f172a; }
        .card .subtitle { color: #64748b; font-size: 0.9rem; margin-bottom: 1.25rem; }
        .btn {
            display: inline-block;
            background: #4f46e5;
            color: #fff;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background 0.2s;
            text-decoration: none;
        }
        .btn:hover { background: #4338ca; }
        .btn-secondary { background: #64748b; }
        .btn-secondary:hover { background: #475569; }
        .links { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; font-size: 0.875rem; }
        .links a { color: #4f46e5; text-decoration: none; }
        .links a:hover { text-decoration: underline; }
        .alert { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; }
        .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
        .alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
        .alert-info { background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1; }
        textarea {
            width: 100%;
            min-height: 320px;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.9rem;
            line-height: 1.5;
            resize: vertical;
        }
        textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
        .form-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
        .char-count { font-size: 0.8rem; color: #64748b; }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h1>Agent instructions</h1>
            <p class="subtitle">Edit the system instructions used by the voice agent. You can paste your Custom GPT instructions here. Leave empty to use the built-in car consultant flow.</p>

            <?php if(session('success')): ?>
                <div class="alert alert-success"><?php echo e(session('success')); ?></div>
            <?php endif; ?>
            <?php if(session('error')): ?>
                <div class="alert alert-error"><?php echo e(session('error')); ?></div>
            <?php endif; ?>

            <div class="alert alert-info">
                These instructions are loaded from <code>storage/app/agent_instructions.txt</code>. For Custom GPT–style behavior, set <code>OPENAI_SIMPLE_CHAT=true</code> in your <code>.env</code> file.
            </div>

            <form method="post" action="" id="formAgentInstructions">
                <?php echo csrf_field(); ?>
                <textarea name="instructions" id="instructions" placeholder="Paste your Custom GPT instructions here, or leave empty to use the built-in flow..."><?php echo e(old('instructions', $instructions)); ?></textarea>
                <div class="form-actions">
                    <button type="submit" class="btn">Save instructions</button>
                    <span class="char-count" id="charCount">0 characters</span>
                </div>
            </form>

            <div class="links">
                <a href="#" id="backToChat">← Back to Voice Chat</a>
            </div>
        </div>
    </div>
    <script>
        (function () {
            var path = window.location.pathname.replace(/\/$/, '');
            var basePath = path.replace(/\/index\.php.*$/, '').replace(/\/agent-instructions\/?$/, '') || '/';
            var base = window.location.origin + basePath;
            document.getElementById('formAgentInstructions').action = base + '/index.php/agent-instructions';
            document.getElementById('backToChat').href = base + '/index.php/';
        })();
        var ta = document.getElementById('instructions');
        var countEl = document.getElementById('charCount');
        function updateCount() {
            countEl.textContent = (ta.value.length) + ' characters';
        }
        ta.addEventListener('input', updateCount);
        updateCount();
    </script>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\Voiceagent\laravel\resources\views/agent-instructions.blade.php ENDPATH**/ ?>