@extends('layouts.app')
@section('title', $t->display_name)
@section('heading', 'Appraisal: '.$t->display_name)

@section('content')
@php $closed = $t->deal || in_array($t->status, ['accepted', 'rejected']); $kes = fn ($v) => 'KSh '.number_format((float) $v, 2); @endphp

<p class="flex flex-wrap items-center gap-2 text-sm">
    <span class="rounded-full border px-2.5 py-0.5 text-xs font-semibold {{ ['draft' => 'border-slate-300 bg-slate-100', 'offered' => 'border-amber-300 bg-amber-100', 'accepted' => 'border-emerald-300 bg-emerald-100', 'rejected' => 'border-red-300 bg-red-100'][$t->status] ?? '' }}">{{ ['rejected' => 'Declined'][$t->status] ?? ucfirst($t->status) }}</span>
    <a class="underline" href="{{ route('customers.show', $t->customer) }}">{{ $t->customer->name }}</a>
    @if ($t->condition_grade)<span>· Grade <strong>{{ $t->condition_grade }}</strong> ({{ config('deals.grades')[$t->condition_grade] }})</span>@endif
    @if ($t->deal)<span>· used on <a class="underline" href="{{ route('deals.show', $t->deal) }}">{{ $t->deal->deal_no }}</a></span>@endif
</p>

