@extends('layouts.app')

@section('title', 'Settings - Tiqkets')
@section('page-title', 'Settings')

@php
    use App\Models\ShortUrl;
@endphp

@section('content')
    <div class="settings-container">

        <div class="settings-card">

            <!-- Background Audio -->
            <div class="setting-item">
                <div class="setting-wrapper">
                    <div class="toggle-wrapper">
                        <input class="toggle-input setting-toggle" type="checkbox" id="audioToggle" data-setting="audio_enabled"
                            {{ $outlet->audio_enabled ? 'checked' : '' }}>
                        <label class="toggle-label" for="audioToggle"></label>
                    </div>
                    <div class="setting-text">
                        <h6 class="setting-title">Background Audio</h6>
                        <p class="setting-description">
                            Restaurant announcements/music play through speakers
                        </p>
                    </div>
                </div>
            </div>

            <!-- TV Display -->
            <div class="setting-item">
                <div class="setting-wrapper">
                    <div class="toggle-wrapper">
                        <input class="toggle-input setting-toggle" type="checkbox" id="tvToggle"
                            data-setting="tv_display_enabled" {{ $outlet->tv_display_enabled ? 'checked' : '' }}>
                        <label class="toggle-label" for="tvToggle"></label>
                    </div>

                    <div class="setting-text">
                        <h6 class="setting-title">TV Display</h6>
                        <p class="setting-description">Show queue status on TV screen.</p>

                        @php
                            $tvDisplayUrl = route('outlet-staff.outlet-display', [
                                'bid' => $outlet->id,
                                'cid' => $outlet->cid,
                            ]);

                            $shortTvUrl = ShortUrl::generate($tvDisplayUrl);
                        @endphp

                        @if ($outlet->tv_display_enabled)
                            <div class="tv-url-container mt-2">
                                <div class="tv-url-box" data-url="{{ $shortTvUrl }}">
                                    <span class="tv-url-label">Display URL:</span>

                                    <a href="{{ $shortTvUrl }}" target="_blank" class="tv-url-link">
                                        {{ $shortTvUrl }}
                                    </a>

                                    <button type="button" class="btn-copy-url" onclick="copyDisplayUrl(event)">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('styles')
    <style>
        .settings-container {
            max-width: 600px;
        }

        .setting-item {
            padding: 24px 20px;
            border-bottom: 1px solid #f3f4f6;
        }

        .setting-wrapper {
            display: flex;
            gap: 16px;
        }

        .toggle-input {
            display: none;
        }

        .toggle-label {
            width: 48px;
            height: 28px;
            background: #d1d5db;
            border-radius: 20px;
            position: relative;
            cursor: pointer;
        }

        .toggle-label::after {
            content: '';
            width: 24px;
            height: 24px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: 0.3s;
        }

        .toggle-input:checked+.toggle-label {
            background: #8C1867;
        }

        .toggle-input:checked+.toggle-label::after {
            left: 22px;
        }

        .setting-title {
            font-size: 15px;
            font-weight: 600;
        }

        .setting-description {
            font-size: 13px;
            color: #6b7280;
        }

        .tv-url-box {
            display: flex;
            gap: 8px;
            padding: 10px 12px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            border-radius: 6px;
            align-items: center;
        }

        .tv-url-link {
            font-size: 12px;
            color: #8C1867;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .btn-copy-url {
            border: 1px solid #d1d5db;
            padding: 5px 8px;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
@endpush


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

            const baseUrl = '{{ url('/') }}';
            const csrfToken = '{{ csrf_token() }}';

            document.querySelectorAll('.setting-toggle').forEach(toggle => {
                toggle.addEventListener('change', function() {
                    updateSetting(this.dataset.setting, this.checked);
                });
            });

            function updateSetting(setting, value) {

                const formData = new FormData();
                formData.append('_token', csrfToken);
                formData.append('setting', setting);
                formData.append('value', value ? '1' : '0');

                fetch(`${baseUrl}/outlet-staff/settings/update-settings`, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Updated',
                                timer: 1200,
                                showConfirmButton: false
                            }).then(() => location.reload());
                        } else {
                            Swal.fire('Error', data.message, 'error');
                        }
                    });
            }
        });

        function copyDisplayUrl(event) {
            const url = event.target.closest('.tv-url-box').dataset.url;

            navigator.clipboard.writeText(url).then(() => {
                const btn = event.target.closest('.btn-copy-url');
                btn.innerHTML = '✔';
                btn.style.color = '#10b981';

                setTimeout(() => {
                    btn.innerHTML = '<i class="fas fa-copy"></i>';
                    btn.style.color = '#6b7280';
                }, 1500);
            });
        }
    </script>
@endpush