@extends('layouts.app')
@section('title', 'Complaint')


@section('content')

    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>

            @if($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">
                    </button>
                    <strong>{{$message}}</strong>
                </div>
            @endif
            @if($message = Session::get('delete'))
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close" data-dismiss="alert">
                    </button>
                    <strong>{{$message}}</strong>
                </div>
            @endif

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h3>Petition Management</h3>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <table id="datatable1" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Category</th>
                                    <th>Police station</th>
                                    <th>Tehsil</th>
                                    <th>District</th>
                                    <th>Union council</th>
                                    <th>Image</th>
                                    <th>Status</th>
                                    <th>Petition by</th>
                                    <th>Submission date</th>
                                    <th style="width: 250px">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($data as $key => $user)
                                    <tr>
                                        <td>{{ $user->id }}</td>
                                        <td>{{ $user->title }}</td>
                                        <td>{{ $user->description }}</td>
                                        <td>{{ $user->category->name }}</td>
                                        <td>{{ $user->police_station }}</td>
                                        <td>{{ $user->tehsil }}</td>
                                        <td>{{ $user->district }}</td>
                                        <td>{{ $user->union_council }}</td>
                                        <td>
                                                                                        @if($photo)
                                            <ul class="list-inline">
                                                <li data-toggle="modal" data-target="#myModal{{$user->id}}">
                                                    <a href="#myGallery{{$user->id}}" data-slide-to="0">
                                                        View Image
                                                    </a>
                                                </li>
                                            </ul>
                                            <div class="modal fade" id="myModal{{$user->id}}">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <div class="pull-left">{{$user->title}}</div>
                                                                <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{{$user->id}}" class="carousel slide"
                                                                    data-interval="false">
                                                                    <div class="carousel-inner">
                                                                        @if($photo)
                                                                            @foreach($photo as $key=>$image)
                                                                                <div
                                                                                    class="item active">
                                                                                    <img class="center"
                                                                                         style="height:300px;width:100%"
                                                                                         src="{{ asset('/images/'.$image) }}"
                                                                                         alt="item0">
                                                                                </div>
                                                                            @endforeach
                                                                        @endif
                                                                    <!--end carousel-inner-->
                                                                    </div>
                                                                    <!--Begin Previous and Next buttons-->
                                                                    <a class="left carousel-control"
                                                                       href="#myGallery{{$user->id}}" role="button"
                                                                       data-slide="prev"> <span
                                                                            class="glyphicon glyphicon-chevron-left"></span></a>
                                                                    <a class="right carousel-control"
                                                                       href="#myGallery{{$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->status->name }}</td>
                                        <td>{{ $user->user->name }}</td>
                                        <td>{{ $user->create }}</td>
                                        <td>
                                            <a class="btn btn-info"
                                               href="{{ route('petition.show',$user->id) }}">Show</a>
                                            @can('delete')
                                                {!! Form::open(['method' => 'DELETE','route' => ['petition.destroy', $user->id],'style'=>'display:inline']) !!}
                                                {!! Form::submit('Reject petition', ['class' => 'btn btn-danger']) !!}
                                                {!! Form::close() !!}
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            $('#datatable1').DataTable({
                "order": [[0, "desc"]]
            });
        });
    </script>
@endsection