@extends('layouts.app')

@section('title')
    New Ticket
@endsection

@section('description')
    Create a new ticket
@endsection

@section('breadcrumb')
    <li class="active"><a href="/tickets">All Tickets</a></li>
    <li><a href="#">New Ticket</a></li>
@endsection

@section('styles')
<style>
.table-borderless td,
.table-borderless th {
    border: 0;
}
</style>
@endsection

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

    <div class="col-lg-6 col-xs-12">
        <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Create A New Ticket</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form role="form" action="/tickets" method="POST">
            {{ csrf_field() }}

              <div class="box-body">
                <div class="form-group">
                  <label for="name">Device ID</label>
                  <select class="form-control select2" id="device_id" name="device_id">
                  @foreach($nodes as $node)
                    <option value="{{ $node->device_id }}">{{ $node->device_id }} - {{ $node->contact->name }} [{{ $node->contact->phone_number }}], {{ $node->contact->address }}</option>
                  @endforeach
                  </select>
                  <!-- <input type="text" class="form-control" id="device_id" name="device_id" placeholder="Enter device id"> -->
                </div>
              </div>
              <!-- /.box-body --> 

              <div class="box-body">
                <div class="form-group">
                  <label for="name">Title</label>
                  <input type="text" class="form-control" id="title" name="title" placeholder="Enter title" />
                </div>
              </div>
              <!-- /.box-body --> 

              <div class="box-body">
                <div class="form-group">
                  <label for="name">Message</label>
                  <textarea rows="6" class="form-control" id="description" name="description" placeholder="Enter description"></textarea>
                </div>
              </div>
              <!-- /.box-body --> 

              <div class="box-body">

                <div class="form-group">
                <label for="name">Severity</label>
                  <table class="table table-condensed table-borderless">
                    <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 class="form-group">
                  <select class="form-control" id="severity" name="severity">
                    <option value="critical">Critical</option>
                    <option value="urgent">Urgent</option>
                    <option value="important">Important</option>
                    <option value="monitor">Monitor</option>
                    <option value="informational">Informational</option>
                  </select>
                </div>
              </div>
              <!-- /.box-body --> 

              <div class="box-body">
                <div class="form-group">
                  <label for="name">Assigned To</label>
                  <select class="form-control" id="assignee_id" name="assignee_id">
                  @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                  @endforeach
                  </select>
                </div>
              </div>
              <!-- /.box-body --> 

              <div class="box-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
              </div>
            </form>
          </div>
          <!-- /.box -->
    </div>

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