@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" class="btn btn-success" id="copy_code">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', ['id' => '_id_', 'property_name' => '_name_']) . '" width="100%" height="600" style="border:none;height: 100vh;"></iframe>' }}<br>
                                                {{ '<!-- embed code end -->' }}
                                            </code>
                            <code id="backup_embed_code" class="d-none">
                                                {{ '<!-- embed code start -->' }}
                                                <br>{{ '<iframe src="' . route('generateEmbedContent', ['id' => '_id_', 'property_name' => '_name_']) . '" width="100%" height="600" style="border:none;height: 100vh;"></iframe>' }}<br>
                                                {{ '<!-- embed code end -->' }}
                                            </code>
                        </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('_id_', value);
                embed_code = embed_code.replace('_name_', urlFriendlyName);
                $('#embed_code').html(embed_code); // Changed from .text() to .html()
                Swal.fire("Generated Successfully !");
            }
        });

        // Copy embed code functionality
        $("#copy_code").on('click', function () {
            var embedCode = $('#embed_code').text();
            
            if (!embedCode || embedCode.trim() === '') {
                Swal.fire("No code to copy! Please generate code first.");
                return;
            }

            // Clean up the embed code by removing extra whitespace and formatting
            var cleanCode = embedCode.replace(/\s+/g, ' ').trim();
            
            // Use modern clipboard API if available
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(cleanCode).then(function() {
                    Swal.fire({
                        icon: 'success',
                        title: 'Copied!',
                        text: 'Embed code copied to clipboard',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }).catch(function(err) {
                    console.error('Failed to copy: ', err);
                    fallbackCopy(cleanCode);
                });
                $("#copy_code").text('Copied');
            } else {
                // Fallback for older browsers
                fallbackCopy(cleanCode);
            }
        });

        // Fallback copy function for older browsers
        function fallbackCopy(text) {
            try {
                var textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";
                textArea.style.left = "-999999px";
                textArea.style.top = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                
                var successful = document.execCommand('copy');
                document.body.removeChild(textArea);
                
                if (successful) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Copied!',
                        text: 'Embed code copied to clipboard',
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $("#copy_code").text('Copied');
                } else {
                    throw new Error('Copy command failed');
                }
            } catch (err) {
                console.error('Failed to copy: ', err);
                Swal.fire({
                    icon: 'error',
                    title: 'Copy Failed',
                    text: 'Unable to copy to clipboard. Please select and copy manually.',
                    confirmButtonText: 'OK'
                });
            }
        }
    </script>
@endsection