@extends('layouts.app')

@section('title', 'Pilot 2 — Field Visit Forms')

@section('content')

@php
/**
 * Full Tailwind class names must appear as literals so the JIT scanner picks them up.
 * Never build class names with string concatenation.
 */
$colorMap = [
    'indigo' => [
        'bar'          => 'bg-indigo-500',
        'hover_border' => 'hover:border-indigo-300',
        'icon_bg'      => 'bg-indigo-50',
        'icon_text'    => 'text-indigo-600',
        'subtitle'     => 'text-indigo-600',
        'btn'          => 'bg-indigo-600',
    ],
    'violet' => [
        'bar'          => 'bg-violet-500',
        'hover_border' => 'hover:border-violet-300',
        'icon_bg'      => 'bg-violet-50',
        'icon_text'    => 'text-violet-600',
        'subtitle'     => 'text-violet-600',
        'btn'          => 'bg-violet-600',
    ],
    'emerald' => [
        'bar'          => 'bg-emerald-500',
        'hover_border' => 'hover:border-emerald-300',
        'icon_bg'      => 'bg-emerald-50',
        'icon_text'    => 'text-emerald-600',
        'subtitle'     => 'text-emerald-600',
        'btn'          => 'bg-emerald-600',
    ],
    'amber' => [
        'bar'          => 'bg-amber-500',
        'hover_border' => 'hover:border-amber-300',
        'icon_bg'      => 'bg-amber-50',
        'icon_text'    => 'text-amber-600',
        'subtitle'     => 'text-amber-600',
        'btn'          => 'bg-amber-600',
    ],
    'cyan' => [
        'bar'          => 'bg-cyan-500',
        'hover_border' => 'hover:border-cyan-300',
        'icon_bg'      => 'bg-cyan-50',
        'icon_text'    => 'text-cyan-600',
        'subtitle'     => 'text-cyan-600',
        'btn'          => 'bg-cyan-600',
    ],
    'rose' => [
        'bar'          => 'bg-rose-500',
        'hover_border' => 'hover:border-rose-300',
        'icon_bg'      => 'bg-rose-50',
        'icon_text'    => 'text-rose-600',
        'subtitle'     => 'text-rose-600',
        'btn'          => 'bg-rose-600',
    ],
];

$iconPaths = [
    'map-pin' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />',
        '<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />',
    ],
    'chat' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />',
    ],
    'cart' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />',
    ],
    'wallet' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />',
    ],
    'document' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />',
    ],
    'eye' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
        '<path stroke-linecap="round" stroke-linejoin="round" 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" />',
    ],
    'collection' => [
        '<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />',
    ],
];
@endphp

{{-- ── Header ──────────────────────────────────────────────────────────────── --}}
<div class="mb-8 text-center">
    <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-indigo-100 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
        </svg>
    </div>
    <h1 class="text-2xl font-bold text-gray-900">Pilot 2 — Field Visit</h1>
    <p class="text-gray-500 mt-1 text-base">Select your form to begin data collection</p>
    <p class="text-gray-400 mt-0.5 text-sm">ডেটা সংগ্রহ শুরু করতে আপনার ফর্ম বেছে নিন</p>
</div>

{{-- ── Cards ────────────────────────────────────────────────────────────────── --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">

    @foreach ($forms as $form)
    @php
        $c    = $colorMap[$form->color] ?? $colorMap['indigo'];
        $paths = $iconPaths[$form->icon] ?? $iconPaths['document'];
        $shortTitle = Str::before($form->title, ' (');
        $people     = implode(' & ', $form->submitted_by_options ?? []);
    @endphp

    <a href="{{ route('forms.show', $form->slug) }}"
       class="flex flex-col bg-white rounded-2xl border border-gray-200 shadow-sm
              {{ $c['hover_border'] }} active:scale-[0.98] transition-all duration-150 overflow-hidden
              hover:shadow-lg">
        <div class="h-1.5 {{ $c['bar'] }} w-full"></div>
        <div class="flex flex-col flex-1 p-6">

            {{-- Icon --}}
            <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl {{ $c['icon_bg'] }} mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 {{ $c['icon_text'] }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    {!! implode('', $paths) !!}
                </svg>
            </div>

            {{-- Title --}}
            <h2 class="text-lg font-bold text-gray-800 leading-snug">{{ $shortTitle }}</h2>
            @if ($form->title_bn)
                <p class="text-sm {{ $c['subtitle'] }} font-medium mt-0.5">{{ $form->title_bn }}</p>
            @endif

            {{-- Meta rows --}}
            <div class="mt-3 space-y-1.5 flex-1">
                @if ($people)
                <div class="flex items-center gap-2 text-sm text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span>{{ $people }}</span>
                </div>
                @endif
                <div class="flex items-center gap-2 text-sm text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                    <span>
                        @if ($form->description){{ $form->description }} &middot; @endif{{ $form->questions_count }} {{ Str::plural('question', $form->questions_count) }}
                    </span>
                </div>
            </div>

            {{-- CTA button --}}
            <div class="mt-5 pt-4 border-t border-gray-100">
                <span class="flex items-center justify-center gap-2 w-full {{ $c['btn'] }}
                             text-white text-base font-semibold rounded-xl px-5 py-3 min-h-[48px]">
                    Start
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                </span>
                <p class="text-center text-xs text-gray-400 mt-1.5">শুরু করুন</p>
            </div>

        </div>
    </a>
    @endforeach

</div>

<p class="mt-10 text-center text-xs text-gray-400">
    Pilot 2 &middot; Data collection v1 &middot; No login required
</p>

@endsection