@extends('backend.layouts.admin_layout')

@section('main_content')
<div class="container-fluid custom_lists" style="margin-top: 2px;">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <!-- /.card-header -->
          <div class="card-body table-responsive p-0">
            <table class="table table-hover text-nowrap">
              <thead class="bg-dark">
                <tr>
                  <th>Order ID</th>
                  <th>Customer Name</th>
                  <th>Customer's Service</th>
                  <th>Customer's Package</th>
                  <th>Remarks</th>
                  <th>Work Status</th>
                  <!-- <th>Form</th>
                  <th>Documents</th>
                  <th>Details</th> -->
                </tr>
              </thead>                          
              <tbody>  
                @foreach($data as $point)                
                    <tr>
                    <td>{{ $point->cali_id }}</td>
                    <td>{{ $point->customer->name}}</td>
                    <td>{{$point->service->service_name}}</td>
                    <td>{{ $point->package->name }}</td>
                    <td> <button data-toggle="modal" onclick="AddRemark(this.id)" data-target="#addRemark" type="button" class="btn btn-info" id="{{$point->cali_id}}">Remarks</button></td>
                    <td>{{ $point->workstatus->customer_description }}</td>
                    <td><!-- <button data-toggle="modal"   data-target="#bd-example-modal-lg{{$point->id}} " type="button" class="btn btn-info" >Application</button>
                        <div class="modal fade " id="bd-example-modal-lg{{$point->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title" id="exampleModalLabel">Add More Information</h5>
                                  <button type="button"  class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                   
                              </div>
                            </div>
                          </div> -->
                    </td>
                    <td><!-- <button data-toggle="modal"   data-target="#bd-example-modal{{$point->id}} " type="button" class="btn btn-info" >Document</button>
                      <div class="modal fade " id="bd-example-modal{{$point->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Add Documents</h5>
                                <button type="button"  class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                                 
                            </div>
                          </div>
                        </div> -->
                  </td>
                  <td><!-- <button data-toggle="modal"   data-target="#Details{{$point->id}} " type="button" class="btn btn-info" >Details</button>
                    <div class="modal fade " id="Details{{$point->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Details</h5>
                            <button type="button"  class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>  
                          <h6 class="modal-title" id="exampleModalLabel"> Employee Details</h6>
                          <div class="modal-body"> 
                            <label for="message-text" class="col-form-label">{{ $point->employee->name ?? "" }} </label><br> 
                            <label for="message-text" class="col-form-label">{{ $point->employee->mobile ?? "" }} </label><br>  
                            <label for="message-text" class="col-form-label">{{ $point->employee->email ?? "" }} </label>                                                       
                          </div> 
                          <h6 class="modal-title" id="exampleModalLabel"> Manager Details</h6>
                          <div class="modal-body"> 
                            <label for="message-text" class="col-form-label">{{ $point->manager->name ?? "" }} </label> <br> 
                            <label for="message-text" class="col-form-label">{{ $point->manager->mobile ?? "" }} </label> <br> 
                            <label for="message-text" class="col-form-label">{{ $point->manager->email ?? "" }} </label>                                                       
                          </div>                       
                        </div>
                      </div>
                    </div> -->
                  </td>    
                </tr>                   
              </tbody>
              @endforeach                  
            </table>
                          
          </div>              
        </div>            
      </div>
    </div>  
</div>  

<!-- Modal -->
  
<div class="modal fade" id="addRemark" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Remark</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div id="old_remark">  
            </div>
            <form method="POST" action="{{ route('Admin.remark') }}" enctype="multipart/form-data"> 
            @csrf         
            <div class="form-group">
              <label for="message-text" class="col-form-label">Remark:</label>
              <textarea name="remark" class="form-control" id="message-text"></textarea>
            </div>
            <div class="form-group">
              <label for="message-text" class="col-form-label">Attachment:</label>
              <input name="attachment" class="form-control" type="file">
            </div>
            <input type="hidden" name="cali_id" id="cali_id">           
        </div>
        <div class="modal-footer">
          <!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
          <button type="submit"  class="btn btn-success">Save Remark</button>
        </div>
    </form>
      </div>
    </div>
  </div>
  <!--here is the popup dialog box starts-->
@endsection