@extends('layouts.app')

@section('title', 'Innovators')

@section('content')

<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('innovators.index') }}" class="row g-2 align-items-center">
            <div class="col-md-9">
                <div class="input-group">
                    <span class="input-group-text bg-white">
                        <i class="fas fa-magnifying-glass"></i>
                    </span>
                    <input type="text"
                           name="q"
                           class="form-control"
                           placeholder="Search innovators by name, email, phone, or organization..."
                           value="{{ request('q') }}">
                </div>
            </div>

            <div class="col-md-3 d-grid">
                <button class="btn btn-primary" type="submit">
                    Search
                </button>
            </div>
        </form>

        @if(request('q'))
            <div class="mt-2">
                <a href="{{ route('innovators.index') }}" class="small text-muted">Clear search</a>
            </div>
        @endif
    </div>
</div>

<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="fw-bold mb-0">Innovators</h2>
            <p class="text-muted mb-0">Meet the people behind the innovations</p>
        </div>
    </div>

    <div class="row g-4">
        @forelse($innovators as $innovator)
            @php
                // innovator_photo stored as JSON array e.g. ["photo.jpg"]
                $imgs = $innovator->innovator_photo ? json_decode($innovator->innovator_photo, true) : [];
                $photo = (is_array($imgs) && count($imgs) > 0) ? $imgs[0] : null;

                // Safer modal id (email might be null)
                $modalId = 'imgModal' . md5(($innovator->contact_email ?? '') . '|' . ($innovator->contact_person ?? '') . '|' . ($innovator->contact_phone ?? ''));
            @endphp

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card h-100 shadow-sm border-0" style="border-radius: 14px; overflow: hidden;">
                    <div class="bg-light">
                        @if($photo)
                            <img
                                src="{{ asset('innovators/' . $photo) }}"
                                alt="{{ $innovator->contact_person }}"
                                class="w-100"
                                style="height:240px; object-fit:cover; object-position:center 20%; cursor:pointer;"
                                data-bs-toggle="modal"
                                data-bs-target="#{{ $modalId }}"
                            >
                        @else
                            <div class="d-flex align-items-center justify-content-center" style="height: 240px;">
                                <i class="fas fa-user-circle text-muted" style="font-size: 90px;"></i>
                            </div>
                        @endif
                    </div>

                    <div class="card-body">
                        <h5 class="fw-bold mb-1">{{ $innovator->contact_person }}</h5>

                        <div class="d-flex flex-column gap-2 mb-3">
                            <div class="d-flex flex-wrap gap-2">
                                @if(!empty($innovator->gender))
                                    <span class="badge bg-secondary">{{ ucfirst($innovator->gender) }}</span>
                                @endif

                                <span class="badge bg-success">
                                    {{ (int) $innovator->innovations_count }} Innovation{{ (int)$innovator->innovations_count === 1 ? '' : 's' }}
                                </span>
                            </div>

                            @if(!empty($innovator->organization))
                                <span class="badge bg-primary text-wrap text-start py-2 w-100">
                                    {{ $innovator->organization }}
                                </span>
                            @endif
                        </div>

                        <div class="small text-muted">
                            @if(!empty($innovator->contact_email))
                                <div class="mb-1">
                                    <i class="fas fa-envelope me-2"></i>
                                    <a href="mailto:{{ $innovator->contact_email }}">{{ $innovator->contact_email }}</a>
                                </div>
                            @endif

                            @if(!empty($innovator->contact_phone))
                                <div class="mb-1">
                                    <i class="fas fa-phone me-2"></i>
                                    <a href="tel:{{ $innovator->contact_phone }}">{{ $innovator->contact_phone }}</a>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="card-footer bg-white border-0 pt-0 pb-3">
                        <a class="btn btn-outline-primary btn-sm w-100"
                           href="{{ route('innovations.explore', ['search' => $innovator->contact_person]) }}">
                            View Innovations
                        </a>
                    </div>
                </div>
            </div>

            {{-- Modal placed OUTSIDE the card to avoid layout issues --}}
            @if($photo)
                <div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title">{{ $innovator->contact_person }}</h6>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-0">
                                <img
                                    src="{{ asset('innovators/' . $photo) }}"
                                    alt="{{ $innovator->contact_person }}"
                                    class="w-100"
                                    style="height:auto; display:block;"
                                >
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        @empty
            <div class="col-12">
                <div class="alert alert-info mb-0">No innovators found.</div>
            </div>
        @endforelse
    </div>

    <div class="d-flex justify-content-center mt-4">
        {{ $innovators->links() }}
    </div>
</div>
@endsection