@extends('admin.layouts.master-soyuz')
@section('title', __('Widget Settings | '))
@section('body')

@component('admin.component.breadcumb', ['secondaryactive' => 'active'])
    @slot('heading'){{ __('Widget Settings') }}@endslot
    @slot('menu1'){{ __('Storefront Widgets') }}@endslot
@endcomponent

@php
    $widgetMeta = [
        'slider' => [
            'label' => __('Hero Slider'),
            'icon'  => 'image',
            'desc'  => __('Big rotating banners at the top of the homepage.'),
            'where' => __('Storefront homepage'),
        ],
        'category' => [
            'label' => __('Shop by Category'),
            'icon'  => 'grid',
            'desc'  => __('Category tile grid that lets shoppers browse departments.'),
            'where' => __('Storefront homepage'),
        ],
        'hotdeals' => [
            'label' => __('Hot Deals Rail'),
            'icon'  => 'zap',
            'desc'  => __('Rose-amber rail of admin-tagged Hot Deals — only items with future end-dates render.'),
            'where' => __('Storefront homepage'),
        ],
        'newsletter' => [
            'label' => __('Newsletter Signup'),
            'icon'  => 'mail',
            'desc'  => __('Email subscribe form in the storefront footer.'),
            'where' => __('Storefront footer (every page)'),
        ],
    ];
    $widgetsByName = collect($widgets)->keyBy('name');
@endphp

