@extends('layouts.agency')

@section('title', 'Home Page')

@section('content')

{{--    @php--}}

{{--    print_r(Auth::user()); die;--}}
{{--    @endphp--}}
<section class="custom--contaner">
    <div class="dash--text">
        <h2>Dashboard</h2>
    </div>
    <div class="add--agency--sec dashbord-agency">
        <div class="agency--box">
            <a>
                <div class="age--sec">
                    <div class="dast-agency"> Total Customers</div>
                </div>
                <div class="dast-agency-number">{{isset($totalCustomers) ? $totalCustomers : ''}}</div>
            </a>
        </div>
        <div class="agency--box">
            <a>
                <div class="age--sec">
                    <div class="dast-agency"> Total Leads</div>
                </div>
                <div class="dast-agency-number">{{isset($totalLeads) ? $totalLeads : ''}}</div>
            </a>
        </div>
        <div class="agency--box">
            <a>
                <div class="age--sec">
                    <div class="dast-agency"> Current Leads</div>
                </div>
                <div class="dast-agency-number">{{isset($currentLeads) ? $currentLeads : ''}}</div>
            </a>
        </div>

        <div class="agency--box tooltip custom-agency--box">
            <a>
                <div class="age--sec">
                    <div class="dast-agency">Script Code</div>
                </div>
                <textarea row="3" disabled readonly name="loader-script" id="scriptCodeContainer"><script defer src="https://app.visitordetector.io/script/{{$tenant_id}}-script.js"></script></textarea>

                <svg   id="copyScriptCodeBtn" onclick="copyScriptCode()" width="40px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="
                                                                position: absolute;
                                                                top: 0;
                                                                right: 0;
                                                            ">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
                    <g id="SVGRepo_iconCarrier">
                        <path d="M10 8V7C10 6.05719 10 5.58579 10.2929 5.29289C10.5858 5 11.0572 5 12 5H17C17.9428 5 18.4142 5 18.7071 5.29289C19 5.58579 19 6.05719 19 7V12C19 12.9428 19 13.4142 18.7071 13.7071C18.4142 14 17.9428 14 17 14H16M7 19H12C12.9428 19 13.4142 19 13.7071 18.7071C14 18.4142 14 17.9428 14 17V12C14 11.0572 14 10.5858 13.7071 10.2929C13.4142 10 12.9428 10 12 10H7C6.05719 10 5.58579 10 5.29289 10.2929C5 10.5858 5 11.0572 5 12V17C5 17.9428 5 18.4142 5.29289 18.7071C5.58579 19 6.05719 19 7 19Z" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"/>
                    </g>
                </svg>
                <span class="tooltiptext">Copy Script Code</span>
            </a>
        </div>
    </div>
  
</section>

@endsection

<style>
    /* ToolTip */

    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }
    textarea {
        resize: none;
    }
    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 122px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 4px 4px;
        border-radius: 6px;
        top: -20px;
        right: -20px;
        position: absolute;
        z-index: 1;
        font-size: 12px;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

    div#successAlert {
        position: absolute;
        top: 14px;
        right: 15px;
    }
    #scriptCodeContainer {
        width: 100%;
        height: 137px;
        position: relative;
        top: -39px;
        border: unset;
        cursor: default;
    }
    #scriptCodeContainer:focus-visible {
        border: none;
        outline: none;
    }
    .agency--box.custom-agency--box {
        position: relative;
        width: 385px;
        word-break: break-all;
        max-height: 192px;
    }
</style>

<script>
    function copyScriptCode() {
        // let tempTextarea = document.getElementById('scriptCodeContainer');
        //
        // tempTextarea.select();
        // tempTextarea.setSelectionRange(0, 99999);
        const scriptCodeContainer = document.querySelector('#scriptCodeContainer');
        scriptCodeContainer.select();
        navigator.clipboard.writeText(scriptCodeContainer.value)
            .then(() => {
                console.log('Text copied successfully');
            })
            .catch(err => {
                console.error('Failed to copy text: ', err);
            });

        $('.dashbord-agency').append(' <div id="successAlert" class="alert alert-success">\n' +
            '            Copied\n' +
            '        </div>')

        setTimeout(function() {
            $('#successAlert').fadeOut(function() {
                $(this).remove();
            });
        }, 1000);
    }

</script>