@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> Utilities 
                <br/><br/><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBoth" aria-controls="offcanvasBoth">New Utility</button></h4>

            
              
              <!-- Examples -->
              <div class="row mb-5">
                {{-- @dd($departments) --}}
                <div class="card">
                  <h5 class="card-header">Utility Providers</h5>
                  <div class="table-responsive text-nowrap">
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">Name</th>
                          <th scope="col">Provider</th>
                          <th scope="col">Phone Number</th>
                          <th scope="col">Reference</th>
                          <th scope="col">Action</th>
                        </tr>
                      </thead>
                      @if(!empty($utilities) && $utilities->count())
                      {{-- @dd($departments) --}}
                          @php $sn=1;   @endphp
                          @foreach($utilities as $key => $value)
                            <tbody>
                              <tr class="col-md-12 col-lg-12 mb-12">
                                <td>{{$sn}}</td>
                                
                                  
                                <td class="card-title"><a href="#" data-bs-toggle="modal" data-bs-target="#modalScrollable{{$value->id}}">{{$value->name}}</a></td>
                                <td class="card-text">{{$value->provider}}</td>
                                <td class="card-text">{{$value->phone_no}}</td>
                                <td class="card-text">{{$value->reference}}</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('/delutility',$value->id)}}" onclick="return confirm('Are you sure you want to delete this utility?');">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 utility added 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">New Utility Provider</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('/proputility', $property->id)}}" enctype="multipart/form-data">
                        @csrf
                        
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Select Utility</label>
                            <select name="name" id="name" class="form-control form-select" required>
                                <option value=""> ~ Select ~ </option>
                                <option value="Council Tax">Council Tax</option>
                                <option value="TV License">TV License</option>
                                <option value="Electricity">Electricity</option>
                                <option value="Gas">Gas</option>
                                <option value="Water">Water</option>
                                <option value="Landline / Broad Band">Landline / Broad Band</option>
                                <option value="Home Insurance">Home Insurance</option>
                                <option value="Content Insurance">Content  Insurance</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="provider" class="form-label">Provider's Name</label>
                            <input type="text" class="form-control" id="provider" name="provider"/>
                        </div>
                        <div class="mb-3">
                            <label for="phone_no" class="form-label">Provider's Phone Number</label>
                            <input type="text" class="form-control" id="phone_no" name="phone_no"/>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Provider's Email</label>
                            <input type="email" class="form-control" id="email" name="email"/>
                        </div>
                        <div class="mb-3">
                            <label for="reference" class="form-label">Account Reference</label>
                            <input type="text" class="form-control" id="reference" name="reference"/>
                        </div>
                        <div class="mb-3">
                            <label for="payment_frequency" class="form-label">Payment Frequency</label>
                            <select name="payment_frequency" id="payment_frequency" name="payment_frequency" class="form-control form-select" required>
                                <option value=""> ~ Select ~ </option>
                                <option value="Monthly">Monthly</option>
                                <option value="Quarterly">Quarterly</option>
                                <option value="Yearly">Yearly</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="payment_period" class="form-label">Payment Period</label>
                            <input type="number" min="1" max="31" class="form-control" id="payment_period" name="payment_period"/>
                        </div>
                        <div class="mb-3">
                            <label for="payment_mode" class="form-label">Payment Mode</label>
                            <select name="payment_mode" id="payment_mode" name="payment_mode" class="form-control form-select" required>
                                <option value=""> ~ Select ~ </option>
                                <option value="Direct Debit">Direct Debit</option>
                                <option value="Direct Payment">Direct Payment</option>
                                <option value="Standard Order">Standard Order</option>
                            </select>
                        </div>
                        <div class="mb-3">
                          <label for="monthly_payment" class="form-label">Monthly Payment</label>
                          <input type="text" class="form-control" id="monthly_payment" name="monthly_payment" aria-describedby="monthly_payment"/>
                        </div>
                      
                        <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>
            @if(!empty($utilities) && $utilities->count())
                @foreach($utilities as $key => $value)
                    <form method="POST" action="{{url('/proputilityedit', $value->id)}}" enctype="multipart/form-data">
                        <div class="card-body">
                            <div class="row gy-3">
                                <div class="col-lg-4 col-md-3">
                                    <div class="modal fade" id="modalScrollable{{$value->id}}" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-scrollable" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                            <h5 class="modal-title" id="modalScrollableTitle">{{$value->name}}</h5>
                                            <button
                                                type="button"
                                                class="btn-close"
                                                data-bs-dismiss="modal"
                                                aria-label="Close"
                                            ></button>
                                            </div>
                                            <div class="modal-body">
                                                {{-- <form method="POST" action="{{url('/proputility', $property->id)}}" enctype="multipart/form-data"> --}}
                                                    @csrf
                                                    
                                                    
                                                    <div class="mb-3">
                                                        <label for="name" class="form-label">Select Utility</label>
                                                        <select name="name" id="name" class="form-control form-select" required>
                                                            <option value=""> ~ Select ~ </option>
                                                            <option value="Council Tax" {{$value->name=='Council Tax'?'selected':''}}>Council Tax</option>
                                                            <option value="TV License" {{$value->name=='TV License'?'selected':''}}>TV License</option>
                                                            <option value="Electricity" {{$value->name=='Electricity'?'selected':''}}>Electricity</option>
                                                            <option value="Gas" {{$value->name=='Gas'?'selected':''}}>Gas</option>
                                                            <option value="Water" {{$value->name=='Water'?'selected':''}}>Water</option>
                                                            <option value="Landline / Broad Band" {{$value->name=='Landline / Broad Band'?'selected':''}}>Landline / Broad Band</option>
                                                            <option value="Home Insurance" {{$value->name=='Home Insurance'?'selected':''}}>Home Insurance</option>
                                                            <option value="Content Insurance" {{$value->name=='Content Insurance'?'selected':''}}>Content  Insurance</option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="provider" class="form-label">Provider's Name</label>
                                                        <input type="text" class="form-control" id="provider" value="{{$value->provider}}" name="provider"/>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="phone_no" class="form-label">Provider's Phone Number</label>
                                                        <input type="text" class="form-control" value="{{$value->phone_no}}" id="phone_no" name="phone_no"/>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="email" class="form-label">Provider's Email</label>
                                                        <input type="email" class="form-control" value="{{$value->email}}" id="email" name="email"/>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="reference" class="form-label">Account Reference</label>
                                                        <input type="text" class="form-control" value="{{$value->reference}}" id="reference" name="reference"/>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="payment_frequency" class="form-label">Payment Frequency</label>
                                                        <select name="payment_frequency" id="payment_frequency" name="payment_frequency" class="form-control form-select" required>
                                                            <option value=""> ~ Select ~ </option>
                                                            <option value="Monthly" {{$value->payment_frequency=='Monthly'?'selected':''}}>Monthly</option>
                                                            <option value="Quarterly" {{$value->payment_frequency=='Quarterly'?'selected':''}}>Quarterly</option>
                                                            <option value="Yearly" {{$value->payment_frequency=='Yearly'?'selected':''}}>Yearly</option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="payment_period" class="form-label">Payment Period</label>
                                                        <input type="number" min="1" max="31" class="form-control" value="{{$value->payment_period}}" id="payment_period" name="payment_period"/>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="payment_mode" class="form-label">Payment Mode</label>
                                                        <select name="payment_mode" id="payment_mode" name="payment_mode" class="form-control form-select" required>
                                                            <option value=""> ~ Select ~ </option>
                                                            <option value="Direct Debit" {{$value->payment_mode=='Direct Debit'?'selected':''}}>Direct Debit</option>
                                                            <option value="Direct Payment" {{$value->payment_mode=='Direct Payment'?'selected':''}}>Direct Payment</option>
                                                            <option value="Standard Order" {{$value->payment_mode=='Standard Order'?'selected':''}}>Standard Order</option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-3">
                                                    <label for="monthly_payment" class="form-label">Monthly Payment</label>
                                                    <input type="number" class="form-control" id="monthly_payment" value="{{$value->monthly_payment}}" name="monthly_payment" aria-describedby="monthly_payment"/>
                                                    </div>
                                                
                                                    
                                                {{-- </form> --}}
                                            </div>
                                            <div class="modal-footer">
                                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" class="btn btn-primary">Save</button>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                @endforeach
            @endif
            <!-- / 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