@extends('admin.layouts.layout')

@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
@endsection

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-8 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Detail Request Konsultasi</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">
                        <form>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Nama Client</label>
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="Alda Latifah">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Asal Instansi</label>
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="LK Apps - Teta Corp">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Kategori Konsultasi</label>
                                {{-- <div class="col-sm-9">
                                    <select class="form-control">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                    </select>
                                </div> --}}

                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="Pelayanan Masyarakat">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Judul</label>
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="Konsultasi Bla Bla">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Tujuan</label>
                                {{-- <div class="col-sm-9">
                                    <select class="form-control">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                    </select>
                                </div> --}}
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="LK Apps - Teta Corp">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header border-0 pb-0">
                    <h4 class="card-title">History Action</h4>
                </div>
                <div class="card-body">
                    <div id="DZ_W_TimeLine" class="widget-timeline dz-scroll height370">
                        <ul class="timeline">
                            <li>
                                <div class="timeline-badge primary"></div>
                                <a class="timeline-panel text-muted" href="#">
                                    <span>22 April 2022</span>
                                    <h6 class="mb-0">Tujuan : Alda | <strong class="text-primary">Complement</strong>.</h6>
                                    <p class="mb-0">Note : ajaja.</p>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Latest Action Info</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">
                        <form>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Dari</label>
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="Alda Latifah">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Ke</label>
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="LK Apps - Teta Corp">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Tipe</label>
                                {{-- <div class="col-sm-9">
                                    <select class="form-control">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                    </select>
                                </div> --}}
                                <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="Complement">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Note</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" readonly rows="4" id="comment"> Ini Note </textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Lampiran</label>
                                <div class="col-sm-9">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-8 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Form Action </h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">
                        <form>
                            <div class="form-group">
                                <label class="col-sm-3 col-form-label">Dari</label>
                                <div class="col-sm-12">
                                    <input type="text"  class="form-control" placeholder="Alda Latifah">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 col-form-label">Ke</label>
                                <div class="col-sm-12">
                                    <input type="text"  class="form-control" placeholder="LK Apps - Teta Corp">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 col-form-label">Tipe</label>
                                <div class="col-sm-12">
                                    <select class="form-control">
                                        <option>Complement</option>
                                        <option>Assignment</option>
                                        <option>Reporting</option>
                                        <option>Confirm</option>
                                    </select>
                                </div>
                                {{-- <div class="col-sm-9">
                                    <input type="text" readonly class="form-control" placeholder="Complement">
                                </div> --}}
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 col-form-label">Note</label>
                                <div class="col-sm-12">
                                    <textarea class="form-control" rows="4" id="comment"> Ini Note </textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 col-form-label">Lampiran</label>
                                <div class="col-sm-12">
                                    <div class="needsclick dropzone" id="document-dropzone">

                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Kirim</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script>
    var uploadedDocumentMap = {}
  Dropzone.options.documentDropzone = {
    url: '{{ route('projects.storeMedia') }}',
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (file, response) {
      $('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
      uploadedDocumentMap[file.name] = response.name
    },
    removedfile: function (file) {
      file.previewElement.remove()
      var name = ''
      if (typeof file.file_name !== 'undefined') {
        name = file.file_name
      } else {
        name = uploadedDocumentMap[file.name]
      }
      $('form').find('input[name="document[]"][value="' + name + '"]').remove()
    },
    init: function () {
      @if(isset($project) && $project->document)
        var files =
          {!! json_encode($project->document) !!}
        for (var i in files) {
          var file = files[i]
          this.options.addedfile.call(this, file)
          file.previewElement.classList.add('dz-complete')
          $('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
        }
      @endif
    }
  }
</script>
@endsection