@extends('layouts.app')

@section('content')
    <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">Create</li>
            </ol>
            <!-- end breadcrumb -->

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

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" 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">Add New Google Nest</h4>
                </div>

                <div class="panel-body">

                    <form action="{{ route('google_nests.store') }}" method="POST" id="googleNestForm" novalidate>
                        @csrf

                        <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">{{ old('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="{{ old('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 generated automatically.
                                    </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="{{ old('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') === 'active' ? 'selected' : '' }}>Active
                                        </option>
                                        <option value="inactive" {{ old('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">QR Code Preview</h5>
                                    </div>
                                    <div class="card-body text-center">
                                        <div id="qrPreview">
                                            <div class="text-muted">
                                                <i class="fa fa-qrcode fa-3x mb-2"></i>
                                                <p>QR code will be generated automatically when you enter a WhatsApp number
                                                </p>
                                            </div>
                                        </div>
                                        <div id="whatsappPreview" class="mt-3" style="display: none;">
                                            <small class="text-muted">
                                                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">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 is generated automatically from WhatsApp number</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 class="mb-2">
                                                <i class="fa fa-link text-primary"></i>
                                                <small>Enter a valid YouTube URL only</small>
                                            </li>
                                            <li>
                                                <i class="fa fa-shield text-warning"></i>
                                                <small>All fields are required and validated</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> Create Google Nest
                            </button>
                            <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();
                    }
                }
            });

            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');

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

                if (!number) {
                    whatsappPreview.style.display = 'none';
                    qrPreview.innerHTML = `
                        <div class="text-muted">
                            <i class="fa fa-qrcode fa-3x mb-2"></i>
                            <p>QR code will be generated automatically when you enter a WhatsApp number</p>
                        </div>
                    `;
                    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="text-success">
                        <i class="fa fa-qrcode fa-3x mb-2"></i>
                        <p>QR code will be generated for:<br><small>${whatsappLink}</small></p>
                    </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);

            // Form submission
            form.addEventListener('submit', function(e) {
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Creating...';
                submitBtn.disabled = true;

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

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