@extends('layout.master')
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Thermography
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Thermography</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Block Management Content Here -->
            <div class="box">
                <div class="box-header">
                    <div class="row">
                        <div class="col-sm-8">
                            <h3 class="box-title">{{$thermography->hac_no}}</h3>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-6"></div>
                        <div class="col-sm-6"></div>
                    </div>
                    <div class="box-body" data-select2-id="15" style>
                        <div class="col-12">
                            <div class="col-md-7">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="col-md-4">
                                            <label for="description">HAC No:</label>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="description">{{$thermography->hac_no}}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="col-md-4">
                                            <label for="description">Data Number:</label>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="description">{{$thermography->data_no}}</label>
                                        </div>
                                    </div>
                                </div><br>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="col-md-4">
                                            <label for="description">Date Added:</label>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="description">{{$thermography->date_added}}</label>
                                        </div>
                                    </div>
                                </div><br>
                                <hr>
                                @foreach($image_data as $k=>$img_data)
                                                                        <div class="row">
                                        <div class="col-md-4">
                                            <label for="description">{{ $img_data->date_added }}</label>
                                        </div>
                                    </div><br>
                                    <div class="row">
                                        <div class="col-md-1">
                                        </div>
                                        <div class="col-md-11">
                                            @foreach($img as $key=>$images)
                                                <div class="col-md-4">
                                                    <img class="my-image" style="width: 250px;height: 150px;border-style: solid;border-width: 1px;" src="{{asset('images/'.$thermography->hac_no.'/'.$images)}}" alt="{{$k}}">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div><br>
                                @endforeach
                            </div>
                            <div class="col-md-5">
                                <div class="box box-success" style="max-height: 100% !important;">
                                    <div class="box-header">
                                        <i class="fa fa-comments-o"></i>

                                        <h3 class="box-title">Chat</h3>
                                    </div>
                                    <div class="box-body chat" id="chat-box">
                                        <!-- chat item -->
                                        <div class="item">
                                            <img src="{{asset('dist/img/avatar5.png')}}" alt="user image" class="online">

                                            <p class="message">
                                                <a href="#" class="name">
                                                    <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
                                                    Mike Doe
                                                </a>
                                                I would like to meet you to discuss the latest news about
                                                the arrival of the new theme. They say it is going to be one the
                                                best themes on the market
                                            </p>
                                        </div>
                                        <!-- /.item -->
                                        <!-- chat item -->
                                        <div class="item">
                                            <img src="{{asset('dist/img/avatar5.png')}}" alt="user image" class="offline">

                                            <p class="message">
                                                <a href="#" class="name">
                                                    <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
                                                    Alexander Pierce
                                                </a>
                                                I would like to meet you to discuss the latest news about
                                                the arrival of the new theme. They say it is going to be one the
                                                best themes on the market
                                            </p>
                                        </div>
                                        <!-- /.item -->
                                        <!-- chat item -->
                                        <div class="item">
                                            <img src="{{asset('dist/img/avatar5.png')}}" alt="user image" class="offline">

                                            <p class="message">
                                                <a href="#" class="name">
                                                    <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
                                                    Susan Doe
                                                </a>
                                                I would like to meet you to discuss the latest news about
                                                the arrival of the new theme. They say it is going to be one the
                                                best themes on the market
                                            </p>
                                        </div>
                                        <!-- /.item -->
                                        <!-- chat item -->
                                        <div class="item">
                                            <img src="{{asset('dist/img/avatar5.png')}}" alt="user image" class="offline">

                                            <p class="message">
                                                <a href="#" class="name">
                                                    <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
                                                    Susan Doe
                                                </a>
                                                I would like to meet you to discuss the latest news about
                                                the arrival of the new theme. They say it is going to be one the
                                                best themes on the market
                                            </p>
                                        </div>
                                        <!-- /.item -->
                                    </div>
                                    <!-- /.chat -->
                                    <div class="box-footer">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="Type message...">

                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-success"><i class="fa fa-send"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('scripts')
    <script>
        $('.my-image').zoomify();
    </script>
@endsection