@php

    $cw = $chatWidgetSettings ?? \App\Services\ChatWidgetSettingsService::get($setting ?? null);

    $channels = \App\Services\ChatWidgetSettingsService::activeChannels($setting ?? null);

@endphp



@if(!empty($cw['enabled']) && ($channels !== [] || !empty($cw['website_chat']['enabled'])))

@php

    $posClass = ($cw['position'] ?? 'bottom-right') === 'bottom-left' ? 'chat-widget--bottom-left' : 'chat-widget--bottom-right';

    $visClass = '';

    if (empty($cw['show_on_mobile'])) {

        $visClass .= ' chat-widget--hide-mobile';

    }

    if (empty($cw['show_on_desktop'])) {

        $visClass .= ' chat-widget--hide-desktop';

    }

    $bottom = (int) ($cw['offset_bottom'] ?? 24);

@endphp

<link rel="stylesheet" href="{{ asset('css/chat-widget.css') }}@if(file_exists(public_path('css/chat-widget.css')))?v={{ filemtime(public_path('css/chat-widget.css')) }}@endif">

@if(!empty($cw['website_chat']['enabled']))

<link rel="stylesheet" href="{{ asset('css/website-chat.css') }}@if(file_exists(public_path('css/website-chat.css')))?v={{ filemtime(public_path('css/website-chat.css')) }}@endif">

@endif

<div id="storeChatWidget"

     class="chat-widget {{ $posClass }}{{ $visClass }}"

     style="bottom: {{ $bottom }}px;"

     aria-live="polite">

    <div class="chat-widget__panel" id="storeChatPanel">

        @if(!empty($cw['website_chat']['enabled']))

        <div class="chat-widget__webchat" id="storeWebsiteChat">

            <div class="chat-widget__webchat-head" id="storeWebsiteChatHead"><i class="fas fa-headset me-1"></i> Website Chat</div>

            <div class="chat-widget__webchat-intro" id="storeWebsiteChatIntro">

                <p class="chat-widget__webchat-intro-text">চ্যাট শুরু করতে নাম ও মোবাইল নম্বর দিন।</p>

                <input type="text" id="storeWebsiteChatName" maxlength="100" placeholder="আপনার নাম" autocomplete="name">

                <input type="tel" id="storeWebsiteChatPhone" class="bd-phone-input" placeholder="মোবাইল নম্বর (01XXXXXXXXX)" maxlength="11" inputmode="numeric" autocomplete="tel">

                <div id="storeWebsiteChatCaptcha">
                    @include('shared.math-captcha', ['captcha' => \App\Services\CaptchaGateService::formContext(request(), \App\Services\CaptchaGateService::ACTION_WEBSITE_INQUIRY)])
                </div>

                <button type="button" class="chat-widget__webchat-send" id="storeWebsiteChatStart">চ্যাট শুরু করুন</button>

            </div>

            <div class="chat-widget__webchat-chat" id="storeWebsiteChatChat" hidden>

                <div class="chat-widget__webchat-body is-empty" id="storeWebsiteChatThread"></div>

                <div class="chat-widget__webchat-form">

                    <textarea id="storeWebsiteChatMessage" rows="2" placeholder="আপনার প্রশ্ন লিখুন…"></textarea>

                    <button type="button" class="chat-widget__webchat-send" id="storeWebsiteChatSend">Send Message</button>

                </div>

            </div>

        </div>

        @endif



        @if($channels !== [])

        <div class="chat-widget__channels-row" aria-label="Contact options">

            @foreach($channels as $channel)

            <a href="{{ $channel['url'] }}"

               class="chat-widget__channel chat-widget__channel--icon {{ $channel['class'] }}"

               target="{{ $channel['key'] === 'call' ? '_self' : '_blank' }}"

               rel="noopener noreferrer"

               title="{{ $channel['label'] }}"

               aria-label="{{ $channel['label'] }}">

                <i class="{{ $channel['icon'] }}"></i>

            </a>

            @endforeach

        </div>

        @endif

    </div>

    <button type="button" class="chat-widget__fab" id="storeChatFab" aria-expanded="false" aria-controls="storeChatPanel">

        <span class="chat-widget__fab-icon"><i class="fas fa-comments"></i></span>

        <span class="chat-widget__fab-label">{{ $cw['fab_label'] ?? 'সাহায্য চাই' }}</span>

    </button>

</div>

<script>

(function () {

    var root = document.getElementById('storeChatWidget');

    var fab = document.getElementById('storeChatFab');

    if (!root || !fab) return;



    fab.addEventListener('click', function () {

        var open = root.classList.toggle('is-open');

        fab.setAttribute('aria-expanded', open ? 'true' : 'false');

    });



    document.addEventListener('click', function (e) {

        if (!root.classList.contains('is-open')) return;

        if (root.contains(e.target)) return;

        root.classList.remove('is-open');

        fab.setAttribute('aria-expanded', 'false');

    });

})();

</script>

@if(!empty($cw['website_chat']['enabled']))

<script src="{{ asset('js/bd-phone.js') }}@if(file_exists(public_path('js/bd-phone.js')))?v={{ filemtime(public_path('js/bd-phone.js')) }}@endif"></script>

<script>

window.storeWebsiteChatConfig = {

    csrf: @json(csrf_token()),

    startUrl: @json(route('website-inquiry.start')),

    sendUrl: @json(route('website-inquiry.send')),

    presenceUrl: @json(route('website-inquiry.presence')),

    pollUrlTpl: @json(url('/website-inquiry/__TOKEN__/poll')),

};

</script>

<script src="{{ asset('js/website-chat.js') }}@if(file_exists(public_path('js/website-chat.js')))?v={{ filemtime(public_path('js/website-chat.js')) }}@endif"></script>

@endif

@endif