@extends ('../welcome')


@section ('content')

<div class="card card-info">

    <!-- /.card-header -->
    <div class="card-body">
        <form action="{{ route('units.update', $unit->id) }}" method="post">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" value="{{$unit->name}}" required>
                    </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 <= $unit->building->number_of_floors; $i++)
                                <option value="{{$i}}" {{$unit->floor == $i ? 'selected' : ''}}>{{$i}}</option>
                                @endfor
                        </select>
                    </div>
                </div>
            </div>

            
            <!-- <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" value="{{$unit->garden_percentage}}">
                        </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"
                            value="{{$unit->garden_space}}">
                        </div>
                    </div>
                </div>
            </div>
            <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" value="{{$unit->unit_space}}" required>
                    </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"
                        value="{{$unit->unit_meter_price}}" required>
                    </div>
                </div>
            </div>

            @if($building->type == 'Residential' && $unit->floor == 1 || $building->type == 'Commercial')
            <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" step="0.01" class="form-control"
                        value="{{$unit->garden_price_precentage}}" required>
                    </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" value="{{$unit->garden_meter_price}}" required>
                    </div>
                </div>
            </div>
            @endif
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>BedRooms</label>
                        <input type="number" name="bedrooms" class="form-control" value="{{$unit->bedrooms}}" required>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label>BathRooms</label>
                        <input type="number" name="bathrooms" class="form-control" value="{{$unit->bathrooms}}" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <!-- checkbox -->
                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" name="is_active" value="1" type="checkbox" {{$unit->is_active == 1 ? 'checked' : ''}}>
                            <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 {{$view->id == $unitView->id ? 'selected' : ''}} 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->id == $unitType?->id ? 'selected' : ''}}>{{$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 {{$finishing->id == $unitFinish->id ? 'selected' : ''}} 
                            value="{{$finishing->id}}">{{$finishing->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
           

            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
    <!-- /.card-body -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    let Oldfloor = $('#floor option:selected').text();

    if(floor != 'G'){
        $("#ground").hide();
    }

    $('#floor').on('change', () => {
        let newFloor = $('#floor option:selected').text();
        
        if(newFloor == 'G'){
            $("#ground").show();
        }else{
            $("#ground").hide();
        }
    });

});
</script>

@endsection