@extends('layouts.app')

@section('title', 'Projects List - SIPHLN')

@section('content')
<div class="space-y-6">

    <!-- Header Banner -->
    <div class="relative overflow-hidden rounded-xl shadow border border-teal-900 bg-gradient-to-r from-teal-900 via-teal-800 to-teal-700">
        <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
            <div class="absolute -top-10 -right-10 w-48 h-48 rounded-full bg-teal-500/20 blur-2xl"></div>
            <div class="absolute -bottom-12 -left-8 w-56 h-56 rounded-full bg-emerald-400/10 blur-2xl"></div>
        </div>
        <div class="relative px-6 py-6 md:px-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-widest text-teal-300">Master Data • PHLN Projects</p>
                    <h1 class="mt-1 text-2xl md:text-3xl font-bold text-white">LIST PROJECTS</h1>
                    <p class="mt-1 text-sm text-teal-100">Manage PHLN project portfolios, MoU values, and grant registration statuses.</p>
                </div>
                <div class="flex flex-wrap items-center gap-2.5">
                    @if(auth()->check() && auth()->user()->role === 'super_admin')
                        <a href="{{ route('projects.import.template') }}" title="Download Template" class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/25 text-white font-medium rounded-lg text-sm px-4 py-2.5 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                            Template
                        </a>

                        <form action="{{ route('projects.import') }}" method="POST" enctype="multipart/form-data" id="importForm" class="hidden">
                            @csrf
                            <input type="file" name="file" id="fileInput" accept=".csv" onchange="document.getElementById('importForm').submit();">
                        </form>
                        <button type="button" onclick="document.getElementById('fileInput').click();" class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/25 text-white font-medium rounded-lg text-sm px-4 py-2.5 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                            Import CSV
                        </button>

                        <a href="{{ route('projects.export.csv') }}" class="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-white font-medium rounded-lg text-sm px-4 py-2.5 transition shadow">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                            Export CSV
                        </a>
                    @endif

                    @if(auth()->check() && auth()->user()->role !== 'super_admin')
                        <a href="{{ route('projects.create') }}" class="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-teal-900 font-semibold rounded-lg text-sm px-4 py-2.5 transition shadow">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                            Add Project
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Alert Success -->
    @if(session('success'))
        <div class="bg-emerald-100 border border-emerald-400 text-emerald-800 px-4 py-3 rounded-xl shadow-sm flex items-center gap-3" role="alert">
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif

    <!-- Alert Error / Validasi Hapus -->
    @if(session('error'))
        <div class="bg-rose-100 border border-rose-400 text-rose-800 px-4 py-3 rounded-xl shadow-sm flex items-center gap-3" role="alert">
            <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <!-- Filter Bar -->
    <div class="bg-white rounded-xl shadow border border-gray-200 overflow-hidden">
        <div class="flex items-center justify-between gap-3 px-5 py-3.5 bg-teal-50/70 border-b border-teal-100">
            <div class="flex items-center gap-2.5">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-teal-700 text-white">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                </span>
                <div>
                    <h2 class="text-sm font-bold text-gray-800 uppercase tracking-wide">Filter & Search Projects</h2>
                    <p class="text-xs text-gray-500">Sesuaikan tampilan daftar project sesuai kebutuhan.</p>
                </div>
            </div>
        </div>

        <div class="p-5">
            <form method="GET" action="{{ route('projects.index') }}" class="flex flex-col xl:flex-row xl:items-end gap-4 xl:gap-5">
                @include('partials.year-filter', ['label' => 'Grant Registration Year', 'years' => $years, 'allLabel' => 'Semua Tahun'])

                @if(auth()->check() && auth()->user()->isSuperAdmin())
                    @include('partials.unit-filter')
                @endif

                <div class="flex flex-col gap-1.5 flex-1 min-w-[220px]">
                    <span class="inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-gray-500">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/></svg>
                        Search Project
                    </span>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/></svg>
                        </span>
                        <input
                            type="text"
                            name="search"
                            value="{{ $search ?? '' }}"
                            placeholder="Cari berdasarkan nama project..."
                            class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm text-gray-900 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition"
                        >
                    </div>
                </div>

                <div class="flex items-center gap-2 xl:ml-auto">
                    <button type="submit" class="inline-flex items-center gap-2 bg-teal-700 hover:bg-teal-800 text-white font-medium rounded-lg text-sm px-4 py-2.5 transition shadow">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/></svg>
                        Search
                    </button>
                    @if(!empty($search) || !empty($year) || !empty($selectedUnitId))
                        <a href="{{ route('projects.index') }}" class="inline-flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg text-sm px-4 py-2.5 transition">
                            Reset
                        </a>
                    @endif
                </div>
            </form>

            @if(!empty($search) || !empty($year) || !empty($selectedUnitId))
                <div class="mt-4 pt-4 border-t border-gray-100 flex flex-wrap items-center gap-2 text-sm">
                    <span class="text-gray-500">Found</span>
                    <span class="inline-flex items-center rounded-md bg-teal-50 px-2 py-0.5 font-semibold text-teal-800 ring-1 ring-teal-200">
                        {{ $projects->total() }} project(s)
                    </span>
                    @if(!empty($search))
                        <span class="text-gray-500">matching</span>
                        <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 font-medium text-gray-800">{{ $search }}</span>
                    @endif
                    @if(!empty($year))
                        <span class="text-gray-500">with grant registration year</span>
                        <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 font-medium text-gray-800">{{ $year }}</span>
                    @endif
                    @if(!empty($selectedUnitId))
                        <span class="text-gray-500">in unit</span>
                        @php $selectedUnit = $units->firstWhere('id', (int) $selectedUnitId); @endphp
                        <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 font-medium text-gray-800">{{ $selectedUnit->acronym ?? $selectedUnit->organization_unit }}</span>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <!-- Projects Table Card -->
    <div class="bg-white rounded-xl shadow border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-teal-800 text-white text-xs font-semibold uppercase tracking-wider">
                        <th class="p-3.5 text-center w-12">#</th>
                        <th class="p-3.5">Unit</th>
                        <th class="p-3.5">Register No.</th>
                        <th class="p-3.5">Project Name</th>
                        <th class="p-3.5 text-right">MoU Amount (Rp)</th>
                        <th class="p-3.5 text-right">MoU Amount (USD)</th>
                        <th class="p-3.5 text-center">Grant Reg.</th>
                        <th class="p-3.5 text-center w-32">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 text-sm">
                    @forelse($projects as $index => $project)
                        <tr class="hover:bg-teal-50/40 transition">
                            <td class="p-3.5 text-center font-medium text-gray-500">{{ $projects->firstItem() + $index }}</td>

                            <!-- Unit -->
                            <td class="p-3.5">
                                <span class="inline-flex items-center rounded-full bg-teal-50 text-teal-800 ring-1 ring-teal-200 px-2.5 py-1 text-xs font-semibold">
                                    {{ $project->organizationUnit->acronym ?? $project->organizationUnit->organization_unit ?? '-' }}
                                </span>
                            </td>

                            <!-- Register No -->
                            <td class="p-3.5 text-gray-600 font-mono text-xs font-medium">
                                {{ $project->register_number ?? '-' }}
                            </td>

                            <!-- Project Name -->
                            <td class="p-3.5">
                                <span class="font-bold text-gray-800 block leading-tight">{{ $project->project_name }}</span>
                                @if($project->mou_period)
                                    <span class="text-xs text-gray-400">MoU Period: {{ $project->mou_period }}</span>
                                @endif
                            </td>

                            <!-- MoU Amount (Rp) -->
                            <td class="p-3.5 text-right font-semibold text-gray-900 whitespace-nowrap">
                                Rp {{ number_format($project->mou_amount, 0, ',', '.') }}
                            </td>

                            <!-- MoU Amount (USD) -->
                            <td class="p-3.5 text-right font-semibold text-emerald-700 whitespace-nowrap">
                                @if(!is_null($project->mou_amount_usd) && $project->mou_amount_usd > 0)
                                    $ {{ number_format((int) $project->mou_amount_usd, 0, ',', '.') }}
                                @else
                                    <span class="text-gray-400 font-normal">-</span>
                                @endif
                            </td>

                            <!-- Grant Registration -->
                            <td class="p-3.5 text-center">
                                @php $grStatus = $project->grant_registration_status ?? 'Not Yet Registered'; @endphp
                                <div class="flex flex-col items-center gap-1">
                                    @if($grStatus === 'Registered')
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                            Registered
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600">
                                            <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
                                            Not Yet Registered
                                        </span>
                                    @endif
                                    @if($project->grant_registration_date)
                                        <span class="text-[11px] text-gray-400">{{ $project->grant_registration_date->format('d M Y') }}</span>
                                    @else
                                        <span class="text-[11px] text-gray-300">-</span>
                                    @endif
                                    @if($project->grant_registration_link)
                                        <a href="{{ $project->grant_registration_link }}" target="_blank" rel="noopener noreferrer" class="text-teal-600 hover:text-teal-800 text-[11px] font-medium hover:underline" title="Open Registration Document">Document</a>
                                    @endif
                                </div>
                            </td>

                            <!-- Actions -->
                            <td class="p-3.5 text-center">
                                <div class="flex items-center justify-center gap-1">
                                    <a href="{{ route('projects.show', $project->id) }}" class="p-2 text-gray-500 hover:text-teal-700 hover:bg-teal-50 rounded-lg transition" title="Detail">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    </a>

                                    <a href="{{ route('projects.edit', $project->id) }}" class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition" title="Edit">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                    </a>

                                    <form id="delete-project-{{ $project->id }}" action="{{ route('projects.destroy', $project->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" onclick="confirmDelete('delete-project-{{ $project->id }}', 'proyek {{ $project->project_name }}')" class="p-2 text-red-500 hover:bg-red-50 transition rounded-lg" title="Delete">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="p-12 text-center">
                                <div class="flex flex-col items-center gap-3 text-gray-400">
                                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                                    <p class="text-gray-500 font-medium">
                                        @if(!empty($search) || !empty($year) || !empty($selectedUnitId))
                                            No projects found matching the given filters.
                                        @else
                                            No projects found.
                                        @endif
                                    </p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($projects->hasPages())
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $projects->links() }}
        </div>
    @endif

</div>
@endsection