@extends('layouts.app')

@section('title')
    Edit Komplain
@endsection

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

        <form method="POST" action="{{ route('superadmin:complaints.update', $complaint->id) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
                <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" value="{{ old('location', $complaint->location) }}" name="location" class="form-control @error('location') is-invalid @enderror" type="text">
                        <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" value="{{ old('complaint',$complaint->complaint) }}" name="complaint" class="form-control @error('complaint') is-invalid @enderror" type="text">
                            <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">{{ old('description',$complaint->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}}" {{ old('user_id', $user->id) == $user->id ? 'selected' : '' }}>{{$user->name}}</option> --}}
                              @if (old('user_id', $complaint->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">
                        <input type="hidden" name="oldImage" value="{{ $complaint->photo_before }}">
                        @if ($complaint->photo_before)
                            <img src="{{ asset('storage/'.$complaint->photo_before) }}" class="img-preview img-fluid mb-3 col-md-6 d-block">
                        @else
                            <img class="img-preview img-fluid mb-3 col-md-6">
                        @endif
                        <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