@extends('layouts.admin')

@section('styles')
    <style>
        /* WRAPPERS */
        #wrapper {
            width: 100%;
            overflow-x: hidden;
        }

        .wrapper {
            padding: 0 20px;
        }

        .wrapper-content {
            padding: 20px 10px 40px;
        }

        #page-wrapper {
            padding: 0 15px;
            min-height: 568px;
            position: relative !important;
        }

        @media (min-width: 768px) {
            #page-wrapper {
                position: inherit;
                margin: 0 0 0 240px;
                min-height: 2002px;
            }
        }


        .message-input {
            height: 90px !important;
        }

        .chat-avatar {
            white: 36px;
            height: 36px;
            float: left;
            margin-right: 10px;
        }

        .chat-user-name {
            padding: 10px;
        }

        .chat-user {
            padding: 8px 10px;
            border-bottom: 1px solid #e7eaec;
        }

        .chat-user a {
            color: inherit;
        }

        .chat-view {
            z-index: 20012;
        }

        .chat-users,
        .chat-statistic {
            margin-left: -30px;
        }

        @media (max-width: 992px) {

            .chat-users,
            .chat-statistic {
                margin-left: 0;
            }
        }

        .chat-view .ibox-content {
            padding: 0;
        }

        .chat-message {
            padding: 10px 20px;
        }

        .message-avatar {
            height: 48px;
            width: 48px;
            border: 1px solid #e7eaec;
            border-radius: 4px;
            margin-top: 1px;
        }

        .chat-discussion .chat-message.left .message-avatar {
            float: left;
            margin-right: 10px;
        }

        .chat-discussion .chat-message.right .message-avatar {
            float: right;
            margin-left: 10px;
        }

        .message {
            background-color: #fff;
            border: 1px solid #e7eaec;
            text-align: left;
            display: block;
            padding: 10px 20px;
            position: relative;
            border-radius: 4px;
        }

        .chat-discussion .chat-message.left .message-date {
            float: right;
        }

        .chat-discussion .chat-message.right .message-date {
            float: left;
        }

        .chat-discussion .chat-message.left .message {
            text-align: left;
            margin-left: 55px;
        }

        .chat-discussion .chat-message.right .message {
            text-align: right;
            margin-right: 55px;
        }

        .message-date {
            font-size: 10px;
            color: #888888;
        }

        .message-content {
            display: block;
        }

        .chat-discussion {
            background: #eee;
            padding-top: 15px;
            /* height: 400px; */
            /* overflow-y: auto; */
        }

        .chat-users {
            overflow-y: auto;
            height: 400px;
        }

        .chat-message-form .form-group {
            margin-bottom: 0;
        }

        .ibox {
            clear: both;
            margin-bottom: 25px;
            margin-top: 0;
            padding: 0;
        }

        .ibox.collapsed .ibox-content {
            display: none;
        }

        .ibox.collapsed .fa.fa-chevron-up:before {
            content: "\f078";
        }

        .ibox.collapsed .fa.fa-chevron-down:before {
            content: "\f077";
        }

        .ibox:after,
        .ibox:before {
            display: table;
        }

        .ibox-title {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background-color: #ffffff;
            border-color: #e7eaec;
            border-image: none;
            border-style: solid solid none;
            border-width: 3px 0 0;
            color: inherit;
            margin-bottom: 0;
            padding: 14px 15px 7px;
            min-height: 48px;
        }

        .ibox-content {
            background-color: #ffffff;
            color: inherit;
            padding: 15px 20px 20px 20px;
            border-color: #e7eaec;
            border-image: none;
            border-style: solid solid none;
            border-width: 1px 0;
        }

        .ibox-footer {
            color: inherit;
            border-top: 1px solid #e7eaec;
            font-size: 90%;
            background: #ffffff;
            padding: 10px 15px;
        }

        .message-input {
            height: 90px !important;
        }

        .form-control,
        .single-line {
            background-color: #FFFFFF;
            background-image: none;
            border: 1px solid #e5e6e7;
            border-radius: 1px;
            color: inherit;
            display: block;
            padding: 6px 12px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
            width: 100%;
            font-size: 14px;
        }
    </style>
@endsection

@section('title')
    Title: {{ $ticket->title }}
    @if ($ticket->severity == 'critical')
        <div class="label label-danger"><b>{{ strtoupper($ticket->severity) }}</b></div>
    @elseif($ticket->severity == 'urgent')
        <div class="label label-warning"><b>{{ strtoupper($ticket->severity) }}</b></div>
    @elseif($ticket->severity == 'important')
        <div class="label label-primary"><b>{{ strtoupper($ticket->severity) }}</b></div>
    @elseif($ticket->severity == 'monitor')
        <div class="label label-success"><b>{{ strtoupper($ticket->severity) }}</b></div>
    @else
        <div class="label label-default"><b>{{ strtoupper($ticket->severity) }}</b></div>
    @endif
    &nbsp;
    @if ($ticket->status == 'open')
        <div class="label label-danger"><b>{{ strtoupper($ticket->status) }}</b></div>
    @elseif($ticket->status == 'progress')
        <div class="label label-warning"><b>{{ strtoupper($ticket->status) }}</b></div>
    @elseif($ticket->status == 'resolved')
        <div class="label label-success"><b>{{ strtoupper($ticket->status) }}</b></div>
    @elseif($ticket->status == 'closed')
        <div class="label label-default"><b>{{ strtoupper($ticket->status) }}</b></div>
    @else
        <div class="label label-danger"><b>{{ strtoupper($ticket->status) }}</b></div>
    @endif
