@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">

                    {{-- ===================== RESTRIÇÃO DE ACESSO ===================== --}}
                    @if($djData->prohibed)
                        @php
                            $daysMap = [
                                'sun' => __('radio.weekday_short_sun'),
                                'mon' => __('radio.weekday_short_mon'),
                                'tue' => __('radio.weekday_short_tue'),
                                'wed' => __('radio.weekday_short_wed'),
                                'thu' => __('radio.weekday_short_thu'),
                                'fri' => __('radio.weekday_short_fri'),
                                'sat' => __('radio.weekday_short_sat'),
                            ];
                        @endphp
                        <div class="cfg-box mb-4">
                            <div class="cfg-head">
                                <i class="fa fa-fw fa-lock me-2"></i>
                                <span>{{ __('radio.password_show_restricted') }}</span>
                            </div>
                            <div class="cfg-body">
                                <div class="restrict-row">
                                    <span class="restrict-label">
                                        <i class="fa fa-fw fa-calendar-days me-1"></i>
                                        {{ __('radio.password_show_allowed_days') }}
                                    </span>
                                    <div class="restrict-days">
                                        @foreach($daysMap as $key => $label)
                                            <span class="day-pill {{ !empty($djData->$key) ? 'day-on' : 'day-off' }}">
                                                {{ $label }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="restrict-row">
                                    <span class="restrict-label">
                                        <i class="fa fa-fw fa-clock me-1"></i>
                                        {{ __('radio.password_show_allowed_time') }}
                                    </span>
                                    <div class="restrict-time">
                                        <b>{{ substr($djData->time_start, 0, 5) }}</b>
                                        <i class="fa fa-arrow-right-long mx-1 text-muted"></i>
                                        <b>{{ substr($djData->time_end, 0, 5) }}</b>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- ===================== SERVIDOR (onde conectar) ===================== --}}
                    <div class="cfg-box mb-4">
                        <div class="cfg-head">
                            <i class="fa fa-fw fa-server me-2"></i>
                            <span>{{ __('radio.password_show_server') }}</span>
                        </div>
                        <div class="cfg-body">
                            <div class="cfg-fields">
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Server Type</span>
                                    <div class="cfg-field-value">
                                        <span>Icecast 2</span>
                                    </div>
                                </div>
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Server IP / Host</span>
                                    <div class="cfg-field-value">
                                        <span id="copy_ip">{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}</span>
                                        <button class="btn btn-sm p-0 copy-btn" onclick="copyText('copy_ip', this)" title="{{ __('radio.password_copy_ip') }}" type="button">
                                            <i class="fa fa-copy text-muted"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Port</span>
                                    <div class="cfg-field-value">
                                        <span id="copy_port">{{ $portConnect }}</span>
                                        <button class="btn btn-sm p-0 copy-btn" onclick="copyText('copy_port', this)" title="{{ __('radio.password_copy_port') }}" type="button">
                                            <i class="fa fa-copy text-muted"></i>
                                        </button>
                                    </div>
                                </div>
								
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Encoder Password</span>
                                    <div class="cfg-field-value">
                                        <span id="copy_password">{{ $djData->password }}</span>
                                        <button class="btn btn-sm p-0 copy-btn" onclick="copyText('copy_password', this)" title="{{ __('radio.password_copy_password') }}" type="button">
                                            <i class="fa fa-copy text-muted"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Mount point</span>
                                    <div class="cfg-field-value">
                                        <span id="copy_mount">/live</span>
                                        <button class="btn btn-sm p-0 copy-btn" onclick="copyText('copy_mount', this)" title="{{ __('radio.password_copy_mount') }}" type="button">
                                            <i class="fa fa-copy text-muted"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===================== CODIFICAÇÃO ===================== --}}
                    <div class="cfg-box mb-3">
                        <div class="cfg-head">
                            <i class="fa fa-fw fa-sliders me-2"></i>
                            <span>{{ __('radio.password_show_encoding') }}</span>
                        </div>
                        <div class="cfg-body">
                            <div class="cfg-fields">
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Encoder Type</span>
                                    <div class="cfg-field-value">
                                        <span>{{ strtoupper($streamData->autodj_codec) }}</span>
                                    </div>
                                </div>
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Bitrate</span>
                                    <div class="cfg-field-value">
                                        <span>{{ $streamData->autodj_bitrate }} kbps</span>
                                    </div>
                                </div>
                                <div class="cfg-field">
                                    <span class="cfg-field-label">Samplerate</span>
                                    <div class="cfg-field-value">
                                        <span>44100 Hz</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
					{{-- ===================== AUTENTICAÇÃO ===================== --}}
                    <div class="cfg-box mb-4">
                        <div class="cfg-head">
                            <i class="fa fa-fw fa-key me-2"></i>
                            <span>{{ __('radio.password_show_auth') }}</span>
                        </div>
                        <div class="cfg-body">
                            <div class="cfg-fields">
                                <div class="cfg-field cfg-field-full">
                                    <span class="cfg-field-label">Encoder Token</span>
                                    @if($djData->encoder_token)
                                        <div class="cfg-field-value" id="enc_token_wrap">
                                            <span id="enc_token" title="{{ $djData->encoder_token }}" style="cursor:default;">{{ $djData->encoder_token }}</span>
                                            <button class="btn btn-sm p-0 copy-btn" onclick="copyText('enc_token', this)" title="{{ __('radio.password_copy_token') }}" type="button">
                                                <i class="fa fa-copy text-muted"></i>
                                            </button>
                                        </div>
                                    @else
                                        <div class="cfg-token-center" id="enc_token_wrap">
                                            <button class="btn btn-primary btn-token-round" id="btn_gen_token"
                                                data-url="{{ route("radio.live-passwords.gen-token") }}"
                                                data-hash="{{EncryptBras($djData->id)}}"
                                                type="button">
                                                <i class="fa fa-key"></i>
                                                <span>{{ __('general.action_generate') }}</span>
                                                <span>Token</span>
                                            </button>
                                        </div>
                                    @endif
                                    <span id="enc_token_loading" class="cfg-token-center" style="display:none;">
                                        <span><i class="fa fa-spinner fa-spin text-muted me-1"></i> {{ __('radio.password_generating') }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                </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>
    /* ===== Caixa / seção (mesmo estilo da restrição) ===== */
    .cfg-box {
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        overflow: hidden;
        background: #f8f9fa;
    }
    .cfg-head {
        display: flex;
        align-items: center;
        background: #e9ecef;
        color: #495057;
        font-weight: 700;
        padding: .55rem .9rem;
        font-size: .85rem;
        letter-spacing: .02em;
        text-transform: uppercase;
    }
    .cfg-body {
        padding: .9rem;
    }

    /* ===== Campos estilo formulário ===== */
    .cfg-fields {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: .75rem .9rem;
    }
    .cfg-field {
        display: flex;
        flex-direction: column;
        gap: .3rem;
        min-width: 0;
    }
    .cfg-field-full {
        grid-column: 1 / -1;
    }
    .cfg-field-label {
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #6c757d;
    }
    .cfg-field-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: .4rem;
        padding: .5rem .7rem;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: .9rem;
        font-weight: 600;
        color: #343a40;
        min-height: 2.4rem;
        min-width: 0;
    }
    .cfg-field-value > span:first-child {
        word-break: break-all;
        min-width: 0;
    }
    .copy-btn {
        line-height: 1;
        flex-shrink: 0;
    }

    /* ===== Botão redondo "Gerar Token" ===== */
    .cfg-token-center {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .75rem 0;
    }
    .btn-token-round {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        padding: 0;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .03em;
        line-height: 1.1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    }
    .btn-token-round i {
        font-size: 1.25rem;
        margin-bottom: .1rem;
    }
    .btn-token-round span {
        display: block;
    }
    .btn-token-round:hover:not(:disabled) {
        transform: scale(1.05);
        transition: transform .15s ease;
    }
    .copy-btn:hover i {
        color: #495057 !important;
    }

    /* ===== Restrição: dias / horário ===== */
    .restrict-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem 1rem;
        padding: .35rem 0;
    }
    .restrict-row + .restrict-row {
        border-top: 1px dashed #dee2e6;
    }
    .restrict-label {
        min-width: 150px;
        color: #6c757d;
        font-size: .85rem;
        font-weight: 600;
    }
    .restrict-days {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
    }
    .day-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        padding: .28rem .5rem;
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 600;
        line-height: 1;
    }
    .day-on {
        background: #6c757d;
        color: #fff;
    }
    .day-off {
        background: #eef0f2;
        color: #adb5bd;
        text-decoration: line-through;
    }
    .restrict-time {
        display: inline-flex;
        align-items: center;
        font-size: .95rem;
        background: #e9ecef;
        color: #495057;
        padding: .3rem .7rem;
        border-radius: .4rem;
    }
