@section('title', __('site.page_featured_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <link href="/assets/css/thumb.css" media="screen" rel="stylesheet" type="text/css">
@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_featured_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_4') }}</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 mb-2 border-bottom border-1 action-thumbnail ">
                        <div class="d-md-flex">
                            <div class="flex-grow-1 mb-2">
                                <a href="{{ route('site.featured.c') }}" class="btn btn-primary">
                                    <i class="fa fa-plus me-1 opacity-50"></i> {{ __('site.action_add') }}
                                </a>
                            </div>
                            <div class="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>
                    </div>

                    @if($allFeatured->count() == 0)
                        <div class="py-6 text-center"> <i class="fa fa-info-circle fa-3x d-block mb-2"></i> <strong class="fw-semibold">{{ __('site.page_featured_norec') }}</strong></div>
                    @else
                        <div class="ps-2 pe-2 pb-2 pt-2 thumb-list">
                            <div class="row ui-sortable">
                                @php
                                    $arrName = array('description','name', 'name', 'title');

                                    foreach($allFeatured as $featured){
                                        $entryType = array('id','entry', 'entry', 'entry'); $entry = $entryType[$featured->type];
                                        $nameTitle = $arrName[$featured->type];
                                        $db = ($featured->type == '1' ? 'events' : ($featured->type == '2' ? 'promotions' : ($featured->type == '3' ? 'posts' : 'featured')));

                                        $dataFeatured = DB::connection('mysql_site_' . session('serverID'))->table($db)->where('site_id', '=', session('siteID'))
                                        ->where('id','=',$featured->$entry)->get()->first();
                                        $img = ($featured->type == '1' ? 'https://'.$serverData->name.'/contents/'.session('siteID').'/event/'.$dataFeatured->img :
                                        ($featured->type == '2' ?'https://'.$serverData->name.'/contents/'.session('siteID').'/promo/'.$dataFeatured->img :
                                        ($featured->type == '3' && isset($dataFeatured->feature_img) ? 'https://'.$serverData->name.'/contents/'.session('siteID').'/posts/'.$dataFeatured->feature_img :
                                        ($featured->type == '0' && isset($dataFeatured->img) ? 'https://'.$serverData->name.'/contents/'.session('siteID').'/featured/'.$dataFeatured->img : '/assets/img/no-image.png'))));
                                @endphp
                                <div class="col-custom-4 ui-sortable-handle">
                                    <div id="{{ $featured->id }}" class="thumbnail">
                                        <div style="position: absolute; top: 15px; left: 10px; z-index: 40;">
                                            <span class="label" style="background-color: #fff; padding: .2em .4em .2em; border-radius:5px; opacity: 0.9; border: 1px solid #ddd; color: #000; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.4);">{{ ($featured->type == '1' ? __('site.page_featured_type_2') : ($featured->type == '2' ? __('site.page_featured_type_3') : ($featured->type == '3' ? __('site.page_featured_type_4') : __('site.page_featured_type_1')))) }}</span>
                                        </div>
                                        <div class="btn-group open">
                                                <button type="button" class="btn remove btn-alt-secondary" id="{{ $featured->id }}">
                                                    <i class="fa fa-times text-danger"></i>
                                                </button>
                                        </div>
                                        <div class="ratio-box ratio-16-9">
                                            <div class="ratio-content" style="background-image: url('{{ ($img ? $img : '/assets/img/no-image.png') }}'); 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>{{ (isset($dataFeatured->$nameTitle) ? $dataFeatured->$nameTitle : '---') }}</h4></div>
                                </div>
                            </div>
                                @php } @endphp
                        </div>
                            {{ $allFeatured->links('vendor.pagination.default') }}
                    @endif
                </div>
            </div>

        </div>
    </div>

</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    $(".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','featured') }}', { 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();
    });

    $('.btn-group .remove').on('click', function() {
        var id = $(this).attr('id');
        Sweetalert2.fire({
            title: '{{ __('site.page_featured_alert_title') }}',
            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.featured.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_featured_alert_title_2') }}' : '{{ __('site.page_featured_alert_title_2_2') }}'+' '+total+' {{__('site.page_featured_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.featured.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');
        }
    }
</script>
</body>
</html>