@extends('layouts.app')
@section('content')
<div>
    <div class="mb-4 text-sm text-gray-500">{{ $project?->name }} › Units</div>
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-semibold">Units</h1>
        <div class="flex gap-2">
            <a href="{{ route('units.bulk.create') }}" class="px-4 py-2 rounded-xl bg-amber-500 text-white">Bulk Create</a>
            <a href="{{ route('units.create') }}" class="px-4 py-2 rounded-xl bg-[var(--primary)] text-white">Add Unit</a>
        </div>
    </div>
    <form method="GET" action="{{ route('units.index') }}" class="mb-4 flex flex-wrap items-end gap-2">
        <div>
            <label class="block text-xs text-gray-600">Phase</label>
            <select name="phase_id" class="px-3 py-2 rounded-xl border border-gray-200">
                <option value="">All</option>
                @foreach($phases as $p)
                    <option value="{{ $p->id }}" {{ request('phase_id')==$p->id?'selected':'' }}>{{ $p->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-600">Category</label>
            <select name="unit_category_id" class="px-3 py-2 rounded-xl border border-gray-200">
                <option value="">All</option>
                @foreach($categories as $c)
                    <option value="{{ $c->id }}" {{ request('unit_category_id')==$c->id?'selected':'' }}>{{ $c->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-600">Status</label>
            <select name="status" class="px-3 py-2 rounded-xl border border-gray-200">
                <option value="">All</option>
                @foreach(['available','reserved','booked','transferred','cancelled'] as $s)
                    <option value="{{ $s }}" {{ request('status')==$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-600">Search</label>
            <input name="q" value="{{ request('q') }}" placeholder="Unit number, block, sector" class="px-3 py-2 rounded-xl border border-gray-200">
        </div>
        <div>
            <button class="px-4 py-2 rounded-xl bg-gray-800 text-white">Filter</button>
        </div>
    </form>
    <div class="bg-white rounded-2xl border shadow">
        <table class="min-w-full text-sm">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-2 text-left"><a href="{{ route('units.index', array_merge(request()->query(), ['sort'=>'unit_number','order'=>$order==='asc'?'desc':'asc'])) }}">Unit #</a></th>
                <th class="px-4 py-2 text-left">Phase</th>
                <th class="px-4 py-2 text-left">Category</th>
                <th class="px-4 py-2 text-left">Size</th>
                <th class="px-4 py-2 text-left">Base Price</th>
                <th class="px-4 py-2 text-left">Total Price</th>
                <th class="px-4 py-2 text-left"><a href="{{ route('units.index', array_merge(request()->query(), ['sort'=>'status','order'=>$order==='asc'?'desc':'asc'])) }}">Status</a></th>
                <th class="px-4 py-2 text-left">Actions</th>
            </tr>
            </thead>
            <tbody>
            @forelse($units as $u)
                <tr class="border-t">
                    <td class="px-4 py-2">{{ $u->unit_number }}</td>
                    <td class="px-4 py-2">{{ $u->phase?->name }}</td>
                    <td class="px-4 py-2">{{ $u->unitCategory?->name }}</td>
                    <td class="px-4 py-2">{{ $u->size_sqft }}</td>
                    <td class="px-4 py-2">{{ number_format($u->base_price,2) }}</td>
                    <td class="px-4 py-2">{{ number_format($u->total_price,2) }}</td>
                    @php
                        $map = ['available'=>'green','reserved'=>'yellow','booked'=>'blue','transferred'=>'purple','cancelled'=>'red'];
                        $c = $map[$u->status] ?? 'gray';
                        $cls = match($c){'green'=>'bg-green-100 text-green-700','yellow'=>'bg-yellow-100 text-yellow-700','blue'=>'bg-blue-100 text-blue-700','purple'=>'bg-purple-100 text-purple-700','red'=>'bg-red-100 text-red-700',default=>'bg-gray-100 text-gray-700'};
                    @endphp
                    <td class="px-4 py-2"><span class="text-xs px-2 py-1 rounded {{ $cls }}">{{ ucfirst($u->status) }}</span></td>
                    <td class="px-4 py-2 space-x-2">
                        <a href="{{ route('units.edit', $u) }}" class="text-[var(--primary)]">Edit</a>
                        <form method="POST" action="{{ route('units.destroy', $u) }}" style="display:inline" onsubmit="return confirm('Are you sure?')">
                            @csrf @method('DELETE')
                            <button class="text-red-600">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="px-4 py-8 text-center text-gray-500">No units</td></tr>
            @endforelse
            </tbody>
        </table>
        <div class="p-4">{{ $units->links() }}</div>
    </div>
</div>
@endsection