@extends('layouts.app')

@section('content')


<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->
            {{-- @dd($contents) --}}
            <div class="container-xxl flex-grow-1 container-p-y">
                <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Property/</span> Add New</h4>
  
                <!-- Basic Layout -->
                <div class="row">
                  <div class="col-xl">
                    <div class="card mb-4">
                      <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Full Address of Property Offered</h5>
                        {{-- <small class="text-muted float-end">Default label</small> --}}
                      </div>
                      <div class="card-body">
                        <form method="post" action="{{url('/addProperty')}}">
                            @csrf
                          <div class="mb-3 row">
                            <div class="col-md-4">
                                <label class="form-label" for="house_no">House No</label>
                                <input type="text" name="house_no" class="form-control" id="house_no" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="street">Street</label>
                                <input type="text" name="street" class="form-control" id="street" required />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="area">Area</label>
                                <input type="text" name="area" class="form-control" id="area"  />
                            </div>
                          </div>
                          <div class="mb-3 row">
                            <div class="col-md-4">
                                <label class="form-label" for="town">Town</label>
                                <input type="text" name="town" class="form-control" id="town" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="country">Country</label>
                                <select class="form-select" name="country" id="country" aria-label="Select Country" required>
                                  <option value="">--</option>
                                  @foreach ($countries as $country)
                                    <option value="{{$country->country}}" {{$country->country=='United Kingdom'? 'selected' : ''}}>{{$country->country}}</option>    
                                  @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="postcode">Postcode</label>
                                <input type="text" name="postcode" class="form-control" id="postcode" required/>
                            </div>
                          </div>
                          <br/></br/>
                          <h5 class="mb-0">Property / Accommodation Details</h5>
                          <br/>
                          <div class="mb-3 row">
                            <div class="col-md-4">
                                <label class="form-label" for="building_type">Building Type</label>
                                <input type="text" name="building_type" class="form-control" id="building_type" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="number_of_storeys">Number of Storeys</label>
                                <input type="text" name="number_of_storeys" class="form-control" id="number_of_storeys" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="purpose">Purpose</label>
                                <select class="form-select" name="purpose" id="purpose" aria-label="Select Purpose">
                                    <option value="">--</option>
                                    <option value="Built">Built</option>
                                    <option value="Conversion">Conversion</option>
                                </select>
                            </div>
                          </div>
                          <div class="mb-3 row">
                            <div class="col-md-4">
                                <label class="form-label" for="total_unit">Total units of accommodation</label>
                                <input type="number" min="0" name="total_unit" class="form-control" id="total_unit" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="max_service_users">Total number of young people/service user property can accommodate.</label>
                                <input type="number" min="0" name="max_service_users" class="form-control" id="max_service_users" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="bath_no">Number of bath / shower rooms.</label>
                                <input type="number" min="0" name="bath_no" class="form-control" id="bath_no" />
                            </div>
                          </div>
                          <div class="mb-3 row">
                            <div class="col-md-4">
                                <label class="form-label" for="toilet_no">Number of toilets</label>
                                <input type="number" min="0" name="toilet_no" class="form-control" id="toilet_no" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="kitchen_facilities">Details of kitchen facilities.</label>
                                <textarea name="kitchen_facilities" class="form-control" id="kitchen_facilities"></textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="laundry_facilities">Details of laundry facilities.</label>
                                <textarea name="laundry_facilities" class="form-control" id="laundry_facilities"></textarea>
                            </div>
                          </div>
                          <div class="mb-3 row">   
                            <div class="col-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Is CCTV available on the property?</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="cctv_available" id="cctv_availableno" value="No">
                                      <label class="form-check-label" for="cctv_availableno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="cctv_available" id="cctv_availableyes" value="Yes">
                                      <label class="form-check-label" for="cctv_availableyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="living_accommodation">Living accommodation</label>
                                <textarea name="living_accommodation" class="form-control" id="living_accommodation"></textarea>
                            </div>
                            <div class="col-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Is the accommodation equipped with shared facilities intended for use by more than three unrelated individuals, including sleep-in staff?</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="shared_facilities" id="shared_facilitiesno" value="No">
                                      <label class="form-check-label" for="shared_facilitiesno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="shared_facilities" id="shared_facilitiesyes" value="Yes">
                                      <label class="form-check-label" for="shared_facilitiesyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                          </div>
                          <div class="mb-3 row">   
                            <div class="col-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Is the property classified as a House in Multiple Occupation (HMO) or does it require a license?</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="hmo" id="hmono" value="No">
                                      <label class="form-check-label" for="hmono">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="hmo" id="hmoyes" value="Yes">
                                      <label class="form-check-label" for="hmoyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="hmo_approval">Please confirm the availability of an HMO approval/valid license for viewing purposes</label>
                                <textarea name="hmo_approval" class="form-control" id="hmo_approval"></textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="local_authority">Name of Issuing Local Authority</label>
                                <input type="text" name="local_authority" class="form-control" id="local_authority" />
                            </div>
                          </div>
                          <div class="mb-3 row">
                            <div class="col-md-4">
                                <label class="form-label" for="max_shared_people">If the accommodation includes shared facilities, could you please specify the maximum number of Young Persons/Service Users who will be sharing these facilities at any given time?</label>
                                <input type="text" name="max_shared_people" class="form-control" id="max_shared_people" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="under_18_sharer">How many of the Young Persons/Service Users sharing at any given time are under 18 years old?</label>
                                <input type="text" name="under_18_sharer" class="form-control" id="under_18_sharer" />
                            </div>
                            <div class="col-md-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Please confirm whether the local fire service has reviewed and validated your fire risk assessment for House in Multiple Occupation (HMOs)</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="local_fire" id="local_fireno" value="No">
                                      <label class="form-check-label" for="local_fireno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="local_fire" id="local_fireyes" value="Yes">
                                      <label class="form-check-label" for="local_fireyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                          </div>
                          <div class="mb-3 row">   
                            <div class="col-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Please confirm whether the property is fully furnished and equipped.</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="fully_furnished" id="fully_furnishedno" value="No">
                                      <label class="form-check-label" for="fully_furnishedno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="fully_furnished" id="fully_furnishedyes" value="Yes">
                                      <label class="form-check-label" for="fully_furnishedyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Please confirm whether the interior decoration is in good, clean order, and free from damp and condensation.</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="interior_decoration" id="interior_decorationno" value="No">
                                      <label class="form-check-label" for="interior_decorationno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="interior_decoration" id="interior_decorationyes" value="Yes">
                                      <label class="form-check-label" for="interior_decorationyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="col-md">
                                    <small class="form-label d-block">Please confirm whether a general maintenance check will be conducted, at least monthly, and records of these checks will be maintained.</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="general_maintenance" id="general_maintenanceno" value="No">
                                      <label class="form-check-label" for="general_maintenanceno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="general_maintenance" id="general_maintenanceyes" value="Yes">
                                      <label class="form-check-label" for="general_maintenanceyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                          </div>
                          <div class="mb-3 row">
                            <div class="col-md-6">
                                <div class="col-md">
                                    <small class="form-label d-block">Please confirm whether access will be sought to free fire safety advice provided by the Local Fire Authority in relevant areas. If not, please provide details below on how fire safety is delivered to the young person.</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="fire_safety" id="fire_safetyno" value="No">
                                      <label class="form-check-label" for="fire_safetyno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="fire_safety" id="fire_safetyyes" value="Yes">
                                      <label class="form-check-label" for="fire_safetyyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="col-md">
                                    <small class="form-label d-block">Please confirm whether smoke alarms are checked on a monthly basis, in addition to conducting visual inspections of electrical fittings and appliances, and maintaining records of these checks.</small>
                                    <div class="form-check form-check-inline mt-1">
                                      <input class="form-check-input" type="radio" name="smoke_alarm" id="smoke_alarmno" value="No">
                                      <label class="form-check-label" for="smoke_alarmno">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" name="smoke_alarm" id="smoke_alarmyes" value="Yes">
                                      <label class="form-check-label" for="smoke_alarmyes">Yes</label>
                                    </div>
                                </div>
                            </div>
                          </div>
                          <button type="submit" class="btn btn-primary">Proceed</button>
                        </form>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            
            <!-- / Content -->

            <!-- Footer -->
            @include('includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>
@endsection