@extends('business.layouts.app')

@section('title', 'Talep #' . $offerRequest->id . ' - İşletme Paneli')

@section('content')
    @php
        $colorMap = ['new' => 'blue', 'reviewing' => 'yellow', 'quoted' => 'indigo', 'accepted' => 'green', 'rejected' => 'red', 'completed' => 'gray'];
        $bgMap = [
            'blue'   => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
            'yellow' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
            'indigo' => 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400',
            'green'  => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
            'red'    => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
            'gray'   => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
        ];
        $dotMap = [
            'blue' => 'bg-blue-500', 'yellow' => 'bg-yellow-500', 'indigo' => 'bg-indigo-500',
            'green' => 'bg-green-500', 'red' => 'bg-red-500', 'gray' => 'bg-gray-400',
        ];
        $currentColor = $colorMap[$offerRequest->status] ?? 'gray';
    @endphp
    <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <a href="{{ route('business.offers.index') }}" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                    <i class="fas fa-arrow-left mr-1"></i> Taleplere dön
                </a>
                <h1 class="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
                    Talep #{{ $offerRequest->id }}
                    <span class="ml-2 inline-flex rounded-full px-3 py-1 text-sm font-medium {{ $bgMap[$currentColor] }}">
                    {{ $offerRequest->status_label }}
                </span>
                </h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $offerRequest->created_at->format('d.m.Y H:i') }} tarihinde oluşturuldu</p>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-4 rounded-lg border-l-4 border-green-500 bg-green-50 p-4 dark:bg-green-500/10">
                <p class="text-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
            </div>
        @endif
        @if(session('info'))
            <div class="mb-4 rounded-lg border-l-4 border-blue-500 bg-blue-50 p-4 dark:bg-blue-500/10">
                <p class="text-sm text-blue-700 dark:text-blue-300">{{ session('info') }}</p>
            </div>
        @endif

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            {{-- Left Column: Details --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Customer Info --}}
                <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-user mr-2 text-blue-600"></i>Müşteri Bilgileri
                    </h2>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <span class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Ad Soyad</span>
                            <span class="mt-1 block text-sm font-semibold text-gray-900 dark:text-white">{{ $offerRequest->customer_name }}</span>
                        </div>
                        <div>
                            <span class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Telefon</span>
                            <span class="mt-1 block text-sm text-gray-900 dark:text-white">
                            <a href="tel:{{ $offerRequest->customer_phone }}" class="text-blue-600 hover:underline dark:text-blue-400">{{ $offerRequest->customer_phone }}</a>
                        </span>
                        </div>
                        @if($offerRequest->customer_email)
                            <div>
                                <span class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">E-posta</span>
                                <span class="mt-1 block text-sm text-gray-900 dark:text-white">
                                <a href="mailto:{{ $offerRequest->customer_email }}" class="text-blue-600 hover:underline dark:text-blue-400">{{ $offerRequest->customer_email }}</a>
                            </span>
                            </div>
                        @endif
                        @if($offerRequest->service_date)
                            <div>
                                <span class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Talep Edilen Tarih</span>
                                <span class="mt-1 block text-sm text-gray-900 dark:text-white">{{ $offerRequest->service_date->format('d.m.Y') }}</span>
                            </div>
                        @endif
                    </div>
                    @if($offerRequest->message)
                        <div class="mt-4 rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50">
                            <span class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase mb-1">Müşteri Mesajı</span>
                            <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line">{{ $offerRequest->message }}</p>
                        </div>
                    @endif
                </div>

                {{-- Related Item --}}
                <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-box mr-2 text-indigo-600"></i>İlgili Ürün / Hizmet
                    </h2>
                    @if($offerRequest->requestable)
                        <div class="flex items-start gap-4">
                            @if($offerRequest->requestable_type === 'App\\Models\\Product')
                                @php $img = $offerRequest->requestable->galleryMedia->first(); @endphp
                                @if($img)
                                    <img src="{{ asset('storage/' . $img->file_path) }}" alt="" class="h-20 w-20 rounded-lg object-cover border border-gray-200 dark:border-gray-700">
                                @else
                                    <div class="flex h-20 w-20 items-center justify-center rounded-lg bg-gray-100 text-gray-400 dark:bg-gray-700">
                                        <i class="fas fa-image text-2xl"></i>
                                    </div>
                                @endif
                            @endif
                            <div>
                                <div class="text-sm font-bold text-gray-900 dark:text-white">{{ $offerRequest->requestable->name ?? '—' }}</div>
                                <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    @if($offerRequest->requestable_type === 'App\\Models\\Product')
                                        Ürün
                                    @else
                                        {{ class_basename($offerRequest->requestable_type) }}
                                    @endif
                                </div>
                                @if($offerRequest->requestable->price_from !== null)
                                    <div class="mt-1 text-sm font-semibold text-green-600 dark:text-green-400">
                                        {{ number_format($offerRequest->requestable->price_from, 0, ',', '.') }} TL
                                    </div>
                                @endif
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-gray-500 dark:text-gray-400">İlgili kayıt silinmiş.</p>
                    @endif
                </div>

                {{-- Activity Log --}}
                <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-history mr-2 text-gray-500"></i>İşlem Geçmişi
                    </h2>
                    @if($offerRequest->logs->isEmpty())
                        <p class="text-sm text-gray-500 dark:text-gray-400">Henüz kayıt yok.</p>
                    @else
                        <div class="relative">
                            <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700"></div>
                            <div class="space-y-6">
                                @foreach($offerRequest->logs as $log)
                                    @php
                                        $logColor = $colorMap[$log->to_status] ?? 'gray';
                                        $isStatusChange = $log->from_status !== $log->to_status;
                                    @endphp
                                    <div class="relative flex gap-4 pl-10">
                                        <div class="absolute left-2.5 top-1 h-3 w-3 rounded-full {{ $dotMap[$logColor] }} ring-2 ring-white dark:ring-gray-900"></div>
                                        <div class="flex-1 min-w-0">
                                            <div class="flex flex-wrap items-center gap-2">
                                                @if($isStatusChange)
                                                    <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                    Durum değiştirildi:
                                                </span>
                                                    @if($log->from_status)
                                                        <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $bgMap[$colorMap[$log->from_status] ?? 'gray'] }}">{{ $log->from_status_label }}</span>
                                                        <i class="fas fa-arrow-right text-xs text-gray-400"></i>
                                                    @endif
                                                    <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $bgMap[$logColor] }}">{{ $log->to_status_label }}</span>
                                                @else
                                                    <span class="text-sm font-medium text-gray-900 dark:text-white">Not eklendi</span>
                                                    <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $bgMap[$logColor] }}">{{ $log->to_status_label }}</span>
                                                @endif
                                            </div>
                                            @if($log->note)
                                                <div class="mt-1 rounded-lg bg-gray-50 p-3 text-sm text-gray-700 dark:bg-gray-800/50 dark:text-gray-300 whitespace-pre-line">{{ $log->note }}</div>
                                            @endif
                                            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                {{ $log->created_at->format('d.m.Y H:i') }}
                                                @if($log->causer_type === 'business')
                                                    · İşletme
                                                @elseif($log->causer_type === 'system')
                                                    · Sistem
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Right Column: Actions --}}
            <div class="space-y-6">
                {{-- Status Change --}}
                <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-exchange-alt mr-2 text-blue-600"></i>Durum Güncelle
                    </h2>
                    <form action="{{ route('business.offers.update-status', $offerRequest) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="space-y-4">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Yeni durum</label>
                                <select name="status" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20">
                                    @foreach(\App\Models\OfferRequest::STATUSES as $key => $label)
                                        <option value="{{ $key }}" {{ $offerRequest->status === $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Not (isteğe bağlı)</label>
                                <textarea name="note" rows="3" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" placeholder="Durum değişikliği ile birlikte not bırakın..."></textarea>
                            </div>
                            <button type="submit" class="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700 transition">
                                <i class="fas fa-save mr-1"></i> Durumu Güncelle
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Quick Note --}}
                <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-sticky-note mr-2 text-yellow-500"></i>Hızlı Not Ekle
                    </h2>
                    <form action="{{ route('business.offers.add-note', $offerRequest) }}" method="POST">
                        @csrf
                        <div class="space-y-4">
                            <div>
                                <textarea name="note" rows="3" required class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" placeholder="Not yazın..."></textarea>
                            </div>
                            <button type="submit" class="w-full rounded-lg bg-gray-100 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition">
                                <i class="fas fa-plus mr-1"></i> Not Ekle
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Quick Actions --}}
                <div class="rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
                    <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">
                        <i class="fas fa-bolt mr-2 text-yellow-500"></i>Hızlı İşlemler
                    </h2>
                    <div class="space-y-2">
                        <a href="tel:{{ $offerRequest->customer_phone }}" class="flex w-full items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition">
                            <i class="fas fa-phone text-green-600"></i> Müşteriyi Ara
                        </a>
                        @if($offerRequest->customer_email)
                            <a href="mailto:{{ $offerRequest->customer_email }}" class="flex w-full items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition">
                                <i class="fas fa-envelope text-blue-600"></i> E-posta Gönder
                            </a>
                        @endif
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $offerRequest->customer_phone) }}" target="_blank" class="flex w-full items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition">
                            <i class="fab fa-whatsapp text-green-500"></i> WhatsApp'tan Yaz
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection