@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .setting-card {
        border: 1px solid rgba(99,102,241,.12) !important;
        box-shadow: 0 12px 30px rgba(15,23,42,.18);
        transition: all .25s ease;
    }

    .setting-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,.24) !important;
    }

    .card-header-custom {
        border-bottom: 1px solid rgba(148,163,184,.08);
        background: transparent;
    }

    .preview-box {
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(148,163,184,.08);
        border-radius: 14px;
    }

    .social-icon-box {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: rgba(99,102,241,.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #818cf8;
        flex-shrink: 0;
    }

    .submit-loading {
        display: inline-flex;
        align-items: center;
    }

    .livechat-status-badge {
        min-width: 90px;
    }

    .preview-id {
        word-break: break-all;
    }
</style>
@endpush

@section('content')

@php
    $selectedProvider = old('provider', $livechat->provider ?? 'tawk');
    $selectedScript = old('script', $livechat->script ?? '');
    $selectedStatus = old('is_active', $livechat->is_active ?? 1);
@endphp

<div class="container-xxl flex-grow-1 container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:240px;
                height:240px;
                background:
                radial-gradient(
                    circle,
                    rgba(99,102,241,.14) 0%,
                    transparent 72%
                );
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-3">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    Social & Livechat Settings
                </h5>

                <small class="text-body-secondary">
                    Manage contact links and livechat integration
                </small>

            </div>

            <span class="badge rounded-pill bg-label-primary px-3 py-2">
                System / Social Settings
            </span>

        </div>

    </div>

    {{-- ALERT --}}
    @if (session('success'))

        <div class="alert alert-success alert-dismissible" role="alert">

            {{ session('success') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>

        </div>

    @endif

    @if (session('error'))

        <div class="alert alert-danger alert-dismissible" role="alert">

            {{ session('error') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>

        </div>

    @endif

    @if ($errors->any())

        <div class="alert alert-danger" role="alert">

            <div class="fw-semibold mb-1">
                Please check the form again.
            </div>

            <ul class="mb-0 ps-3">

                @foreach ($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif

    <div class="row g-4">

        {{-- SOCIAL --}}
        <div class="col-xl-6">

            <div class="card border-0 shadow-sm h-100 overflow-hidden glass-card setting-card">

                <div class="card-header card-header-custom">

                    <h5 class="card-title mb-1 text-white">
                        Social Contact
                    </h5>

                    <small class="text-body-secondary">
                        Update public social media and contact links
                    </small>

                </div>

                <form method="POST"
                      action="{{ route('admin.settings.social.update') }}"
                      class="js-loading-form">

                    @csrf

                    <div class="card-body">

                        {{-- WHATSAPP --}}
                        <div class="mb-3">

                            <label for="whatsapp"
                                   class="form-label text-white">

                                WhatsApp

                            </label>

                            <div class="input-group">

                                <span class="input-group-text">
                                    <i class="ti tabler-brand-whatsapp"></i>
                                </span>

                                <input
                                    type="text"
                                    name="whatsapp"
                                    id="whatsapp"
                                    class="form-control @error('whatsapp') is-invalid @enderror"
                                    value="{{ old('whatsapp', $contact->whatsapp ?? '') }}"
                                    maxlength="20"
                                    placeholder="628xxxxxxxxxx"
                                >

                            </div>

                            @error('whatsapp')

                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                        @php
                            $socialFields = [
                                'facebook' => [
                                    'label' => 'Facebook',
                                    'icon' => 'brand-facebook'
                                ],
                                'instagram' => [
                                    'label' => 'Instagram',
                                    'icon' => 'brand-instagram'
                                ],
                                'twitter' => [
                                    'label' => 'Twitter / X',
                                    'icon' => 'brand-x'
                                ],
                                'youtube' => [
                                    'label' => 'YouTube',
                                    'icon' => 'brand-youtube'
                                ],
                                'telegram' => [
                                    'label' => 'Telegram',
                                    'icon' => 'brand-telegram'
                                ],
                                'tiktok' => [
                                    'label' => 'TikTok',
                                    'icon' => 'brand-tiktok'
                                ],
                            ];
                        @endphp

                        @foreach ($socialFields as $field => $data)

                            <div class="mb-3">

                                <label for="{{ $field }}"
                                       class="form-label text-white">

                                    {{ $data['label'] }}

                                </label>

                                <div class="input-group">

                                    <span class="input-group-text">
                                        <i class="ti tabler-{{ $data['icon'] }}"></i>
                                    </span>

                                    <input
                                        type="url"
                                        name="{{ $field }}"
                                        id="{{ $field }}"
                                        class="form-control @error($field) is-invalid @enderror"
                                        value="{{ old($field, $contact->{$field} ?? '') }}"
                                        maxlength="255"
                                        placeholder="https://..."
                                    >

                                </div>

                                @error($field)

                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>

                                @enderror

                            </div>

                        @endforeach

                    </div>

                    <div class="card-footer border-top d-flex justify-content-end">

                        <button type="submit"
                                class="btn btn-primary px-4 js-submit-btn">

                            <span class="submit-text">

                                <i class="ti tabler-device-floppy me-1"></i>
                                Save Social

                            </span>

                            <span class="submit-loading d-none">

                                <span class="spinner-border spinner-border-sm me-1"
                                      role="status"
                                      aria-hidden="true">
                                </span>

                                Saving...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

        {{-- LIVECHAT --}}
        <div class="col-xl-6">

            <div class="card border-0 shadow-sm h-100 overflow-hidden glass-card setting-card">

                <div class="card-header card-header-custom">

                    <h5 class="card-title mb-1 text-white">
                        Livechat
                    </h5>

                    <small class="text-body-secondary">
                        Configure livechat provider and ID
                    </small>

                </div>

                <form method="POST"
                      action="{{ route('admin.settings.livechat.update') }}"
                      class="js-loading-form d-flex flex-column flex-grow-1">

                    @csrf

                    <div class="card-body flex-grow-1">

                        {{-- PROVIDER --}}
                        <div class="mb-4">

                            <label class="form-label text-white">
                                Provider
                            </label>

                            <select name="provider"
                                    id="providerSelect"
                                    class="form-select @error('provider') is-invalid @enderror">

                                <option value="tawk"
                                    {{ $selectedProvider === 'tawk' ? 'selected' : '' }}>
                                    Tawk.to
                                </option>

                                <option value="livechat"
                                    {{ $selectedProvider === 'livechat' ? 'selected' : '' }}>
                                    LiveChat
                                </option>

                            </select>

                            @error('provider')

                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                        {{-- SCRIPT --}}
                        <div class="mb-4">

                            <label class="form-label text-white">
                                Livechat ID
                            </label>

                            <input
                                type="text"
                                name="script"
                                id="livechatScript"
                                class="form-control @error('script') is-invalid @enderror"
                                value="{{ $selectedScript }}"
                                placeholder="Tawk: property/widget | LiveChat: license ID"
                                maxlength="255"
                            >

                            <div class="form-text">
                                Simpan hanya ID, bukan full script
                            </div>

                            @error('script')

                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                        {{-- STATUS --}}
                        <div class="mb-4">

                            <label class="form-label text-white">
                                Status
                            </label>

                            <select name="is_active"
                                    id="livechatStatus"
                                    class="form-select @error('is_active') is-invalid @enderror">

                                <option value="1"
                                    {{ (string)$selectedStatus === '1' ? 'selected' : '' }}>
                                    Active
                                </option>

                                <option value="0"
                                    {{ (string)$selectedStatus === '0' ? 'selected' : '' }}>
                                    Inactive
                                </option>

                            </select>

                            @error('is_active')

                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>

                            @enderror

                        </div>

                        {{-- PREVIEW --}}
                        <div class="preview-box p-3">

                            <div class="d-flex justify-content-between align-items-center mb-3">

                                <div class="fw-semibold text-white">
                                    Preview
                                </div>

                                <span class="badge livechat-status-badge {{ $selectedStatus ? 'bg-success' : 'bg-secondary' }}"
                                      id="previewBadge">

                                    {{ $selectedStatus ? strtoupper($selectedProvider) : 'Inactive' }}

                                </span>

                            </div>

                            <div class="small text-body-secondary"
                                 id="previewText">

                                @if(!$selectedStatus)

                                    Livechat tidak aktif.

                                @elseif(empty($selectedScript))

                                    ID belum diisi.

                                @else

                                    ID:
                                    <code class="preview-id">
                                        {{ $selectedScript }}
                                    </code>

                                @endif

                            </div>

                        </div>

                    </div>

                    <div class="card-footer border-top text-end">

                        <button type="submit"
                                class="btn btn-primary px-4 js-submit-btn">

                            <span class="submit-text">

                                <i class="ti tabler-device-floppy me-1"></i>
                                Save Livechat

                            </span>

                            <span class="submit-loading d-none">

                                <span class="spinner-border spinner-border-sm me-1"></span>

                                Saving...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    // =========================
    // LOADING BUTTON
    // =========================
    document.querySelectorAll('.js-loading-form')
        .forEach(function (form) {

            form.addEventListener('submit', function () {

                const btn =
                    form.querySelector('.js-submit-btn');

                if (!btn) return;

                btn.disabled = true;

                btn.querySelector('.submit-text')
                    ?.classList.add('d-none');

                btn.querySelector('.submit-loading')
                    ?.classList.remove('d-none');

            });

        });

    // =========================
    // LIVECHAT PREVIEW
    // =========================
    const provider =
        document.getElementById('providerSelect');

    const script =
        document.getElementById('livechatScript');

    const status =
        document.getElementById('livechatStatus');

    const previewBadge =
        document.getElementById('previewBadge');

    const previewText =
        document.getElementById('previewText');

    function updatePreview() {

        const providerValue =
            provider.value || 'tawk';

        const scriptValue =
            script.value.trim();

        const statusValue =
            status.value;

        if (statusValue === '0') {

            previewBadge.className =
                'badge bg-secondary livechat-status-badge';

            previewBadge.textContent =
                'Inactive';

            previewText.innerHTML =
                'Livechat tidak aktif.';

            return;
        }

        previewBadge.className =
            'badge bg-success livechat-status-badge';

        previewBadge.textContent =
            providerValue.toUpperCase();

        if (!scriptValue) {

            previewText.innerHTML =
                'ID belum diisi.';

            return;
        }

        previewText.innerHTML =
            'ID: <code class="preview-id">' +
            scriptValue +
            '</code>';

    }

    provider.addEventListener('change', updatePreview);
    script.addEventListener('input', updatePreview);
    status.addEventListener('change', updatePreview);

});
</script>
@endpush