@extends('layouts.app')
@section('title', 'Flat ' . $flat->flat_number)

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('flats.index') }}">Flats</a></li>
                <li class="breadcrumb-item active">{{ $flat->flat_number }}</li>
            </ol>
        </nav>
        <a href="{{ route('flats.edit', $flat) }}" class="btn btn-primary btn-sm">
            <i class="bi bi-pencil me-1"></i>Edit
        </a>
    </div>

    <div class="row g-3">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header"><i class="bi bi-house-door me-2"></i>Flat Details</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Flat Number</small>
                            <span class="fw-bold fs-5">{{ $flat->flat_number }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Status</small>
                            <span class="badge badge-{{ $flat->status }} fs-6">{{ ucfirst($flat->status) }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Type</small>
                            <span>{{ $flat->flat_type }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Project</small>
                            <a
                                href="{{ route('projects.show', $flat->project) }}">{{ $flat->project->project_name ?? '—' }}</a>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Building</small>
                            <span>{{ $flat->building->building_name ?? '—' }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Floor</small>
                            <span>{{ $flat->floor_number ? 'Floor ' . $flat->floor_number : '—' }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Size</small>
                            <span class="fw-semibold">{{ number_format($flat->flat_size, 0) }}
                                {{ strtoupper($flat->size_unit ?? 'sft') }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Price</small>
                            <span class="fw-bold text-primary">{{ env('CURRENCY_SYMBOL', '৳') }}
                                {{ number_format($flat->flat_price, 0) }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Per Unit Price</small>
                            <span>{{ $flat->per_unit_price ? env('CURRENCY_SYMBOL', '৳') . ' ' . number_format($flat->per_unit_price, 0) : '—' }}</span>
                        </div>
                        <div class="col-sm-4">
                            <small class="text-muted d-block">Facing</small>
                            <span class="text-capitalize">{{ str_replace('_', ' ', $flat->facing ?? '—') }}</span>
                        </div>
                        @if($flat->description)
                            <div class="col-12">
                                <small class="text-muted d-block">Description</small>
                                <span>{{ $flat->description }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-header"><i class="bi bi-clock-history me-2"></i>Status Transitions</div>
                <div class="card-body">
                    @php $transitions = $flat->canTransitionTo('available') || $flat->canTransitionTo('booked') || $flat->canTransitionTo('sold') || $flat->canTransitionTo('handover'); @endphp
                    <div class="d-flex flex-column gap-2">
                        @foreach(['available' => 'success', 'booked' => 'warning', 'sold' => 'primary', 'handover' => 'secondary'] as $status => $color)
                            <div class="d-flex align-items-center justify-content-between p-2 rounded-2"
                                style="background: var(--surface-3);">
                                <span class="badge badge-{{ $status }}">{{ ucfirst($status) }}</span>
                                @if($flat->status === $status)
                                    <span class="badge bg-dark">Current</span>
                                @elseif($flat->canTransitionTo($status))
                                    <i class="bi bi-arrow-right-circle text-success"></i>
                                @else
                                    <i class="bi bi-x-circle text-muted" style="opacity: 0.3;"></i>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection