@section('title', __('site.page_videos_title'))
@section('head')
    <link href="/assets/css/thumb.css" media="screen" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <script src="/assets/js/lib/jquery.min.js"></script>
    @if (\Session::has('success'))
        <script>
            $("html, body").animate({ scrollTop: 0 }, 200);
        </script>
    @endif
@endsection
@include('includes/header')
@include('includes/topSite')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('site.page_videos_h1') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_3') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.menu_item_3_sub_2') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    @if (\Session::has('success'))
        <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
            <b>{!! \Session::get('success') !!}</b>
        </div>
        @php Session::forget('success'); @endphp
    @endif

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

            <div class="block block-rounded">
                <div class="block-content p-0">

                    <div class="ps-2 pe-4 pt-2 @if(!$s) mb-2 border-bottom border-1 @endif action-thumbnail ">
                        <div class="d-md-flex">
                            <div class="flex-grow-1 mb-2">
                                <a href="{{ route('site.videos.c') }}" class="btn btn-primary">
                                    <i class="fa fa-plus me-1 opacity-50"></i> {{ __('site.action_add') }}
                                </a>
                            </div>
                            <div class="ms-md-2 p-0 pt-1">
                                <button type="button" class="btn btn-sm btn-alt-secondary clear-selected mb-2 d-none">
                                    {{ __('site.btn_deselect') }}</button>
                            <button type="button" class="btn btn-sm btn-danger remove-selected mb-2 disabled"><i class="fa fa-trash me-1 opacity-50"></i> {{ __('site.btn_remselect') }}</button>

                            </div>
                            <div class="p-0 mb-2">
                                <form action="" method="GET" onsubmit="searchL()">
                                    <div class="ms-md-2 input-group">
                                        <input type="text" class="form-control form-control-alt" id="s" name="s" placeholder="{{ __('site.page_videos_search') }}" autocomplete="off">
                                        <button type="submit" class="input-group-text bg-body border-0">
                                        <i class="fa fa-search"></i>
                                        </button>
                                    </div></form>
                            </div>
                        </div>
                    </div>

                    @if($s)
                        <div style="width: 100%; margin-bottom: 10px; border-radius: 3px; border: 1px solid #E2E4E9; clear: both; padding: 10px; background: #ecf0f5; color: #666;">{{ __('site.search_results') }} <span class="badge bg-primary">{{ $s }} <a href="{{ route('site.videos.r') }}" class="fa fa-remove" style="color: #FFF;"></a></span></div>
                    @endif

                    @if($allVideos->count() == 0)
                        <div class="py-6 text-center"> <i class="fa fa-{{ ($s ? 'triangle-exclamation' : 'info-circle') }} fa-3x d-block mb-2"></i> <strong class="fw-semibold">{{ __('site.page_videos_search_noreg') }}</strong></div>
                    @else

                    <div class="ps-2 pe-2 pb-2 pt-2 thumb-list">
                        <div class="row ui-sortable">
                        @foreach($allVideos as $video)
                            <div class="col-custom-4 ui-sortable-handle">
                                <div id="{{ $video->id }}" class="thumbnail">
                                    <div class="btn-group">
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-alt-secondary dropdown-toggle" id="dropdown-default-light" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-ellipsis"></i>
                                            </button>
                                            <div class="dropdown-menu fs-sm" aria-labelledby="dropdown-default-light" style="">
                                                <a class="dropdown-item" href="{{ route('site.videos.u',$video->id) }}"><i class="fa fa-edit me-1"></i> {{ __('site.action_edit') }}</a>
                                                <a class="dropdown-item remove" href="javascript:void(0)" id="{{ $video->id }}"><i class="fa fa-trash me-1"></i>
                                                    {{ __('site.btn_remove') }}</a>
                                                <form id="form_delete_{{ $video->id }}" action="{{ route('site.videos.d',$video->id) }}" method="POST"><input type="hidden" name="_method" value="DELETE"></form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ratio-box ratio-16-9">
                                        <div class="ratio-content" style="background-image: url({{ ($video->type == '1' ? 'https://i.ytimg.com/vi/'.$video->thumbnail.'/hqdefault.jpg' : ($video->type == '2' ? $video->thumbnail : '')) }}); background-size: 100%; background-position: center center; background-repeat: no-repeat;"></div></div>
                                    <div class="overlay"><i class="fa fa-refresh fa-spin"></i><i class="fa fa-check"></i></div><div class="caption single-line-caption"><h4>
                                    {{ $video->title }}</h4></div>
                                </div>
                            </div>

                         @endforeach

                    </div>

                        {{ $allVideos->links('vendor.pagination.default') }}

                        @endif
                </div>

            </div>

        </div>
    </div>

