@extends('layouts.app')


@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Show Complaint</h2>
                            <br>
                           
                                                                        @if($cphoto)
                                            <ul class="list-inline">
                                                <li data-toggle="modal" data-target="#myModal">
                                                    <a href="#myGallery" data-slide-to="0">
                                                        View Image
                                                    </a>
                                                </li>
                                            </ul>
                                            <div class="modal fade" id="myModal">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        title="Close"><span
                                                                        class="glyphicon glyphicon-remove"></span></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <!--CAROUSEL CODE GOES HERE-->
                                                                <!--begin carousel-->
                                                                <div id="myGallery" class="carousel slide"
                                                                    data-interval="false">
                                                                    <div class="carousel-inner">
                                                                        @if($cphoto)
                                                                            @foreach($cphoto as $key=>$image)
                                                                                <div
                                                                                    class="item active">
                                                                                    <img class="center"
                                                                                         style="width:100%"
                                                                                         src="{{ asset('/assets/uploads/'.$image) }}"
                                                                                         alt="item0">
                                                                                </div>
                                                                            @endforeach
                                                                        @endif
                                                                    <!--end carousel-inner-->
                                                                    </div>
                                                                    <!--Begin Previous and Next buttons-->
                                                                    <a class="left carousel-control"
                                                                       href="#myGallery" role="button"
                                                                       data-slide="prev"> <span
                                                                            class="glyphicon glyphicon-chevron-left"></span></a>
                                                                    <a class="right carousel-control"
                                                                       href="#myGallery" role="button"
                                                                       data-slide="next"> <span
                                                                       class="glyphicon glyphicon-chevron-right"></span></a>
                                             <!--end carousel--></div>
                                        <!--end modal-body--></div>
                                <!--end modal-content--></div>
                            <!--end modal-dialoge--></div>
                                                    <!--end myModal-->>
                                                </div>
                                            @endif                
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Id:</strong>
                                        {{ $complaint->id }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Title:</strong>
                                        {{ $complaint->title }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Description:</strong>
                                        {{ $complaint->description }}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Category:</strong>
                                        {{ $complaint->category->name }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4 hide">
                                    <div class="form-group">
                                        <strong>Police station:</strong>
                                        {{ $complaint->police_station }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4 hide">
                                    <div class="form-group">
                                        <strong>Teshil:</strong>
                                        {{ $complaint->tehsil }}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-md-4 hide">
                                    <div class="form-group">
                                        <strong>District:</strong>
                                        {{ $complaint->district }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4 hide">
                                    <div class="form-group">
                                        <strong>Union Council:</strong>
                                        {{ $complaint->union_council }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Priority:</strong>
                                        {{ $complaint->priority }}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Status:</strong>
                                        {{ $complaint->status->name }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Sub Admin:</strong>
                                        {{ $complaint->subadmin->name }}
                                    </div>
                                </div>

                                <div class="col-xs-6 col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <strong>Complaint by:</strong>
                                        {{ $complaint->user->name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <table id="datatable1" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Response</th>
                                    <th>Evidence</th>
                                    <th>Response By</th>
                                    <th>Created at</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($complaint->response as $key => $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td>{{ $user->response }}</td>
                                       
                                        <td>
                                        
                                       
                                                                           
                                        
                                       
                                       @if($ephoto)
                                          
                                          <ul class="list-inline">
                                              <li data-toggle="modal" data-target="#evModal">
                                                  <a href="#myGalleryEV{{$user->id}}" data-slide-to="0">
                                                      View Image
                                                  </a>
                                              </li>
                                          </ul>
                                          <div class="modal fade" id="evModal">
                                                  <div class="modal-dialog">
                                                      <div class="modal-content">
                                                          <div class="modal-header">
                                                              
                                                              <button type="button" class="close" data-dismiss="modal"
                                                                      title="Close"><span
                                                                      class="glyphicon glyphicon-remove"></span></button>
                                                          </div>
                                                          <div class="modal-body">
                                                              <!--CAROUSEL CODE GOES HERE-->
                                                              <!--begin carousel-->
                                                              <div id="myGalleryEV{{$user->id}}" class="carousel slide"
                                                                  data-interval="false">
                                                                  <div class="carousel-inner">
                                                                    
                                                                          @foreach($ephoto as $key=>$valimg)
                                                                             
                                                                              <div class="item active">
                                                                                  <img class="center"
                                                                                       style="width:100%"
                                                                                       src="{{ asset('/assets/uploads/'.$valimg) }}"
                                                                                       alt="item0">
                                                                              </div>
                                                                          @endforeach
                                                                   
                                                                  <!--end carousel-inner-->
                                                                  </div>
                                                                  <!--Begin Previous and Next buttons-->
                                                                  <a class="left carousel-control"
                                                                     href="#myGalleryev{{$user->id}}" role="button"
                                                                     data-slide="prev"> <span
                                                                          class="glyphicon glyphicon-chevron-left"></span></a>
                                                                  <a class="right carousel-control"
                                                                     href="#myGalleryev{{$user->id}}" role="button"
                                                                     data-slide="next"> <span
                                                                     class="glyphicon glyphicon-chevron-right"></span></a>
                                           <!--end carousel--></div>
                                      <!--end modal-body--></div>
                              <!--end modal-content--></div>
                          <!--end modal-dialoge--></div>
                                                  <!--end myModal-->>
                                              </div>
                                          @endif    
                                        </td>
                                        <td>{{ $user->user->name }} ({{ $user->user->role }})</td>
                                        <td>{{ date("l | dS F, Y g.i A",strtotime($user->create)) }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection