@extends('layouts.nova')

@section('content')

{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Skinbase</p>
            <h1 class="text-3xl font-bold text-white leading-tight">Daily Uploads</h1>
            <p class="mt-1 text-sm text-white/50">Browse all artworks uploaded on a specific date.</p>
        </div>
        <a href="{{ route('uploads.latest') }}"
           class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            Latest Uploads
        </a>
    </div>
</div>

{{-- ── Date strip ── --}}
<div class="px-6 md:px-10 pb-5">
    <div class="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none" id="dateStrip">
        @foreach($dates as $i => $d)
            <button type="button"
                    data-iso="{{ $d['iso'] }}"
                    id="tab-{{ $i+1 }}"
                    class="flex-shrink-0 rounded-lg px-3.5 py-1.5 text-xs font-medium border transition-colors
                           {{ $i === 0
                               ? 'bg-sky-500/15 text-sky-300 border-sky-500/30 active-date-tab'
                               : 'border-white/[0.08] bg-white/[0.03] text-white/50 hover:text-white hover:bg-white/[0.07]' }}">
                @if ($i === 0)
                    Today
                @elseif ($i === 1)
                    Yesterday
                @else
                    {{ \Carbon\Carbon::parse($d['iso'])->format('M j') }}
                @endif
            </button>
        @endforeach
    </div>
</div>

{{-- ── Active date label ── --}}
<div class="px-6 md:px-10 mb-4">
    <p id="activeDateLabel" class="text-sm text-white/40">
        Showing uploads from <strong class="text-white/70">{{ $dates[0]['label'] ?? 'today' }}</strong>
    </p>
</div>

{{-- ── Grid container ── --}}
<div id="myContent" class="px-6 pb-16 md:px-10 min-h-48">
    @include('web.partials.daily-uploads-grid', ['arts' => $recent])
</div>

{{-- ── Loading overlay (hidden) ── --}}
<template id="loadingTpl">
    <div class="flex items-center justify-center py-20 text-white/30 text-sm gap-2">
        <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
        Loading artworks…
    </div>
</template>

@push('scripts')
<script>
(function () {
    var endpoint = '/uploads/daily';
    var strip = document.getElementById('dateStrip');
    var content = document.getElementById('myContent');
    var dateLabel = document.getElementById('activeDateLabel');
    var loadingTpl = document.getElementById('loadingTpl');

    function setActive(btn) {
        strip.querySelectorAll('button').forEach(function (b) {
            b.classList.remove('bg-sky-500/15', 'text-sky-300', 'border-sky-500/30', 'active-date-tab');
            b.classList.add('border-white/[0.08]', 'bg-white/[0.03]', 'text-white/50');
        });
        btn.classList.add('bg-sky-500/15', 'text-sky-300', 'border-sky-500/30', 'active-date-tab');
        btn.classList.remove('border-white/[0.08]', 'bg-white/[0.03]', 'text-white/50');
    }

    function loadDate(iso, label) {
        content.innerHTML = loadingTpl.innerHTML;
        dateLabel.innerHTML = 'Showing uploads from <strong class="text-white/70">' + label + '</strong>';

        fetch(endpoint + '?ajax=1&datum=' + encodeURIComponent(iso), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (r) { return r.text(); })
        .then(function (html) { content.innerHTML = html; })
        .catch(function () {
            content.innerHTML = '<p class="text-center text-white/30 py-16 text-sm">Failed to load artworks.</p>';
        });
    }

    strip.addEventListener('click', function (e) {
        var btn = e.target.closest('button[data-iso]');
        if (!btn || btn.classList.contains('active-date-tab')) return;
        setActive(btn);
        var label = btn.textContent.trim();
        loadDate(btn.getAttribute('data-iso'), label);
    });
})();
</script>
@endpush

@endsection