<div class="contentbar">
    @if($errors->any())
        <div class="alert alert-danger">@foreach($errors->all() as $e)<p class="mb-0">{{ $e }}</p>@endforeach</div>
    @endif
    @if(session('updated') || session('success'))
        <div class="alert alert-success">{{ session('updated') ?? session('success') }}</div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <div class="card m-b-30">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0"><i class="feather icon-toggle-right mr-2 text-primary"></i>{{ __('Storefront Widgets') }}</h5>
                    <small class="text-muted">{{ __('Toggle each section on or off per page') }}</small>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0" style="width:100%;">
                        <thead>
                            <tr style="background: var(--adm-content-bg);">
                                <th style="padding: 12px 16px;">{{ __('Widget') }}</th>
                                <th class="text-center" style="padding: 12px 16px; width: 110px;">{{ __('Home') }}</th>
                                <th class="text-center" style="padding: 12px 16px; width: 110px;">{{ __('Shop') }}</th>
                                <th class="text-center" style="padding: 12px 16px; width: 110px;">{{ __('Save') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($widgetMeta as $name => $meta)
                                @php $w = $widgetsByName->get($name); @endphp
                                @if(!$w) @continue @endif
                                <tr>
                                    <td style="padding: 14px 16px;">
                                        <div class="d-flex align-items-center" style="gap: 12px;">
                                            <span style="width:40px; height:40px; border-radius:10px; background:rgba(59,109,240,0.10); color:#3b6df0; display:grid; place-items:center;">
                                                <i class="feather icon-{{ $meta['icon'] }}"></i>
                                            </span>
                                            <div>
                                                <div style="font-weight:700; color:var(--adm-text-dark);">{{ $meta['label'] }}</div>
                                                <div class="text-muted" style="font-size:12px;">{{ $meta['desc'] }}</div>
                                                <div class="text-muted" style="font-size:11px; margin-top:2px;"><i class="feather icon-map-pin mr-1"></i>{{ $meta['where'] }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center" style="padding: 14px 16px;" colspan="3">
                                        <form action="{{ url('admin/widget/' . $w->id) }}" method="POST" class="d-inline-flex align-items-center" style="gap: 18px;">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name="home" value="0">
                                            <label class="switch mb-0" title="{{ __('Show on Home') }}" style="min-width:80px;">
                                                <input type="checkbox" name="home" value="1" {{ $w->home == '1' ? 'checked' : '' }}>
                                                <span class="knob"></span>
                                            </label>
                                            <input type="hidden" name="shop" value="0">
                                            <label class="switch mb-0" title="{{ __('Show on Shop') }}" style="min-width:80px;">
                                                <input type="checkbox" name="shop" value="1" {{ $w->shop == '1' ? 'checked' : '' }}>
                                                <span class="knob"></span>
                                            </label>
                                            <button type="submit" class="btn btn-primary-rgba btn-sm" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }}>
                                                <i class="feather icon-save mr-1"></i>{{ __('Save') }}
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- ============= CHAT WIDGETS ============= --}}
            <div class="card m-b-30">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="feather icon-message-circle mr-2 text-primary"></i>{{ __('Chat Widgets') }}</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('wp.setting.update') }}" method="POST">
                        @csrf

                        {{-- WhatsApp floating button --}}
                        <h6 class="mb-3" style="font-weight:700;"><i class="feather icon-phone mr-1 text-success"></i> {{ __('WhatsApp Floating Button') }}</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Status') }}</label><br>
                                <label class="switch mb-0">
                                    <input type="checkbox" name="status" value="1" {{ optional($wp)->status == 1 ? 'checked' : '' }}>
                                    <span class="knob"></span>
                                </label>
                                <small class="text-muted d-block mt-2">{{ __('Show the floating WhatsApp button on every storefront page') }}</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Phone Number') }}</label>
                                <input type="text" name="phone_no" class="form-control sh-select-bare" value="{{ optional($wp)->phone_no }}" placeholder="911234567890">
                                <small class="text-muted">{{ __('With country code, no spaces or symbols (e.g. 911234567890).') }}</small>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Position') }}</label>
                                <select name="position" class="form-control sh-select-bare">
                                    <option value="right" {{ (optional($wp)->position ?? 'right') === 'right' ? 'selected' : '' }}>{{ __('Bottom Right') }}</option>
                                    <option value="left"  {{ optional($wp)->position === 'left'  ? 'selected' : '' }}>{{ __('Bottom Left') }}</option>
                                </select>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Button Size') }}</label>
                                <input type="text" name="size" class="form-control sh-select-bare" value="{{ optional($wp)->size ?? '60px' }}" placeholder="60px">
                                <small class="text-muted">{{ __('CSS value, e.g. 60px') }}</small>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Header Color') }}</label>
                                <div class="d-flex align-items-center" style="gap:8px;">
                                    <input type="color" id="wp-color-picker" class="sh-select-bare" value="{{ optional($wp)->headerColor ?? '#128C7E' }}" style="width:46px; height:38px; padding:2px; border:1px solid var(--adm-border); border-radius:8px; cursor:pointer; background:transparent;">
                                    <input type="text" id="wp-color-text" name="headerColor" class="form-control sh-select-bare" value="{{ optional($wp)->headerColor ?? '#128C7E' }}" maxlength="7" style="font-family:monospace; text-transform:uppercase;">
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Header Title') }}</label>
                                <input type="text" name="headerTitle" class="form-control sh-select-bare" value="{{ optional($wp)->headerTitle ?? __('Chat with us') }}">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Popup Message') }}</label>
                                <input type="text" name="popupMessage" class="form-control sh-select-bare" value="{{ optional($wp)->popupMessage ?? __('Hey there! How can we help you?') }}">
                            </div>
                        </div>

                        <hr class="my-3">

                        {{-- Messenger chat bubble --}}
                        <h6 class="mb-3" style="font-weight:700;"><i class="feather icon-message-square mr-1 text-info"></i> {{ __('Facebook Messenger Bubble') }}</h6>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Messenger Chat Bubble URL') }}</label>
                                <input type="url" name="MESSENGER_CHAT_BUBBLE_URL" class="form-control sh-select-bare" value="{{ env('MESSENGER_CHAT_BUBBLE_URL') }}" placeholder="https://example.com/chat-bubble.js">
                                <small class="text-muted">{{ __('Optional. Paste the script URL Facebook gives you for your custom chat plugin. Leave blank to disable.') }}</small>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary-rgba" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }}>
                            <i class="feather icon-save mr-1"></i>{{ __('Save Chat Settings') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card m-b-30">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="feather icon-info mr-2 text-primary"></i>{{ __('How widgets work') }}</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled small text-muted mb-0" style="line-height:1.65;">
                        <li class="mb-2">• {{ __('Toggle a widget off and the corresponding storefront section is hidden — no other admin change needed.') }}</li>
                        <li class="mb-2">• {{ __('A widget that has no underlying data (e.g. zero active hot deals) will still hide automatically.') }}</li>
                        <li class="mb-2">• {{ __('"Home" controls visibility on the homepage, "Shop" on the catalog/shop pages.') }}</li>
                        <li>• {{ __('Changes apply immediately on the next page load.') }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('script')
<script>
(function(){
    var picker = document.getElementById('wp-color-picker');
    var text   = document.getElementById('wp-color-text');
    if (!picker || !text) return;
    picker.addEventListener('input', function(){ text.value = picker.value.toUpperCase(); });
    text.addEventListener('input', function(){
        if (/^#[0-9a-fA-F]{6}$/.test(text.value)) picker.value = text.value;
    });
})();
</script>
@endpush