@extends('layouts.app')

@section('title', $innovation->title . ' - Uganda Innovation Portal')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <!-- Innovation Header -->
            <div class="card shadow mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h1 class="h3 mb-2">{{ $innovation->title }}</h1>
                            <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
                                @foreach($innovation->categories as $category)
                                    <span class="badge bg-primary">{{ $category->name }}</span>
                                @endforeach
                                @if($innovation->region)
                                    <span class="badge bg-secondary">
                                        <i class="fas fa-map-marker-alt me-1"></i>{{ $innovation->region }}
                                    </span>
                                @endif
                                @if($innovation->stage)
                                    <span class="badge bg-info">{{ ucfirst($innovation->stage) }}</span>
                                @endif
                            </div>
                        </div>
                        @auth
                            @if(auth()->user()->id === $innovation->user_id)
                                <div class="dropdown">
                                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" 
                                            data-bs-toggle="dropdown">
                                        <i class="fas fa-cog"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('innovations.edit', $innovation) }}">
                                                <i class="fas fa-edit me-2"></i>Edit
                                            </a>
                                        </li>
                                        <li>
                                            <form method="POST" action="{{ route('innovations.destroy', $innovation) }}" 
                                                  class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="dropdown-item text-danger" 
                                                        onclick="return confirm('Are you sure you want to delete this innovation?')">
                                                    <i class="fas fa-trash me-2"></i>Delete
                                                </button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            @endif
                        @endauth
                    </div>

                    <!-- Images -->
                    @if($innovation->images && count($innovation->images) > 0)
                        <div class="mb-4">
                            <div id="innovationCarousel" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    @foreach($innovation->images as $index => $image)
                                        <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                            <img src="{{ asset('images/' . $innovation->images[0]) }}" class="d-block w-100" 
                                                 alt="{{ $innovation->title }}" style="height: 400px; object-fit: cover;">
                                        </div>
                                    @endforeach
                                </div>
                                @if(count($innovation->images) > 1)
                                    <button class="carousel-control-prev" type="button" data-bs-target="#innovationCarousel" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon"></span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#innovationCarousel" data-bs-slide="next">
                                        <span class="carousel-control-next-icon"></span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- Description -->
                    <div class="mb-4">
                        <h5 class="text-primary mb-3">Description</h5>
                        <p class="lead">{{ $innovation->description }}</p>
                    </div>

                    <!-- Innovation Details -->
                    <div class="mb-4">
                        @if($innovation->impact_description)
                            <div class="mb-3">
                                <h6 class="text-primary">Impact</h6>
                                <p>{{ $innovation->impact_description }}</p>
                            </div>
                        @endif
                        
                    </div>

                     <!-- target audience -->
                    <div class="mb-4">
                        @if($innovation->target_audience)
                            <div class="mb-3">
                                <h6 class="text-primary">Target Audience</h6>
                                <p>{{ $innovation->target_audience }}</p>
                            </div>
                        @endif
                    </div>

                    <!-- Challenges and Solutions 
                    @if($innovation->challenges || $innovation->solutions)
                        <div class="row mb-4">
                            @if($innovation->challenges)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-primary">Challenges Faced</h6>
                                    <p>{{ $innovation->challenges }}</p>
                                </div>
                            @endif
                            @if($innovation->solutions)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-primary">Solutions Implemented</h6>
                                    <p>{{ $innovation->solutions }}</p>
                                </div>
                            @endif
                        </div>
                    @endif -->

                    @if($innovation->value_chains || $innovation->start_year)
                        <div class="row mb-4">
                            @if($innovation->value_chains)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-primary">Industrial Value Chains</h6>
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($innovation->value_chains as $chain)
                                            <span class="badge bg-info text-dark">{{ $chain }}</span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <!--
                            @if($innovation->start_year)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-primary">Start Year</h6>
                                    <p class="mb-0">{{ $innovation->start_year }}</p>
                                </div> 
                            @endif -->
                        </div>
                    @endif


                    <!-- Additional Information -->
                    @if($innovation->partnerships || $innovation->awards)
                        <div class="row mb-4">
                            @if($innovation->partnerships)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-primary">Partnerships</h6>
                                    <p>{{ $innovation->partnerships }}</p>
                                </div>
                            @endif
                            @if($innovation->awards)
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-primary">Awards & Recognition</h6>
                                    <p>{{ $innovation->awards }}</p>
                                </div>
                            @endif
                        </div>
                    @endif

                    <!-- Video -->
                   @if($innovation->video_url)
                        @php
                            $video = getEmbedData($innovation->video_url);
                        @endphp

                        <div class="mb-4">
                            <h6 class="text-primary mb-3">Video</h6>

                            @if($video['type'] === 'iframe')
                                <div class="ratio ratio-16x9">
                                    <iframe
                                        src="{{ $video['src'] }}"
                                        title="{{ $innovation->title }}"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowfullscreen>
                                    </iframe>
                                </div>

                            @elseif($video['type'] === 'video')
                                <video class="w-100" controls>
                                    <source src="{{ $video['src'] }}">
                                    Your browser does not support the video tag.
                                </video>

                            @else
                                <a href="{{ $video['src'] }}" target="_blank" class="btn btn-outline-primary">
                                    Watch Video
                                </a>
                            @endif
                        </div>
                    @endif


                    <!-- Documents -->
                    @if($innovation->documents && count($innovation->documents) > 0)
                        <div class="mb-4">
                            <h6 class="text-primary mb-3">Documents</h6>
                            <div class="list-group">
                                @foreach($innovation->documents as $document)
                                    <a href="{{ Storage::url($document) }}" 
                                       class="list-group-item list-group-item-action" 
                                       target="_blank">
                                        <i class="fas fa-file-pdf me-2"></i>
                                        {{ basename($document) }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Innovation Info -->
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Innovation Details</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Stage:</strong>
                        @if($innovation->stage)
                            <span class="badge bg-success">{{ ucfirst($innovation->stage) }}</span>
                        @endif
                    </div>

                    @if($innovation->funding_status)
                        <div class="mb-3">
                            <strong>Funding Status:</strong>
                            <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $innovation->funding_status)) }}</span>
                        </div>
                    @endif

                    @if($innovation->district)
                        <div class="mb-3">
                             <i class="fas fa-map-marker-alt text-primary"></i>
                            <strong>Location:</strong>
                            {{ $innovation->district }}
                        </div>
                    @endif

                    <div class="mb-3">
                        <strong>Innovation Date:</strong>
                        <p class="mb-0">
                            {{ \Carbon\Carbon::parse($innovation->start_year)->format('F j, Y') }}
                        </p>
                    </div>


                    @if($innovation->published_at)
                        <div class="mb-3">
                            <strong>Published:</strong>
                            <p class="mb-0">{{ $innovation->published_at->format('F j, Y \a\t g:i A') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Contact Information -->
            <div class="card shadow mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">Contact Information</h6>
                </div>
                <div class="card-body">
                    @php
                        
                        $innovatorPhotos = $innovation->innovator_photo;

                        
                        if (is_string($innovatorPhotos)) {
                            $innovatorPhotos = json_decode($innovatorPhotos, true);
                        }

                        $innovatorPhoto = (is_array($innovatorPhotos) && count($innovatorPhotos) > 0)
                            ? $innovatorPhotos[0]
                            : null;
                    @endphp

                    <div class="mb-3 text-center">
                        @if($innovatorPhoto)
                            <img src="{{ asset('innovators/' . $innovatorPhoto) }}"
                                alt="{{ $innovation->contact_person }}"
                                class="rounded-circle shadow-sm mb-2"
                                style="width: 90px; height: 90px; object-fit: cover;">
                        @else
                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-2"
                                style="width: 90px; height: 90px;">
                                <i class="fas fa-user text-muted fa-2x"></i>
                            </div>
                        @endif
                    </div>


                    @if($innovation->contact_person)
                        <div class="mb-3">
                            <strong>Contact Person:</strong>
                            <p class="mb-0">{{ $innovation->contact_person }}</p>
                        </div>
                    @endif

                    @if($innovation->contact_email)
                        <div class="mb-3">
                            <strong>Email:</strong>
                            <p class="mb-0">
                                <a href="mailto:{{ $innovation->contact_email }}" class="text-decoration-none">
                                    {{ $innovation->contact_email }}
                                </a>
                            </p>
                        </div>
                    @endif

                    @if($innovation->contact_phone)
                        <div class="mb-3">
                            <strong>Phone:</strong>
                            <p class="mb-0">
                                <a href="tel:{{ $innovation->contact_phone }}" class="text-decoration-none">
                                    {{ $innovation->contact_phone }}
                                </a>
                            </p>
                        </div>
                    @endif

                    @if($innovation->website)
                        <div class="mb-3">
                            <strong>Website:</strong>
                            <p class="mb-0">
                                <a href="{{ $innovation->website }}" target="_blank" class="text-decoration-none">
                                    {{ $innovation->website }}
                                </a>
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Related Innovations -->
            @if(isset($relatedInnovations) && $relatedInnovations->count() > 0)
                <div class="card shadow">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold text-primary">Related Innovations</h6>
                    </div>
                    <div class="card-body">
                        @foreach($relatedInnovations as $related)
                            <div class="d-flex mb-3">
                                @if($related->images && count($related->images) > 0)                                   
                                    <img src="{{ asset('images/' . $related->images[0]) }}" 
                                         class="rounded me-3" width="60" height="60" 
                                         style="object-fit: cover;">
                                @else
                                    <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" 
                                         style="width: 60px; height: 60px;">
                                        <i class="fas fa-image text-muted"></i>
                                    </div>
                                @endif
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">
                                        <a href="{{ route('innovation.show', $related) }}" 
                                           class="text-decoration-none">
                                            {{ \Illuminate\Support\Str::limit($related->title, 40) }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">
                                        {{ $related->contact_person }} • {{ $related->created_at->diffForHumans() }}
                                    </small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection