@extends('layouts.app')

@section('content')


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

      @include('includes.propertysidebar')
      <!-- / 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->house_no}} {{$property->street}} /</span> Occupants 
                <br/><br/><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBoth" aria-controls="offcanvasBoth">Assign New Occupant</button></h4>

            
              
              <!-- Examples -->
              <div class="row mb-5">
                {{-- @dd($departments) --}}
                <div class="card">
                  <h5 class="card-header">Service Users</h5>
                  <div class="table-responsive text-nowrap">
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">Full Name</th>
                          <th scope="col">Age</th>
                          <th scope="col">Date Moved In</th>
                          <th scope="col">Action</th>
                        </tr>
                      </thead>
                      @if(!empty($occupants) && $occupants->count())
                      {{-- @dd($departments) --}}
                          @php $sn=1;   @endphp
                          @foreach($occupants as $key => $value)
                            <tbody>
                              <tr class="col-md-12 col-lg-12 mb-12">
                                <td>{{$sn}}</td>
                                <td class="card-title"><a href="#">{{$value->title}}</a></td>
                                <td class="card-text">{{$value->description}}</td>
                                <td class="card-text">{{$value->date_created}}</td>
                                <td>
                                    <div class="card-body flex-grow-1">
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            Actions
                                            </button>
                                            <ul class="dropdown-menu" style="">
                                            <li><a class="dropdown-item" href="{{ url('/propertycompliance/') }}/{{$value->file}}" target="_blank">Download</a></li>
                                            <li><a class="dropdown-item" href="{{url('/delcomp',$value->id)}}" onclick="return confirm('Are you sure you want to delete this document?');">Delete</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                                  
                              </tr>
                            </tbody>
                            @php $sn++;   @endphp
                          @endforeach
                      @else
                        <tbody>
                          <tr class="col-md-12 col-lg-12 mb-12">
                            <td class="card-title" colspan="3">No service users Yet</td>
                                
                          </tr>
                        </tbody>
                      @endif
                    </table>
                  </div>
                </div>
              </div>

              <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasBoth" aria-labelledby="offcanvasBothLabel" aria-modal="true" role="dialog" style="visibility: visible;">
                <div class="offcanvas-header">
                  <h5 id="offcanvasBothLabel" class="offcanvas-title">Assign New Service User</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                    <form method="POST" action="{{url('/propcompliance', $property->id)}}" enctype="multipart/form-data">
                        @csrf
                        
                        
                        <div class="mb-3">
                            <label for="alert" class="form-label">Service User</label>
                            <select name="alert" id="alert" name="alert" class="form-control form-select" required>
                                <option value=""> ~ Select ~ </option>
                            </select>
                        </div>
                        <div class="mb-3">
                          <label for="description" class="form-label">Description</label>
                          <textarea class="form-control" id="description" name="description" aria-describedby="description"></textarea>
                      </div><br/><br/>
                        <button type="submit" class="btn btn-primary mb-2 d-grid w-100">Save</button>
                    </form>
                  
                  <button type="button" class="btn btn-outline-secondary d-grid w-100" data-bs-dismiss="offcanvas"> Cancel</button>
                </div>
              </div>
              <!-- Examples -->

             
              <!--/ Card layout -->
            </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