@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 Dub – Dublyaj ə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 id="dubForm" action="{{route('addAnimEpsDubApi')}}" method="POST" enctype="multipart/form-data">
                                @csrf

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

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

                                <div class="form-group">
                                    <label>Bölüm (episode):</label>
                                    <select name="ep_id" id="epSelect" class="form-control" required>
                                        <option value="">— Əvvəlcə anime seçin —</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Dil (language):</label>
                                    <select name="lang" class="form-control" required>
                                        <option value="az">Azərbaycan (az)</option>
                                        <option value="en">English (en)</option>
                                        <option value="tr">Türkçe (tr)</option>
                                        <option value="ru">Русский (ru)</option>
                                        <option value="jp">日本語 (jp)</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Dublyaj faylı (audio: .mp3 / .aac / .m4a / .ogg):</label>
                                    <input name="dub" type="file" class="form-control-uniform" accept="audio/*,.mp3,.aac,.m4a,.ogg" required>
                                    <span class="form-text text-muted">Fayl Bunny.net storage-ə yüklənəcək:
                                        <code>dubs/{slug}/{episode}/{lang}.{ext}</code></span>
                                </div>

                                <!-- Upload progress (dub only) -->
                                <div id="dubProgressWrap" class="mb-2" style="display:none;">
                                    <div class="progress" style="height:22px;">
                                        <div id="dubProgressBar"
                                             class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                                             role="progressbar" style="width:0%;">0%</div>
                                    </div>
                                </div>
                                <div id="dubStatus"></div>

                                <div class="text-right">
                                    <button type="submit" id="dubSubmit" class="btn btn-primary">Yüklə <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 byAnimUrl = "{{ url('animEpsByAnim') }}";
            var $anim = $('#animSelect');
            var $ep = $('#epSelect');

            function loadEpisodes(animId) {
                $ep.html('<option value="">— Yüklənir... —</option>');
                if (!animId) {
                    $ep.html('<option value="">— Əvvəlcə anime seçin —</option>');
                    return;
                }
                $.ajax({ url: byAnimUrl + '/' + animId }).done(function (eps) {
                    if (!eps || !eps.length) {
                        $ep.html('<option value="">— Bu anime üçün bölüm yoxdur —</option>');
                        return;
                    }
                    var html = '<option value="">— Bölüm seçin —</option>';
                    eps.forEach(function (ep) {
                        var label = 'Bölüm ' + ep.episode_number +
                            (ep.episode_title ? ' - ' + ep.episode_title : '');
                        html += '<option value="' + ep.id + '">' + label + '</option>';
                    });
                    $ep.html(html);
                });
            }

            $anim.on('change', function () {
                loadEpisodes($(this).val());
            });

            // AJAX upload with progress bar (dub only).
            var $form = $('#dubForm');
            var $wrap = $('#dubProgressWrap');
            var $bar = $('#dubProgressBar');
            var $status = $('#dubStatus');
            var $submit = $('#dubSubmit');

            function setBar(pct, cls, text) {
                $bar.css('width', pct + '%').text(text != null ? text : (pct + '%'));
                $bar.attr('class', 'progress-bar ' + (cls || 'bg-primary'));
            }

            $form.on('submit', function (e) {
                e.preventDefault();

                if (!$('#epSelect').val()) {
                    $status.html('<div class="alert alert-danger">Zəhmət olmasa bölüm seçin.</div>');
                    return;
                }

                $status.html('');
                $wrap.show();
                setBar(0, 'progress-bar-striped progress-bar-animated bg-primary', '0%');
                $submit.prop('disabled', true);

                var fd = new FormData(this);
                var xhr = new XMLHttpRequest();
                xhr.open('POST', $form.attr('action'));
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.setRequestHeader('Accept', 'application/json');

                xhr.upload.onprogress = function (ev) {
                    if (ev.lengthComputable) {
                        var pct = Math.round(ev.loaded / ev.total * 100);
                        setBar(pct, 'progress-bar-striped progress-bar-animated bg-primary');
                        if (pct >= 100) {
                            setBar(100, 'progress-bar-striped progress-bar-animated bg-warning',
                                'Serverə göndərilir...');
                        }
                    }
                };

                xhr.onload = function () {
                    $submit.prop('disabled', false);
                    var res = {};
                    try { res = JSON.parse(xhr.responseText); } catch (err) {}

                    if (xhr.status >= 200 && xhr.status < 300) {
                        setBar(100, 'bg-success', 'Tamamlandı');
                        var link = res.url
                            ? ' <a href="' + res.url + '" target="_blank">' + res.url + '</a>'
                            : '';
                        $status.html('<div class="alert alert-success">' +
                            (res.message || 'Dub yükləndi.') + link + '</div>');
                        $form[0].reset();
                        $('#epSelect').html('<option value="">— Əvvəlcə anime seçin —</option>');
                        if ($anim.hasClass('select2-hidden-accessible')) { $anim.val('').trigger('change.select2'); }
                    } else {
                        setBar(100, 'bg-danger', 'Xəta');
                        var msg = res.message ||
                            (res.errors ? Object.values(res.errors).flat().join(', ') : 'Yükləmə uğursuz oldu.');
                        $status.html('<div class="alert alert-danger">' + msg + '</div>');
                    }
                };

                xhr.onerror = function () {
                    $submit.prop('disabled', false);
                    setBar(100, 'bg-danger', 'Xəta');
                    $status.html('<div class="alert alert-danger">Şəbəkə xətası. Yenidən cəhd edin.</div>');
                };

                xhr.send(fd);
            });
        });
    </script>
@endsection