@extends('layouts.app')

@section('title', __('whatsapp::lang.whatsapp') . ' — ' . __('whatsapp::lang.simulator'))

@section('css')
<style>
    .wa-sim { max-width:420px; margin:0 auto; border:1px solid #ccc; border-radius:10px; overflow:hidden; background:#e5ddd5; }
    .wa-sim-head { background:#075e54; color:#fff; padding:10px 12px; font-weight:600; }
    .wa-sim-thread { height:52vh; overflow-y:auto; padding:12px; }
    .wa-b { max-width:78%; padding:7px 10px; border-radius:7px; margin-bottom:8px; clear:both; font-size:14px; white-space:pre-wrap; }
    .wa-b.cust { background:#dcf8c6; float:right; }   /* the simulated customer */
    .wa-b.biz  { background:#fff; float:left; }        /* the business / AI */
    .wa-b .mt { display:block; font-size:10px; color:#999; text-align:right; }
    .wa-sim-compose { display:flex; padding:8px; background:#f0f0f0; }
</style>
@endsection

@section('content')
<section class="content-header">
    <h1><i class="fab fa-whatsapp"></i> {{ __('whatsapp::lang.whatsapp') }}
        <small>{{ __('whatsapp::lang.simulator') }}</small></h1>
</section>

<section class="content">
    @include('whatsapp::partials._nav')

    <div class="callout callout-info">
        {!! __('whatsapp::lang.simulator_hint') !!}
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="box box-default">
                <div class="box-body">
                    <div class="form-group">
                        <label>{{ __('whatsapp::lang.channel') }}</label>
                        <select id="sim-channel" class="form-control">
                            <option value="">Auto (default)</option>
                            @foreach($channels as $id => $label)
                                <option value="{{ $id }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>{{ __('whatsapp::lang.sim_from') }}</label>
                        <input type="text" id="sim-from" class="form-control" placeholder="+201000000000">
                        <small class="text-muted">{{ __('whatsapp::lang.sim_from_hint') }}</small>
                    </div>
                    <p class="text-muted">{{ __('whatsapp::lang.sim_examples') }}</p>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <div class="wa-sim">
                <div class="wa-sim-head"><i class="fab fa-whatsapp"></i> {{ __('whatsapp::lang.sim_phone_title') }}</div>
                <div class="wa-sim-thread" id="sim-thread"></div>
                <form class="wa-sim-compose" id="sim-compose">
                    <textarea id="sim-body" rows="2" class="form-control" placeholder="{{ __('whatsapp::lang.type_a_message') }}"></textarea>
                    <button class="btn btn-success" style="margin-left:6px;"><i class="fa fa-paper-plane"></i></button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
(function(){
    var convId = null;
    var csrf = "{{ csrf_token() }}";
    var inboundUrl = "{{ route('whatsapp.simulator.inbound') }}";
    function threadUrl(id){ return "{{ url('whatsapp/inbox') }}/" + id + "/thread"; }
    function esc(s){ var d=document.createElement('div'); d.textContent=s||''; return d.innerHTML; }

    function render(data){
        var t = document.getElementById('sim-thread'); var html='';
        (data.messages||[]).forEach(function(m){
            // From the simulated phone's perspective: inbound (customer→biz) is "mine".
            var mine = m.direction==='in';
            html += '<div class="wa-b '+(mine?'cust':'biz')+'">'+esc(m.body)+'<span class="mt">'+m.time+'</span></div>';
        });
        t.innerHTML = html + '<div style="clear:both;"></div>';
        t.scrollTop = t.scrollHeight;
    }
    function refresh(){ if(!convId) return; fetch(threadUrl(convId),{headers:{'X-Requested-With':'XMLHttpRequest'}}).then(function(r){return r.json();}).then(render).catch(function(){}); }

    document.getElementById('sim-compose').addEventListener('submit', function(e){
        e.preventDefault();
        var body = document.getElementById('sim-body').value.trim();
        var from = document.getElementById('sim-from').value.trim();
        if (!body || !from){ alert('Enter a from-number and a message.'); return; }
        var fd = new FormData();
        fd.append('from', from); fd.append('body', body);
        var ch = document.getElementById('sim-channel').value; if (ch) fd.append('channel_id', ch);
        fetch(inboundUrl,{method:'POST',headers:{'X-CSRF-TOKEN':csrf,'X-Requested-With':'XMLHttpRequest'},body:fd})
            .then(function(r){return r.json();})
            .then(function(d){ convId = d.conversation_id; document.getElementById('sim-body').value=''; setTimeout(refresh, 600); });
    });

    setInterval(refresh, 3000);
})();
</script>
@endsection
