@extends ('../welcome')


@section ('content')

<div class="card card-info">
    <div class="card-body">
        <form action="{{ route('units.store') }}" method="post">
            @csrf
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Unit Name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>floor</label>
                        <select name='floor' id="floor" class="form-control select2" style="width: 100%;">
                            <option value="0">G</option>
                            @for($i=1; $i <= $building->number_of_floors; $i++)
                                <option value="{{$i}}">{{$i}}</option>
                                @endfor
                        </select>
                    </div>
                </div>
            </div>
            @if($building->type != 'Administrative')
            <!-- <h5 style="color:red; font-weight:bold;font-style: italic;">Garden and Out-Areas Only Available For Floor 1</h5> -->
            <div id="ground">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>{{$building->type == 'Residential'? 'Garden Price Pecentage %' : 'Out-area Price Pecentage %'}}</label>
                            <input type="number" step="0.01" name="garden_percentage" min="0" max="100"
                                class="form-control" placeholder="Enter Pecentage %">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label>{{$building->type == 'Residential'? 'Garden Space' : 'Out-area Space '}}</label>
                            <input type="number" step="0.01" name="garden_space" class="form-control"
                                placeholder="Garden Meter Price">
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>Unit Space</label>
                        <input type="number" step="0.01" name="unit_space" class="form-control"
                            placeholder="Unit Space">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>Unit Meter Price</label>
                        <input type="number" step="0.01" name="unit_meter_price" class="form-control"
                            placeholder="Unit Meter Price">
                    </div>
                </div>
            </div>


            @if($building->type == 'Residential' || $building->type == 'Multiple')
            @if($building->type == 'Multiple')
            <label style="color:red; font-weight:bold;font-style: italic;">Bed/Bath Rooms Will be saved only if the unit
                type Counted as Residential</label>
            @endif
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>BedRooms</label>
                        <input type="number" name="bedrooms" class="form-control" placeholder="BedRooms">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>BathRooms</label>
                        <input type="number" name="bathrooms" class="form-control" placeholder="BathRooms">
                    </div>
                </div>
            </div>
            @endif

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" name="is_active" value="1" type="checkbox">
                            <label class="form-check-label">Active</label>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>View</label>
                        <select name='view' class="form-control select2" style="width: 100%;">
                            @foreach($views as $view)
                            <option value="{{$view->id}}">{{$view->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Type</label>
                        <select name='type' class="form-control select2" style="width: 100%;">
                            @foreach($types as $type)
                            <option value="{{$type->id}}">{{$type->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Finishing</label>
                        <select name='finishing' class="form-control select2" style="width: 100%;">
                            @foreach($finishings as $finishing)
                            <option value="{{$finishing->id}}">{{$finishing->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <input type="hidden" name="building_id" value="{{$_GET['id']}}">

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
        </form>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#floor').on('change', () => {
        // $("#ground").animate({
        //     height: 'toggle'
        // });
        let floor = $('#floor option:selected').text();
        if(floor == 'G'){
            $("#ground").show();
        }else{
            $("#ground").hide();
        }
    });

});
</script>
@endsection