@extends('layouts.app')

@section('title')
    Visit: {{ $visit->visit_id }}
@endsection

@section('description')
@endsection

@section('breadcrumb')
    <li><a href="/visits?user={{ auth()->user()->id }}">All Visits</a></li>
    <li class="active">{{ $visit->visit_id }}</a></li>
@endsection

@section('styles')
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
@endsection

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">

    <!-- TO DO List -->
    <div class="col-lg-8 col-xs-12">
        <div class="box box-danger">
            <!-- /.box-header -->
            <div class="box-body no-padding">
                <table class="table table-condensed">
                    <tr>
                        <td>User Name</td>
                        <td><img src="/storage/{{ $visit->user->avatar }}" width=15 height=15 />&nbsp; {{ $visit->user->name }}</td>
                    </tr>
                    <tr>
                        <td>Date / Time</td>
                        <td>{{ $visit->created_at->format('d F Y - h:i') }} <span style="color: grey">({{ $visit->created_at->diffForHumans() }})</span></td>
                    </tr>
                    <tr>
                        <td>Visit ID</td>
                        <td>{{ $visit->visit_id }}</td>
                    </tr>
                    <tr>
                        <td>Visit Type</td>
                        <td>
                        @if($visit->type == 'installation')
                        <span class="label label-sm label-success">{{ $visit->type }}</span>
                        @elseif($visit->type == 'maintenance')
                            <span class="label label-sm label-warning">{{ $visit->type }}</span>
                        @elseif($visit->type == 'dismantle')
                            <span class="label label-sm label-default">{{ $visit->type }}</span>
                        @elseif($visit->type == 'survey')
                            <span class="label label-sm label-primary">{{ $visit->type }}</span>
                        @else
                            <span class="label label-sm label-default">other</span>
                        @endif
                        </td>
                    </tr>
                    <tr>
                        <td>Contact</td>
                        <td><a href="{{ $visit->contact->path() }}">{{ $visit->contact->name }}</a></td>
                    </tr>
                    <tr>
                        <td>Comment</td>
                        <td>{{ $visit->comment }}</td>
                    </tr>
                    <tr>
                        <td>Related Ticket</td>
                        <td>
                        @if($visit->ticket()->exists())
                            <a href="/tickets/{{ $visit->ticket->ticket_id }}">{{ $visit->ticket->ticket_id }} - {{ $visit->ticket->node->contact->name }}</a> &nbsp;
                            @if( $visit->ticket->severity == 'critical')
                                <span class="label label-danger">Critical</span>
                            @elseif( $visit->ticket->severity == 'urgent')
                                <span class="label label-warning">Urgent</span>
                            @elseif( $visit->ticket->severity == 'important')
                                <span class="label label-primary">Important</span>
                            @elseif( $visit->ticket->severity == 'monitor')
                                <span class="label label-success">Monitor</span>
                            @else
                                <span class="label label-default">Informational</span>
                            @endif
                            &nbsp;
                            @if( $visit->ticket->status == 'open')
                            <span class="label label-danger">Open</span>
                            @elseif( $visit->ticket->status == 'progress')
                            <span class="label label-warning">Progress</span>
                            @elseif( $visit->ticket->status == 'resolved')
                            <span class="label label-success">Resolved</span>
                            @elseif( $visit->ticket->status == 'closed')
                            <span class="label label-default">Closed</span>
                            @else
                            <span class="label label-danger">Reopen</span>
                            @endif
                        @else
                            -
                        @endif
                        </td>
                    </tr>
                    <tr>
                        <td>Location</td>
                        <td><div id="mapid" style="height: 250px; margin-top:10px;"></div></td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- /.box -->
        <div class="box box-danger">
            <div class="box-header">
                <h3 class="box-title">Gallery</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body no-padding">
            @foreach($visit->files as $file)
                <div class="gallery">
                    <img src="{{ Storage::disk('local')->url($file->path) }}" width="100" height="100"/>
                    <div class="desc">{{ substr(basename($file->path), 0, 10) }}.. by {{ $file->owner->name }}</div>
                </div>
            @endforeach
            </div>
        </div>
        <!-- /.box -->
    </div>

    <!-- TO DO List -->
    <div class="col-lg-4 col-xs-12">
        <div class="box box-danger">
            <div class="box-header">
                <h3 class="box-title">Action</h3>
            </div>
            <!-- /.box-header -->
            <form role="form" action="/visits/{{ $visit->visit_id }}/ticket" method="POST">
            {{ csrf_field() }}
            <!-- /.box-header -->
            <div class="box-body padding">
                <div class="form-group row">
                    <label for="status" class="col-sm-2 col-form-label">
                        Related Ticket[<a data-toggle="modal" data-target="#modal-severity">?</a>]
                    </label>
                    <div class="col-sm-10">
                        <div class="form-group">
                            <select class="form-control select2" id="ticket_id" name="ticket_id">
                            @if($visit->ticket()->exists())
                                @foreach($tickets as $ticket)
                                <option value="{{ $ticket->id }}" {{ $ticket->id == $visit->ticket->id ? 'selected' : ''}}>{{ $ticket->ticket_id }} ({{ $ticket->node->device_id }}) - {{ $ticket->node->contact->name }}</option>
                                @endforeach
                            @else
                            @foreach($tickets as $ticket)
                                <option value="{{ $ticket->id }}" >{{ $ticket->ticket_id }} ({{ $ticket->node->device_id }}) - {{ $ticket->node->contact->name }}</option>
                                @endforeach
                            @endif
                            </select>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
            <!-- /.box-body -->
            </form>
        </div>
        <!-- /.box -->

        <div class="box box-danger">
            <div class="box-body">
                <form action="/visits/upload"
                    class="dropzone"
                    id="my-dropzone">
                    <input hidden name="visit_id" value="{{ $visit->visit_id }}"/>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- /.row -->
@endsection

@section('scripts')
    @include('visits.scripts.maps', ['visit' => $visit])
    <script src="/js/dropzone.js"></script>
    <link rel="stylesheet" href="/css/dropzone.css">

    <script>
        // removes the magical auto discovery of dropzone forms
        Dropzone.autoDiscover=false;

        // add accepted mimeTypes options (comma separated string)
        // myDz is the camelCased version of the id of the element that will be "dropzoned"
        Dropzone.options.myDz = { acceptedFiles: 'image/*'};

        $(function(){
        // instantiate dropzone on element with #my-dz id
        // if no action in the form or applying dropzone on a non form (ie a div),
        // you should at least pass the url in an object as the second parameter
        dz = new Dropzone('#my-dropzone' /*, {url:"/my-upload-url"}*/);
        });
    </script>
@endsection