</style>

<script>
    $('#btn_gen_token').on('click', function () {
        var $btn = $(this);
        var $wrap = $('#enc_token_wrap');
        var $load = $('#enc_token_loading');

        var url = $btn.data('url');
        var hash = $btn.data('hash');
        var token = $btn.data('token');

        $btn.prop('disabled', true);
        $wrap.hide();
        $load.css('display', 'flex');

        $.ajax({
            url: url,
            method: 'POST',
            data: {
                url,
                _token: "{{ csrf_token() }}",
                hash
            },
            success: function (res) {
                $load.hide();
                if (res.success) {
                    // vira um campo normal, igual aos demais
                    $wrap.attr('class', 'cfg-field-value');
                    $wrap.html(
                        '<span id="enc_token" title="' + res.token + '" style="cursor:default;">' + res.token + '</span>' +
                        '<button class="btn btn-sm p-0 copy-btn" onclick="copyText(\'enc_token\', this)" title="{{ __('radio.password_copy_token') }}" type="button">' +
                        '<i class="fa fa-copy text-muted"></i></button>'
                    );
                    $wrap.css('display', 'flex');
                } else {
                    $wrap.html('<span class="text-danger"><i class="fa fa-times me-1"></i>' + res.message + '</span>');
                    $wrap.css('display', 'flex');
                }
            },
            error: function () {
                $load.hide();
                $wrap.html('<span class="text-danger"><i class="fa fa-times me-1"></i>{{ __('radio.password_token_error') }}</span>');
                $wrap.css('display', 'flex');
            }
        });
    });

    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>