@extends('layout.administrator.index')
@section('title', 'TV Display')

@section('style')
@include('system.administrator.tv-display.partials.display-styles')
@endsection

@section('content')
<div class="content-wrapper bg-white tv-page">
    <section class="content-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i> Inicio</a></li>
            <li class="breadcrumb-item active">TV Display</li>
        </ol>
    </section>

    <section class="content">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ session('success') }}
            </div>
        @endif

        <div class="box box-solid">
            <div class="box-header with-border">
                <h4 class="box-title font-weight-bold mb-0">
                    <i class="fa fa-television text-primary"></i> TV Display
                </h4>
            </div>
            <div class="box-body" style="padding-top: 0;">
                <ul class="nav nav-pills nav-pills-tv" role="tablist">
                    <li class="{{ ($activeTab ?? 'preview') === 'preview' ? 'active' : '' }}">
                        <a href="#tv-tab-preview" data-toggle="tab">
                            <i class="fa fa-play-circle-o"></i> Vista previa
                        </a>
                    </li>
                    @if(!empty($canConfigure))
                    <li class="{{ ($activeTab ?? 'preview') === 'config' ? 'active' : '' }}">
                        <a href="#tv-tab-config" data-toggle="tab">
                            <i class="fa fa-sliders"></i> Configuración
                        </a>
                    </li>
                    @endif
                </ul>

                <div class="tab-content" style="padding-top: 16px;">
                    <div class="tab-pane {{ ($activeTab ?? 'preview') === 'preview' ? 'active' : '' }}" id="tv-tab-preview">
                        <div class="tv-preview-toolbar">
                            <p class="help-text">
                                Rotación automática según la configuración global. Abra la pestaña TV para ver en pantalla completa.
                            </p>
                            <a href="{{ route('administrator.tv-display.fullscreen') }}" class="btn btn-primary btn-sm" target="_blank" rel="noopener">
                                <i class="fa fa-external-link"></i> Abrir en pestaña TV
                            </a>
                        </div>
                        @include('system.administrator.tv-display.partials.display-shell', ['embedded' => true])
                    </div>

                    @if(!empty($canConfigure))
                    <div class="tab-pane {{ ($activeTab ?? 'preview') === 'config' ? 'active' : '' }}" id="tv-tab-config">
                        @include('system.administrator.tv-display.partials.config-form')
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('js')
<script src="{{ asset('assets/administrator/js/dashboard-charts-core.js') }}"></script>
<script src="{{ asset('assets/administrator/js/analytic-pareto-core.js') }}"></script>
<script src="{{ asset('assets/administrator/js/tv-display.js') }}"></script>
@if(!empty($canConfigure))
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var list = document.getElementById('tvSlidesSortable');
        var form = document.getElementById('tvConfigForm');

        if (list && window.Sortable) {
            Sortable.create(list, {
                handle: '.tv-drag-handle',
                animation: 150
            });
        }

        if (form && list) {
            list.addEventListener('change', function (event) {
                var checkbox = event.target.closest('.tv-slide-visible');
                if (!checkbox) {
                    return;
                }

                var item = checkbox.closest('.tv-slide-item');
                if (!item) {
                    return;
                }

                var label = item.querySelector('.tv-slide-toggle-label');
                var isVisible = checkbox.checked;

                item.classList.toggle('is-visible', isVisible);
                item.classList.toggle('is-hidden', !isVisible);

                if (label) {
                    label.textContent = isVisible ? 'Sí' : 'No';
                }
            });

            form.addEventListener('submit', function () {
                if (window.jQuery && $.fn.select2) {
                    $('.tv-filter-select').trigger('change');
                }
            });
        }

        function initTvFilterSelects() {
            if (!window.jQuery || !$.fn.select2) {
                return;
            }

            var $configTab = $('#tv-tab-config');
            if (!$configTab.length || !$configTab.hasClass('active')) {
                return;
            }

            var select2Config = {
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: 0,
                dropdownParent: $configTab,
                language: {
                    noResults: function () { return 'No se encontraron resultados'; },
                    searching: function () { return 'Buscando...'; }
                }
            };

            window.setTimeout(function () {
                $('.tv-filter-select').each(function () {
                    var $select = $(this);
                    if ($select.data('select2')) {
                        $select.select2('destroy');
                    }
                    $select.select2($.extend({}, select2Config, {
                        placeholder: $select.data('placeholder') || 'Seleccionar'
                    }));
                });
            }, 100);
        }

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var target = e.target.getAttribute('href');

            if (target === '#tv-tab-config') {
                initTvFilterSelects();
            }

            if (target === '#tv-tab-preview' && window.TvDisplay) {
                window.TvDisplay.resize();
            }
        });

        if ($('#tv-tab-config').hasClass('active')) {
            initTvFilterSelects();
        }
    });
</script>
@else
<script>
    document.addEventListener('DOMContentLoaded', function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            if (e.target.getAttribute('href') === '#tv-tab-preview' && window.TvDisplay) {
                window.TvDisplay.resize();
            }
        });
    });
</script>
@endif
@endsection