@extends('layouts.app')

@section('content')
    @include('partials.navbar')
    <div class="container py-0">
        <div class="card border-0">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-md-6 mb-4" style="background: white; border-right:1px dotted rgb(150, 149, 149)">
                        <span style="padding: 7px 6px; background:#5A7ACD;color:white">AI-Generated Analysis</span>
                        @if ($item->ai_image)
                            <div class="text-center mb-1 mt-4">

                                <img src="{{ asset($item->ai_image) }}" class="img-fluid shadow-sm mb-0"
                                    style="width: 100%; max-width: 700px; max-height: 400px; object-fit: cover;"
                                    alt="AI Image">

                                <span class="text-muted"
                                    style="margin-top: -5px; font-size:10px; color:brown">{{ $item->headquarters }}</span>
                            </div>
                        @endif
                        <h4 class="mb-2 mt-4">{{ $item->title }}</h4>
                        <h4 class="fw-semibold text-primary">Overview</h4>
                        <p class="pa">{{ $item->intro }}</p>
                        {{-- <div class="col-md-12">
                            <h6>{{ $item->analysis_title }}</h6>
                                
                            <div class="text-muted" style="white-space: pre-line;">
                                {{ $item->ai_analysis }}
                            </div>
                        </div> --}}
                        <h4 class="fw-semibold">💡 Idea</h4>
                        <p class="pa">{{ $item->idea }}</p>
                        {{-- <span class="poa" style="white-space: pre-line;">
                                {{ $item->ai_analysis }}
                       </span> --}}
                        <h4 class="fw-semibold">⚙️{{ $item->name }}: How It Works</h4>
                        <p class="ps">{{ $item->how_it_works }}</p>
                        <h4 class="fw-semibold">🚀 Why It’s Amazing</h4>
                        <p class="poas">{{ $item->why_amazing }}</p>
                        <h4 class="fw-semibold">💻 Technical Analysis</h4>
                        <p class="pa">{{ $item->technical }}</p>
                        <h4 class="fw-semibold">🧱 System Architecture</h4>
                        <p class="pa">{{ $item->architecture }}</p>
                        @php
                            $stepsArray = preg_split('/(?=Step \d+:)/', $item->steps);
                        @endphp
                        <h4 class="fw-semibold">🧭 {{ $item->name }}: Platform Walkthrough</h4>
                        <ul>
                            @foreach ($stepsArray as $step)
                                @php
                                    $step = trim($step);
                                @endphp

                                @if ($step)
                                    <li>{{ $step }}</li>
                                @endif
                            @endforeach
                        </ul>
                        @if ($item->ai_diagram)
                            <div class="mb-4 text-center">
                                <img src="{{ asset('storage/' . $item->ai_diagram) }}" class="img-fluid rounded shadow-sm" 
                                style="max-height: 500px">
                                

                                <small class="text-muted d-block mt-2">
                                    AI-generated system flow sketch
                                </small>
                            </div>
                           
                        @endif
                        <hr>

                        <div class="mt-4">
                            <small class="lead" style="font-size: 18px ;">
                                <strong style="color: green">About this section:</strong><br>
                                The content above is generated by an AI system using prompt-based instructions defined
                                during development of this platform. It is designed to assist in understanding the topic by
                                providing
                                structured and automated insights. Users are encouraged to interpret the information as
                                supplementary guidance.
                            </small>
                        </div>

                    </div>
                    <div class="col-md-6 mt-0" style="background: white;padding:0 10px">
                        <span style="padding: 7px 6px; background:#D96868;color:white">In-Depth Analysis</span>
                        <!-- AUTHOR INFO -->
                        <div class="mt-4">
                            {{-- <!-- TOPIC IMAGE -->
                            @if ($item->topic_image)
                                <img src="{{ $item->topic_image }}" class="img-fluid shadow-sm mb-3"
                                    style="width: 100%; max-width: 700px; max-height: 400px; object-fit: cover;">
                            @endif --}}
                            <img src="{{ asset($item->topic_image) }}" class="img-fluid shadow-sm mb-0"
                                style="width: 100%; max-width: 700px; max-height: 400px; object-fit: cover; border:1px solid rgb(179, 178, 178)">
                            <span class="mb-3"
                                style=" font-size:10px; color:brown; text-align:center">{{ $item->founder }}</span>
                        </div>
                        <!-- TOPIC -->
                        <div class="car mb-4 mt-4">
                            <div class="car-body">
                                <div class="d-flex align-items-center mb-3 ">
                                    <div class="p-1">
                                        @if ($item->user && $item->user->avatar)
                                            <img src="{{ asset('storage/' . $item->user->avatar) }}"
                                                alt="{{ $item->user->name }}"
                                                style="width:50px;height:50px;border-radius:50%;object-fit:cover;margin-right:10px;">
                                        @endif
                                    </div>
                                    <div>
                                        <span
                                            style="text-transform: uppercase">{{ $item->user->name ?? 'Unknown Author' }}</span><br>
                                        <small class="text-muted">{{ $item->created_at->format('F j, Y') }}
                                            | {{ $item->word_count }} words
                                            | {{ $item->reading_time }} min read</small>
                                    </div>
                                </div>
                                <h4>{{ $item->topic }}</h4>
                                <p>{{ $item->brief_description }}</p>
                            </div>
                        </div>

                        <!-- FULL DESCRIPTION -->
                        <div class="car">
                            <div class="car-body">
                                <h6>Detailed Analysis</h6>
                                <p>{!! nl2br(e($item->full_description)) !!}</p>
                                <div class="mt-3 text-center mb-3">
                                    <div style="max-width: 500px; margin: auto;">
                                        <img src="{{ asset($item->drawing) }}" class="img-fluid rounded shadow-sm"
                                            alt="Drawing">
                                    </div>
                                    <span class="text-muted"
                                        style=" font-size:10px; color:brown">{{ $item->industry }}</span>
                                </div>
                                @if ($item->website)
                                    <a href="{{ $item->website }}" target="_blank" class="text-primary"
                                        style="text-decoration: none">
                                        Visit Website →
                                        {{ str_replace(['https://', 'http://', 'www.'], '', $item->website) }}
                                    </a>
                                @endif
                            </div>
                            <hr>
                            <h5>Global Platforms Similar to {{ $item->name }}</h5>

                            <p class="text-muted mt-2">
                                {{ $item->description }}<br>

                            </p>
                            <span style="color: #5A7ACD">Apps that follow the same core model:</span><br>
                            <span> {{ $item->coverage }}</span>
                            <hr>
                        </div>
                        <div class="mb-3">
                            <span style="color: green">About author</span><br>
                            <span class="lead "
                                style="font-size: 18px; color:black">{{ optional($item->user)->bio }}</span>
                        </div>

                        {{-- <div class="car  p-1 border-0">

                        

                            <span class="badge bg-primary p-3">
                                {{ $item->industry ?? 'Unknown Industry' }}
                            </span>

                            <p class="text-muted mt-2">
                                {{ $item->description }}
                            </p>

                            <div class="row mt-3">

                                <div class="col-md-6">
                                    <p class="mb-0"><strong>Founder:</strong> {{ $item->founder }}</p>
                                    <p class="mb-0"><strong>Origin:</strong> {{ $item->origin }}</p>
                                    <p><strong>Coverage:</strong> {{ $item->coverage }}</p>
                                </div>

                                <div class="col-md-6">
                                    <p class="mb-0"><strong>HQ:</strong> {{ $item->headquarters }}</p>

                                    <p class="mb-0">
                                        <strong>Website:</strong>
                                       @if ($item->website) 
                                        <a href="https://{{ $item->website }}" target="_blank"
                                            style="text-decoration: none">
                                            {{ str_replace(['https://', 'http://', '/'], '', $item->website) }}
                                        </a>
                                         @else
                                            Not provided
                                        @endif
                                    </p>

                                    <p class="mb-0">
                                        <strong>Email:</strong>
                                        @if ($item->contact_email)
                                            <a href="mailto:{{ trim(strtolower($item->contact_email)) }}" style="text-decoration: none">
                                                {{ trim(strtolower($item->contact_email)) }}
                                            </a>
                                        @else
                                            Not provided
                                        @endif
                                    </p>
                                </div>

                            </div>

                        </div> --}}


                    </div>
                </div>
            </div>

        </div>
        <style>
            .poa::first-letter {
                initial-letter: 1.5 !important;
                margin-right: 1px !important;
                font-size: 18px !important;
                color: #6d6d6f !important;
                font-family: italic !important;
                padding: 1px !important;
                width: 200 !important;

            }
        </style>
    </div>
    <br>
    <br>
@endsection