@extends('layouts.app')
@section('title', 'Flats')

@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 active">Flats</li>
            </ol>
        </nav>
        <a href="{{ route('flats.create') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>Add Flat
        </a>
    </div>

    <!-- Filters -->
    <div class="card mb-3">
        <div class="card-body py-2">
            <form method="GET" class="row g-2 align-items-end">
                <div class="col-auto">
                    <select name="project_id" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">All Projects</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>
                                {{ $project->project_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">All Status</option>
                        @foreach(['available', 'booked', 'sold', 'handover'] as $s)
                            <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                        @endforeach
                    </select>
                </div>
                @if(request()->hasAny(['project_id', 'status', 'flat_type']))
                    <div class="col-auto">
                        <a href="{{ route('flats.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-x-lg me-1"></i>Clear
                        </a>
                    </div>
                @endif
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-0">
            @if($flats->count())
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Flat No.</th>
                                <th>Project</th>
                                <th>Building</th>
                                <th>Type</th>
                                <th>Size</th>
                                <th>Price ({{ env('CURRENCY_SYMBOL', '৳') }})</th>
                                <th>Facing</th>
                                <th>Status</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($flats as $flat)
                                <tr>
                                    <td class="text-muted">{{ $loop->iteration + ($flats->currentPage() - 1) * $flats->perPage() }}
                                    </td>
                                    <td class="fw-semibold">
                                        <a href="{{ route('flats.show', $flat) }}"
                                            class="text-decoration-none">{{ $flat->flat_number }}</a>
                                    </td>
                                    <td class="text-muted">{{ $flat->project->project_name ?? '—' }}</td>
                                    <td class="text-muted">{{ $flat->building->building_name ?? '—' }}</td>
                                    <td>{{ $flat->flat_type }}</td>
                                    <td>{{ number_format($flat->flat_size, 0) }} {{ strtoupper($flat->size_unit ?? 'sft') }}</td>
                                    <td class="fw-semibold">{{ number_format($flat->flat_price, 0) }}</td>
                                    <td class="text-muted text-capitalize">{{ str_replace('_', ' ', $flat->facing ?? '—') }}</td>
                                    <td><span class="badge badge-{{ $flat->status }}">{{ ucfirst($flat->status) }}</span></td>
                                    <td class="text-end">
                                        <a href="{{ route('flats.show', $flat) }}" class="btn btn-outline-secondary btn-xs"><i
                                                class="bi bi-eye"></i></a>
                                        <a href="{{ route('flats.edit', $flat) }}" class="btn btn-outline-secondary btn-xs"><i
                                                class="bi bi-pencil"></i></a>
                                        <form action="{{ route('flats.destroy', $flat) }}" method="POST" class="d-inline"
                                            onsubmit="return confirm('Delete?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-outline-danger btn-xs"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="px-3 py-3">{{ $flats->appends(request()->query())->links() }}</div>
            @else
                <div class="empty-state">
                    <i class="bi bi-house-door"></i>
                    <h5>No Flats Yet</h5>
                    <p>Add flats to your project buildings.</p>
                </div>
            @endif
        </div>
    </div>
@endsection