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

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

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_radio')],
        ['label' => __('radio.menu_item_2')],
        ['label' => __('radio.menu_item_2_sub_2')],
    ];
@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_2_sub_2') }}</h1>
            <p class="page-sub">{{ __('radio.playlists_page_sub') }}</p>
        </div>

        <a class="btn btn--primary" href="{{ route('radio.playlists.c') }}">
            <i class="fa-solid fa-plus"></i> {{ __('radio.playlists_create') }}
        </a>
    </header>

    <div class="plists"
         data-url-action="{{ route('radio.playlists.c.loadAction') }}"
         data-port="{{ $siteData->stream_port }}"
         data-msg-remove="{{ __('radio.playlists_remove_confirm') }}"
         data-msg-remove-warn="{{ __('radio.playlists_remove_warning') }}"
         data-msg-remove-ok="{{ __('general.action_remove') }}"
         data-msg-error="{{ __('radio.playlists_action_error') }}"
         data-msg-duplicate="{{ __('radio.playlists_action_duplicate') }}"
         data-msg-autodj="{{ __('radio.playlists_action_play_autodj') }}"
         data-msg-empty-search="{{ __('radio.playlists_empty_search') }}">

        {{-- uma aba sozinha nao e uma escolha: a barra so aparece com os modelos --}}
        @if($showTemplates)
            <nav class="plists__tabs">
                <button class="plists__tab is-on" type="button" data-tab="mine">
                    <i class="fa-solid fa-list"></i> {{ __('radio.playlists_tab_mine') }}
                    <span class="plists__count">{{ $playlistsTotal }}</span>
                </button>

                @php $semModelos = $modelsMaintence || ! $templates->count(); @endphp

                <span class="plists__tabwrap tip" @if($semModelos) data-tip="{{ $modelsMaintence ? __('radio.playlists_templates_maintenance_text') : __('radio.playlists_templates_empty') }}" @endif>
                    <button class="plists__tab" type="button" data-tab="templates" @disabled($semModelos)>
                        <i class="fa-solid {{ $modelsMaintence ? 'fa-screwdriver-wrench' : 'fa-star' }}"></i> {{ __('radio.playlists_tab_templates') }}

                        @if(! $semModelos)
                            <span class="plists__count">{{ $templates->count() }}</span>
                        @endif
                    </button>
                </span>
            </nav>
        @endif

        <section class="sec" data-panel="mine">
            <div class="sec__head plists__bar">
                <form class="plists__search" method="GET" action="{{ route('radio.playlists.r') }}" role="search">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input class="input" type="search" name="s" value="{{ $s }}"
                           placeholder="{{ __('radio.playlists_search_placeholder') }}" autocomplete="off">
                    <span class="plists__spin">@include('includes.spinner')</span>
                </form>

                @if(! $showTemplates)
                    {{-- sem a barra de abas, a contagem fica aqui --}}
                    <span class="sec__meta">{{ trans_choice('radio.playlists_count', $playlistsTotal, ['count' => $playlistsTotal]) }}</span>
                @endif
            </div>

            <div class="plists__results">
                <ul class="plists__list" data-list="mine">
                    @foreach($playlists as $playlist)
                        <li class="plists__item" data-name="{{ Str::lower($playlist->name) }}" data-edit="{{ route('radio.playlists.u', $playlist->id) }}">
                            <span class="plists__ic"><i class="fa-solid fa-music"></i></span>

                            <span class="plists__info">
                                <span class="plists__name">{{ $playlist->name }}</span>
                                <span class="plists__meta">
                                    {{ trans_choice('radio.playlists_files_count', $playlist->total_files, ['count' => $playlist->total_files]) }}
                                    <i class="plists__dot"></i>
                                    {{ $playlist->type == '1' ? __('radio.playlists_type_random') : __('radio.playlists_type_sequential') }}
                                    <i class="plists__dot"></i>
                                    {{ $playlist->duration }}
                                </span>
                            </span>

                            <span class="plists__acts">
                                <button class="plists__ico tip" type="button" data-tip="{{ __('radio.playlists_action_play_autodj') }}" data-action="load" data-id="{{ $playlist->id }}">
                                    <i class="fa-solid fa-play"></i>
                                </button>

                                <button class="plists__ico tip" type="button" data-tip="{{ __('radio.playlists_action_duplicate') }}" data-action="duplicate" data-id="{{ $playlist->id }}" data-edit-base="{{ route('radio.playlists.u') }}">
                                    <i class="fa-regular fa-copy"></i>
                                </button>

                                <a class="plists__ico tip" href="{{ route('radio.playlists.u', $playlist->id) }}" data-tip="{{ __('general.action_edit') }}">
                                    <i class="fa-solid fa-pen"></i>
                                </a>

                                <button class="plists__ico plists__ico--danger tip" type="button" data-tip="{{ __('general.action_remove') }}" data-remove="{{ $playlist->id }}" data-name="{{ $playlist->name }}">
                                    <i class="fa-solid fa-trash"></i>
                                </button>

                                <form id="plremove{{ $playlist->id }}" action="{{ route('radio.playlists.d', $playlist->id) }}" method="POST" hidden>
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </span>
                        </li>
                    @endforeach
                </ul>

                @if(! $playlists->count())
                    @if($playlistsTotal)
                        {{-- a radio tem playlist, so nao com esse nome --}}
                        <p class="plists__none">{{ __('radio.playlists_empty_search') }}</p>
                    @else
                        <div class="plists__empty">
                            <i class="fa-solid fa-list"></i>
                            <h3>{{ __('radio.playlists_empty') }}</h3>
                            <p>{{ __('radio.playlists_empty_help') }}</p>

                            <div class="plists__empty-acts">
                                <a class="btn btn--primary btn--sm" href="{{ route('radio.playlists.c') }}">
                                    <i class="fa-solid fa-plus"></i> {{ __('radio.playlists_create_new') }}
                                </a>
                            </div>
                        </div>
                    @endif
                @endif

                {{ $playlists->links('vendor.pagination.painel') }}
            </div>
        </section>

        @if($showTemplates)
        <section class="sec" data-panel="templates" hidden>
            @if($modelsMaintence)
                <div class="plists__empty">
                    <i class="fa-solid fa-screwdriver-wrench"></i>
                    <h3>{{ __('radio.playlists_templates_maintenance_title') }}</h3>
                    <p>{{ __('radio.playlists_templates_maintenance_text') }}</p>
                </div>
            @else
                <div class="sec__head plists__bar">
                    <label class="plists__search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input class="input" type="search" data-search="templates" placeholder="{{ __('radio.playlists_templates_search_placeholder') }}" autocomplete="off">
                    </label>
                </div>

                <p class="plists__note">
                    <i class="fa-solid fa-circle-info"></i> {{ __('radio.playlists_templates_info') }}
                </p>

                <div class="plists__cats">
                    <button class="plists__cat is-on" type="button" data-cat="">{{ __('radio.playlists_templates_filter_all') }}</button>

                    @foreach($categories as $category)
                        <button class="plists__cat" type="button" data-cat="{{ $category->id }}">{{ $category->name }}</button>
                    @endforeach
                </div>

                <ul class="plists__list" data-list="templates">
                    @foreach($templates as $template)
                        <li class="plists__item" data-name="{{ Str::lower($template->name) }}" data-cat="{{ $template->category_id }}" data-edit="{{ route('radio.playlists.u', $template->id) }}">
                            <span class="plists__ic"><i class="fa-solid fa-star"></i></span>

                            <span class="plists__info">
                                <span class="plists__name">{{ $template->name }}</span>
                                <span class="plists__meta">
                                    {{ trans_choice('radio.playlists_files_count', $template->total_files, ['count' => $template->total_files]) }}
                                    <i class="plists__dot"></i>
                                    {{ $template->type == '1' ? __('radio.playlists_type_random') : __('radio.playlists_type_sequential') }}
                                    <i class="plists__dot"></i>
                                    {{ $template->duration }}
                                </span>
                            </span>

                            <span class="plists__tag"><i class="fa-solid fa-tag"></i> {{ $template->category_name }}</span>

                            <span class="plists__acts">
                                <a class="btn btn--ghost btn--sm" href="{{ route('radio.playlists.u', $template->id) }}">
                                    <i class="fa-solid fa-star"></i> {{ __('radio.playlists_templates_use') }}
                                </a>
                            </span>
                        </li>
                    @endforeach
                </ul>

                @if(! $templates->count())
                    <div class="plists__empty">
                        <i class="fa-solid fa-star"></i>
                        <h3>{{ __('radio.playlists_templates_empty') }}</h3>
                    </div>
                @endif

                <p class="plists__none" data-empty="templates" hidden>{{ __('radio.playlists_templates_empty_search') }}</p>
            @endif
        </section>
        @endif
    </div>

</main>

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

@include('includes/footer-novo')