@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="space-y-4 pb-8">

    {{-- ── Welcome Section ── --}}
    <div class="relative overflow-hidden rounded-xl bg-white border border-gray-100 shadow-sm px-4 py-3 sm:px-6 sm:py-4">
        <div class="absolute inset-0 pointer-events-none overflow-hidden">
            <div class="absolute -right-6 -top-6 w-36 h-36 bg-gradient-to-br from-green-400/10 to-emerald-500/10 rounded-full blur-2xl"></div>
            <div class="absolute -left-4 -bottom-4 w-28 h-28 bg-gradient-to-tr from-teal-400/8 to-green-400/8 rounded-full blur-xl"></div>
            <div class="absolute inset-0 opacity-[0.025]"
                style="background-image:radial-gradient(circle,#16a34a 1px,transparent 1px);background-size:22px 22px;"></div>
        </div>

        <div class="relative flex items-center justify-between gap-3">
            <div class="flex items-center gap-3">
                <div class="relative flex-shrink-0">
                    <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-lg shadow-green-500/25">
                        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    </div>
                    <span class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 sm:w-3 sm:h-3 bg-emerald-500 border-2 border-white rounded-full"></span>
                </div>
                <div>
                    <h1 class="text-sm sm:text-base font-bold text-gray-900 tracking-tight mb-0.5">Sistem Manajemen HR</h1>
                    <p class="text-xs text-gray-500">PT Putra Taro Paloma</p>
                </div>
            </div>

            {{-- Date & User: tampil di semua ukuran layar tapi compact di mobile --}}
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="text-right">
                    <p class="text-xs font-medium text-gray-700 hidden sm:block" id="dashDate">—</p>
                    <p class="text-xs text-gray-400">
                        <span class="hidden sm:inline">Selamat datang, </span>
                        <span class="font-semibold text-gray-600">{{ auth()->user()->username }}</span>
                    </p>
                </div>
                <div class="w-8 h-8 sm:w-9 sm:h-9 rounded-lg bg-gray-50 border border-gray-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
            </div>
        </div>

        {{-- Tanggal mobile: tampil di bawah pada layar kecil --}}
        <p class="relative text-xs text-gray-500 mt-2 sm:hidden" id="dashDateMobile">—</p>
    </div>

    {{-- ── Slider Section ── --}}
    {{-- Tinggi responsif: lebih pendek di mobile --}}
    <div id="sliderSection" class="relative h-52 sm:h-72 md:h-96 rounded-xl overflow-hidden shadow-2xl group">

        <div id="sliderLoading" class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10">
            <div class="text-center">
                <div class="relative w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-3">
                    <div class="absolute inset-0 border-4 border-green-200 rounded-full"></div>
                    <div class="absolute inset-0 border-4 border-green-600 rounded-full border-t-transparent animate-spin"></div>
                </div>
                <p class="text-gray-600 font-medium text-xs sm:text-sm">Memuat dashboard...</p>
            </div>
        </div>

        <div id="slidesContainer" class="relative h-full hidden"></div>

        {{-- Navigasi: lebih kecil di mobile --}}
        <button onclick="prevSlide()" class="absolute left-3 sm:left-6 top-1/2 -translate-y-1/2 w-8 h-8 sm:w-12 sm:h-12 flex items-center justify-center bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100 hover:scale-110 shadow-xl z-20">
            <svg class="w-4 h-4 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        </button>
        <button onclick="nextSlide()" class="absolute right-3 sm:right-6 top-1/2 -translate-y-1/2 w-8 h-8 sm:w-12 sm:h-12 flex items-center justify-center bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100 hover:scale-110 shadow-xl z-20">
            <svg class="w-4 h-4 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
        </button>

        <div id="sliderDots" class="absolute bottom-3 sm:bottom-6 left-1/2 -translate-x-1/2 flex gap-1.5 sm:gap-2 z-20"></div>
    </div>

</div>

@push('scripts')
<script>
const dashDate     = document.getElementById('dashDate');
const dashDateMob  = document.getElementById('dashDateMobile');
const dateStr      = new Date().toLocaleDateString('id-ID', {
    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
});
if (dashDate)    dashDate.textContent    = dateStr;
if (dashDateMob) dashDateMob.textContent = dateStr;

const defaultSlides = [
    { id: 'g1', title: 'Sistem Manajemen HR Modern',     description: 'Kelola administrasi surat dengan mudah dan efisien',  type: 'gradient', gradient: 'from-green-600 via-emerald-600 to-teal-600' },
    { id: 'g2', title: 'PT Putra Taro Paloma',           description: 'Solusi digital untuk pengelolaan dokumen perusahaan', type: 'gradient', gradient: 'from-blue-600 via-indigo-600 to-purple-600' },
    { id: 'g3', title: 'Efisiensi & Produktivitas',      description: 'Automatisasi penomoran surat untuk semua divisi',     type: 'gradient', gradient: 'from-orange-600 via-red-600 to-pink-600' },
];

let slides = [], current = 0, autoTimer = null;
const dbSlides = @json($sliderData);

function loadSlides() {
    slides = dbSlides.length > 0 ? dbSlides : defaultSlides;
    renderSlider();
}

function renderSlider() {
    const container = document.getElementById('slidesContainer');
    const dotsEl    = document.getElementById('sliderDots');
    const loading   = document.getElementById('sliderLoading');

    loading.classList.add('hidden');
    container.classList.remove('hidden');
    container.innerHTML = '';
    dotsEl.innerHTML    = '';

    slides.forEach((slide, i) => {
        const div = document.createElement('div');
        div.className = `absolute inset-0 transition-opacity duration-1000 ${i === 0 ? 'opacity-100' : 'opacity-0'}`;
        div.dataset.slideIndex = i;

        const textBlock = `
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent">
                <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-8">
                    <h2 class="text-lg sm:text-3xl md:text-4xl font-bold mb-1 sm:mb-3 text-white drop-shadow-2xl">${slide.title}</h2>
                    <p class="text-xs sm:text-base md:text-lg text-gray-100 drop-shadow-lg">${slide.description || ''}</p>
                </div>
            </div>`;

        if (slide.type === 'image') {
            div.innerHTML = `
                <img src="${slide.image}" alt="${slide.title}" class="w-full h-full object-cover"
                    onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                <div class="w-full h-full bg-gradient-to-br from-gray-600 to-gray-800 hidden"></div>
                ${textBlock}`;
        } else {
            div.innerHTML = `
                <div class="w-full h-full bg-gradient-to-br ${slide.gradient}">
                    <div class="absolute top-10 right-10 w-64 h-64 bg-white/5 rounded-full blur-3xl animate-pulse"></div>
                    <div class="absolute bottom-10 left-10 w-96 h-96 bg-white/5 rounded-full blur-3xl animate-pulse" style="animation-delay:1s"></div>
                    <div class="absolute inset-0 opacity-10" style="background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:50px 50px"></div>
                </div>
                ${textBlock}`;
        }
        container.appendChild(div);

        const dot = document.createElement('button');
        dot.dataset.dotIndex = i;
        dot.className = `h-1 sm:h-1.5 rounded-full transition-all duration-300 ${i === 0 ? 'bg-white w-6 sm:w-10 shadow-lg' : 'bg-white/50 w-4 sm:w-6 hover:bg-white/70'}`;
        dot.onclick = () => goTo(i);
        dotsEl.appendChild(dot);
    });

    startAutoPlay();
}

function goTo(n) {
    const allSlides = document.querySelectorAll('[data-slide-index]');
    const allDots   = document.querySelectorAll('[data-dot-index]');
    allSlides[current]?.classList.replace('opacity-100','opacity-0');
    if (allDots[current]) allDots[current].className = 'h-1 sm:h-1.5 rounded-full bg-white/50 w-4 sm:w-6 hover:bg-white/70 transition-all duration-300';
    current = (n + slides.length) % slides.length;
    allSlides[current]?.classList.replace('opacity-0','opacity-100');
    if (allDots[current]) allDots[current].className = 'h-1 sm:h-1.5 rounded-full bg-white w-6 sm:w-10 shadow-lg transition-all duration-300';
}

function nextSlide() { goTo(current + 1); }
function prevSlide() { goTo(current - 1); }

function startAutoPlay() {
    clearInterval(autoTimer);
    if (slides.length > 1) autoTimer = setInterval(() => goTo(current + 1), 5000);
}

// Swipe support untuk mobile
(function() {
    const el = document.getElementById('sliderSection');
    let startX = 0;
    el.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
    el.addEventListener('touchend',   e => {
        const diff = startX - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 50) diff > 0 ? nextSlide() : prevSlide();
    }, { passive: true });
})();

loadSlides();
</script>
@endpush
@endsection