@section('title', __('radio.page_passwords_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .swal2-title{font-size: 19px;}

        .dj-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: .85rem;
            color: #fff;
            background: linear-gradient(135deg, #6c757d, #495057);
            flex-shrink: 0;
            text-transform: uppercase;
        }
        .dj-name-cell {
            display: flex;
            align-items: center;
            gap: .6rem;
        }
        .table-vcenter tbody tr {
            transition: background-color .12s ease;
        }
        .table-vcenter tbody tr:hover {
            background-color: #f8f9fa;
        }
        .status-pill {
            font-size: .72rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .3rem .75rem;
            border-radius: 999px;
        }
        .status-on  { background: #e7f5ec; color: #1b7e46; }
        .status-off { background: #f1f3f5; color: #868e96; }

        .action-btns {
            display: inline-flex;
            gap: .3rem;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        /* ---- Modal: desconexões por horário excedido ---- */
        #logsModal .modal-content { border: 0; border-radius: .8rem; overflow: hidden; }
        #logsModal .modal-header { padding: 1rem 1.25rem; }
        #logsModal .modal-title { display: flex; align-items: center; gap: .65rem; font-size: 1rem; line-height: 1.2; }
        .to-title-icon {
            width: 38px; height: 38px; border-radius: .65rem; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: #fef4e6; color: #e8590c; font-size: .9rem;
        }
        .to-subtitle { display: block; font-size: .7rem; font-weight: 400; color: #98a1ab; margin-top: .15rem; }

        #logsModal .modal-body { background: #fbfcfd; padding: 1rem 1.25rem; min-height: 220px; }

        .to-list { display: flex; flex-direction: column; gap: .5rem; }
        .to-item {
            display: flex; align-items: center; gap: .75rem;
            padding: .7rem .85rem;
            background: #fff; border: 1px solid #eceff2; border-radius: .65rem;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .to-item:hover { border-color: #f8d9ae; box-shadow: 0 4px 12px rgba(247,144,9,.09); }
        .to-avatar {
            width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .8rem; font-weight: 700; color: #fff;
            background: linear-gradient(135deg, #6c757d, #495057);
            text-transform: uppercase;
        }
        .to-body { flex-grow: 1; min-width: 0; }
        .to-name { font-weight: 600; font-size: .86rem; color: #2f3740; word-break: break-word; }
        .to-sub { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
        .to-chip {
            display: inline-flex; align-items: center; gap: .3rem;
            font-size: .68rem; font-weight: 600;
            background: #fef4e6; color: #c2410c;
            padding: .18rem .55rem; border-radius: 999px;
        }
        .to-when { text-align: right; flex-shrink: 0; }
        .to-date { font-size: .78rem; font-weight: 600; color: #4b545d; font-variant-numeric: tabular-nums; }
        .to-rel { font-size: .68rem; color: #aab3bc; margin-top: .1rem; }

        .to-state { text-align: center; color: #98a1ab; padding: 2.6rem 1rem; }
        .to-state .ts-icon {
            width: 48px; height: 48px; border-radius: 50%; margin: 0 auto .65rem;
            display: flex; align-items: center; justify-content: center;
            background: #eef1f4; color: #aab3bc; font-size: 1.05rem;
        }
        .to-state.is-error .ts-icon { background: #fdeeed; color: #e5484d; }
        .to-state .ts-title { font-weight: 600; font-size: .85rem; color: #5f6b76; }
        .to-state .ts-hint { font-size: .74rem; margin-top: .2rem; }

        #logsSkeleton { display: flex; flex-direction: column; gap: .5rem; }
        .to-skel {
            height: 60px; border-radius: .65rem;
            background: linear-gradient(100deg, #f1f3f5 30%, #e9ecef 45%, #f1f3f5 60%);
            background-size: 200% 100%;
            animation: toShimmer 1.1s linear infinite;
        }
        @keyframes toShimmer { to { background-position: -200% 0; } }
        @media (prefers-reduced-motion: reduce) { .to-skel { animation: none; } }

        #logsModal .modal-footer { padding: .65rem 1.25rem; background: #fff; }
        .to-count { margin-right: auto; font-size: .7rem; color: #98a1ab; }
        .to-count b { color: #5f6b76; font-weight: 600; }
    </style>
@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.page_passwords_title') }}
                    </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 active" aria-current="page">{{ __('radio.menu_item_4') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @if (\Session::has('success'))
                <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
                    <i class="uil uil-check-circle"></i> <b>{!! \Session::get('success') !!}</b>
                </div>
                @php Session::forget('success'); @endphp
            @endif
                <div class="block block-rounded">
                        <div class="block-content p-0">
                            <div class="ps-2 pe-4 pt-2 pb-1 mb-0 border-bottom border-1">
                                <div class="d-md-flex align-items-center gap-2">
                                    <div class="flex-grow-1 mb-2 d-flex flex-wrap gap-2">
                                        <a href="{{ route('radio.live-passwords.c') }}" class="btn btn-primary">
                                            <i class="fa fa-plus me-1 opacity-50"></i> {{ __('radio.passwords_add_dj') }}
                                        </a>
                                        <button type="button" class="btn btn-alt-secondary" data-bs-toggle="modal" data-bs-target="#logsModal">
                                            <i class="fa fa-user-clock me-1"></i> {{ __('radio.passwords_disconnections') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @if($allDjs->count() == 0)
                                <div class="block-content text-center"><p>{{ __('radio.passwords_empty') }}</p></div>
                            @else
                            <div class="table-responsive">
                                <table class="table table-vcenter mb-0">
                                    <thead>
                                    <tr>
                                        <th class="ps-2">{{ __('general.table_name') }}</th>
                                        <th>{{ __('radio.passwords_last_broadcast') }}</th>
                                        <th class="d-none d-sm-table-cell" style="width: 15%;">{{ __('general.table_status') }}</th>
                                        <th class="text-end me-3" style="width: 380px;">{{ __('radio.table_actions') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($allDjs as $dj)
                                        @php
                                            $parts = preg_split('/\s+/', trim($dj->name));
                                            $ini = mb_substr($parts[0] ?? '', 0, 1);
                                            if (count($parts) > 1) { $ini .= mb_substr(end($parts), 0, 1); }
                                        @endphp
                                        <tr>
                                            <td class="fw-semibold ps-2">
                                                <div class="dj-name-cell">
                                                    <span class="dj-avatar">{{ $ini }}</span>
                                                    <span>{{ $dj->name }}</span>
                                                </div>
                                            </td>
                                            <td>{{ ($dj->last_login ? date('d/m/Y H:i',strtotime($dj->last_login)) : 'Nenhuma') }}</td>
                                            <td class="d-none d-sm-table-cell">
                                               @if($dj->active)
                                                 <span class="status-pill status-on"><i class="fa fa-microphone blink"></i> {{ __('radio.passwords_on_air') }}</span>
                                               @else
                                                <span class="status-pill status-off"><i class="fa fa-circle" style="font-size:.5rem;"></i> {{ __('radio.status_offline') }}</span>
                                               @endif
                                            </td>
                                            <td class="text-end">
                                                <div class="action-btns">
                                                    <a href="{{ route('radio.live-passwords.r.data',$dj->id) }}" class="btn btn-sm btn-alt-secondary d-inline-flex align-items-center gap-1" title="{{ __('radio.password_show_title') }}" data-bs-toggle="tooltip">
                                                        <i class="fa fa-info-circle"></i> <span class="d-none d-lg-flex">{{ __('radio.password_show_title') }}</span>
                                                    </a>
                                                    <a href="{{ route('radio.live-passwords.e', $dj->id) }}" class="btn btn-sm btn-alt-primary" title="{{ __('radio.action_edit') }}" data-bs-toggle="tooltip">
                                                        <i class="fa fa-pen"></i>
                                                    </a>
                                                    @if(!$dj->active)
                                                        <button type="button"
                                                                id="{{ $dj->id }}"
                                                                data-token-generated="{{ $dj->encoder_token }}"
                                                                class="btn btn-sm btn-danger removeConfirm" title="{{ __('general.action_remove') }}" data-bs-toggle="tooltip">
                                                            <i class="fa fa-fw fa-times"></i>
                                                        </button>
                                                        <form id="form_delete_{{ $dj->id }}" action="{{ route('radio.live-passwords.d', $dj->id) }}" method="POST">@method('DELETE')</form>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif
                </div>
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="logsModal" tabindex="-1" aria-labelledby="logsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logsModalLabel">
                    <span class="to-title-icon"><i class="fa fa-user-clock"></i></span>
                    <span>
                        {{ __('radio.passwords_logs_title') }}
                        <span class="to-subtitle">{{ __('radio.passwords_logs_subtitle') }}</span>
                    </span>
                </h5>
                <button type="button" id="btnReloadLogs" class="btn btn-sm btn-alt-secondary ms-auto me-2" title="{{ __('radio.action_refresh') }}">
                    <i class="fa fa-rotate-right" id="logsReloadIcon"></i>
                </button>
                <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="{{ __('radio.action_close') }}"></button>
            </div>

            <div class="modal-body">
                <div id="logsSkeleton" style="display:none;">
                    <div class="to-skel"></div>
                    <div class="to-skel"></div>
                    <div class="to-skel"></div>
                    <div class="to-skel"></div>
                </div>
                <div id="logsEmpty" class="to-state" style="display:none;">
                    <div class="ts-icon"><i class="fa fa-inbox"></i></div>
                    <div class="ts-title">{{ __('radio.passwords_logs_empty') }}</div>
                    <div class="ts-hint">{{ __('radio.passwords_logs_empty_hint') }}</div>
                </div>
                <div id="logsError" class="to-state is-error" style="display:none;">
                    <div class="ts-icon"><i class="fa fa-triangle-exclamation"></i></div>
                    <div class="ts-title">{{ __('radio.passwords_logs_error') }}</div>
                    <div class="ts-hint">{{ __('radio.passwords_logs_error_hint') }}</div>
                    <button type="button" class="btn btn-sm btn-alt-secondary mt-3" id="btnRetryLogs">
                        <i class="fa fa-rotate-right me-1"></i> {{ __('radio.action_retry') }}
                    </button>
                </div>
                <div id="logsList" class="to-list"></div>
            </div>

            <div class="modal-footer">
                <span class="to-count" id="logsCount"></span>
                <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">{{ __('radio.action_close') }}</button>
            </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>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    $('.removeConfirm').on('click', function (event) {
		var id        = $(this).attr('id');
		var tokenUsed = $(this).data('token-generated');
		var extraHtml = tokenUsed
			? '<p class="text-danger mt-2 mb-0"><strong>⚠ Esse locutor gerou o token de encoder. Ao removê-lo ele não poderá mais transmitir ao vivo.</strong></p>'
			: '';
		Sweetalert2.fire({
			title: 'Deseja realmente remover este locutor?',
			html: extraHtml,
			showDenyButton: false,
			showCancelButton: true,
			confirmButtonText: 'Remover',
			cancelButtonText: 'Cancelar',
		}).then((result) => {
			if (result.isConfirmed) {
				$("#form_delete_" + id).submit();
			}
		});
	});

    function escapeHtml(str) {
        return $('<div>').text(str == null ? '' : str).html();
    }
    function initialsOf(name) {
        var parts = String(name || '').trim().split(/\s+/);
        var ini = (parts[0] || '').charAt(0);
        if (parts.length > 1) { ini += parts[parts.length - 1].charAt(0); }
        return ini || '?';
    }
    function relTime(str) {
        var m = String(str || '').match(/^(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/);
        if (!m) { return ''; }
        var s = Math.floor((Date.now() - new Date(+m[3], +m[2] - 1, +m[1], +m[4], +m[5]).getTime()) / 1000);
        if (s < 60) { return 'agora mesmo'; }
        if (s < 3600) { return 'há ' + Math.floor(s / 60) + ' min'; }
        if (s < 86400) { return 'há ' + Math.floor(s / 3600) + ' h'; }
        var d = Math.floor(s / 86400);
        return 'há ' + d + (d > 1 ? ' dias' : ' dia');
    }

    function renderLogs(logs) {
        var html = '';
        logs.forEach(function (log) {
            var rel = relTime(log.created_at);
            html += '<div class="to-item">' +
                        '<span class="to-avatar">' + escapeHtml(initialsOf(log.dj_name)) + '</span>' +
                        '<div class="to-body">' +
                            '<div class="to-name">' + escapeHtml(log.dj_name) + '</div>' +
                            '<div class="to-sub">' +
                                '<span class="to-chip"><i class="fa fa-stopwatch"></i> Limite ' + escapeHtml(log.time_limit) + '</span>' +
                            '</div>' +
                        '</div>' +
                        '<div class="to-when">' +
                            '<div class="to-date">' + escapeHtml(log.created_at) + '</div>' +
                            (rel ? '<div class="to-rel">' + rel + '</div>' : '') +
                        '</div>' +
                    '</div>';
        });
        $('#logsList').html(html);
    }

    function loadLogs() {
        $('#logsSkeleton').show();
        $('#logsEmpty, #logsError').hide();
        $('#logsList').empty();
        $('#logsCount').html('');
        $('#logsReloadIcon').addClass('fa-spin');
        $.getJSON('{{ route("radio.live-passwords.logs") }}')
            .done(function (res) {
                $('#logsSkeleton').hide();
                $('#logsReloadIcon').removeClass('fa-spin');
                var logs = (res && res.success && res.logs) ? res.logs : [];
                if (!logs.length) { $('#logsEmpty').show(); return; }
                renderLogs(logs);
                $('#logsCount').html('<b>' + logs.length + '</b> registro(s)');
            })
            .fail(function () {
                $('#logsSkeleton').hide();
                $('#logsReloadIcon').removeClass('fa-spin');
                $('#logsError').show();
            });
    }

    $('#logsModal').on('shown.bs.modal', loadLogs);
    $('#btnReloadLogs, #btnRetryLogs').on('click', loadLogs);

    if (typeof bootstrap !== 'undefined') {
        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
            new bootstrap.Tooltip(el);
        });
    }
</script>
</body>
</html>