</div>

</div>

</main>


@include('includes/footer')

</div>

<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>

<script>
    function searchL(){
        var s = $('#s').val();
        event.preventDefault();
        if(s){
        location.href ="{{ route('site.posts.r.categories') }}/"+s;
        }else{
            $('#s').focus();
        }
    }
    $(".ui-sortable").sortable({
        stop: function(event, ui) {
            var data = "";
            var cont = 0;
            $('#'+ui.item[0].children[0].attributes.id.value).addClass('loading');
            $(".thumbnail").each(function(i, el){
                cont++;
                var p = $(el).attr("id");
                data += p+",";
            });

            $.post('{{ route('setPos','videos') }}', { o : data }).done(function( resp ) {
                $('#'+ui.item[0].children[0].attributes.id.value).removeClass('loading');
            });
        }

    });
    $( "#sortable" ).disableSelection();

    $('.thumb-list').on('click', '.thumbnail .ratio-box, .thumbnail .caption', function() {
        $(this).closest('.thumbnail').addClass('selected');
        mediaVerify();
        return false;
    });

    $('.thumb-list').on('click', '.thumbnail.selected .overlay', function() {
        if (!$(this).hasClass('loading')) {
            $(this).closest('.thumbnail').removeClass('selected');
            mediaVerify();
        }
        return false;
    });

    $('.action-thumbnail .clear-selected').on('click', function() {
        $('.thumb-list .thumbnail.selected').removeClass('selected');
        mediaVerify();
    });

    @if (\Session::has('success'))
    $("html, body").animate({scrollTop: 0}, 1);
    @endif

    $('.btn-group .remove').on('click', function() {
        var id = $(this).attr('id');
        Sweetalert2.fire({
            title: '{{ __('site.page_videos_alert_title_1') }}',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.action_confirm') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $('.thumb-list').addClass('block-mode-loading-oneui block-mode-loading');
                $.post("{{ route('site.videos.d') }}", { id: id }).done(function( data ) {
                    location.reload();
                    $('.thumb-list').removeClass('block-mode-loading-oneui block-mode-loading');
                });
            }
        });

    });

    $('.action-thumbnail .remove-selected').on('click', function() {
        var selectedItems = $('.thumb-list .thumbnail.selected');
        var selectedCount = selectedItems.length;
        if (selectedCount == 0) {
            return false;
        }
        var videos = [];

        $(".thumbnail.selected").each(function(i, el){
            videos.push($(el).attr("id"));
        });



        var total = $(".thumbnail.selected").length;
        var msg = (total == 1 ? '{{ __('site.page_videos_alert_title_2') }}' : '{{ __('site.page_videos_alert_title_2_2') }}'+' '+total+' {{__('site.page_videos_alert_title_2_2_2') }}');

        Sweetalert2.fire({
            title: msg,
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.action_confirm') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $('.thumb-list').addClass('block-mode-loading-oneui block-mode-loading');
                $.post("{{ route('site.videos.d.list') }}", { ids: videos }).done(function( data ) {
                    location.reload();
                });
            }
        });

    });




    function mediaVerify() {
        var selectedCount = $('.thumb-list .thumbnail.selected').length;

        if (selectedCount > 0) {
            $('.action-thumbnail .remove-selected').removeClass('disabled');
            $('.action-thumbnail .clear-selected').removeClass('d-none');
        } else {
            $('.action-thumbnail .remove-selected').addClass('disabled');
            $('.action-thumbnail .clear-selected').addClass('d-none');
        }
    }

    function searchL(){
        var s = $('#s').val();
        event.preventDefault();
        if(s){
            location.href ="{{ route('site.videos.r') }}/"+s;
        }else{
            $('#s').focus();
        }
    }


</script>
</body>
</html>