@extends('layouts.app')

@section('content')
    <style>
        .note-editable {
            background-color: #A9A9A9 !important;
        }
    </style>
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('google_nests.index') }}">Google Nest</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Edit Google Nest</h1>
            <!-- end page-header -->

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show alert-session" role="alert">
                    <i class="fa fa-exclamation-triangle mr-2"></i>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit Google Nest Record</h4>
                </div>

                <div class="panel-body">

                    <form action="{{ route('google_nests.update', $googleNest) }}" method="POST" id="googleNestForm">
                        @csrf
                        @method('PUT')

                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label for="text" class="form-label">Text <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="text" name="text" rows="4"
                                        placeholder="Enter descriptive text for Google Nest">{{ $googleNest->text }}</textarea>
                                    <small class="form-text text-muted">
                                        You can use rich text formatting with the editor above.
                                    </small>
                                </div>

                                <div class="form-group">
                                    <label for="whatsapp_number" class="form-label">WhatsApp Number <span
                                            class="text-danger">*</span></label>
                                    <input type="text"
                                        class="form-control @error('whatsapp_number') is-invalid @enderror"
                                        id="whatsapp_number" name="whatsapp_number"
                                        value="{{ $googleNest->whatsapp_number }}"
                                        placeholder="e.g., +628123456789 or 08123456789" maxlength="20">
                                    <small class="form-text text-muted">
                                        Enter WhatsApp number with country code (+62) or local format (08xxx). QR code will
                                        be regenerated if changed.
                                    </small>
                                </div>

                                <div class="form-group">
                                    <label for="url_link" class="form-label">YouTube URL <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('url_link') is-invalid @enderror"
                                        id="url_link" name="url_link" value="{{ $googleNest->url_link }}"
                                        placeholder="https://www.youtube.com/watch?v=..." maxlength="255">
                                    <small class="form-text text-muted">
                                        Enter a valid YouTube URL (e.g., https://www.youtube.com/watch?v=... or
                                        https://youtu.be/...)
                                    </small>
                                </div>

                                <div class="form-group">
                                    <label for="status" class="form-label">Status <span
                                            class="text-danger">*</span></label>
                                    <select class="form-control @error('status') is-invalid @enderror" id="status"
                                        name="status">
                                        <option value="active"
                                            {{ old('status', $googleNest->status) === 'active' ? 'selected' : '' }}>Active
                                        </option>
                                        <option value="inactive"
                                            {{ old('status', $googleNest->status) === 'inactive' ? 'selected' : '' }}>
                                            Inactive</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Current QR Code</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        @if ($googleNest->qr_code_url_full)
                                            <img src="{{ $googleNest->qr_code_url_full }}" alt="Current QR Code"
                                                class="img-fluid mb-3" style="max-width: 200px;">
                                            <p class="text-muted">
                                                <small>Current WhatsApp: {{ $googleNest->whatsapp_number }}</small>
                                            </p>
                                            <!-- <button type="button" class="btn btn-sm btn-outline-primary" id="regenerateQr">
                                                <i class="fa fa-refresh"></i> Regenerate QR Code
                                            </button> -->
                                        @else
                                            <div class="text-muted">
                                                <i class="fa fa-qrcode fa-3x mb-2"></i>
                                                <p>No QR code available</p>
                                            </div>
                                        @endif

                                        <div id="qrPreview" class="mt-3"></div>
                                        <div id="whatsappPreview" class="mt-3" style="display: none;">
                                            <small class="text-muted">
                                                New WhatsApp URL: <br>
                                                <span id="whatsappUrl" class="text-primary"></span>
                                            </small>
                                        </div>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Record Info</h5>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-unstyled mb-0">
                                            <li class="mb-2">
                                                <i class="fa fa-calendar text-info"></i>
                                                <small>Created: {{ $googleNest->created_at->format('M d, Y H:i') }}</small>
                                            </li>
                                            <li class="mb-2">
                                                <i class="fa fa-edit text-warning"></i>
                                                <small>Updated: {{ $googleNest->updated_at->format('M d, Y H:i') }}</small>
                                            </li>
                                            <li class="mb-2">
                                                <i
                                                    class="fa fa-toggle-{{ $googleNest->status === 'active' ? 'on text-success' : 'off text-secondary' }}"></i>
                                                <small>Status: {{ ucfirst($googleNest->status) }}</small>
                                            </li>
                                            <li>
                                                <i class="fa fa-qrcode text-primary"></i>
                                                <small>QR Code:
                                                    {{ $googleNest->qr_code_path ? 'Available' : 'Not Generated' }}</small>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0">Instructions</h5>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-unstyled mb-0">
                                            <li class="mb-2">
                                                <i class="fa fa-info-circle text-info"></i>
                                                <small>QR code will be regenerated if WhatsApp number changes</small>
                                            </li>
                                            <li class="mb-2">
                                                <i class="fa fa-phone text-success"></i>
                                                <small>Use format: +628xxx or 08xxx for Indonesian numbers</small>
                                            </li>
                                            <li>
                                                <i class="fa fa-link text-primary"></i>
                                                <small>URL must start with http:// or https://</small>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-custom" id="submitBtn">
                                <i class="fa fa-save"></i> Update Google Nest
                            </button>
                            <!-- <a href="{{ route('google_nests.show', $googleNest) }}" class="btn btn-custom">
                                <i class="fa fa-eye"></i> View
                            </a> -->
                            <a href="{{ route('google_nests.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Auto-dismiss session alerts after 3 seconds
            const sessionAlerts = document.querySelectorAll('.alert-session');
            sessionAlerts.forEach(alert => {
                setTimeout(() => {
                    alert.remove();
                }, 3000);
            });

            // Initialize Summernote
            $('#text').summernote({
                height: 300,
                placeholder: 'Enter descriptive text for Google Nest...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                callbacks: {
                    onChange: function(contents, $editable) {
                        // Trigger validation on content change
                        validateSummernoteContent();
                    },
                }
            });

            const oldText = `{!! addslashes($googleNest->text) !!}`;

            $('#text').summernote('code', oldText);

            function isSummernoteEmpty(html) {
                if (!html) return true;

                // Remove HTML tags
                const text = html
                    .replace(/<[^>]*>/g, '')
                    .replace(/&nbsp;/g, '')
                    .trim();

                return text.length === 0;
            }

            // Summernote validation
            function validateSummernoteContent() {
                const content = $('#text').summernote('code');

                // Strip HTML + nbsp + whitespace
                const textContent = $('<div>')
                    .html(content)
                    .text()
                    .replace(/\u00A0/g, ' ')
                    .trim();

                const editor = $('#text').next('.note-editor');

                // ❌ EMPTY (required)
                if (textContent.length === 0) {
                    editor.addClass('is-invalid');
                    editor.attr('data-error', 'Text is required.');
                    return false;
                }

                // ❌ TOO LONG
                if (textContent.length > 5000) {
                    editor.addClass('is-invalid');
                    editor.attr('data-error', 'Text cannot exceed 5000 characters.');
                    return false;
                }

                // ✅ VALID
                editor.removeClass('is-invalid');
                editor.removeAttr('data-error');
                return true;
            }

            const whatsappInput = document.getElementById('whatsapp_number');
            const urlInput = document.getElementById('url_link');
            const qrPreview = document.getElementById('qrPreview');
            const whatsappPreview = document.getElementById('whatsappPreview');
            const whatsappUrl = document.getElementById('whatsappUrl');
            const form = document.getElementById('googleNestForm');
            const submitBtn = document.getElementById('submitBtn');
            const regenerateBtn = document.getElementById('regenerateQr');

            const originalWhatsappNumber = '{{ $googleNest->whatsapp_number }}';

            // WhatsApp number validation and preview
            function validateAndPreviewWhatsapp() {
                const number = whatsappInput.value.trim();

                if (!number || number === originalWhatsappNumber) {
                    whatsappPreview.style.display = 'none';
                    qrPreview.innerHTML = '';
                    return;
                }

                // Clean and format number
                let cleanNumber = number.replace(/[^\d+]/g, '');
                cleanNumber = cleanNumber.replace(/^\+/, '');

                // Add Indonesian country code if needed
                if (!cleanNumber.startsWith('62')) {
                    cleanNumber = '62' + cleanNumber.replace(/^0/, '');
                }

                const whatsappLink = `https://wa.me/${cleanNumber}`;

                // Show preview
                whatsappUrl.textContent = whatsappLink;
                whatsappPreview.style.display = 'block';

                // Show QR placeholder
                qrPreview.innerHTML = `
                    <div class="alert alert-info">
                        <small><i class="fa fa-info-circle"></i> QR code will be regenerated with new number</small>
                    </div>
                `;

                // Basic validation
                const isValid = /^(\+?62|0)[0-9]{8,12}$/.test(number);
                whatsappInput.classList.toggle('is-invalid', !isValid && number.length > 0);
                whatsappInput.classList.toggle('is-valid', isValid);
            }

            whatsappInput.addEventListener('input', validateAndPreviewWhatsapp);
            whatsappInput.addEventListener('blur', validateAndPreviewWhatsapp);

            // URL validation - YouTube only
            function validateUrl() {
                const url = urlInput.value.trim();

                if (!url) {
                    urlInput.classList.remove('is-valid', 'is-invalid');
                    return;
                }

                // Check if URL is a valid YouTube URL
                const youtubePattern = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/i;

                if (youtubePattern.test(url)) {
                    urlInput.classList.remove('is-invalid');
                    urlInput.classList.add('is-valid');
                } else {
                    urlInput.classList.remove('is-valid');
                    urlInput.classList.add('is-invalid');
                }
            }

            urlInput.addEventListener('input', validateUrl);
            urlInput.addEventListener('blur', validateUrl);

            // Regenerate QR Code
            if (regenerateBtn) {
                regenerateBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const originalHtml = this.innerHTML;

                    this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Regenerating...';
                    this.disabled = true;

                    const regenerateUrl = "{{ route('google_nests.regenerateQr', $googleNest) }}";

                    fetch(regenerateUrl, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Content-Type': 'application/json',
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showAlert('success', data.message);
                                setTimeout(() => location.reload(), 1000);
                            } else {
                                showAlert('danger', 'Failed to regenerate QR code.');
                            }
                        })
                        .catch(error => {
                            showAlert('danger', 'An error occurred while regenerating QR code.');
                        })
                        .finally(() => {
                            this.innerHTML = originalHtml;
                            this.disabled = false;
                        });
                });
            }

            // Form submission
            form.addEventListener('submit', function(e) {
                // Validate Summernote content before submission
                // const content = $('#text').summernote('code');
                // const textContent = $('<div>').html(content).text();

                // if (!validateSummernoteContent()) {
                //     e.preventDefault();
                //     return false;
                // }

                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Updating...';
                submitBtn.disabled = true;

                // Re-enable button after 5 seconds to prevent permanent disability
                setTimeout(() => {
                    submitBtn.innerHTML = '<i class="fa fa-save"></i> Update Google Nest';
                    submitBtn.disabled = false;
                }, 5000);
            });

            // Show alert function
            function showAlert(type, message) {
                const alertHtml = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;
                document.querySelector('.panel-body').insertAdjacentHTML('afterbegin', alertHtml);

                setTimeout(() => {
                    const alert = document.querySelector('.alert');
                    if (alert) alert.remove();
                }, 3000);
            }

            // Initialize validations
            validateAndPreviewWhatsapp();
            validateUrl();
        });
    </script>
@endsection