@section('title', __('radio.password_show_title'))
@section('head')
@endsection
@include('includes/header')
@include('includes/topRadio')

<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.password_show_title') }}: <b>{{ $djData->name }}</b>
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.live-passwords.r') }}">{{ __('radio.menu_item_4') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.password_show_title') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="block block-rounded">
                <div class="block-content pt-2 pb-0 ps-0 pe-0">

                    <p class="alert alert-dark fs-sm ms-2 me-2">
                        <i class="fa fa-fw fa-info me-1"></i> {{ __('radio.password_show_tutorial_note') }}
                    </p>

                    <table class="table table-striped table-borderless fs-sm mb-0">
                        <tbody>
                        <tr>
                            <td>
                                Server Type: <b>Icecast 2</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Encoder Type: <b>{{ strtoupper($streamData->autodj_codec) }}</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Bitrate: <b>{{ $streamData->autodj_bitrate }} kbps</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Samplerate: <b>44100 Hz</b>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Server IP: <b><span id="copy_ip">{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}</span></b>
                                <button class="btn btn-sm p-0 ms-2" onclick="copyText('copy_ip', this)" title="{{ __('radio.password_copy_ip') }}">
                                    <i class="fa fa-copy text-muted"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Server Port: <b><span id="copy_port">{{ $portConnect }}</span></b>
                                <button class="btn btn-sm p-0 ms-2" onclick="copyText('copy_port', this)" title="{{ __('radio.password_copy_port') }}">
                                    <i class="fa fa-copy text-muted"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Mount point: <b>/live</b>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>

        </div>
    </div>

</div>

</main>

@include('includes/footer')

</div>

<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<style>
td {
    display: flex;
    flex-wrap: wrap;
	gap:5px;
    align-items: center; /* Alinha verticalmente ao centro */
}
</style>

<script>
    function copyText(elementId, btn) {
        const textToCopy = document.getElementById(elementId).innerText;
        
        navigator.clipboard.writeText(textToCopy).then(() => {
            const icon = btn.querySelector('i');
            
            const originalClasses = icon.className;
            
            icon.className = 'fa fa-check text-success';
            
            setTimeout(() => {
                icon.className = originalClasses;
            }, 3000);
        }).catch(err => {
            console.error('Erro ao copiar: ', err);
        });
    }
</script>

</body>
</html>