@section('title', __('radio.menu_item_5_sub_7'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radioblacklist.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_radio')],
        ['label' => __('radio.menu_item_5_sub_7')],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('radio.menu_item_5_sub_7') }}</h1>
            <p class="page-sub">{{ __('radio.blacklist_page_sub') }}</p>
        </div>
        <div class="page-head__actions">
            <button type="button" class="btn btn--primary" data-open>
                <i class="fa-solid fa-plus"></i>
                <span>{{ __('radio.blacklist_add') }}</span>
            </button>
        </div>
    </header>

    <div class="blk"
         data-url-add="{{ route('radio.blacklist.c.do') }}"
         data-url-remove="{{ route('radio.blacklist.d', '__id__') }}"
         data-own-ip="{{ request()->ip() }}"
         data-msg-remove="{{ __('radio.blacklist_remove_confirm') }}"
         data-msg-remove-ok="{{ __('radio.blacklist_remove_ok') }}"
         data-msg-confirm="{{ __('radio.blacklist_remove') }}"
         data-msg-error="{{ __('radio.blacklist_error') }}">

        <section class="sec">
            <header class="sec__head">
                <h2 class="sec__title">{{ __('radio.blacklist_list_title') }}</h2>
                <span class="sec__meta" data-count
                      data-zero="{{ trans_choice('radio.blacklist_count', 0, ['count' => '0']) }}"
                      data-one="{{ trans_choice('radio.blacklist_count', 1, ['count' => ':count']) }}"
                      data-many="{{ trans_choice('radio.blacklist_count', 2, ['count' => ':count']) }}">{{ trans_choice('radio.blacklist_count', $allIps->count(), ['count' => $allIps->count()]) }}</span>
            </header>

            @if($allIps->count() > 5)
                <div class="blk__bar">
                    <div class="blk__search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input type="search" class="input" data-search autocomplete="off"
                               placeholder="{{ __('radio.blacklist_search') }}">
                    </div>
                </div>
            @endif

            <ul class="blk__list" data-list @if(!$allIps->count()) hidden @endif>
                @foreach($allIps as $ip)
                    <li class="blk__row" data-row data-find="{{ Str::lower($ip->ip . ' ' . $ip->address) }}">
                        <span class="blk__flag">
                            <img src="/assets/img/flags/{{ $ip->country_code ?: 'zz' }}.svg" alt="" loading="lazy">
                        </span>

                        <span class="blk__info">
                            <span class="blk__ip">{{ $ip->ip }}</span>
                            <span class="blk__where">{{ $ip->address }}</span>
                        </span>

                        <span class="blk__when">{{ __('radio.blacklist_blocked_at', ['date' => date('d/m/Y H:i', strtotime($ip->created_at))]) }}</span>

                        <button type="button" class="blk__del" data-remove="{{ $ip->id }}" data-ip="{{ $ip->ip }}"
                                data-tip="{{ __('radio.blacklist_remove') }}">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </li>
                @endforeach
            </ul>

            <div class="blk__empty" data-empty @if($allIps->count()) hidden @endif>
                <i class="fa-solid fa-shield-halved"></i>
                <h3>{{ __('radio.blacklist_empty') }}</h3>
                <p>{{ __('radio.blacklist_empty_help') }}</p>
                <button type="button" class="btn btn--primary" data-open>
                    <i class="fa-solid fa-plus"></i>
                    <span>{{ __('radio.blacklist_add') }}</span>
                </button>
            </div>

            <p class="blk__none" data-none hidden>{{ __('radio.blacklist_empty_search') }}</p>
        </section>

        <div class="modal blkmodal" data-modal hidden>
            <div class="modal__card" role="dialog" aria-modal="true">
                <h2 class="modal__title">{{ __('radio.blacklist_new_title') }}</h2>

                <p class="blkmodal__warn">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    <span>{{ __('radio.blacklist_new_warning') }}</span>
                </p>

                <form data-form>
                    <label class="blkmodal__field">
                        <span class="blkmodal__label">{{ __('radio.blacklist_ip_address') }}</span>
                        <input type="text" class="input" name="ip" data-ip inputmode="numeric"
                               autocomplete="off" placeholder="203.0.113.42">
                        <span class="blkmodal__help">{{ __('radio.blacklist_ip_help') }}</span>
                    </label>

                    <p class="blkmodal__self" data-self hidden>
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        <span>{{ __('radio.blacklist_new_self_ip') }}</span>
                    </p>

                    <p class="modal__error" data-error hidden></p>
                </form>

                <div class="modal__foot">
                    <button type="button" class="btn btn--ghost" data-close>{{ __('radio.action_close') }}</button>
                    <button type="button" class="btn btn--primary blkmodal__ok" data-save>
                        <span>{{ __('site.action_confirm') }}</span>
                        @include('includes.spinner')
                    </button>
                </div>
            </div>
        </div>

    </div>

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/pages/radio-blacklist.js') }}"></script>
@endsection

@include('includes/footer-novo')