@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            @if(session('status'))
                <div class="alert alert-success" role="alert">
                    {!! session('status') !!}
                </div>
            @endif

            <div class="">
                <p style="text-align:center;"><img src="{{ asset('/logo.png') }}" alt="png" height="60"></p>
                <h5><center>BORANG e-ADUAN</center></h5>
                <h5><center>SISTEM AUDIT DAN PAPARAN SUSULAN (SAPs)</center></h5>
                <h5><center>JABATAN AUDIT DALAM</center></h5>
            </div>

            <div class="card">
                <div class="card-header">Tambah Aduan</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('tickets.store') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group row">
                            <label for="author_name" class="col-md-4 col-form-label text-md-right">Nama Pengguna</label>

                            <div class="col-md-6">
                                <input id="author_name" type="text" class="form-control @error('author_name') is-invalid @enderror" name="author_name" value="{{ old('author_name') }}" required autocomplete="name" autofocus>

                                @error('author_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="user_no" class="col-md-4 col-form-label text-md-right">No Gaji (8 digit)</label>

                            <div class="col-md-6">
                                <input id="user_no" type="text" class="form-control @error('user_no') is-invalid @enderror" name="user_no" value="{{ old('user_no') }}" required autocomplete="name" autofocus>

                                @error('user_no')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="department" class="col-md-4 col-form-label text-md-right">Jabatan</label>

                            <div class="col-md-6">
                                <!-- <input id="department" type="text" class="form-control @error('department') is-invalid @enderror" name="department" value="{{ old('department') }}" required autocomplete="name" autofocus> -->

                                <select id="department" name="department" class="select2 form-control @error('department') is-invalid @enderror" value="{{ old('department') }}" required="department">
                                    <option>Sila Pilih</option>
                                    <option value="JKAWS">JKAWS</option>
                                    <option value="JPPH">JPPH</option>
                                    <option value="JPSM">JPSM</option>
                                    <option value="JPPP">JPPP</option>
                                    <option value="JPM">JPM</option>
                                    <option value="JKEW">JKEW</option>
                                    <option value="JAD">JAD</option>
                                    <option value="JPRK">JPRK</option>
                                    <option value="JPPPB">JPPPB</option>
                                    <option value="JPKKB">JPKKB</option>
                                    <option value="JPK">JPK</option>
                                    <option value="IDB">IDB</option>
                                    <option value="JIT">JIT</option>
                                    <option value="JUP">JUP</option>
                                    <option value="JPEPP">JPEPP</option>
                                    <option value="JP">JP</option>
                                    <option value="JKAS">JKAS</option>
                                    <option value="JPRB">JPRB</option>
                                    <option value="JPIF">JPIF</option>
                                    <option value="JKB">JKB</option>
                                    <option value="JUB">JUB</option>
                                    <option value="JPB">JPB</option>
                                    <option value="JKKPS">JKKPS</option>
                                    <option value="JKME">JKME</option>
                                    <option value="JPLR">JPLR</option>
                                    <option value="PCT">PCT</option>
                                    <option value="PCWM">PCWM</option>
                                    <option value="PCC">PCC</option>
                                    <option value="PCSW">PCSW</option>
                                    <option value="PCB">PCB</option>
                                    <option value="PCSP">PCSP</option>
                                    <option value="PCK">PCK</option>
                                    <option value="PCBTR">PCBTR</option>
                                    <option value="PCSG">PCSG</option>
                                    <option value="PCBB">PCBB</option>
                                    <option value="PCLP">PCLP</option>
                                </select>

                                @error('department')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="location" class="col-md-4 col-form-label text-md-right">Lokasi</label>

                            <div class="col-md-6">
                                <input id="location" type="text" class="form-control @error('location') is-invalid @enderror" name="location" value="{{ old('location') }}" required autocomplete="name" autofocus>

                                @error('location')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="floor" class="col-md-4 col-form-label text-md-right">Tingkat</label>

                            <div class="col-md-6">
                                <input id="floor" type="text" class="form-control @error('floor') is-invalid @enderror" name="floor" value="{{ old('floor') }}" required autocomplete="name" autofocus>

                                @error('floor')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="tel_no" class="col-md-4 col-form-label text-md-right">No. Telefon</label>

                            <div class="col-md-6">
                                <input id="tel_no" type="text" class="form-control @error('tel_no') is-invalid @enderror" name="tel_no" value="{{ old('tel_no') }}" required autocomplete="name" autofocus>

                                @error('tel_no')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="author_email" class="col-md-4 col-form-label text-md-right">E-mail</label>

                            <div class="col-md-6">
                                <input id="author_email" type="email" class="form-control @error('author_email') is-invalid @enderror" name="author_email" value="{{ old('author_email') }}" required autocomplete="email">

                                @error('author_email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="content" class="col-md-4 col-form-label text-md-right">@lang('cruds.ticket.fields.content')</label>

                            <div class="col-md-6">
                                <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="3" required>{{ old('content') }}</textarea>
                                @error('content')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="title" class="col-md-4 col-form-label text-md-right">@lang('cruds.ticket.fields.title')</label>

                            <div class="col-md-6">
                                <select id="title" name="title" class="select2 form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required="title">
                                    <option>Sila Pilih</option>
                                    <option value="INDEKS AKAUNTABILITI">INDEKS AKAUNTABILITI</option>
                                    <option value="LKAD">LKAD</option>
                                    <option value="LKAN">LKAN</option>
                                    <option value="LAIN-LAIN">LAIN-LAIN</option>
                                </select>

                                @error('title')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="attachments" class="col-md-4 col-form-label text-md-right">Muatnaik Bahan Lampiran</label>

                            <div class="col-md-6">
                                <div class="needsclick dropzone @error('attachments') is-invalid @enderror" id="attachments-dropzone">
                
                                </div>
                            </div>
                            @error('attachments')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Hantar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <br>
            <!-- <div class="card"> -->
                <!-- <div class="card-header">PASUKAN SAPs</div> -->
                <!-- <hr> -->
                <div class="card-body">
                    <div class="form-group row">
                        <h5>PASUKAN SAPs</h5>
                    </div>
                    <div class="form-group row">
                        <td>Sebarang masalah dan pertanyaan lanjut, boleh hubungi ahli pasukan SAPs di JAD seperti maklumat berikut:-</td>
                        <br>
                    </div>
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th>
                                    Nama Pegawai:
                                </th>
                                <td>
                                    1. Pn. Wan Noor Afiza bt Wan Abdul Mubin
                                    <br>
                                    2. En. Mohd Amir Faris bin Shamsudin
                                    <br>
                                    3. Cik Siti Norfateha bt Mispan
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Telefon:
                                </th>
                                <td>
                                    03-2028 2771 / 2763 / 2766
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    Emel:
                                </th>
                                <td>
                                    noorafiza@dbkl.gov.my / amirfaris511@gmail.com / fateha0207@gmail.com
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            <!-- </div> -->
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    var uploadedAttachmentsMap = {}
Dropzone.options.attachmentsDropzone = {
    url: '{{ route('tickets.storeMedia') }}',
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size: 2
    },
    success: function (file, response) {
      $('form').append('<input type="hidden" name="attachments[]" value="' + response.name + '">')
      uploadedAttachmentsMap[file.name] = response.name
    },
    removedfile: function (file) {
      file.previewElement.remove()
      var name = ''
      if (typeof file.file_name !== 'undefined') {
        name = file.file_name
      } else {
        name = uploadedAttachmentsMap[file.name]
      }
      $('form').find('input[name="attachments[]"][value="' + name + '"]').remove()
    },
    init: function () {
@if(isset($ticket) && $ticket->attachments)
          var files =
            {!! json_encode($ticket->attachments) !!}
              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="attachments[]" value="' + file.file_name + '">')
            }
@endif
    },
     error: function (file, response) {
         if ($.type(response) === 'string') {
             var message = response //dropzone sends it's own error messages in string
         } else {
             var message = response.errors.file
         }
         file.previewElement.classList.add('dz-error')
         _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
         _results = []
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             node = _ref[_i]
             _results.push(node.textContent = message)
         }

         return _results
     }
}
</script>
@stop