@foreach($data as $key => $item)
    <div class="col-md-12">
        @if($key==0)
        <h4 class="text-center mb-4">ইমারতের বিবরণ</h4>
        @endif
        <h5 class="text-center">{{ $item }}</h5>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="form-group row mb-4">
                    <label for="room" class="form-label">রুম<span class="required">*</span></label>
                    <div class="input-group">
                        <input class="form-control" name="home_type[{{$key}}][building_type]" value="{{ $item }}" type="hidden" required>
                        <input class="form-control DisableSpace room{{ $key }}" name="home_type[{{$key}}][room]" type="number" min="1" id="room{{ $key }}" required>
                    </div>
                    <div class="invalid-feedback">
                        রুম
                    </div>
                    <span class="text-danger">{{ $errors->has('room') ? $errors->first('room') : ' ' }}</span>
                </div>
                <div class="form-group row mb-4">
                    <label for="door{{ $key }}" class="form-label">দরজা</label>
                    <input class="form-control" name="home_type[{{$key}}][door]" type="text" id="door{{ $key }}">
                </div>
                <div class="form-group row mb-4">
                    <label for="window{{ $key }}" class="form-label">জানলা</label>
                    <input class="form-control" name="home_type[{{$key}}][window]" type="text" id="window{{ $key }}">
                </div>
                <div class="form-group row mb-4">
                    <label for="tiboel{{$key }}" class="form-label">টিবোয়েল / পাম্প সংখ্যা</label>
                    <input class="form-control" name="home_type[{{$key}}][tiboel]" type="text" id="tiboel{{ $key }}">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="form-group row mb-4">
                    <label for="length{{ $key }}" class="form-label">দৈর্ঘ্য (ফুট)</label>
                    <input class="form-control length{{ $key }}" name="home_type[{{$key}}][length]" type="number" min="1" id="length{{ $key }}">
                </div>
                <div class="form-group row mb-4">
                    <label for="width{{ $key }}" class="form-label">প্রস্থ (ফুট)</label>
                    <input class="form-control width{{ $key }}" name="home_type[{{$key}}][width]" type="number" min="1" id="width{{ $key }}">
                </div>
                <div class="form-group row mb-4">
                    <label for="square{{ $key }}" class="form-label">বর্গফুট</label>
                    <input class="form-control square{{ $key }}" name="home_type[{{$key}}][square]" type="number" min="1" id="square{{ $key }}" readonly>
                </div>
                <div class="form-group row mb-4">
                    <label for="toilet{{ $key }}" class="form-label">পায়খানা সংখ্যা</label>
                    <input class="form-control" name="home_type[{{$key}}][toilet]" type="number" min="0" id="toilet{{ $key }}">
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".DisableSpace").on({
                keydown: function(event) {
                    if (event.which === 32)
                        return false;
                },
                change: function() {
                    this.value = this.value.replace(/\s/g, "");
                }
            });
            $('.length{{ $key }}, .width{{ $key }}').on("change click keyup blur", function() {
                var length = $('.length{{ $key }}').val();
                var width = $('.width{{ $key }}').val();
                var square = length * width;
                $('.square{{ $key }}').val(square);
            });
        });
    </script>
@endforeach