<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Tour builder</title>
    <style>
        :root{--brand:#0d9488;--brand-d:#0f766e;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f1f5f9}
        *{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--ink)}
        .wrap{max-width:1000px;margin:0 auto;padding:28px 20px 80px}
        h1{font-size:22px;margin:0 0 4px}.sub{color:var(--muted);margin:0 0 20px;font-size:14px}
        .flow{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px}
        .flow h2{font-size:17px;margin:0 0 4px}.flow .meta{color:var(--muted);font-size:13px;margin-bottom:12px}
        .step{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;display:flex;gap:10px;align-items:flex-start}
        .step .n{background:var(--brand);color:#fff;border-radius:6px;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
        .step .info{flex:1}.step .info b{display:block}.step .info small{color:var(--muted)}
        input,textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;margin:4px 0}
        textarea{min-height:70px}
        .btn{border:none;border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer}
        .btn-p{background:var(--brand);color:#fff}.btn-p:hover{background:var(--brand-d)}
        .btn-g{background:#f1f5f9;color:var(--ink)}.btn-d{background:#fee2e2;color:#b91c1c}
        .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .addbox{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:12px;margin-top:10px}
        .row{display:flex;gap:8px;align-items:center}
        label{font-size:12px;font-weight:600;color:var(--muted)}
        @media(max-width:640px){.grid2{grid-template-columns:1fr}}
    </style>
</head>
<body>
<div class="wrap">
    <h1>Tour builder</h1>
    <p class="sub">Author guided-tour flows and steps. Attach an image or video to any step — it streams securely and can't be downloaded.</p>

    <div id="flows">
        @foreach ($flows as $flow)
            <div class="flow" data-flow="{{ $flow->id }}">
                <h2>{{ $flow->title }} <small style="color:#94a3b8">({{ $flow->key }})</small></h2>
                <div class="meta">Vertical: {{ $flow->vertical ?: 'any' }} · {{ $flow->is_active ? 'active' : 'inactive' }} · autostart: {{ $flow->autostart_once ? 'yes' : 'no' }}</div>

                <div class="steps">
                    @foreach ($flow->steps as $i => $step)
                        <div class="step" data-step="{{ $step->id }}">
                            <div class="n">{{ $i + 1 }}</div>
                            <div class="info">
                                <b>{{ $step->title }}</b>
                                <small>{{ $step->route ?: 'current page' }} · {{ $step->target_selector ?: 'centered' }}{{ $step->media_id ? ' · has media' : '' }}</small>
                            </div>
                            <button class="btn btn-d" onclick="delStep({{ $step->id }})">Delete</button>
                        </div>
                    @endforeach
                </div>

                <div class="addbox">
                    <b style="font-size:13px">Add a step</b>
                    <div class="grid2">
                        <div><label>Title</label><input class="s-title" placeholder="e.g. Book an appointment"></div>
                        <div><label>Page route (optional)</label><input class="s-route" placeholder="/vet-clinic/appointments"></div>
                        <div><label>Target CSS selector (optional)</label><input class="s-sel" placeholder="#new-appointment-btn"></div>
                        <div><label>Placement</label>
                            <select class="s-place"><option value="auto">auto</option><option>top</option><option>bottom</option><option>center</option></select>
                        </div>
                    </div>
                    <label>Body (HTML allowed)</label>
                    <textarea class="s-body" placeholder="Explain this screen…"></textarea>
                    <div class="row">
                        <div style="flex:1"><label>Image / video</label><input type="file" class="s-media" accept="image/*,video/*"></div>
                        <button class="btn btn-p" onclick="addStep(this, {{ $flow->id }})">Add step</button>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="flow">
        <h2>+ New flow</h2>
        <div class="grid2">
            <div><label>Key (unique)</label><input id="f-key" placeholder="vet-full-tour"></div>
            <div><label>Title</label><input id="f-title" placeholder="VetOne full walkthrough"></div>
            <div><label>Vertical (optional)</label><input id="f-vert" placeholder="vet"></div>
        </div>
        <button class="btn btn-p" onclick="addFlow()">Create flow</button>
    </div>
</div>

<script>
    var CSRF = document.querySelector('meta[name=csrf-token]').content;
    function post(url, body, isForm) {
        var opts = { method:'POST', headers:{ 'X-CSRF-TOKEN':CSRF, 'Accept':'application/json' } };
        if (isForm) { opts.body = body; }
        else { opts.headers['Content-Type']='application/json'; opts.body = JSON.stringify(body); }
        return fetch(url, opts).then(function(r){ return r.json(); });
    }
    function del(url){ return fetch(url,{method:'POST',headers:{'X-CSRF-TOKEN':CSRF,'X-HTTP-Method-Override':'DELETE','Accept':'application/json'}}).then(function(r){return r.json();}); }

    function addFlow(){
        post("{{ route('guidedtour.admin.flow.store') }}", {
            key: document.getElementById('f-key').value.trim(),
            title: document.getElementById('f-title').value.trim(),
            vertical: document.getElementById('f-vert').value.trim() || null
        }).then(function(d){ if(d.ok) location.reload(); else alert('Could not create flow (key may be taken).'); });
    }

    async function addStep(btn, flowId){
        var box = btn.closest('.addbox');
        var mediaId = null;
        var file = box.querySelector('.s-media').files[0];
        if (file){
            var fd = new FormData(); fd.append('file', file);
            var m = await post("{{ route('guidedtour.admin.media.upload') }}", fd, true);
            if (m.ok) mediaId = m.media.id; else return alert('Media upload failed (type/size).');
        }
        var d = await post("{{ route('guidedtour.admin.step.store') }}", {
            flow_id: flowId,
            title: box.querySelector('.s-title').value.trim(),
            route: box.querySelector('.s-route').value.trim() || null,
            target_selector: box.querySelector('.s-sel').value.trim() || null,
            body_html: box.querySelector('.s-body').value,
            placement: box.querySelector('.s-place').value,
            media_id: mediaId
        });
        if (d.ok) location.reload(); else alert('Could not add step.');
    }

    function delStep(id){
        if(!confirm('Delete this step?')) return;
        del("{{ url('/tour/admin/steps') }}/"+id).then(function(d){ if(d.ok) location.reload(); });
    }
</script>
</body>
</html>
