@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">
                        <div class="card-header header-elements-inline">
                            <h5 class="card-title">AniPlay Stream – Video yüklə</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="bunnyVideoForm" action="{{route('addBunnyVideoApi')}}" method="POST"
                                  enctype="multipart/form-data">
                                @csrf

                                <div class="form-group">
                                    <label>Video başlığı:</label>
                                    <input name="title" id="videoTitle" type="text" class="form-control"
                                           placeholder="Məsələn: Naruto - Bölüm 1" required>
                                </div>

                                <div class="form-group">
                                    <label>Anime:</label>
                                    <select name="anim_id" id="animSelect" class="form-control select-search"
                                            data-fouc>
                                        <option value="">— Bağlama —</option>
                                        @foreach($animes as $item)
                                            <option value="{{$item->id}}" data-slug="{{$item->slug}}">
                                                {{$item->title}} ({{$item->slug}})
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="form-text text-muted">Kolleksiya animenin slug-ı ilə seçilir —
                                        ayrıca kolleksiya seçməyə ehtiyac yoxdur.</span>
                                </div>

                                <div class="form-group" id="collectionStateWrap" style="display:none;">
                                    <label>Kolleksiya:</label>
                                    <div id="collectionState"></div>
                                </div>

                                <div class="form-group">
                                    <label>Bölüm (episode):</label>
                                    <select name="ep_id" id="epSelect" class="form-control">
                                        <option value="">— Əvvəlcə anime seçin —</option>
                                    </select>
                                    <span class="form-text text-muted">Seçilsə, video <code>anim_ep_source</code>-a
                                        <code>AniPlay</code> pleyeri kimi yazılacaq.</span>
                                </div>

                                <div class="form-group">
                                    <label>Növ:</label>
                                    <select name="s_type" class="form-control">
                                        <option value="sub">Sub</option>
                                        <option value="dub">Dub</option>
                                    </select>
                                </div>

                                <hr>

                                <div class="form-group">
                                    <label>Video faylı (.mp4 / .mkv / .mov / .webm):</label>
                                    <input name="video" id="videoFile" type="file" class="form-control-uniform"
                                           accept="video/*,.mp4,.mkv,.mov,.webm" required>
                                    <span class="form-text text-muted">Fayl birbaşa brauzerdən AniPlay Stream-ə
                                        yüklənir (server üzərindən keçmir), ona görə həcm limiti yoxdur və
                                        kəsilsə davam etdirilə bilir. Sonra avtomatik transkod olunacaq.</span>
                                </div>

                                <!-- Upload progress -->
                                <div id="videoProgressWrap" class="mb-2" style="display:none;">
                                    <div class="progress" style="height:22px;">
                                        <div id="videoProgressBar"
                                             class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                                             role="progressbar" style="width:0%;">0%</div>
                                    </div>
                                </div>
                                <div id="videoStatus"></div>

                                <div class="text-right">
                                    <button type="submit" id="videoSubmit" 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 src="{{asset('global_assets/js/plugins/uploaders/tus.min.js')}}"></script>
    <script>
        $(function () {
            var byAnimUrl = "{{ url('animEpsByAnim') }}";
            var collectionByAnimUrl = "{{ url('bunnyCollectionByAnim') }}";
            var $anim = $('#animSelect');
            var $ep = $('#epSelect');
            var $colWrap = $('#collectionStateWrap');
            var $col = $('#collectionState');

            // The collection is derived from the anime slug, so all the form
            // has to do is say whether it exists yet and offer to create it.
            function renderCollection(animId, data) {
                if (data.exists) {
                    $col.html('<div class="alert alert-success mb-0">' +
                        'Kolleksiya var: <b>' + data.name + '</b> (' + (data.videoCount || 0) +
                        ' video). Video avtomatik ora əlavə olunacaq.</div>');
                    return;
                }
                $col.html('<div class="alert alert-warning mb-0">' +
                    'Bu anime üçün kolleksiya yoxdur (<b>' + data.name + '</b>). ' +
                    '<button type="button" id="createCollectionBtn" class="btn btn-primary btn-sm ml-2" ' +
                    'data-anim="' + animId + '">Kolleksiya yarat</button>' +
                    '<div class="mt-1 text-muted">Yükləsəniz avtomatik də yaradılacaq.</div></div>');
            }

            function loadCollection(animId) {
                if (!animId) {
                    $colWrap.hide();
                    $col.html('');
                    return;
                }
                $colWrap.show();
                $col.html('<div class="text-muted">Kolleksiya yoxlanılır...</div>');
                $.ajax({url: collectionByAnimUrl + '/' + animId})
                    .done(function (data) { renderCollection(animId, data); })
                    .fail(function (xhr) {
                        $col.html('<div class="alert alert-danger mb-0">' +
                            ajaxMessage(xhr, 'Kolleksiya məlumatı alınmadı.') + '</div>');
                    });
            }

            $col.on('click', '#createCollectionBtn', function () {
                var $btn = $(this);
                var animId = $btn.data('anim');
                $btn.prop('disabled', true).text('Yaradılır...');
                post("{{route('createBunnyCollectionForAnimApi')}}", {anim_id: animId})
                    .done(function (data) { renderCollection(animId, data); })
                    .fail(function (xhr) {
                        $btn.prop('disabled', false).text('Kolleksiya yarat');
                        $col.append('<div class="alert alert-danger mt-2 mb-0">' +
                            ajaxMessage(xhr, 'Kolleksiya yaradıla bilmədi.') + '</div>');
                    });
            });

            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ə bağlama —</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());
                loadCollection($(this).val());
            });

            var $form = $('#bunnyVideoForm');
            var $wrap = $('#videoProgressWrap');
            var $bar = $('#videoProgressBar');
            var $status = $('#videoStatus');
            var $submit = $('#videoSubmit');

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

            var csrf = $('meta[name="csrf-token"]').attr('content') || $form.find('input[name="_token"]').val();

            function post(url, data) {
                return $.ajax({
                    url: url,
                    method: 'POST',
                    data: data,
                    headers: {'X-CSRF-TOKEN': csrf, 'Accept': 'application/json'}
                });
            }

            function fail(msg) {
                $submit.prop('disabled', false);
                setBar(100, 'bg-danger', 'Xəta');
                $status.html('<div class="alert alert-danger">' + msg + '</div>');
            }

            function ajaxMessage(xhr, fallback) {
                var res = xhr.responseJSON || {};
                return res.message ||
                    (res.errors ? Object.keys(res.errors).map(function (k) {
                        return res.errors[k].join(', ');
                    }).join(', ') : fallback);
            }

            function humanSize(bytes) {
                var units = ['B', 'KB', 'MB', 'GB'], i = 0;
                while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; }
                return bytes.toFixed(1) + ' ' + units[i];
            }

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

                var file = $('#videoFile')[0].files[0];
                if (!file) {
                    $status.html('<div class="alert alert-danger">Video faylı seçin.</div>');
                    return;
                }

                if (!window.tus || !tus.isSupported) {
                    $status.html('<div class="alert alert-danger">Bu brauzer birbaşa yükləməni dəstəkləmir.</div>');
                    return;
                }

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

                // 1) Ask our server for a video guid + signed TUS credentials.
                //    It resolves (or creates) the collection from the anime slug.
                post("{{route('createBunnyVideoApi')}}", {
                    title: $('#videoTitle').val(),
                    anim_id: $anim.val()
                }).done(function (cfg) {
                    // 2) Push the bytes straight to Bunny — never through PHP.
                    var upload = new tus.Upload(file, {
                        endpoint: cfg.endpoint,
                        retryDelays: [0, 3000, 5000, 10000, 20000],
                        headers: {
                            AuthorizationSignature: cfg.signature,
                            AuthorizationExpire: cfg.expire,
                            VideoId: cfg.guid,
                            LibraryId: cfg.libraryId
                        },
                        metadata: {
                            filetype: file.type || 'video/mp4',
                            title: $('#videoTitle').val(),
                            collection: cfg.collectionId
                        },
                        onProgress: function (sent, total) {
                            var pct = Math.round(sent / total * 100);
                            setBar(pct, 'progress-bar-striped progress-bar-animated bg-primary',
                                pct + '% (' + humanSize(sent) + ' / ' + humanSize(total) + ')');
                        },
                        onError: function (error) {
                            // Don't leave an empty placeholder video in the library.
                            post("{{route('cancelBunnyVideoApi')}}", {guid: cfg.guid});
                            fail('Yükləmə uğursuz oldu: ' + error);
                        },
                        onSuccess: function () {
                            setBar(100, 'progress-bar-striped progress-bar-animated bg-warning', 'Yekunlaşdırılır...');

                            // 3) Tell our server it landed, so it can link the episode.
                            post("{{route('finishBunnyVideoApi')}}", {
                                guid: cfg.guid,
                                ep_id: $ep.val(),
                                s_type: $('select[name="s_type"]').val()
                            }).done(function (res) {
                                $submit.prop('disabled', false);
                                setBar(100, 'bg-success', 'Tamamlandı');
                                var links = '';
                                if (res.embed) {
                                    links += '<div class="mt-2"><b>Embed:</b> <a href="' + res.embed +
                                        '" target="_blank">' + res.embed + '</a></div>';
                                }
                                if (res.hls) {
                                    links += '<div><b>HLS:</b> <code>' + res.hls + '</code></div>';
                                }
                                $status.html('<div class="alert alert-success">' +
                                    (res.message || 'Video yükləndi.') + links +
                                    '<div class="mt-2 text-muted">Transkod bir neçə dəqiqə çəkə bilər.</div></div>');
                                $form[0].reset();
                                $colWrap.hide();
                                $col.html('');
                                $ep.html('<option value="">— Əvvəlcə anime seçin —</option>');
                                if ($anim.hasClass('select2-hidden-accessible')) { $anim.val('').trigger('change.select2'); }
                            }).fail(function (xhr) {
                                fail(ajaxMessage(xhr, 'Video yükləndi, amma bölümə bağlanmadı.'));
                            });
                        }
                    });

                    upload.start();
                }).fail(function (xhr) {
                    fail(ajaxMessage(xhr, 'Video yaradıla bilmədi.'));
                });
            });
        });
    </script>
@endsection