@extends('backend.app')
@section("content")
    <div class="content-header row">
        <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
            <h3 class="content-header-title mb-0 d-block">Youtube Video Botu</h3>
            <div class="row breadcrumbs-top d-inline-block">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('panel')}}">Anasayfa</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{url('panel/videolar')}}">Videolar</a>
                        </li>
                        <li class="breadcrumb-item active">Youtube Botu
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-header-right col-md-6 col-12">
            <div class="float-md-right">
                <a href="{{url('panel/videolar')}}" class="btn btn-dark round btn-glow px-2">Geri Dön</a>
            </div>
        </div>
    </div>
    <div class="content-body">

        <!-- Kategoriler  -->
        <div class="row">
            <div id="recent-sales" class="col-12 col-md-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <form class="form form-horizontal">
                                <div class="form-body">
                                    <fieldset class="form-group position-relative mb-0">
                                        <input style="background-color: #f8f8f8" type="text" class="form-control form-control-xl input-xl" autocomplete="off"
                                               placeholder="Youtube üzerinden aranılacak kelimeyi yazıp enter tuşuna basınız." id="videoSearch">
                                        <div class="form-control-position">
                                            <i class="ft-search font-medium-4"></i>
                                        </div>
                                    </fieldset>
                                    <div id="search-results" class="card-body"></div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Kategoriler  -->
    </div>
@endsection

@push("customJs")
    <script>
        $(document).on('keypress',function(e) {
            if(e.which == 13) {
                let videoSearch = $('#videoSearch').val();
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    type: 'POST',
                    url: "/panel/videolar/youtube/search",
                    data: {value:videoSearch},
                    success: function (data){
                        addDoom(data.items);
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });

                return false;

            }
        });
        function addDoom(data) {
            let searchResults = $('#search-results');
            let container     = '';

            $.each(data, function (index, video) {
                var kategorilerContainer = '';
                var butonDurum = '';

                if (video.kategoriler != 'false') {
                    $.each(video.kategoriler, function (i, kategori) {
                        kategorilerContainer += '<option value="' + kategori.id + '">' + kategori.baslik + '</option>';
                    });
                }

                if (video.durum == 0) {
                    butonDurum = '<div class="col-md-3" id="button_container_' + video.videoid + '" >' +
                                    '<input type="hidden" id="row_status_' + video.videoid + '" value="1"/>' +
                                    '<a href="javascript:;" class="btn btn-' + video.type + '" onclick="videoSavedYoutube(\'' + video.videoid + '\')"> Kaydet </a>' +
                                  '</div>';
                } else {
                    butonDurum = '<div class="col-md-3" id="button_container_' + video.videoid + '" >' +
                                    '<input type="hidden" id="row_status_' + video.videoid + '" value="1"/>' +
                                    '<a href="javascript:;" class="btn btn-' + video.type + '" disabled> Kaydedildi </a>' +
                                   '</div>';
                }

                container += '<div class="row">' +
                    '             <div class="col-md-12">' +
                    '                 <ul class="media-list p-0">' +
                    '                     <li class="row mb-1 border-bottom pb-1">' +
                    '                         <div class="col-md-3 col-sm-12">' +
                    '                             <iframe class="border-0" width="100%" height="100%" src="https://www.youtube.com/embed/'+ video.videoid +'"></iframe>' +
                    '                         </div>' +
                    '                         <div class="col-md-9 col-sm-12">' +
                    '                             <form id="form_saved_' + video.videoid + '" enctype="multipart/form-data" accept-charset="utf-8">' +
                    '                                 <div class="form-group mb-1">' +
                    '                                     <input name="video-baslik" class="form-control" type="text" value="'+video.baslik+'">' +
                    '                                 </div>' +
                    '                                 <div class="form-group mb-1">' +
                    '                                     <textarea class="form-control" name="video-desc" cols="30" rows="3">'+ video.aciklama +'</textarea>' +
                    '                                 </div>' +
                    '                                 <div class="form-group row mb-1">' +
                    '                                     <div class="col-md-5">' +
                    '                                         <select class="form-control" name="video-kategori">'
                                                                + kategorilerContainer +
                    '                                         </select>' +
                    '                                     </div>' + butonDurum +
                    '                                 </div>' +
                    '                                 <input type="hidden" name="image" value="'+ video.resim +'">' +
                    '                                 <input type="hidden" name="id" value="' + video.videoid + '">' +
                    '                                 <input type="hidden" name="video-iframe" value="'+ video.videoid +'">' +
                    '                             </form>' +
                    '                         </div>' +
                    '                     </li>' +
                    '                 </ul>' +
                    '             </div>' +
                    '         </div>';

            });

            searchResults.empty().append(container);
        }
        function videoSavedYoutube(video_id) {
            var form = $('#form_saved_' + video_id).serializeArray(),
                form_data = {};
                $.each(form, function (formindex, formitem) {
                    form_data[formitem.name] = formitem.value;
                });

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    type: 'POST',
                    url: "/panel/videolar/youtube/save",
                    data: {form: form_data},
                    success: function (data) {
                        if (data == 1) {
                            $('#button_container_' + video_id).empty().append('<a href="javascript:;" class="btn btn-success"> Kaydedildi </a>');
                        }
                    }
                });
            }
    </script>
@endpush

@push("customCss")

@endpush