@extends('layouts.legacy')

@section('content')
<div class="container-fluid legacy-page">
    <div class="effect2 page-header-wrap">
        <header class="page-heading">
            <h1 class="page-header">Daily Uploads</h1>
            <p>List of all latest uploaded Artworks - <strong>Skins</strong>, <strong>Photography</strong> and <strong>Wallpapers</strong> to Skinbase ordered by upload date.</p>
        </header>
    </div>

    <div class="panel panel-default uploads-panel effect2">
        <div class="panel-body">
            <b>Choose date:</b>
            <ul id="recentTab">
                @foreach($dates as $i => $d)
                    <li id="tab-{{ $i+1 }}" data-iso="{{ $d['iso'] }}">{{ $d['label'] }}</li>
                @endforeach
            </ul>

            <div id="myContent">
                @include('web.partials.daily-uploads-grid', ['arts' => $recent])
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    (function(){
        function loadDate(iso, tabId){
            var el = document.getElementById('myContent');
            fetch('/daily-uploads?ajax=1&datum=' + encodeURIComponent(iso))
                .then(function(r){ return r.text(); })
                .then(function(html){ el.innerHTML = html; });
        }

        document.getElementById('recentTab').addEventListener('click', function(e){
            var li = e.target.closest('li');
            if (!li) return;
            var iso = li.getAttribute('data-iso');
            loadDate(iso, li.id);
        });
    })();
</script>
@endpush

@endsection