@endsection

@section('description')
@endsection

@section('breadcrumb')
    <li><a href="/tickets">All Tickets</a></li>
    <li class="active">{{ $ticket->ticket_id }}</a></li>
@endsection

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

        <div class="col-lg-8 col-xs-12">
            <div class="card">
                <div class="card-body">
                    @include('admin.contacts.maps-individual')
                    <div class="p-2">
                    </div>
                    @include('admin.tickets.attributes')
                    <div class="p-2">
                        @foreach ($ticket->image as $key => $media)
                            <a href="{{ $media->getUrl() }}" target="_blank" style="display: inline-block">
                                <img src="{{ $media->getUrl('') }}">
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    @include('admin.tickets.comments')
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-xs-12">
            <div class="card">
                <div class="card-body">
                    <div class="box-header">
                        <h3 class="box-title">Action</h3>
                    </div>
                    <table class="table table-condensed" style="margin-left: 5px">
                        <tr>
                            <td>
                                <div class="label label-danger">Critical</div>
                            </td>
                            <td>Perangkat tidak berfungsi dan data tidak terkirim</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="label label-warning">Urgent</div>
                            </td>
                            <td>Perangkat berfungsi tapi data tidak terkirim</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="label label-primary">Important</div>
                            </td>
                            <td>Perangkat berfungsi dan data terkirim tapi terkadang ada permasalahan dalam penggunaan
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="label label-success">Monitor</div>
                            </td>
                            <td>Tidak ada follow-up yang harus dilakukan kecuali hanya dimonitor saja</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="label label-default">Informational</div>
                            </td>
                            <td>Hanya perlu follow up informasi</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="box box-danger">
                        <div class="box-body padding">
                            <form class="form" action="/admin/tickets/status" method="POST">
                                {{ csrf_field() }}
                                <input hidden value="{{ auth()->user()->id }}" name="user_id"></textarea>
                                <input hidden value="{{ $ticket->id }}" name="ticket_id"></textarea>
                                <div class="form-group row">
                                    <label for="status" class="col-sm-2 col-form-label">
                                        Severity
                                    </label>
                                    <div class="col-sm-10">
                                        <div class="form-group">
                                            <select class="form-control" id="sel1" name="severity">
                                                <option {{ $ticket->severity == 'critical' ? 'selected' : '' }}
                                                    value="critical">
                                                    Critical</option>
                                                <option {{ $ticket->severity == 'urgent' ? 'selected' : '' }}
                                                    value="urgent">Urgent
                                                </option>
                                                <option {{ $ticket->severity == 'important' ? 'selected' : '' }}
                                                    value="important">
                                                    Important</option>
                                                <option {{ $ticket->severity == 'monitor' ? 'selected' : '' }}
                                                    value="monitor">
                                                    Monitor</option>
                                                <option {{ $ticket->severity == 'informational' ? 'selected' : '' }}
                                                    value="informational">Informational</option>
                                            </select>
                                        </div>
                                    </div>
                                    <label for="status" class="col-sm-2 col-form-label">Status</label>
                                    <div class="col-sm-10">
                                        <div class="form-group">
                                            <select class="form-control" id="sel1" name="status">
                                                <option {{ $ticket->status == 'progress' ? 'selected' : '' }}
                                                    value="progress">
                                                    Progress</option>
                                                <option {{ $ticket->status == 'resolved' ? 'selected' : '' }}
                                                    value="resolved">
                                                    Resolved</option>
                                                <option {{ $ticket->status == 'closed' ? 'selected' : '' }} value="closed">
                                                    Closed
                                                </option>
                                                <option {{ $ticket->status == 'reopen' ? 'selected' : '' }} value="reopen">
                                                    Reopen
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <label for="status" class="col-sm-2 col-form-label">Assignee</label>
                                    <div class="col-sm-10">
                                        <div class="form-group">
                                            <select class="form-control" id="assignee_id" name="assignee_id">
                                                @foreach ($users as $user)
                                                    <option {{ $ticket->assignee_id == $user->id ? 'selected' : '' }}
                                                        value="{{ $user->id }}">{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div for="status" class="col-sm-4 col-form-label">
                                        <button type="submit" class="btn btn-primary mb-4">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    @include('admin.tickets.logs')
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    @include('admin.tickets.visits')
                </div>
            </div>            
        </div>

    </div>
    <!-- /.row -->
@endsection

@section('scripts')
    <script>
        $("#tags").tagsinput();
    </script>

    @include('admin.contacts.scripts.maps-individual', ['contact' => $ticket->node->contact])
@endsection