<div class="mt-5 grid gap-5 lg:grid-cols-3">
<div class="space-y-5 lg:col-span-2">

    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="ph-h">
        <h2 id="ph-h" class="text-sm font-semibold">Photos ({{ $t->photos->count() }}/{{ config('deals.max_photos') }})</h2>
        <ul class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
            @forelse ($t->photos as $p)
                <li class="text-xs">
                    <a href="{{ route('trade-ins.photo', $p) }}" target="_blank"><img src="{{ route('trade-ins.photo', [$p, 'thumb' => 1]) }}" alt="{{ config('deals.photo_angles')[$p->angle] ?? $p->angle }}{{ $p->caption ? ': '.$p->caption : '' }}" class="aspect-[4/3] w-full rounded border border-line object-cover" loading="lazy"></a>
                    <p class="mt-1 font-medium">{{ config('deals.photo_angles')[$p->angle] ?? $p->angle }}</p>@if ($p->caption)<p class="text-muted">{{ $p->caption }}</p>@endif
                    @can('tradeins.manage') @unless ($closed)<form method="POST" action="{{ route('trade-ins.photos.destroy', $p) }}" onsubmit="return confirm('Remove this photo?')">@csrf @method('DELETE')<button class="text-stop underline">Remove</button></form>@endunless @endcan
                </li>
            @empty
                <li class="col-span-full text-sm text-muted">No photos yet. Take front, rear, both sides, interior, dashboard, engine bay, tyres and any damage.</li>
            @endforelse
        </ul>
        @can('tradeins.manage') @unless ($closed)
        <form method="POST" action="{{ route('trade-ins.photos.store', $t) }}" enctype="multipart/form-data" class="mt-4 grid gap-3 border-t border-line pt-4 sm:grid-cols-4">@csrf
            <div class="sm:col-span-2"><label for="photo" class="mb-1 block text-xs font-medium">Photo (JPEG, PNG or WebP)</label><input id="photo" name="photo" type="file" accept="image/jpeg,image/png,image/webp" capture="environment" required class="field"></div>
            <div><label for="angle" class="mb-1 block text-xs font-medium">Shows</label><select id="angle" name="angle" class="field">@foreach (config('deals.photo_angles') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
            <div><label for="caption" class="mb-1 block text-xs font-medium">Caption</label><input id="caption" name="caption" maxlength="120" class="field"></div>
            <div class="sm:col-span-4"><button class="btn-quiet">Upload photo</button><span class="ml-2 text-xs text-muted">Location data is removed from photos when they are saved.</span></div>
        </form>
        @endunless @endcan
    </section>

    @can('tradeins.manage') @unless ($closed)
    <form method="POST" action="{{ route('trade-ins.update', $t) }}" class="space-y-4 rounded-lg border border-line bg-panel p-4">@csrf @method('PUT')
        @include('trade-ins._fields', ['tradeIn' => $t])
        <button class="btn-primary">Save and recalculate</button>
    </form>
    @endunless @endcan

    @if ($closed || ! auth()->user()->can('tradeins.manage'))
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="det-h"><h2 id="det-h" class="text-sm font-semibold">Details</h2>
        <dl class="mt-3 grid gap-3 text-sm sm:grid-cols-3">
            @foreach (['Plate' => $t->registration_no, 'VIN' => $t->vin, 'Mileage' => number_format($t->mileage).' '.$t->mileage_unit, 'Color' => $t->color, 'Logbook seen' => $t->logbook_seen ? 'Yes' : 'No', 'Loan outstanding' => $t->has_outstanding_finance ? $kes($t->outstanding_balance).' · '.$t->lender : 'None'] as $l => $v)<div><dt class="text-xs text-muted">{{ $l }}</dt><dd class="font-medium">{{ $v ?: 'Not recorded' }}</dd></div>@endforeach
        </dl>
        @if ($t->condition_scores)<ul class="mt-3 grid gap-1 text-sm sm:grid-cols-5">@foreach (config('deals.condition_areas') as $k => $l)<li>{{ $l }}: <strong>{{ $t->condition_scores[$k] ?? '–' }}/5</strong></li>@endforeach</ul>@endif
        @if ($t->condition_notes)<p class="mt-3 whitespace-pre-line text-sm">{{ $t->condition_notes }}</p>@endif
    </section>
    @endif
</div>

<aside class="space-y-5">
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="val-h">
        <h2 id="val-h" class="text-sm font-semibold">Valuation</h2>
        <dl class="mt-3 space-y-1.5 text-sm">
            <div class="flex justify-between"><dt class="text-muted">Market value</dt><dd>{{ $t->market_value !== null ? $kes($t->market_value) : 'Not set' }}</dd></div>
            <div class="flex justify-between"><dt class="text-muted">Condition deduction ({{ $t->deduction_percent }}%)</dt><dd>{{ $t->condition_grade ? '− '.$kes(bcmul((string) ($t->market_value ?? 0), bcdiv((string) $t->deduction_percent, '100', 6), 2)) : 'Score the condition' }}</dd></div>
            <div class="flex justify-between"><dt class="text-muted">Repair estimate</dt><dd>− {{ $kes($t->recon_estimate) }}</dd></div>
            <div class="flex justify-between border-t border-line pt-1.5 font-semibold"><dt>Suggested offer</dt><dd>{{ $t->suggested_offer !== null ? $kes($t->suggested_offer) : 'Not yet' }}</dd></div>
            @if ($t->offered_value !== null)
                <div class="flex justify-between"><dt class="text-muted">Offered to customer</dt><dd class="font-semibold">{{ $kes($t->offered_value) }}</dd></div>
                @if ($t->has_outstanding_finance)<div class="flex justify-between"><dt class="text-muted">Less loan to clear</dt><dd>− {{ $kes($t->outstanding_balance) }}</dd></div>@endif
                <div class="flex justify-between border-t border-line pt-1.5 font-semibold"><dt>Credit on the deal</dt><dd class="{{ bccomp($t->net_credit, '0', 2) < 0 ? 'text-stop' : '' }}">{{ $kes($t->net_credit) }}</dd></div>
                @if ($t->valid_until)<p class="text-xs text-muted">Offer valid until {{ $t->valid_until->format('d M Y') }}.</p>@endif
            @endif
        </dl>
        @if (! $t->logbook_seen)<p class="mt-3 rounded border border-amber-300 bg-amber-50 p-2 text-xs text-amber-900">The logbook has not been seen. Do not accept the vehicle until ownership is confirmed.</p>@endif
    </section>

    @can('tradeins.manage') @unless ($closed)
    <section class="rounded-lg border border-line bg-panel p-4" aria-labelledby="off-h"><h2 id="off-h" class="text-sm font-semibold">{{ $t->status === 'offered' ? 'Change the offer' : 'Make an offer' }}</h2>
        <form method="POST" action="{{ route('trade-ins.offer', $t) }}" class="mt-3 space-y-2">@csrf
            <label for="offered_value" class="block text-xs font-medium">Amount to offer (KES)</label>
            <input id="offered_value" name="offered_value" type="number" min="0" step="0.01" required value="{{ $t->offered_value ?? $t->suggested_offer }}" class="field">
            <button class="btn-primary w-full" @disabled(! $t->condition_grade)>Record offer</button>
            @unless ($t->condition_grade)<p class="text-xs text-muted">Score all five condition areas first.</p>@endunless
        </form>
        @if ($t->status === 'offered')
            <div class="mt-3 grid grid-cols-2 gap-2 border-t border-line pt-3">
                <form method="POST" action="{{ route('trade-ins.decide', $t) }}">@csrf<input type="hidden" name="decision" value="accept"><button class="btn-primary w-full">Customer accepts</button></form>
                <form method="POST" action="{{ route('trade-ins.decide', $t) }}">@csrf<input type="hidden" name="decision" value="reject"><button class="btn-quiet w-full">Customer declines</button></form>
            </div>
        @endif
    </section>
    @endunless @endcan
</aside>
</div>
@endsection