@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $title }}</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Daftar item order yang membutuhkan pemasangan baliho/outdoor.</p>
            </div>
        </div>

        <form method="GET" class="mt-5 grid gap-3 md:grid-cols-4">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari invoice/customer/file/lokasi..." class="rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white md:col-span-2">
            <select name="status" class="rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                <option value="">Semua Status</option>
                @foreach($statuses as $key => $label)
                    <option value="{{ $key }}" @selected(request('status') === $key)>{{ $label }}</option>
                @endforeach
            </select>
            <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600">Filter</button>
        </form>
    </div>

    @if(session('success'))
        <div class="rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/10 dark:text-success-400">{{ session('success') }}</div>
    @endif

    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-800">
                <thead class="bg-gray-50 dark:bg-gray-800/50">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase text-gray-500">Order</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase text-gray-500">Item</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase text-gray-500">Lokasi</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase text-gray-500">Target</th>
                        <th class="px-5 py-3 text-center text-xs font-semibold uppercase text-gray-500">Foto</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase text-gray-500">Status</th>
                        <th class="px-5 py-3 text-right text-xs font-semibold uppercase text-gray-500">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                    @forelse($installations as $installation)
                        @php
                            $item = $installation->orderItem;
                            $syncedLocation = $installation->location
                                ?: ($item->outdoor_installation_location
                                    ?? $item->installation_location
                                    ?? '-');

                            $syncedTargetDate = $installation->target_date
                                ?: ($item->outdoor_installation_target_date
                                    ?? $item->installation_target_date
                                    ?? null);

                            try {
                                $syncedTargetDisplay = $syncedTargetDate ? \Carbon\Carbon::parse($syncedTargetDate)->format('d/m/Y') : '-';
                            } catch (\Throwable $e) {
                                $syncedTargetDisplay = '-';
                            }
                        @endphp
                        <tr>
                            <td class="px-5 py-4">
                                <div class="font-semibold text-gray-900 dark:text-white">{{ $installation->order->invoice_number ?? '-' }}</div>
                                <div class="text-xs text-gray-500">{{ $installation->order->customer_name ?? '-' }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <div class="font-medium text-gray-800 dark:text-white/90">{{ $installation->orderItem->product_name ?? '-' }}</div>
                                <div class="text-xs text-gray-500">{{ $installation->orderItem->file_name ?? '-' }}</div>
                            </td>
                            <td class="px-5 py-4 text-gray-600 dark:text-gray-300">{{ $syncedLocation ?: '-' }}</td>
                            <td class="px-5 py-4 text-gray-600 dark:text-gray-300">{{ $syncedTargetDisplay }}</td>
                            <td class="px-5 py-4 text-center"><span class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300">{{ $installation->photos_count ?? 0 }} foto</span></td>
                            <td class="px-5 py-4"><span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-300">{{ $installation->status_label }}</span></td>
                            <td class="px-5 py-4 text-right"><a href="{{ route('outdoor-installations.show', $installation) }}" class="inline-flex rounded-lg bg-brand-500 px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">Kelola</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-5 py-10 text-center text-gray-500">Belum ada item pemasangan outdoor.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4">{{ $installations->links() }}</div>
    </div>
</div>
@endsection