@extends('layouts.app')

@section('content')
<div class="w-full max-w-7xl mx-auto px-4">

    <!-- ===================== -->
    <!-- HEADER -->
    <!-- ===================== -->
    <div class="mt-2 mb-4">
        <h1 class="text-3xl font-bold text-gray-800 mb-1">Dashboard</h1>
        <p class="text-gray-500">
            Welcome back, {{ $user->name ?? 'Koperasi Anda' }} 👋
        </p>
    </div>

    <!-- ===================== -->
    <!-- MAKLUMAT KOPERASI -->
    <!-- ===================== -->
    <div class="bg-white border border-gray-200 shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-5">Maklumat Koperasi</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div>
                <p class="text-sm text-gray-500">Nama Koperasi</p>
                <p class="mt-1 font-medium">{{ $user->name }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">No. Pendaftaran SKM</p>
                <p class="mt-1 font-medium">{{ $user->skm_number }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Tarikh Daftar</p>
                <p class="mt-1 font-medium">
                    {{ $koperasi->tarikh_daftar->format('d M Y') }}
                </p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Tahun Kewangan</p>
                <p class="mt-1 font-medium">{{ $koperasi->tarikh_tutup_tahun_sebelum->format('d M') }} {{ $koperasi->tahun_kewangan }}</p>
            </div>

            <div class="sm:col-span-2">
                <p class="text-sm text-gray-500">Alamat Berdaftar</p>
                <p class="mt-1 font-medium">{{ $koperasi->alamat_berdaftar }}</p>
            </div>

            <div class="sm:col-span-2">
                <p class="text-sm text-gray-500">Alamat Surat Menyurat</p>
                <p class="mt-1 font-medium">{{ $koperasi->alamat_line_1}}, {{ $koperasi->alamat_line_2}}, {{ $koperasi->poskod}}, {{ $koperasi->bandar}}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Negeri</p>
                <p class="mt-1 font-medium">{{ $koperasi->negeri }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Daerah / Cawangan</p>
                <p class="mt-1 font-medium">{{ $koperasi->district ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">No. Telefon</p>
                <p class="mt-1 font-medium">{{ $user->phone ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Emel Koperasi</p>
                <p class="mt-1 font-medium">{{ $user->email ?? '-' }}</p>
            </div>
        </div>

        <div class="mt-6">
            <a href="{{ route('profile.edit') }}"
               class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                Kemaskini Maklumat →
            </a>
        </div>
    </div>

    <!-- ===================== -->
    <!-- MAKLUMAT PENGURUSAN -->
    <!-- ===================== -->
    <div class="bg-white border border-gray-200 shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-5">Maklumat Pengurusan</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div>
                <p class="text-sm text-gray-500">Fungsi Koperasi</p>
                <p class="mt-1 font-medium">{{ $koperasi->fungsi_koperasi ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Minima Syer (RM)</p>
                <p class="mt-1 font-medium">{{ $koperasi->min_syer}}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Aktiviti Koperasi</p>
                <p class="mt-1 font-medium">{{ $koperasi->aktiviti_koperasi ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Fi Kemasukan (RM)</p>
                <p class="mt-1 font-medium">{{ $koperasi->fi_kemasukan}}</p>
            </div>

            <div>
                <p class="text-sm text-gray-500">Kawasan Operasi</p>
                <p class="mt-1 font-medium">{{ $koperasi->kawasan_operasi ?? '-' }}</p>
            </div>
        </div>
    </div>

    <!-- ===================== -->
    <!-- ALK & JAD SUMMARY -->
    <!-- ===================== -->
    <div class="bg-white border border-gray-200 shadow-lg rounded-xl p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-5">Struktur Pengurusan</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
                <p class="text-sm text-indigo-600 font-semibold">Bilangan Anggota Lembaga Koperasi (ALK)</p>
                <p class="text-3xl font-bold text-indigo-700 mt-2">{{ $bilAlk }}/{{ $koperasi->min_bilangan_alk}}</p>
            </div>

            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                <p class="text-sm text-green-600 font-semibold">Bilangan Anggota Koperasi (Aktif)</p>
                <p class="text-3xl font-bold text-green-700 mt-2">{{ $bilJad }}</p>
            </div>
        </div>
    </div>


    <!-- ====================================================== --> 
    <!-- 🔵 HORIZONTAL TIMELINE (OLD BAR — FULLY WORKING) --> 
    <!-- ====================================================== --> 

    <div class="bg-white border border-gray-200 shadow rounded-xl p-5 md:p-6 mb-6">

        <style>
            .dot-hover {
                transition: transform .2s ease, box-shadow .25s ease;
            }
            .dot-hover:hover {
                transform: scale(1.15);
                box-shadow: 0 0 10px rgba(0,0,0,.25);
            }
            .tooltip {
                opacity: 0;
                transform: translateY(-6px);
                transition: opacity .2s ease, transform .2s ease;
                pointer-events: none;
            }
            .group:hover .tooltip {
                opacity: 1;
                transform: translateY(-12px);
            }
        </style>

        <!-- Header -->
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-lg font-semibold text-gray-700">
                Garis Masa Compliant
            </h2>
        </div>

        <!-- Dates -->
        <div class="flex justify-between text-xs text-gray-500 mb-3">
            <span>Start: {{ \Carbon\Carbon::parse($koperasi->tarikh_mula)->format('d M Y') }}</span>
            <span>End: {{ \Carbon\Carbon::parse($koperasi->tarikh_tutup)->format('d M Y') }}</span>
        </div>

        <!-- Timeline -->
        <div class=" relative left-0 right-6 h-10">

            <!-- Base line -->
            <div class="absolute top-1/2 w-full h-0.5 bg-gray-300 rounded-full"></div>

            <!-- Expected Progress -->
            <div class="group absolute top-1/2 -translate-y-1/2"
                style="left: calc({{ $expectedPercent }}% - 8px);">

                <div class="tooltip absolute bg-yellow-500 text-white text-xs py-1 px-2 rounded shadow"
                    style="top:-30px; left:-60px; width:140px; text-align:center;">
                    Expected {{ $expectedPercent }}%
                </div>

                <div class="h-4 w-4 bg-yellow-400 border-2 border-white rounded-full shadow dot-hover"></div>
            </div>

            <!-- Month dots -->
            @foreach($dynamicMonths as $i => $month)
                @php
                    $position = ($i / 11) * 100;
                    $docs = $monthlyMilestones[$month] ?? [];
                @endphp

                <div class="group absolute top-1/2 -translate-y-1/2"
                    style="left: calc({{ $position }}% - 6px);">

                    <div class="tooltip absolute bg-gray-900 text-white text-xs py-2 px-3 rounded shadow"
                        style="top:-60px; left:-70px; width:160px; text-align:center;">
                        <strong>{{ $month }}</strong><br>
                        <span class="text-[11px]">
                            {{ count($docs) ? implode(', ', array_column($docs, 'name')) : 'No documents' }}
                        </span>
                    </div>

                    <div class="h-3 w-3 bg-gray-400 rounded-full dot-hover"></div>
                </div>
            @endforeach
        </div>

        <!-- Month labels -->
        <div class="flex justify-between text-[11px] text-gray-500 mt-3">
            @foreach($dynamicMonths as $m)
                <span>{{ substr($m, 0, 3) }}</span>
            @endforeach
        </div>

        <!-- Next milestone -->
        @if($nextMilestone)
            <div class="mt-4 bg-indigo-50 border border-indigo-200 p-4 rounded-lg">
                <h3 class="text-indigo-700 font-semibold text-sm">
                    Next Milestone
                </h3>
                <p class="text-sm text-gray-700">
                    <strong>{{ $nextMilestone['name'] }}</strong>
                    due on {{ $nextMilestone['due']->format('d M Y') }}
                </p>
                <p class="text-xs text-gray-500 mt-1">
                    {{ ceil(now()->diffInDays($nextMilestone['due'], false)) }} days remaining
                </p>
            </div>
        @endif
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('toggleIncomplete')
            .addEventListener('click', () => {
                document.getElementById('incompleteList').classList.toggle('hidden');
            });
    });
    </script>

    <!-- ====================================================== -->
    <!-- 🟣 VERTICAL SKM COMPLIANCE TIMELINE (NEW)               -->
    <!-- ====================================================== -->
    {{-- ACTIVE / OVERDUE TIMELINE --}}
    <div class="bg-white border border-gray-200 shadow rounded-xl p-5 md:p-6 mb-6">

        <h2 class="text-xl font-semibold text-gray-700 mb-4">
            Senarai Borang
        </h2>

        {{-- Overdue --}}
        @if($overdueMilestones->count())
        <div class="mt-6 bg-red-50 border border-red-200 rounded-xl p-6">

            <h2 class="text-lg font-semibold text-red-700 mb-4">
                Borang Lewat
            </h2>

            <div class="relative border-l-2 border-red-200 pl-6 space-y-6">
                @foreach($overdueMilestones as $m)
                    <div class="relative">

                        <span class="absolute -left-[33px] top-1/2 -translate-y-1/2
                                    h-4 w-4 rounded-full
                                    @if($m['status'] === 'completed') bg-emerald-500
                                    @elseif($m['status'] === 'overdue') bg-red-500
                                    @elseif($m['status'] === 'locked') bg-gray-400
                                    @else bg-indigo-500 @endif">
                        </span>

                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            @include('partials.milestone-content', ['m' => $m])
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Upcoming --}}
        <div class="mt-6 bg-indigo-50 border border-indigo-200 rounded-xl p-6">

            <h2 class="text-lg font-semibold text-indigo-700 mb-4">
                Borang Akan Datang
            </h2>

            <div class="relative border-l-2 border-indigo-200 pl-6 space-y-6">
                @foreach($activeMilestones as $m)
                    <div class="relative">

                        <span class="absolute -left-[33px] top-1/2 -translate-y-1/2
                                    h-4 w-4 rounded-full
                                    @if($m['status'] === 'completed') bg-emerald-500
                                    @elseif($m['status'] === 'overdue') bg-red-500
                                    @elseif($m['status'] === 'locked') bg-gray-400
                                    @else bg-indigo-500 @endif">
                        </span>

                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            @include('partials.milestone-content', ['m' => $m])
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- COMPLETED TIMELINE --}}
        @if($completedMilestones->count())
        <div class="mt-6 bg-emerald-50 border border-emerald-200 rounded-xl p-6">

            <h2 class="text-lg font-semibold text-emerald-700 mb-4">
                Borang Telah Selesai
            </h2>

            <div class="relative border-l-2 border-emerald-200 pl-6 space-y-6">

                @foreach($completedMilestones as $m)
                    <div class="relative">

                        <span class="absolute -left-[33px] top-1/2 -translate-y-1/2
                                    h-4 w-4 rounded-full bg-emerald-500">
                        </span>

                        <div class="bg-white border border-emerald-200 rounded-lg p-4">
                            @include('partials.milestone-content', ['m' => $m])
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
        @endif

        @if($tiadaMilestones->count())
        <div class="mt-6 bg-gray-50 border border-gray-200 rounded-xl p-6">

            <h2 class="text-lg font-semibold text-gray-700 mb-4">
                Borang Tiada Keperluan
            </h2>

            <div class="relative border-l-2 border-gray-200 pl-6 space-y-6">

                @foreach($tiadaMilestones as $m)
                    <div class="relative">

                        <span class="absolute -left-[33px] top-1/2 -translate-y-1/2
                                    h-4 w-4 rounded-full bg-gray-500">
                        </span>

                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            @include('partials.milestone-content', ['m' => $m])
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
        @endif
    </div>
    <div class="w-full md:max-w-4xl lg:max-w-7xl mx-auto mt-8">
    </div>
@endsection