@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.__('voyager::generic.settings'))

@section('css')
    <style>
        .panel-actions .voyager-trash {
            cursor: pointer;
        }
        .panel-actions .voyager-trash:hover {
            color: #e94542;
        }
        .settings .panel-actions{
            right:0px;
        }
        .panel hr {
            margin-bottom: 10px;
        }
        .panel {
            padding-bottom: 15px;
        }
        .sort-icons {
            font-size: 21px;
            color: #ccc;
            position: relative;
            cursor: pointer;
        }
        .sort-icons:hover {
            color: #37474F;
        }
        .voyager-sort-desc {
            margin-right: 10px;
        }
        .voyager-sort-asc {
            top: 10px;
        }
        .page-title {
            margin-bottom: 0;
        }
        .panel-title code {
            border-radius: 30px;
            padding: 5px 10px;
            font-size: 11px;
            border: 0;
            position: relative;
            top: -2px;
        }
        .modal-open .settings  .select2-container {
            z-index: 9!important;
            width: 100%!important;
        }
        .new-setting {
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }
        .new-setting .panel-title {
            margin: 0 auto;
            display: inline-block;
            color: #999fac;
            font-weight: lighter;
            font-size: 13px;
            background: #fff;
            width: auto;
            height: auto;
            position: relative;
            padding-right: 15px;
        }
        .settings .panel-title{
            padding-left:0px;
            padding-right:0px;
        }
        .new-setting hr {
            margin-bottom: 0;
            position: absolute;
            top: 7px;
            width: 96%;
            margin-left: 2%;
        }
        .new-setting .panel-title i {
            position: relative;
            top: 2px;
        }
        .new-settings-options {
            display: none;
            padding-bottom: 10px;
        }
        .new-settings-options label {
            margin-top: 13px;
        }
        .new-settings-options .alert {
            margin-bottom: 0;
        }
        #toggle_options {
            clear: both;
            float: right;
            font-size: 12px;
            position: relative;
            margin-top: 15px;
            margin-right: 5px;
            margin-bottom: 10px;
            cursor: pointer;
            z-index: 9;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .new-setting-btn {
            margin-right: 15px;
            position: relative;
            margin-bottom: 0;
            top: 5px;
        }
        .new-setting-btn i {
            position: relative;
            top: 2px;
        }
        textarea {
            min-height: 120px;
        }
        textarea.hidden{
            display:none;
        }

        .voyager .settings .nav-tabs{
            background:none;
            border-bottom:0px;
        }

        .voyager .settings .nav-tabs .active a{
            border:0px;
        }

        .select2{
            width:100% !important;
            border: 1px solid #f1f1f1;
            border-radius: 3px;
        }

        .voyager .settings input[type=file]{
            width:100%;
        }

        .settings .select2{
            margin-left:10px;
        }

        .settings .select2-selection{
            height: 32px;
            padding: 2px;
        }

        .voyager .settings .nav-tabs > li{
            margin-bottom:-1px !important;
        }

        .voyager .settings .nav-tabs a{
            text-align: center;
            background: #f8f8f8;
            border: 1px solid #f1f1f1;
            position: relative;
            top: -1px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .voyager .settings .nav-tabs a i{
            display: block;
            font-size: 22px;
        }

        .tab-content{
            background:#ffffff;
            border: 1px solid transparent;
        }

        .tab-content>div{
            padding:10px;
        }

        .settings .no-padding-left-right{
            padding-left:0px;
            padding-right:0px;
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
            background:#fff !important;
            color:#62a8ea !important;
            border-bottom:1px solid #fff !important;
            top:-1px !important;
        }

        .nav-tabs > li a{
            transition:all 0.3s ease;
        }


        .nav-tabs > li.active > a:focus{
            top:0px !important;
        }

        .voyager .settings .nav-tabs > li > a:hover{
            background-color:#fff !important;
        }

        /* Movies Modal Styles */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .movie-card, .series-card {
            border: 2px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
        }

        .movie-card:hover, .series-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .movie-card.selected, .series-card.selected {
            border-color: #62a8ea;
            background-color: #f0f8ff;
        }

        .movie-card img, .series-card img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .movie-title, .series-title {
            font-weight: bold;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .movie-year, .series-year {
            color: #666;
            font-size: 12px;
        }

        .series-seasons {
            color: #666;
            font-size: 11px;
            margin-top: 3px;
        }

        .library-card {
            border: 2px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            background: #f9f9f9;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .library-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
            border-color: #62a8ea;
        }

        .library-content-buttons {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .library-content-buttons .btn {
            flex: 1;
            font-size: 12px;
            padding: 8px 12px;
        }

        .library-title {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
        }

        .library-type {
            color: #666;
            font-size: 12px;
            text-transform: uppercase;
        }

        .library-icon {
            font-size: 30px;
            color: #62a8ea;
            margin-bottom: 10px;
        }

        .saved-movie-card {
            border: 2px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fff;
            position: relative;
        }

        .saved-movie-card:hover {
            box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2);
            transform: translateY(-2px);
            border-color: #dc3545;
        }

        .saved-movie-card:hover .remove-indicator {
            opacity: 1;
        }

        .saved-movie-card img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .remove-indicator {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(220, 53, 69, 0.9);
            color: white;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-settings"></i> {{ __('voyager::generic.settings') }}
    </h1>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#backupModal" style="margin-top: 20px; margin-left: 10px;">
        <i class="voyager-data"></i> Backup Database
    </button>
@stop

@section('content')
    <div class="container-fluid">
        @include('voyager::alerts')
        @if(config('voyager.show_dev_tips'))
        <div class="alert alert-info">
            <strong>{{ __('voyager::generic.how_to_use') }}:</strong>
            <p>{{ __('voyager::settings.usage_help') }} <code>setting('group.key')</code></p>
        </div>
        @endif
    </div>

    <div class="page-content settings container-fluid">
        <form action="{{ route('voyager.settings.update') }}" method="POST" enctype="multipart/form-data">
            {{ method_field("PUT") }}
            {{ csrf_field() }}
            <input type="hidden" name="setting_tab" class="setting_tab" value="{{ $active }}" />
            <div class="panel">

                <div class="page-content settings container-fluid">
                    <ul class="nav nav-tabs">
                        @foreach($settings as $group => $setting)
                            <li @if($group == $active) class="active" @endif>
                                <a data-toggle="tab" href="#{{ \Illuminate\Support\Str::slug($group) }}">{{ $group }}</a>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content">
                        @foreach($settings as $group => $group_settings)
                        <div id="{{ \Illuminate\Support\Str::slug($group) }}" class="tab-pane fade in @if($group == $active) active @endif">
                            @foreach($group_settings as $setting)
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    {{ $setting->display_name }} @if(config('voyager.show_dev_tips'))<code>setting('{{ $setting->key }}')</code>@endif
                                </h3>
                                <div class="panel-actions">
                                    <a href="{{ route('voyager.settings.move_up', $setting->id) }}">
                                        <i class="sort-icons voyager-sort-asc"></i>
                                    </a>
                                    <a href="{{ route('voyager.settings.move_down', $setting->id) }}">
                                        <i class="sort-icons voyager-sort-desc"></i>
                                    </a>
                                    @can('delete', Voyager::model('Setting'))
                                    <i class="voyager-trash"
                                       data-id="{{ $setting->id }}"
                                       data-display-key="{{ $setting->key }}"
                                       data-display-name="{{ $setting->display_name }}"></i>
                                    @endcan
                                </div>
                            </div>

                            <div class="panel-body no-padding-left-right">
                                <div class="col-md-10 no-padding-left-right">
                                    @if ($setting->type == "text")
                                        <input type="text" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value }}">
                                    @elseif($setting->type == "color_picker")
                                        <input type="color" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value }}">
                                    @elseif($setting->type == "text_area")
                                        <textarea class="form-control" name="{{ $setting->key }}">{{ $setting->value ?? '' }}</textarea>
                                    @elseif($setting->type == "rich_text_box")
                                        <textarea class="form-control richTextBox" name="{{ $setting->key }}">{{ $setting->value ?? '' }}</textarea>
                                    @elseif($setting->type == "markdown_editor")
                                        <textarea class="form-control easymde" name="{{ $setting->key }}">{{ $setting->value ?? '' }}</textarea>
                                    @elseif($setting->type == "code_editor")
                                                                                <div id="{{ $setting->key }}" data-theme="{{ @$options->theme }}" data-language="{{ @$options->language }}" class="ace_editor min_height_400" name="{{ $setting->key }}">{{ $setting->value ?? '' }}</div>
                                        <textarea name="{{ $setting->key }}" id="{{ $setting->key }}_textarea" class="hidden">{{ $setting->value ?? '' }}</textarea>
                                    @elseif($setting->type == "image" || $setting->type == "file")
                                        @if(isset( $setting->value ) && !empty( $setting->value ) && Storage::disk(config('voyager.storage.disk'))->exists($setting->value))
                                            <div class="img_settings_container">
                                                <a href="{{ route('voyager.settings.delete_value', $setting->id) }}" class="voyager-x delete_value"></a>
                                                <img src="{{ Storage::disk(config('voyager.storage.disk'))->url($setting->value) }}" style="width:200px; height:auto; padding:2px; border:1px solid #ddd; margin-bottom:10px;">
                                            </div>
                                            <div class="clearfix"></div>
                                        @elseif($setting->type == "file" && isset( $setting->value ))
                                            @if(json_decode($setting->value) !== null)
                                                @foreach(json_decode($setting->value) as $file)
                                                  <div class="fileType">
                                                    <a class="fileType" target="_blank" href="{{ Storage::disk(config('voyager.storage.disk'))->url($file->download_link) }}">
                                                      {{ $file->original_name }}
                                                    </a>
                                                    <a href="{{ route('voyager.settings.delete_value', $setting->id) }}" class="voyager-x delete_value"></a>
                                                 </div>
                                                @endforeach
                                            @endif
                                        @endif
                                        <input type="file" name="{{ $setting->key }}">
                                    @elseif($setting->type == "select_dropdown")
                                                                                                                        <select class="form-control" name="{{ $setting->key }}">
                                                                                        @if(isset($options->options))
                                                @foreach($options->options as $index => $option)
                                                    <option value="{{ $index }}" @if($default == $index && $selected_value === NULL) selected="selected" @endif @if($selected_value == $index) selected="selected" @endif>{{ $option }}</option>
                                                @endforeach
                                            @endif
                                        </select>

                                    @elseif($setting->type == "radio_btn")
                                                                                                                                                                <ul class="radio">
                                            @if(isset($options->options))
                                                @foreach($options->options as $index => $option)
                                                    <li>
                                                        <input type="radio" id="option-{{ $index }}" name="{{ $setting->key }}"
                                                               value="{{ $index }}" @if($default == $index && $selected_value === NULL) checked @endif @if($selected_value == $index) checked @endif>
                                                        <label for="option-{{ $index }}">{{ $option }}</label>
                                                        <div class="check"></div>
                                                    </li>
                                                @endforeach
                                            @endif
                                        </ul>
                                    @elseif($setting->type == "checkbox")
                                                                                                                        @if (isset($options->on) && isset($options->off))
                                            <input type="checkbox" name="{{ $setting->key }}" class="toggleswitch" @if($checked) checked @endif data-on="{{ $options->on }}" data-off="{{ $options->off }}">
                                        @else
                                            <input type="checkbox" name="{{ $setting->key }}" @if($checked) checked @endif class="toggleswitch">
                                        @endif
                                    @endif
                                </div>
                                <div class="col-md-2 no-padding-left-right">
                                    <select class="form-control group_select" name="{{ $setting->key }}_group">
                                        @foreach($groups as $group)
                                        <option value="{{ $group }}" {!! $setting->group == $group ? 'selected' : '' !!}>{{ $group }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @if(!$loop->last)
                                <hr>
                            @endif
                            @endforeach
                        </div>
                        @endforeach
                    </div>
                </div>

            </div>
            <button type="submit" class="btn btn-primary pull-right">{{ __('voyager::settings.save') }}</button>
        </form>

        <div style="clear:both"></div>

        @can('add', Voyager::model('Setting'))
        <div class="panel" style="margin-top:10px;">
            <div class="panel-heading new-setting">
                <hr>
                <h3 class="panel-title"><i class="voyager-plus"></i> {{ __('voyager::settings.new') }}</h3>
            </div>
            <div class="panel-body">
                <form action="{{ route('voyager.settings.store') }}" method="POST">
                    {{ csrf_field() }}
                    <input type="hidden" name="setting_tab" class="setting_tab" value="{{ $active }}" />
                    <div class="col-md-3">
                        <label for="display_name">{{ __('voyager::generic.name') }}</label>
                        <input type="text" class="form-control" name="display_name" placeholder="{{ __('voyager::settings.help_name') }}" required="required">
                    </div>
                    <div class="col-md-3">
                        <label for="key">{{ __('voyager::generic.key') }}</label>
                        <input type="text" class="form-control" name="key" placeholder="{{ __('voyager::settings.help_key') }}" required="required">
                    </div>
                    <div class="col-md-3">
                        <label for="type">{{ __('voyager::generic.type') }}</label>
                        <select name="type" class="form-control" required="required">
                            <option value="">{{ __('voyager::generic.choose_type') }}</option>
                            <option value="text">{{ __('voyager::form.type_textbox') }}</option>
                            <option value="text_area">{{ __('voyager::form.type_textarea') }}</option>
                            <option value="rich_text_box">{{ __('voyager::form.type_richtextbox') }}</option>
                            <option value="markdown_editor">{{ __('voyager::form.type_markdowneditor') }}</option>
                            <option value="code_editor">{{ __('voyager::form.type_codeeditor') }}</option>
                            <option value="checkbox">{{ __('voyager::form.type_checkbox') }}</option>
                            <option value="radio_btn">{{ __('voyager::form.type_radiobutton') }}</option>
                            <option value="select_dropdown">{{ __('voyager::form.type_selectdropdown') }}</option>
                            <option value="file">{{ __('voyager::form.type_file') }}</option>
                            <option value="image">{{ __('voyager::form.type_image') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="group">{{ __('voyager::settings.group') }}</label>
                        <select class="form-control group_select group_select_new" name="group">
                            @foreach($groups as $group)
                                <option value="{{ $group }}">{{ $group }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <a id="toggle_options"><i class="voyager-double-down"></i> {{ mb_strtoupper(__('voyager::generic.options')) }}</a>
                        <div class="new-settings-options">
                            <label for="options">{{ __('voyager::generic.options') }}
                                <small>{{ __('voyager::settings.help_option') }}</small>
                            </label>
                            <div id="options_editor" class="form-control min_height_200" data-language="json"></div>
                            <textarea id="options_textarea" name="details" class="hidden"></textarea>
                            <div id="valid_options" class="alert-success alert" style="display:none">{{ __('voyager::json.valid') }}</div>
                            <div id="invalid_options" class="alert-danger alert" style="display:none">{{ __('voyager::json.invalid') }}</div>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <button type="submit" class="btn btn-primary pull-right new-setting-btn">
                        <i class="voyager-plus"></i> {{ __('voyager::settings.add_new') }}
                    </button>
                    <div style="clear:both"></div>
                </form>
            </div>
        </div>
        @endcan
    </div>

    <!-- Backup Modal -->
    <div class="modal fade" tabindex="-1" id="backupModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <i class="voyager-data"></i> Backup Database
                    </h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to generate a backup of the database?</p>
                    <p>This process will download a SQL file with the current database state.</p>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('backup_database') }}" method="POST">
                        {{ csrf_field() }}
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Download Backup</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Movies Selection Modal -->
    <div class="modal fade" tabindex="-1" id="moviesModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <i class="voyager-video"></i> Select Content for Landing Page
                        <small id="savedContentIndicator" style="display: none; color: #62a8ea;">
                            <i class="voyager-check"></i> Previously saved content loaded
                        </small>
                    </h4>
                </div>
                <div class="modal-body">
                    <!-- Modal Tabs -->
                    <ul class="nav nav-tabs" id="contentModalTabs">
                        <li class="active">
                            <a data-toggle="tab" href="#browseContentTab">
                                <i class="voyager-video"></i> Browse Libraries
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#savedContentTab">
                                <i class="voyager-list"></i> Previously Selected
                                <span id="savedContentCount" class="badge" style="background-color: #62a8ea; display: none;">0</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" style="margin-top: 15px;">
                        <!-- Browse Content Tab -->
                        <div id="browseContentTab" class="tab-pane fade in active">
                            <div id="contentLoading" class="text-center" style="display: none;">
                                <i class="voyager-refresh" style="font-size: 30px; animation: spin 1s linear infinite;"></i>
                                <p id="loadingText">Loading libraries...</p>
                            </div>
                            <div id="contentError" class="alert alert-danger" style="display: none;"></div>
                            
                            <!-- Libraries View -->
                            <div id="librariesView" style="max-height: 400px; overflow-y: auto;">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h5>Select a Library and Content Type:</h5>
                                        <p class="text-muted">Click on a library folder, then choose whether to browse movies or series in that library.</p>
                                    </div>
                                </div>
                                <div id="librariesList" class="row"></div>
                            </div>
                            
                            <!-- Content View -->
                            <div id="contentView" style="display: none; max-height: 400px; overflow-y: auto;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-link" id="backToLibraries" style="padding-left: 0;">
                                            <i class="voyager-arrow-left"></i> Back to Libraries
                                        </button>
                                        <h5 id="selectedLibraryName">Content in Library</h5>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group" style="margin-bottom: 15px;">
                                            <div class="input-group">
                                                <input type="text" id="contentSearchInput" class="form-control" placeholder="Search content by title..." style="border-radius: 4px;">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button" id="clearSearchBtn" style="border-radius: 4px; margin-left: 5px;">
                                                        <i class="voyager-x"></i>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="contentList" class="row"></div>
                                
                                <!-- Pagination Controls -->
                                <div id="paginationControls" class="row" style="margin-top: 20px; display: none;">
                                    <div class="col-md-12 text-center">
                                        <nav aria-label="Content pagination">
                                            <ul class="pagination pagination-sm" id="paginationList">
                                                <!-- Pagination buttons will be inserted here -->
                                            </ul>
                                        </nav>
                                        <div class="pagination-info">
                                            <small class="text-muted" id="paginationInfo">Showing 0 - 0 of 0 items</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Previously Selected Content Tab -->
                        <div id="savedContentTab" class="tab-pane fade">
                            <div id="savedContentLoading" class="text-center" style="display: none;">
                                <i class="voyager-refresh" style="font-size: 20px; animation: spin 1s linear infinite;"></i>
                                <p>Loading saved content...</p>
                            </div>
                            <div id="savedContentEmpty" class="text-center" style="display: none; padding: 50px;">
                                <i class="voyager-video" style="font-size: 48px; color: #ccc;"></i>
                                <h5 style="color: #999; margin-top: 15px;">No content selected yet</h5>
                                <p style="color: #999;">Use the browse tab to select content for your landing page.</p>
                            </div>
                            <div id="savedContentContent" style="max-height: 400px; overflow-y: auto;">
                                <div class="row">
                                    <div class="col-md-8">
                                        <h5 id="savedContentTitle">Previously Selected Movies</h5>
                                        <p class="text-muted">Click on any item to remove it from your selection.</p>
                                    </div>
                                    <div class="col-md-4 text-right">
                                        <button type="button" class="btn btn-danger btn-sm" id="deleteAllSelectedBtn" style="display: none;">
                                            <i class="voyager-trash"></i> Delete All
                                        </button>
                                    </div>
                                </div>
                                <div id="savedContentList" class="row"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <span id="selectedCount">0 movies selected</span>
                    </div>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveSelectedContent">Save Selected Content</button>
                </div>
            </div>
        </div>
    </div>

    @can('delete', Voyager::model('Setting'))
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <i class="voyager-trash"></i> {!! __('voyager::settings.delete_question', ['setting' => '<span id="delete_setting_title"></span>']) !!}
                    </h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field("DELETE") }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::settings.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div>
        </div>
    </div>
    @endcan

@stop

@section('javascript')
    <script>
        $('document').ready(function () {
            $('#toggle_options').click(function () {
                $('.new-settings-options').toggle();
                if ($('#toggle_options .voyager-double-down').length) {
                    $('#toggle_options .voyager-double-down').removeClass('voyager-double-down').addClass('voyager-double-up');
                } else {
                    $('#toggle_options .voyager-double-up').removeClass('voyager-double-up').addClass('voyager-double-down');
                }
            });

            @can('delete', Voyager::model('Setting'))
            $('.panel-actions .voyager-trash').click(function () {
                var display = $(this).data('display-name') + '/' + $(this).data('display-key');

                $('#delete_setting_title').text(display);

                $('#delete_form')[0].action = '{{ route('voyager.settings.delete', [ 'id' => '__id' ]) }}'.replace('__id', $(this).data('id'));
                $('#delete_modal').modal('show');
            });
            @endcan

            $('.toggleswitch').bootstrapToggle();

            $('[data-toggle="tab"]').click(function() {
                $(".setting_tab").val($(this).html());
            });

            $('.delete_value').click(function(e) {
                e.preventDefault();
                $(this).closest('form').attr('action', $(this).attr('href'));
                $(this).closest('form').submit();
            });

            // Initiliaze rich text editor
            tinymce.init(window.voyagerTinyMCE.getConfig());

            function populateServerSelects() {
                $.ajax({
                    url: '{{ route('get_landing_servers') }}',
                    type: 'GET',
                    success: function(response) {
                        // Populate Plex servers
                        var plexSelect = $('select[name="landing.plex_server"]');
                        plexSelect.empty();
                        plexSelect.append('<option value="">Select Plex Server</option>');
                        $.each(response.plex, function(index, server) {
                            plexSelect.append('<option value="'+server.id+'">'+server.name+'</option>');
                        });
                        
                        // Set saved Plex value if exists
                        var savedPlex = '{{ setting("landing.plex_server", "") }}';
                        if (savedPlex) {
                            plexSelect.val(savedPlex);
                        }

                        // Add button next to Plex select if it exists and not already added
                        if (plexSelect.length > 0 && plexSelect.parent().find('#selectPlexContentBtn').length === 0) {
                            var buttonHtml = '<button type="button" class="btn btn-primary btn-sm" id="selectPlexContentBtn" style="margin-left: 10px;" data-platform="plex" data-toggle="modal" data-target="#moviesModal">Select Content</button>';
                            plexSelect.parent().append(buttonHtml);
                        }

                        // Populate Jellyfin servers
                        var jellySelect = $('select[name="landing.jellyfin_server"]');
                        jellySelect.empty();
                        jellySelect.append('<option value="">Select Jellyfin Server</option>');
                        $.each(response.jelly, function(index, server) {
                            jellySelect.append('<option value="'+server.id+'">'+server.name+'</option>');
                        });
                        
                        // Set saved Jellyfin value if exists
                        var savedJelly = '{{ setting("landing.jellyfin_server", "") }}';
                        if (savedJelly) {
                            jellySelect.val(savedJelly);
                        }

                        // Add button next to Jellyfin select if it exists and not already added
                        if (jellySelect.length > 0 && jellySelect.parent().find('#selectJellyfinContentBtn').length === 0) {
                            var buttonHtml = '<button type="button" class="btn btn-primary btn-sm" id="selectJellyfinContentBtn" style="margin-left: 10px;" data-platform="jellyfin" data-toggle="modal" data-target="#moviesModal">Select Content</button>';
                            jellySelect.parent().append(buttonHtml);
                        }

                        // Populate Emby servers
                        var embySelect = $('select[name="landing.emby_server"]');
                        embySelect.empty();
                        embySelect.append('<option value="">Select Emby Server</option>');
                        $.each(response.emby, function(index, server) {
                            embySelect.append('<option value="'+server.id+'">'+server.name+'</option>');
                        });
                        
                        // Set saved Emby value if exists
                        var savedEmby = '{{ setting("landing.emby_server", "") }}';
                        if (savedEmby) {
                            embySelect.val(savedEmby);
                        }

                        // Add button next to Emby select if it exists and not already added
                        if (embySelect.length > 0 && embySelect.parent().find('#selectEmbyContentBtn').length === 0) {
                            var buttonHtml = '<button type="button" class="btn btn-primary btn-sm" id="selectEmbyContentBtn" style="margin-left: 10px;" data-platform="emby" data-toggle="modal" data-target="#moviesModal">Select Content</button>';
                            embySelect.parent().append(buttonHtml);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error fetching server data:', xhr.responseText);
                    }
                });
            }

            // Call the function when the page loads
            populateServerSelects();

            // Also call when the tab containing these selects is shown
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var target = $(e.target).attr("href");
                if (target === "#landing") {
                    populateServerSelects();
                }
            });

            // Content Modal functionality
            var selectedContent = [];
            var currentContentType = 'movies'; // 'movies' or 'series'
            var currentLibraryKey = null;
            var currentLibraryName = '';
            var currentPage = 1;
            var paginationData = null;
            var currentSearchTerm = '';
            var allContentInLibrary = []; // Store all content for client-side search
            var searchInputPersist = ''; // Keep search term when switching tabs
            
            // Universal button handler for opening modal
            $(document).on('click', '[data-platform]', function() {
                var platform = $(this).data('platform');
                var serverSelect;
                
                // Determine which server to check
                if (platform === 'plex') {
                    serverSelect = $('select[name="landing.plex_server"]');
                } else if (platform === 'jellyfin') {
                    serverSelect = $('select[name="landing.jellyfin_server"]');
                } else if (platform === 'emby') {
                    serverSelect = $('select[name="landing.emby_server"]');
                }
                
                if (!serverSelect || !serverSelect.val()) {
                    alert('Please select a ' + platform + ' server first.');
                    return;
                }
                
                window.currentPlatform = platform;
                currentContentType = 'movies'; // Default to movies
                
                updateModalTitle();
                $('#moviesModal').modal('show');
                resetModalToLibraries();
                loadAllSavedContent(); // Load both movies and series data
                loadLibraries();
            });

            // Library content type button handlers
            $(document).on('click', '.library-content-btn', function(e) {
                e.stopPropagation();
                var libraryKey = $(this).data('library-key');
                var libraryName = $(this).data('library-name');
                var contentType = $(this).data('content-type');
                
                currentLibraryKey = libraryKey;
                currentLibraryName = libraryName;
                currentContentType = contentType;
                currentPage = 1;
                currentSearchTerm = '';
                
                // Update modal title and labels
                updateModalTitle();
                updateContentTypeLabels();
                
                // Load content from the selected library
                loadContentFromLibrary(libraryKey, libraryName, 1, '');
            });

            function updateModalTitle() {
                var platform = window.currentPlatform || 'plex';
                var platformName = platform.charAt(0).toUpperCase() + platform.slice(1);
                var contentTypeName = currentContentType.charAt(0).toUpperCase() + currentContentType.slice(1);
                $('.modal-title').html('<i class="voyager-video"></i> Select ' + platformName + ' ' + contentTypeName + ' for Landing Page <small id="savedContentIndicator" style="display: none; color: #62a8ea;"><i class="voyager-check"></i> Previously saved content loaded</small>');
            }

            function updateContentTypeLabels() {
                var contentTypeName = currentContentType.charAt(0).toUpperCase() + currentContentType.slice(1);
                var contentTypeNameLower = currentContentType.toLowerCase();
                
                $('#browseTabLabel').text('Browse ' + contentTypeName);
                $('#librarySelectionTitle').text('Select a ' + contentTypeName.slice(0, -1) + ' Library:');
                $('#contentSearchInput').attr('placeholder', 'Search ' + contentTypeNameLower + ' by title...');
                $('#savedContentTitle').text('Previously Selected ' + contentTypeName);
            }

            function resetModalToLibraries() {
                $('#librariesView').show();  
                $('#contentView').hide();
                $('#paginationControls').hide();
                $('#savedContentIndicator').hide();
                
                // Reset to browse tab
                $('#contentModalTabs a[href="#browseContentTab"]').tab('show');
                
                // Don't reset selectedContent here - we want to preserve saved content
                // selectedContent = []; // Removed this line
                updateSelectedCount();
                updateSavedContentTab();
                currentLibraryKey = null;
                currentLibraryName = '';
                currentPage = 1;
                paginationData = null;
                
                // Restore search input if switching back to same library
                if (searchInputPersist) {
                    $('#contentSearchInput').val(searchInputPersist);
                    currentSearchTerm = searchInputPersist;
                }
            }

            function loadSavedContent() {
                // Load previously saved content from JSON file based on current platform and content type
                var platform = window.currentPlatform || 'plex';
                var jsonUrl = '/landing/' + currentContentType + '/' + platform + '.json';
                
                $.ajax({
                    url: jsonUrl,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.success && response.data && response.data.length > 0) {
                            selectedContent = response.data;
                            updateSelectedCount();
                            updateSavedContentTab();
                            $('#savedContentIndicator').show();
                            $('#savedContentCount').text(selectedContent.length).show();
                            console.log('Loaded ' + selectedContent.length + ' previously saved ' + platform + ' ' + currentContentType);
                        } else {
                            $('#savedContentIndicator').hide();
                            $('#savedContentCount').hide();
                            showEmptySavedContent();
                        }
                    },
                    error: function(xhr) {
                        // No saved content file exists yet, that's okay
                        $('#savedContentIndicator').hide();
                        $('#savedContentCount').hide();
                        showEmptySavedContent();
                        console.log('No previously saved ' + platform + ' ' + currentContentType + ' found');
                    }
                });
            }

            function loadAllSavedContent() {
                // Load all previously saved content from JSON files (both movies and series)
                var platform = window.currentPlatform || 'plex';
                selectedContent = []; // Clear current selection
                var loadedCount = 0;
                var totalRequests = 2; // movies and series
                
                // Load movies
                $.ajax({
                    url: '/landing/movies/' + platform + '.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.success && response.data && response.data.length > 0) {
                            selectedContent = selectedContent.concat(response.data);
                        }
                    },
                    error: function(xhr) {
                        // No saved movies file exists yet, that's okay
                        console.log('No previously saved ' + platform + ' movies found');
                    },
                    complete: function() {
                        loadedCount++;
                        if (loadedCount === totalRequests) {
                            finishLoadingAllSavedContent();
                        }
                    }
                });
                
                // Load series
                $.ajax({
                    url: '/landing/series/' + platform + '.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.success && response.data && response.data.length > 0) {
                            selectedContent = selectedContent.concat(response.data);
                        }
                    },
                    error: function(xhr) {
                        // No saved series file exists yet, that's okay
                        console.log('No previously saved ' + platform + ' series found');
                    },
                    complete: function() {
                        loadedCount++;
                        if (loadedCount === totalRequests) {
                            finishLoadingAllSavedContent();
                        }
                    }
                });
            }

            function finishLoadingAllSavedContent() {
                updateSelectedCount();
                updateSavedContentTab();
                if (selectedContent.length > 0) {
                    $('#savedContentIndicator').show();
                    $('#savedContentCount').text(selectedContent.length).show();
                    console.log('Loaded ' + selectedContent.length + ' total previously saved items');
                } else {
                    $('#savedContentIndicator').hide();
                    $('#savedContentCount').hide();
                    showEmptySavedContent();
                }
            }

            function updateSavedContentTab() {
                if (selectedContent.length === 0) {
                    showEmptySavedContent();
                    return;
                }

                $('#savedContentEmpty').hide();
                $('#savedContentContent').show();
                $('#deleteAllSelectedBtn').show();
                
                var savedContentList = $('#savedContentList');
                savedContentList.empty();

                // Group content by library
                var contentByLibrary = {};
                selectedContent.forEach(function(content, index) {
                    var libraryName = content.libraryName || 'Unknown Library';
                    if (!contentByLibrary[libraryName]) {
                        contentByLibrary[libraryName] = [];
                    }
                    contentByLibrary[libraryName].push({content: content, index: index});
                });

                // Display content grouped by library
                Object.keys(contentByLibrary).forEach(function(libraryName) {
                    var contents = contentByLibrary[libraryName];
                    
                    // Add library header
                    var libraryHeader = $(`
                        <div class="col-md-12">
                            <h6 style="color: #62a8ea; margin-top: 15px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px;">
                                <i class="voyager-folder"></i> ${libraryName} (${contents.length} items)
                            </h6>
                        </div>
                    `);
                    savedContentList.append(libraryHeader);

                    // Add content for this library
                    contents.forEach(function(item) {
                        var content = item.content;
                        var index = item.index;
                        var imageUrl = content.poster || content.image || '/images/placeholder.jpg';
                        var cardClass = content.type === 'Series' ? 'series-card' : 'movie-card';
                        var titleClass = content.type === 'Series' ? 'series-title' : 'movie-title';
                        var yearClass = content.type === 'Series' ? 'series-year' : 'movie-year';
                        var extraInfo = content.type === 'Series' && content.seasons ? `<div class="series-seasons">${content.seasons} seasons</div>` : '';
                        
                        var contentCard = $(`
                            <div class="col-md-3 col-sm-4 col-xs-6">
                                <div class="saved-movie-card ${cardClass}" data-saved-content-index="${index}">
                                    <div class="remove-indicator">
                                        <i class="voyager-trash"></i>
                                    </div>
                                    <img src="${imageUrl}" alt="${content.title}" onerror="this.src='/images/placeholder.jpg'">
                                    <div class="${titleClass}">${content.title}</div>
                                    <div class="${yearClass}">${content.year || 'N/A'}</div>
                                    ${extraInfo}
                                </div>
                            </div>
                        `);
                        savedContentList.append(contentCard);
                    });
                });

                $('#savedContentCount').text(selectedContent.length).show();
            }

            function showEmptySavedContent() {
                $('#savedContentContent').hide();
                $('#savedContentEmpty').show();
                $('#savedContentCount').hide();
                $('#deleteAllSelectedBtn').hide();
            }

            function loadLibraries() {
                $('#contentLoading').show();
                $('#loadingText').text('Loading libraries...');
                $('#contentError').hide();
                $('#librariesView').hide();
                
                var platform = window.currentPlatform || 'plex';
                var apiUrl;
                if (platform === 'jellyfin') {
                    apiUrl = '/api/get-jellyfin-libraries';
                } else if (platform === 'emby') {
                    apiUrl = '/api/get-emby-libraries';
                } else {
                    apiUrl = '/api/get-plex-libraries';
                }
                
                $.ajax({
                    url: apiUrl,
                    type: 'GET',
                    success: function(response) {
                        $('#contentLoading').hide();
                        if (response.success && response.libraries) {
                            displayLibraries(response.libraries);
                            $('#librariesView').show();
                        } else {
                            showError('No movie libraries found.');
                        }
                    },
                    error: function(xhr) {
                        $('#contentLoading').hide();
                        var errorMsg = 'Error loading libraries.';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        showError(errorMsg);
                    }
                });
            }

            function displayLibraries(libraries) {
                var librariesList = $('#librariesList');
                librariesList.empty();

                libraries.forEach(function(library, index) {
                    // Handle both Plex and Jellyfin library formats
                    var libraryKey = library.key || library.id;
                    var libraryTitle = library.title || library.name;
                    var libraryType = library.type;
                    
                    // Determine which content types are available for this library
                    var hasMovies = libraryType.toLowerCase().includes('movie');
                    var hasSeries = libraryType.toLowerCase().includes('show') || libraryType.toLowerCase().includes('tv') || libraryType.toLowerCase().includes('series');
                    
                    // Show all libraries, let user choose content type
                    if (hasMovies || hasSeries) {
                        var buttonsHtml = '';
                        
                        if (hasMovies) {
                            buttonsHtml += `<button type="button" class="btn btn-primary library-content-btn" data-library-key="${libraryKey}" data-library-name="${libraryTitle}" data-content-type="movies">
                                <i class="voyager-video"></i> Movies
                            </button>`;
                        }
                        
                        if (hasSeries) {
                            buttonsHtml += `<button type="button" class="btn btn-success library-content-btn" data-library-key="${libraryKey}" data-library-name="${libraryTitle}" data-content-type="series">
                                <i class="voyager-tv"></i> Series
                            </button>`;
                        }
                        
                        var libraryCard = $(`
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="library-card">
                                    <div class="library-icon">
                                        <i class="voyager-folder"></i>
                                    </div>
                                    <div class="library-title">${libraryTitle}</div>
                                    <div class="library-type">${libraryType} library</div>
                                    <div class="library-content-buttons">
                                        ${buttonsHtml}
                                    </div>
                                </div>
                            </div>
                        `);
                        librariesList.append(libraryCard);
                    }
                });
            }

            // Remove old library card click handler - now using button-based selection

            // Search functionality with persistence
            var searchTimeout;
            $(document).on('input', '#contentSearchInput', function() {
                clearTimeout(searchTimeout);
                var searchTerm = $(this).val().trim();
                
                // Update persistent search
                searchInputPersist = searchTerm;
                
                searchTimeout = setTimeout(function() {
                    currentSearchTerm = searchTerm;
                    currentPage = 1;
                    loadContentFromLibrary(currentLibraryKey, currentLibraryName, currentPage, currentSearchTerm);
                }, 500); // Debounce search
            });

            // Clear search functionality
            $(document).on('click', '#clearSearchBtn', function() {
                $('#contentSearchInput').val('');
                searchInputPersist = '';
                currentSearchTerm = '';
                currentPage = 1;
                loadContentFromLibrary(currentLibraryKey, currentLibraryName, currentPage, currentSearchTerm);
            });

            function loadContentFromLibrary(libraryKey, libraryName, page, searchTerm) {
                $('#contentLoading').show();
                $('#loadingText').text('Loading ' + currentContentType + ' from ' + libraryName + '...');
                $('#contentError').hide();
                $('#librariesView').hide();
                $('#contentView').hide();
                $('#paginationControls').hide();
                
                var platform = window.currentPlatform || 'plex';
                var apiUrl;
                
                // Select correct endpoint based on platform and content type
                if (platform === 'jellyfin') {
                    if (currentContentType === 'series') {
                        apiUrl = '/api/get-jellyfin-series-from-library/' + libraryKey + '/' + page + '?search=' + encodeURIComponent(searchTerm || '');
                    } else {
                        apiUrl = '/api/get-jellyfin-movies-from-library/' + libraryKey + '/' + page + '?search=' + encodeURIComponent(searchTerm || '');
                    }
                } else if (platform === 'emby') {
                    if (currentContentType === 'series') {
                        apiUrl = '/api/get-emby-series-from-library/' + libraryKey + '/' + page + '?search=' + encodeURIComponent(searchTerm || '');
                    } else {
                        apiUrl = '/api/get-emby-movies-from-library/' + libraryKey + '/' + page + '?search=' + encodeURIComponent(searchTerm || '');
                    }
                } else {
                    if (currentContentType === 'series') {
                        apiUrl = '/api/get-series-from-library/' + libraryKey + '/' + page + '?search=' + encodeURIComponent(searchTerm || '');
                    } else {
                        apiUrl = '/api/get-movies-from-library/' + libraryKey + '/' + page + '?search=' + encodeURIComponent(searchTerm || '');
                    }
                }
                
                $.ajax({
                    url: apiUrl,
                    type: 'GET',
                    success: function(response) {
                        $('#contentLoading').hide();
                        if (response.success && response.data) {
                            allContentInLibrary = response.all_movies || response.all_series || response.data;
                            displayContent(response.data, libraryName);
                            paginationData = response.pagination;
                            updatePagination();
                            $('#selectedLibraryName').text(currentContentType.charAt(0).toUpperCase() + currentContentType.slice(1) + ' in: ' + libraryName + (searchTerm ? ' (filtered)' : ''));
                            $('#contentView').show();
                            if (paginationData && paginationData.total_pages > 1) {
                                $('#paginationControls').show();
                            }
                        } else {
                            showError('No ' + currentContentType + ' found in this library.');
                        }
                    },
                    error: function(xhr) {
                        $('#contentLoading').hide();
                        var errorMsg = 'Error loading ' + currentContentType + ' from library.';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        showError(errorMsg);
                    }
                });
            }

            function displayContent(content, libraryName) {
                var contentList = $('#contentList'); // Using correct container
                contentList.empty();

                content.forEach(function(item, index) {
                    var imageUrl = item.image || item.poster || '/images/placeholder.jpg';
                    
                    // Add library information to content object
                    item.libraryKey = currentLibraryKey;
                    item.libraryName = libraryName;
                    
                    // Check if this content is already selected (previously saved)
                    var isSelected = selectedContent.some(function(savedContent) {
                        return savedContent.title === item.title && savedContent.year === item.year;
                    });
                    
                    var selectedClass = isSelected ? ' selected' : '';
                    var cardClass = item.type === 'Series' ? 'series-card' : 'movie-card';
                    var titleClass = item.type === 'Series' ? 'series-title' : 'movie-title';
                    var yearClass = item.type === 'Series' ? 'series-year' : 'movie-year';
                    
                    // Extra info for series
                    var extraInfo = '';
                    if (item.type === 'Series' && item.seasons) {
                        extraInfo = `<div class="series-seasons" style="font-size: 10px; color: #666; margin-top: 2px;">${item.seasons} seasons</div>`;
                    }
                    
                    // Synopsis/summary with truncation
                    var synopsis = '';
                    if (item.summary || item.synopsis) {
                        var summaryText = item.summary || item.synopsis;
                        var truncatedSummary = summaryText.length > 100 ? summaryText.substring(0, 100) + '...' : summaryText;
                        synopsis = `<div class="content-synopsis" style="font-size: 10px; color: #888; margin-top: 5px; line-height: 1.2;" title="${summaryText}">${truncatedSummary}</div>`;
                    }
                    
                    // Trailer indicator
                    var trailerIcon = '';
                    if (item.trailer) {
                        trailerIcon = `<div class="trailer-indicator" style="position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.7); color: white; border-radius: 3px; padding: 2px 5px; font-size: 10px;" title="Trailer available"><i class="voyager-play"></i></div>`;
                    }
                    
                    var contentCard = $(`
                        <div class="col-md-3 col-sm-4 col-xs-6">
                            <div class="${cardClass}${selectedClass}" data-content-index="${index}" style="position: relative;">
                                ${trailerIcon}
                                <img src="${imageUrl}" alt="${item.title}" onerror="this.src='/images/placeholder.jpg'">
                                <div class="${titleClass}">${item.title}</div>
                                <div class="${yearClass}">${item.year || 'N/A'}</div>
                                ${extraInfo}
                                ${synopsis}
                                <div class="content-library" style="font-size: 10px; color: #999; margin-top: 3px;">
                                    <i class="voyager-folder"></i> ${libraryName}
                                </div>
                            </div>
                        </div>
                    `);
                    contentList.append(contentCard);
                });

                // Store content data for later use
                window.allContent = content;
            }

            // Back to libraries button
            $(document).on('click', '#backToLibraries', function() {
                backToLibrariesView();
            });

            function backToLibrariesView() {
                $('#librariesView').show();  
                $('#contentView').hide();
                $('#paginationControls').hide();
                currentLibraryKey = null;
                currentLibraryName = '';
                currentPage = 1;
                paginationData = null;
                // Don't reset selectedContent - keep them across library browsing
            }

            // Content selection functionality (both movies and series)
            $(document).on('click', '.movie-card, .series-card', function() {
                var contentIndex = $(this).data('content-index');
                var content = window.allContent[contentIndex];
                
                if ($(this).hasClass('selected')) {
                    // Deselect
                    $(this).removeClass('selected');
                    selectedContent = selectedContent.filter(function(m) {
                        return !(m.title === content.title && m.year === content.year);
                    });
                } else {
                    // Select
                    $(this).addClass('selected');
                    selectedContent.push(content);
                }
                
                updateSelectedCount();
                updateSavedContentTab();
            });

            // Saved movie removal functionality
            $(document).on('click', '.saved-movie-card', function() {
                var movieIndex = $(this).data('saved-content-index');
                var content = selectedContent[movieIndex];
                
                if (confirm('Remove "' + content.title + '" from your selection?')) {
                    // Remove from selectedContent array
                    selectedContent.splice(movieIndex, 1);
                    
                    // Update displays
                    updateSelectedCount();
                    updateSavedContentTab();
                    
                    // Update any visible content cards in browse tab to reflect the change
                    if (window.allContent) {
                        $('.movie-card, .series-card').each(function() {
                            var index = $(this).data('content-index');
                            var browserContent = window.allContent[index];
                            if (browserContent && browserContent.title === content.title && browserContent.year === content.year) {
                                $(this).removeClass('selected');
                            }
                        });
                    }
                }
            });

            function updateSelectedCount() {
                var count = selectedContent.length;
                var contentTypeName = currentContentType.toLowerCase();
                var text = count + ' ' + contentTypeName + ' selected';
                
                if (count < 4) {
                    text += ' (minimum 4 required)';
                    $('#selectedCount').removeClass('text-success').addClass('text-warning');
                } else if (count > 10) {
                    text += ' (maximum 10 allowed)';
                    $('#selectedCount').removeClass('text-success').addClass('text-danger');
                } else {
                    text += ' (ready to save)';
                    $('#selectedCount').removeClass('text-warning text-danger').addClass('text-success');
                }
                
                $('#selectedCount').text(text);
                
                // Update badge count
                if (count > 0) {
                    $('#savedContentCount').text(count).show();
                } else {
                    $('#savedContentCount').hide();
                }
            }

            function updatePagination() {
                if (!paginationData) return;

                var paginationList = $('#paginationList');
                paginationList.empty();

                // Previous button
                var prevBtn = $('<li class="page-item' + (!paginationData.has_previous ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + (paginationData.current_page - 1) + '">Previous</a></li>');
                paginationList.append(prevBtn);

                // Page numbers
                var startPage = Math.max(1, paginationData.current_page - 2);
                var endPage = Math.min(paginationData.total_pages, paginationData.current_page + 2);

                for (var i = startPage; i <= endPage; i++) {
                    var pageBtn = $('<li class="page-item' + (i === paginationData.current_page ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>');
                    paginationList.append(pageBtn);
                }

                // Next button
                var nextBtn = $('<li class="page-item' + (!paginationData.has_next ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + (paginationData.current_page + 1) + '">Next</a></li>');
                paginationList.append(nextBtn);

                // Update pagination info
                var startItem = ((paginationData.current_page - 1) * paginationData.per_page) + 1;
                var endItem = Math.min(startItem + paginationData.per_page - 1, paginationData.total);
                $('#paginationInfo').text('Showing ' + startItem + ' - ' + endItem + ' of ' + paginationData.total + ' movies');
            }

            // Pagination click handler
            $(document).on('click', '.page-link', function(e) {
                e.preventDefault();
                var page = $(this).data('page');
                if (page && page !== currentPage && !$(this).parent().hasClass('disabled')) {
                    currentPage = page;
                    loadContentFromLibrary(currentLibraryKey, currentLibraryName, currentPage, currentSearchTerm);
                }
            });

            function showError(message) {
                $('#contentError').text(message).show();
                $('#librariesView').hide();
                $('#contentView').hide();
                $('#paginationControls').hide();
            }

            // Delete all selected content
            $('#deleteAllSelectedBtn').click(function() {
                if (selectedContent.length === 0) {
                    alert('No content to delete.');
                    return;
                }
                
                var platform = window.currentPlatform || 'plex';
                var platformName = platform.charAt(0).toUpperCase() + platform.slice(1);
                
                if (confirm('Are you sure you want to delete ALL previously selected content for ' + platformName + '? This action cannot be undone.')) {
                    var btn = $(this);
                    btn.prop('disabled', true).text('Deleting...');
                    
                    // Delete both movies and series
                    var deleteRequests = [];
                    
                    // Delete movies
                    deleteRequests.push(
                        $.ajax({
                            url: '/api/delete-all-selected',
                            type: 'POST',
                            data: {
                                platform: platform,
                                type: 'movies',
                                _token: '{{ csrf_token() }}'
                            }
                        })
                    );
                    
                    // Delete series
                    deleteRequests.push(
                        $.ajax({
                            url: '/api/delete-all-selected',
                            type: 'POST',
                            data: {
                                platform: platform,
                                type: 'series',
                                _token: '{{ csrf_token() }}'
                            }
                        })
                    );
                    
                    // Wait for both requests to complete
                    Promise.all(deleteRequests).then(function(responses) {
                        var totalDeletedImages = 0;
                        var deletedTypes = [];
                        
                        responses.forEach(function(response, index) {
                            console.log('Delete response ' + index + ':', response);
                            if (response.deleted_images) {
                                totalDeletedImages += response.deleted_images;
                            }
                            if (response.deleted_json) {
                                deletedTypes.push(index === 0 ? 'movies' : 'series');
                            }
                        });
                        
                        var message = 'All selected content has been deleted successfully!';
                        if (totalDeletedImages > 0) {
                            message += ' (' + totalDeletedImages + ' images deleted)';
                        }
                        if (deletedTypes.length > 0) {
                            message += ' Types deleted: ' + deletedTypes.join(', ');
                        }
                        
                        alert(message);
                        
                        // Clear the selected content array
                        selectedContent = [];
                        
                        // Update displays
                        updateSelectedCount();
                        updateSavedContentTab();
                        
                        // Hide the saved content indicator
                        $('#savedContentIndicator').hide();
                        $('#savedContentCount').hide();
                        
                        btn.prop('disabled', false).text('Delete All');
                    }).catch(function(error) {
                        console.error('Error deleting content:', error);
                        alert('Error deleting some content. Please try again.');
                        btn.prop('disabled', false).text('Delete All');
                    });
                }
            });

            // Save selected movies
            $('#saveSelectedContent').click(function() {
                if (selectedContent.length === 0) {
                    alert('Please select at least one item.');
                    return;
                }

                if (selectedContent.length < 4) {
                    alert('Please select at least 4 items. You have selected ' + selectedContent.length + ' items.');
                    return;
                }

                if (selectedContent.length > 10) {
                    alert('You can select a maximum of 10 items. You have selected ' + selectedContent.length + ' items. Please deselect some items.');
                    return;
                }

                var btn = $(this);
                btn.prop('disabled', true).text('Saving...');
                
                var apiUrl = currentContentType === 'series' ? '/api/save-selected-series' : '/api/save-selected-movies';
                var dataKey = currentContentType === 'series' ? 'series' : 'movies';

                $.ajax({
                    url: apiUrl,
                    type: 'POST',
                    data: {
                        platform: window.currentPlatform || 'plex',
                        [dataKey]: selectedContent,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            var contentTypeName = currentContentType.charAt(0).toUpperCase() + currentContentType.slice(1);
                            var message = contentTypeName + ' saved successfully! ' + response.count + ' items saved.';
                            message += '\nTemporary images have been cleaned up - only selected content images are kept.';
                            alert(message);
                            $('#moviesModal').modal('hide');
                        } else {
                            alert('Error: ' + (response.error || 'Unknown error'));
                        }
                    },
                    error: function(xhr) {
                        var errorMsg = 'Error saving ' + currentContentType + '.';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        alert(errorMsg);
                    },
                    complete: function() {
                        btn.prop('disabled', false).text('Save Selected Content');
                    }
                });
            });

        });
    </script>
    <script type="text/javascript">
    $(".group_select").not('.group_select_new').select2({
        tags: true,
        width: 'resolve'
    });
    $(".group_select_new").select2({
        tags: true,
        width: 'resolve',
        placeholder: '{{ __("voyager::generic.select_group") }}'
    });
    $(".group_select_new").val('').trigger('change');
    </script>
    <div style="display:none">
        <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
        <input type="hidden" id="upload_type_slug" value="settings">
    </div>

    <script>
        var options_editor = ace.edit('options_editor');
        options_editor.getSession().setMode("ace/mode/json");

        var options_textarea = document.getElementById('options_textarea');
        options_editor.getSession().on('change', function() {
            console.log(options_editor.getValue());
            options_textarea.value = options_editor.getValue();
        });
    </script>
@stop