@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;}</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  mb-0 border-bottom border-1">
                                <div class="d-md-flex">
                                    <div class="flex-grow-1 mb-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>
                                    </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)
                                        <tr>
                                            <td class="fw-semibold ps-2">
                                                {{ $dj->name }}
                                            </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="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-primary-light text-white"><i class="fa fa-microphone blink"></i> {{ __('radio.passwords_on_air') }}</span>
                                               @else
                                                <span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-danger-light text-danger">{{ __('radio.status_offline') }}</span>
                                               @endif
                                            </td>
                                            <td class="text-end">
                                                @if($dj->active)
                                                    <button class="btn btn-sm btn-warning disconnect" id="{{ $dj->name }}" type="button"><i class="fa fa-link-slash"></i></button>
                                                @endif
                                                    <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">
                                                        <i class="fa fa-info-circle"></i> <span class="d-none d-lg-flex">{{ __('radio.password_show_title') }}</span>
                                                    </a>

												@if(!$dj->active)
                                                    <button type="button"
															id="{{ $dj->id }}"
															data-token-generated="{{ $dj->encoder_token }}"
															class="btn btn-sm btn-danger removeConfirm">
														<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
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    @endif
                </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>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>


    $('.disconnect').on('click', function( event ) {
        var name = $(this).attr('id');
        Sweetalert2.fire({
            title: 'Deseja realmente desconectar '+name+'?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Sim, continuar',
            cancelButtonText: 'Cancelar',
        }).then((result) => {
            if (result.isConfirmed) {
                Sweetalert2.fire({
                    icon: 'success',
                    title: 'Desconectado com sucesso!',
                    showConfirmButton: false,
                    timer: 2100
                });
            }
        });
    });

    $('.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();
			}
		});
	});
</script>
</body>
</html>