@extends('layouts.app')
@section('title', isset($flat) ? 'Edit Flat' : 'Add Flat')

@section('content')
<div class="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">{{ isset($flat) ? 'Edit' : 'Add' }}</li>
        </ol>
    </nav>
</div>

<div class="row justify-content-center">
    <div class="col-xl-9">
        <div class="card">
            <div class="card-header"><i class="bi bi-house-door me-2"></i>{{ isset($flat) ? 'Edit Flat' : 'New Flat' }}</div>
            <div class="card-body">
                <form action="{{ isset($flat) ? route('flats.update', $flat) : route('flats.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if(isset($flat)) @method('PUT') @endif

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Project <span class="text-danger">*</span></label>
                            <select name="project_id" id="project_id" class="form-select" required>
                                <option value="">Select Project</option>
                                @foreach($projects as $project)
                                <option value="{{ $project->id }}" {{ old('project_id', $flat->project_id ?? '') == $project->id ? 'selected' : '' }}>
                                    {{ $project->project_name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Building <span class="text-danger">*</span></label>
                            <select name="building_id" id="building_id" class="form-select" required>
                                <option value="">Select Building</option>
                                @foreach($buildings as $building)
                                <option value="{{ $building->id }}"
                                    data-project="{{ $building->project_id }}"
                                    data-total-floors="{{ $building->total_floors }}"
                                    {{ old('building_id', $flat->building_id ?? '') == $building->id ? 'selected' : '' }}>
                                    {{ $building->building_name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Flat Number <span class="text-danger">*</span></label>
                            <input type="text" name="flat_number" class="form-control" value="{{ old('flat_number', $flat->flat_number ?? '') }}" required placeholder="e.g. A-301">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Floor</label>
                            <select name="floor_number" id="floor_number" class="form-select">
                                <option value="">Select Floor</option>
                                {{-- Options populated dynamically by JS --}}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Flat Type <span class="text-danger">*</span></label>
                            <select name="flat_type" class="form-select" required>
                                <option value="">Select Type</option>
                                @foreach(['A', 'B', 'C', 'D', 'Duplex', 'Penthouse', 'Studio'] as $t)
                                <option value="{{ $t }}" {{ old('flat_type', $flat->flat_type ?? '') === $t ? 'selected' : '' }}>{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Flat Size <span class="text-danger">*</span></label>
                            <input type="number" name="flat_size" class="form-control" step="0.01" value="{{ old('flat_size', $flat->flat_size ?? '') }}" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Size Unit <span class="text-danger">*</span></label>
                            <select name="size_unit" class="form-select" required>
                                <option value="sft" {{ old('size_unit', $flat->size_unit ?? 'sft') === 'sft' ? 'selected' : '' }}>SFT</option>
                                <option value="sqm" {{ old('size_unit', $flat->size_unit ?? '') === 'sqm' ? 'selected' : '' }}>SQM</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Flat Price ({{ env('CURRENCY_SYMBOL', '৳') }}) <span class="text-danger">*</span></label>
                            <input type="number" name="flat_price" class="form-control" step="0.01" value="{{ old('flat_price', $flat->flat_price ?? '') }}" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Per Unit Price</label>
                            <input type="number" name="per_unit_price" class="form-control" step="0.01" value="{{ old('per_unit_price', $flat->per_unit_price ?? '') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Facing</label>
                            <select name="facing" class="form-select">
                                <option value="">Select Facing</option>
                                @foreach(['north', 'south', 'east', 'west', 'north_east', 'north_west', 'south_east', 'south_west'] as $f)
                                <option value="{{ $f }}" {{ old('facing', $flat->facing ?? '') === $f ? 'selected' : '' }}>
                                    {{ ucwords(str_replace('_', ' ', $f)) }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select" required>
                                @foreach(['available', 'booked', 'sold', 'handover'] as $s)
                                <option value="{{ $s }}" {{ old('status', $flat->status ?? 'available') === $s ? 'selected' : '' }}>
                                    {{ ucfirst($s) }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Image</label>
                            <input type="file" name="flat_image" class="form-control" accept="image/*">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="2">{{ old('description', $flat->description ?? '') }}</textarea>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input type="checkbox" name="is_active" class="form-check-input" id="is_active" value="1"
                                    {{ old('is_active', $flat->is_active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Active</label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <a href="{{ route('flats.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>{{ isset($flat) ? 'Update' : 'Create' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// The saved floor_number (for edit mode pre-selection)
var savedFloor = {{ old('floor_number', $flat->floor_number ?? 'null') }};

/**
 * Populate floor dropdown with 1..totalFloors, pre-selecting savedFloor if matched.
 */
function populateFloors(totalFloors, selectedFloor) {
    var $floor = $('#floor_number');
    var html = '<option value="">Select Floor</option>';
    for (var i = 1; i <= totalFloors; i++) {
        var sel = (selectedFloor && i == selectedFloor) ? ' selected' : '';
        html += '<option value="' + i + '"' + sel + '>Floor ' + i + '</option>';
    }
    $floor.html(html);
}

// ── On Building change: populate floors from selected building's total_floors ──
$('#building_id').on('change', function() {
    var $selected = $(this).find('option:selected');
    var totalFloors = parseInt($selected.data('total-floors')) || 0;

    if (totalFloors > 0) {
        populateFloors(totalFloors, null);
    } else {
        $('#floor_number').html('<option value="">Select Floor</option>');
    }
});

// ── On Project change: reload buildings with total_floors, then reset floor ──
$('#project_id').on('change', function() {
    var projectId = $(this).val();
    var $building = $('#building_id');
    $building.html('<option value="">Loading...</option>');
    $('#floor_number').html('<option value="">Select Floor</option>');

    if (projectId) {
        $.get('{{ route("api.buildings-by-project") }}', { project_id: projectId }, function(data) {
            var html = '<option value="">Select Building</option>';
            data.forEach(function(b) {
                html += '<option value="' + b.id + '" data-total-floors="' + b.total_floors + '">' + b.building_name + '</option>';
            });
            $building.html(html);
        });
    } else {
        $building.html('<option value="">Select Building</option>');
    }
});

// ── On page load (edit mode): populate floors from the currently selected building ──
$(function() {
    var $buildingSel = $('#building_id option:selected');
    if ($buildingSel.val()) {
        var totalFloors = parseInt($buildingSel.data('total-floors')) || 0;
        if (totalFloors > 0) {
            populateFloors(totalFloors, savedFloor);
        }
    }
});
</script>
@endpush