@extends('user.layouts.template')

@section('style')
    <style>
        .select-box {
            font-size: 15px !important;
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
            padding: 20px;
            background: var(--nf-mainnav-bg);
            color: var(--bs-heading-color) !important;
            border-radius: 5px;
            position: relative;
        }

        .select-box .form-select {
            font-size: 15px !important;
        }

        .select-box::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 55%;
            transform: translateY(40%);
            border-radius: 0px 10px 10px 0px;
            background-color: var(--nf-header-bg);
        }

        .card-body::before {
            content: "";
            position: absolute;
            left: -1px;
            top: 20px;
            width: 5px;
            height: 40px;
            border-radius: 0px 10px 10px 0px;
            background-color: var(--nf-header-bg);
        }

        .select-box label {
            margin-bottom: 1px;
        }

        #embed_code {
            font-size: 14px;
        }

        @media screen and (max-width: 768px) {
            .select-box::before {
                height: 33%;
            }

            .card-body::before {
                top: 18px;
            }
        }

        .card-body {
            padding: 20px !important;
        }
    </style>
@endsection

@section('content')
    @php
        $permission = session()->get('permissions');
    @endphp
    <!-- Content Start -->
    <div class="content__boxed">
        <div class="content__wrap">
            <div class="Select-box p-3 mb-3">
                <div class="row justify-content-between">
                    <div class="col-lg-8 col-md-6 col-12 d-flex align-items-center justify-content-between">
                        <select class="form-select me-3" aria-label="Default select example" name="property"
                            id="state_selection">
                            <option selected>Select a State</option>
                            @foreach($states as $state)
                                <option value="{{$state->state}}">{{$state->state}}</option>
                            @endforeach
                        </select>
                        <select class="form-select" aria-label="Default select example" name="property"
                            id="selected_property">
                            <option selected value="">Select a Property</option>
                            @foreach($properties as $propert)
                                <option value="{{$propert->id}}">{{$propert->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-2 col-md-12 col-12 d-flex align-items-center justify-content-end mt-3 mt-md-0">
                        <button type="button" class="btn btn-success" id="generate_code">Generate</button>
                    </div>
                </div>
            </div>

            <div class="card" id="embed_code_container" style="display: none;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 d-flex justify-content-start align-items-center">
                            <p class="h5 mb-0">Code</p>
                        </div>
                        <div class="col-6 d-flex justify-content-end align-items-center">
                            <button type="button" id="copy_code" class="btn btn-success">Copy</button>
                        </div>
                        <div class="col-12 mt-3 p-3 rounded border border-light">
                            <code id="embed_code">
                                                    {{ '<!-- embed code start -->' }}
                                                    <br>{{ '<iframe src="' . route('generateEmbedContent', ['', ""]) . '/_content_" width="100%" height="600" style="border:none;"></iframe>' }}<br>
                                                    {{ '<!-- embed code end -->' }}
                                                </code>
                            <code id="backup_embed_code" class="d-none">
                                                    {{ '<!-- embed code start -->' }}
                                                    <br>{{ '<iframe src="' . route('generateEmbedContent', ['', ""]) . '/_content_" width="100%" height="600" style="border:none;"></iframe>' }}<br>
                                                    {{ '<!-- embed code end -->' }}
                                                </code>
                        </div>
                        {{-- <div class="col-12 mt-3">
                            <p class="h5 mb-0">Preview</p>
                        </div>
                        <div class="col-12 mt-2">
                            <iframe id="embed_code_preview" style="height: 100vh;width: 100%;"></iframe>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Content End -->
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $("#state_selection").on('change', function () {
            var value = $('#state_selection').val();
            if (!value || value.length == 0 || value == "") {
                Swal.fire("Please select a state first!");
                return;
            }

            let request = [];
            request.push(value);

            $.post({
                url: "{{ route('getDashboardProperties') }}",
                data: {
                    states: request
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer {{ session("authentication_token") }}',
                    'Accept': 'application/json',
                },
                success: function (response) {
                    $('#selected_property').html('');

                    if (response.data.length == 0) {
                        $('#selected_property').html('<option selected value="">No Properties Found</option>');
                    } else {
                        $.each(response.data, function (key, value) {
                            $('#selected_property').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                    }

                }, error(xhr, status, error) {
                    alert(xhr.responseJSON.message ? xhr.responseJSON.message : "Error while fetching properties");
                    console.log(error);
                    console.log(xhr.responseJSON.message);
                }
            })
        });


        $("#generate_code").on('click', function () {
            var value = $('#selected_property').val();

            if (!value || value.length == 0 || value == "") {
                Swal.fire("Please select a property !");
                $('#embed_code_container').fadeOut();
                return;
            } else {
                $('#embed_code_container').fadeIn();
                var embed_code = $('#backup_embed_code').html(); // Changed from .text() to .html()

                // Get the selected property name
                var propertyName = $('#selected_property option:selected').text();
                // Create URL-friendly version of property name
                var urlFriendlyName = propertyName.toLowerCase().replace(/[^a-z0-9]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '');

                // Replace _content_ with property ID and append property name to URL
                embed_code = embed_code.replace('_content_', value + '/' + urlFriendlyName);
                $('#embed_code').html(embed_code); // Changed from .text() to .html()
                Swal.fire("Generated Successfully !");
                // $('#embed_code_preview').attr('src', '{{ route('generateEmbedContent', ['', ""]) }}/' + value + '/' + urlFriendlyName);
            }
        });

        // Function to copy exact HTML content from code element
        function copyCodeToClipboard() {
            // Get the exact HTML content from the embed_code element
            var codeElement = document.getElementById('embed_code');
            var htmlContent = codeElement.innerHTML;

            // Decode HTML entities to get proper HTML code
            var tempDiv = document.createElement('div');
            tempDiv.innerHTML = htmlContent;
            var decodedContent = tempDiv.textContent || tempDiv.innerText;

            // Create a temporary textarea element
            var tempTextArea = document.createElement('textarea');
            tempTextArea.value = decodedContent;
            tempTextArea.style.position = 'fixed';
            tempTextArea.style.opacity = '0';
            document.body.appendChild(tempTextArea);

            // Select and copy the content
            tempTextArea.select();
            tempTextArea.setSelectionRange(0, 99999); // For mobile devices

            try {
                document.execCommand('copy');
                Swal.fire({
                    title: 'Copied!',
                    text: 'Embed code copied to clipboard',
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                });
            } catch (err) {
                Swal.fire({
                    title: 'Error!',
                    text: 'Failed to copy to clipboard',
                    icon: 'error'
                });
            }

            // Remove the temporary element
            document.body.removeChild(tempTextArea);
        }

        // Alternative modern approach using Clipboard API (for newer browsers)
        async function copyCodeToClipboardModern() {
            try {
                var codeElement = document.getElementById('embed_code');
                var htmlContent = codeElement.innerHTML;

                // Decode HTML entities to get proper HTML code
                var tempDiv = document.createElement('div');
                tempDiv.innerHTML = htmlContent;
                var decodedContent = tempDiv.textContent || tempDiv.innerText;

                await navigator.clipboard.writeText(decodedContent);

                Swal.fire({
                    title: 'Copied!',
                    text: 'Embed code copied to clipboard',
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                });
            } catch (err) {
                // Fallback to the traditional method
                copyCodeToClipboard();
            }
        }

        // Event listener for the copy button
        $(document).ready(function () {
            $('#copy_code').last().on('click', function () {
                // Check if modern Clipboard API is supported
                if (navigator.clipboard) {
                    copyCodeToClipboardModern();
                } else {
                    copyCodeToClipboard();
                }
            });
        });
    </script>
@endsection