@extends('layouts.app')

@section('title')
    Tambah Komplain
@endsection

@section('content')
<div class="col-sm-12 col-md-9">
  <div class="card card-box card-primary">
      <div class="card-header">
        Tambah Komplain
      </div>
      <div class="card-body">

        <form method="POST" action="{{ route('superadmin:complaints.store') }}" enctype="multipart/form-data">
            @csrf
                <div class="form-group row">
                <label class="col-sm-12 col-md-2 col-form-label">Lokasi</label>
                <div class="col-sm-12 col-md-10">
                        <input id="location" name="location" class="form-control @error('location') is-invalid @enderror" type="text" required value={{ old('location') }}>
                        <div class="form-group has-danger">
                            @error('location')
                                <div class="form-control-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                </div>

                    <label class="col-sm-12 col-md-2 col-form-label">Komplain</label>
                    <div class="col-sm-12 col-md-10">
                            <input id="complaint" name="complaint" class="form-control @error('complaint') is-invalid @enderror" type="text" required value={{ old('complaint') }}>
                            <div class="form-group has-danger">
                                @error('complaint')
                                    <div class="form-control-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                    </div>

                <label for="" class="col-sm-12 col-md-2 col-form-label">Deskripsi</label>
                <div class="col-sm-12 col-md-10">
                        <textarea id="description" name="description" class="form-control @error('description') is-invalid @enderror" required>{{ old('description') }}</textarea>
                        <div class="form-group has-danger">
                            @error('description')
                                <div class="form-control-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                </div>

                <label class="col-sm-12 col-md-2 col-form-label">Pelapor</label>
                <div class="col-sm-12 col-md-10">
                    <select id="user_id" name="user_id" class="form-control @error('user_id') is-invalid @enderror">
                        <option value="">Pilih pelapor</option>
                            @foreach($users as $user)
                              {{-- <option value="{{$user->id}}">{{$user->name}}</option> --}}
                                @if (old('user_id') == $user->id)
                                    <option value="{{ $user->id }}" selected>{{ $user->name }}</option>
                                @else
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endif
                            @endforeach
                    </select>
                        <div class="form-group has-danger">
                            @error('user_id')
                                <div class="form-control-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                </div>

                <label for="" class="col-sm-12 col-md-2 col-form-label">Foto</label>
                <div class="col-sm-12 col-md-10">
                        <img class="img-preview img-fluid mb-3 col-md-6">
                        <br>
                        <input id="photo_before" name="photo_before" class="form-control-input @error('photo_before') is-invalid @enderror" type="file" accept="image/jpeg" onchange="previewImage()">
                        <div class="form-group has-danger">
                            @error('photo_before')
                                <div class="form-control-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                </div>

                </div>
                    <div class="text-right">
                        <button type="submit" class="btn btn-primary pull-right">Submit</button>
                    </div>
        </form>
      </div>
  </div>
</div>

<script>
    function previewImage()
    {
        const image = document.querySelector('#photo_before');
        const imgPreview = document.querySelector('.img-preview');

        imgPreview.style.dsiplay = 'block';

        const oFReader = new FileReader();
        oFReader.readAsDataURL(image.files[0]);

        oFReader.onload = function(oFREvent)
        {
            imgPreview.src = oFREvent.target.result;
        }
    }
</script>
@endsection