@extends('layouts.admin-panel')

@section('head')
    @include('admin-panel/includes/head')
    @include('admin-panel/includes/addHead')
@stop

@section('nav')
    @include('admin-panel/includes/navbar')
@stop

@section('content')

    @include('admin-panel/includes/sidebar')

    <!-- Main content -->
    <div class="content-wrapper">

    @include('admin-panel/includes/header')

    <!-- Content area -->
        <div class="content">

            <div class="row">
                <div class="col-md-12">

                    <div class="card">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {!! session('success') !!}
                            </div>
                        @endif
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title">AnimEps – Toplu Bölüm Əlavə et</h5>
                            <div class="header-elements">
                                <div class="list-icons">
                                    <a class="list-icons-item" data-action="collapse"></a>
                                    <a class="list-icons-item" data-action="reload"></a>
                                    <a class="list-icons-item" data-action="remove"></a>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <form action="{{route('addAnimEpsApi')}}" method="POST">
                                @csrf

                                <div class="form-group">
                                    <label>Anime:</label>
                                    <select name="anim" class="form-control select-search" data-fouc required>
                                        @foreach($animes as $item)
                                            <option value="{{$item->id}}">{{$item->title}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        @foreach ($errors->all() as $error)
                                            <div>{{$error}}</div>
                                        @endforeach
                                    </div>
                                @endif

                                <hr>

                                <!-- Existing episodes for the selected anime (read-only, never submitted) -->
                                <div id="existingWrap" style="display:none;">
                                    <h6 class="font-weight-semibold">Mövcud bölümlər <span class="text-muted" id="existingCount"></span></h6>
                                    <p class="text-muted font-size-sm">Bu bölümlər artıq mövcuddur — burada dəyişdirilmir və silinmir. Redaktə üçün <a href="{{route('displayAnimEps')}}">Bütün Bölümlər</a> səhifəsinə keçin.</p>
                                    <div id="existing" class="mb-3"></div>
                                    <hr>
                                </div>

                                <h6 class="font-weight-semibold">Yeni bölümlər</h6>
                                <div id="episodes">
                                    <!-- rows injected here -->
                                </div>

                                <div class="mb-3">
                                    <button type="button" id="addMore" class="btn btn-light">
                                        <i class="icon-plus-circle2 mr-2"></i> Daha bir bölüm əlavə et
                                    </button>
                                </div>

                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">Yadda saxla <i
                                            class="icon-paperplane ml-2"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- /content area -->

        @include('admin-panel/includes/footer')

    </div>
    <!-- /main content -->

    <script>
        (function () {
            var container = document.getElementById('episodes');
            var addBtn = document.getElementById('addMore');
            var index = 0;

            // Baseline for the first NEW row — continues after existing episodes.
            var startNumber = 1;
            var startTitle = 'Bölüm 1';
            var byAnimUrl = "{{ url('animEpsByAnim') }}";

            // Build one episode row. `num` -> episode number, `title` -> episode title.
            function buildRow(num, title) {
                var i = index++;
                var wrap = document.createElement('div');
                wrap.className = 'card border mb-2 episode-row';
                wrap.innerHTML =
                    '<div class="card-body py-2">' +
                        '<div class="d-flex justify-content-between align-items-center mb-2">' +
                            '<span class="font-weight-semibold ep-badge">Bölüm ' + num + '</span>' +
                            '<button type="button" class="btn btn-sm btn-light remove-row">' +
                                '<i class="icon-cross2"></i></button>' +
                        '</div>' +
                        '<div class="row">' +
                            '<div class="col-md-2 form-group">' +
                                '<label>Bölüm №</label>' +
                                '<input name="episodes[' + i + '][episode_number]" type="number" ' +
                                    'class="form-control ep-number" value="' + num + '" required>' +
                            '</div>' +
                            '<div class="col-md-4 form-group">' +
                                '<label>Bölüm adı</label>' +
                                '<input name="episodes[' + i + '][episode_title]" type="text" ' +
                                    'class="form-control ep-title" value="' + title + '" required>' +
                            '</div>' +
                            '<div class="col-md-3 form-group">' +
                                '<label>Video linki (source)</label>' +
                                '<input name="episodes[' + i + '][s_url]" type="text" ' +
                                    'class="form-control" placeholder="https://...">' +
                            '</div>' +
                            '<div class="col-md-3 form-group">' +
                                '<label>Fallback linki</label>' +
                                '<input name="episodes[' + i + '][s_fallback]" type="text" ' +
                                    'class="form-control" placeholder="https://...">' +
                            '</div>' +
                        '</div>' +
                        '<div class="row">' +
                            '<div class="col-md-2 form-group mb-0">' +
                                '<label>Player</label>' +
                                '<input name="episodes[' + i + '][s_player]" type="text" ' +
                                    'class="form-control" value="AniPlayer">' +
                            '</div>' +
                        '</div>' +
                    '</div>';
                return wrap;
            }

            // Increment the last number found inside a title string.
            // "Bölüm 1" -> "Bölüm 2", "Ep 09" -> "Ep 10", no number -> "Bölüm N".
            function nextTitle(title, num) {
                if (/\d+/.test(title)) {
                    return title.replace(/(\d+)(?=\D*$)/, num);
                }
                return (title ? title.trim() + ' ' : 'Bölüm ') + num;
            }

            function addRow() {
                var rows = container.querySelectorAll('.episode-row');
                var num = startNumber;
                var title = startTitle;

                if (rows.length) {
                    var last = rows[rows.length - 1];
                    var lastNum = parseInt(last.querySelector('.ep-number').value, 10);
                    num = (isNaN(lastNum) ? rows.length : lastNum) + 1;
                    title = nextTitle(last.querySelector('.ep-title').value, num);
                }

                container.appendChild(buildRow(num, title));
            }

            // Render the anime's existing episodes read-only, and set the
            // baseline so new rows continue after the last existing episode.
            function loadExisting(animId) {
                var wrap = document.getElementById('existingWrap');
                var list = document.getElementById('existing');
                var countEl = document.getElementById('existingCount');

                if (!animId) { wrap.style.display = 'none'; return; }

                $.ajax({ url: byAnimUrl + '/' + animId }).done(function (eps) {
                    startNumber = 1;
                    startTitle = 'Bölüm 1';
                    list.innerHTML = '';

                    if (eps && eps.length) {
                        var maxNum = 0, lastTitle = '';
                        var rowsHtml = '';
                        eps.forEach(function (ep) {
                            var n = parseInt(ep.episode_number, 10) || 0;
                            if (n >= maxNum) { maxNum = n; lastTitle = ep.episode_title || ''; }
                            rowsHtml +=
                                '<tr>' +
                                    '<td style="width:70px;">' + n + '</td>' +
                                    '<td>' + (ep.episode_title || '') + '</td>' +
                                    '<td class="text-muted">' + (ep.s_url ? ep.s_url : '—') + '</td>' +
                                    '<td class="text-muted">' + (ep.s_fallback ? ep.s_fallback : '—') + '</td>' +
                                '</tr>';
                        });
                        list.innerHTML =
                            '<table class="table table-sm table-bordered mb-0">' +
                                '<thead><tr><th>№</th><th>Bölüm adı</th><th>Video linki</th><th>Fallback linki</th></tr></thead>' +
                                '<tbody>' + rowsHtml + '</tbody>' +
                            '</table>';
                        countEl.textContent = '(' + eps.length + ')';
                        wrap.style.display = 'block';

                        startNumber = maxNum + 1;
                        startTitle = nextTitle(lastTitle, startNumber);
                    } else {
                        countEl.textContent = '(0)';
                        wrap.style.display = 'none';
                    }

                    // Reset the new-episode rows to start from the new baseline.
                    container.innerHTML = '';
                    index = 0;
                    addRow();
                });
            }

            // Keep the "Bölüm N" badge in sync when the number field changes.
            container.addEventListener('input', function (e) {
                if (e.target.classList.contains('ep-number')) {
                    var row = e.target.closest('.episode-row');
                    row.querySelector('.ep-badge').textContent = 'Bölüm ' + e.target.value;
                }
            });

            container.addEventListener('click', function (e) {
                var btn = e.target.closest('.remove-row');
                if (!btn) return;
                var rows = container.querySelectorAll('.episode-row');
                if (rows.length > 1) {
                    btn.closest('.episode-row').remove();
                }
            });

            addBtn.addEventListener('click', addRow);

            // React to the anime selection (works with select2 too).
            $(function () {
                var $anim = $('select[name="anim"]');
                $anim.on('change', function () {
                    loadExisting($(this).val());
                });
                // Initial load for the pre-selected anime.
                loadExisting($anim.val());
            });
        })();
    </script>
@endsection