@extends('layouts.app')
@section('title', $product->name)
@section('content')
<div class="d-flex justify-content-between mb-3">
    <div>
        <a href="{{ route('products.index') }}" class="text-decoration-none">&larr; Products</a>
        <h1 class="h3 mt-2">{{ $product->name }}</h1>
        <div class="text-muted">{{ $product->brand }} @if($product->category) · {{ $product->category }} @endif</div>
    </div>
    @if($product->detail_url)<a class="btn btn-outline-secondary align-self-start" href="{{ $product->detail_url }}" target="_blank">Open source</a>@endif
</div>

<div class="row g-3">
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header bg-white"><strong>Product details</strong></div>
            <div class="card-body">
                @if($product->details)
                    <dl class="row mb-0">
                        <dt class="col-4">Code</dt><dd class="col-8">{{ $product->details->product_code ?: '—' }}</dd>
                        <dt class="col-4">Model</dt><dd class="col-8">{{ $product->details->model ?: '—' }}</dd>
                        <dt class="col-4">Price</dt><dd class="col-8">{{ $product->details->currency }} {{ $product->details->price ? number_format((float) $product->details->price) : '—' }}</dd>
                        <dt class="col-4">Tags</dt>
                        <dd class="col-8">
                            @forelse($product->details->tags ?? [] as $tag)<span class="badge text-bg-secondary me-1">{{ $tag }}</span>@empty — @endforelse
                        </dd>
                        <dt class="col-4">Summary</dt><dd class="col-8">{{ $product->details->short_description ?: '—' }}</dd>
                        <dt class="col-4">Availability</dt><dd class="col-8">{{ $product->details->availability ?: '—' }}</dd>
                        <dt class="col-4">Merchant</dt><dd class="col-8">{{ $product->details->merchant ?: '—' }}</dd>
                    </dl>
                @else
                    <p class="text-muted mb-0">Details have not been scraped.</p>
                @endif
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header bg-white"><strong>Images ({{ $product->images->count() }})</strong></div>
            <div class="card-body"><div class="row g-2">
                @forelse($product->images as $image)
                    <div class="col-6 col-md-4"><div class="border rounded p-2 h-100">
                        @if($image->local_path)<img class="img-fluid" src="{{ Storage::disk(config('scraper.image_disk'))->url($image->local_path) }}" alt="">@endif
                        <div class="small mt-1 text-muted">{{ $image->status }} · {{ $image->size ? number_format($image->size / 1024, 1).' KB' : '' }}</div>
                    </div></div>
                @empty
                    <p class="text-muted">No images downloaded.</p>
                @endforelse
            </div></div>
        </div>
    </div>
</div>

@if($product->details)
<div class="card mt-3">
    <div class="card-header bg-white"><strong>Installment Plans</strong></div>
    <div class="table-responsive"><table class="table table-striped mb-0">
        <thead><tr><th>Tenure</th><th>Markup</th><th>Monthly Payment</th></tr></thead>
        <tbody>
        @forelse($product->details->plans as $plan)
            <tr>
                <td>{{ $plan->months }} Months</td>
                <td>{{ (float) $plan->interest === 0.0 ? '0% Markup' : 'Markup applicable' }}</td>
                <td>{{ $plan->currency }} {{ number_format((float) $plan->monthly_payment) }}</td>
            </tr>
        @empty
            <tr><td colspan="3" class="text-muted">No installment plans stored.</td></tr>
        @endforelse
        </tbody>
    </table></div>
</div>

<div class="card mt-3"><div class="card-header bg-white"><strong>Product Specifications</strong></div><div class="card-body">{!! nl2br(e($product->details->description ?: '—')) !!}</div></div>
@if($product->details->terms)<div class="card mt-3"><div class="card-header bg-white"><strong>Terms &amp; Conditions</strong></div><div class="card-body">{!! nl2br(e($product->details->terms)) !!}</div></div>@endif
<div class="card mt-3"><div class="card-header bg-white"><strong>Raw source payload</strong></div><div class="card-body"><pre class="json bg-light p-3 rounded">{{ json_encode($product->details->raw_payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre></div></div>
@endif
@endsection