@extends('layouts.app')
@section('content')
<section class="bg-white dark:bg-gray-900 pt-20">
    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
        <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Lapor Pelaku Kejahatan</h1>
        <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">Silahkan upload foto wajah yang terduga pelaku kejahatan.</p>
    </div>
</section>

<section class="px-80 pb-20">
  <form action="{{ route('laporan.store') }}" method="post" enctype="multipart/form-data" class="w-full flex flex-wrap justify-between shadow-lg p-8" autocomplete="off">
    @csrf
    <div class="mb-6 w-full px-4">
      @if (Session::has('message'))
        <div id="alert-3" class="flex p-4 mb-4 text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
            <svg aria-hidden="true" class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
            <span class="sr-only">Info</span>
            <div class="ml-3 text-sm font-medium">
                {{ Session::get('message') }}
            </div>
            <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-3" aria-label="Close">
                <span class="sr-only">Close</span>
                <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
        </div>
      @endif
    </div>
    <div class="mb-6 w-full px-4">
      <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Nama pelapor</label>
      <input type="email" id="email" class="shadow-sm bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" value="{{ $user->name }}" readonly>
      <input type="hidden" name="masyarakat_id" value="{{ $cekprofile->id }}">
    </div>
    <div class="mb-6 w-full px-4">
      <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Tanggal pelaku terduga terlihat</label>
      <input type="date" id="date" name="tanggal" class="shadow-sm border border-gray-300 text-gray-900 text-sm bg-gray-50 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" value="{{ date('Y-m-d') }}">
      @if ($errors->has('tanggal'))
        <strong class="text-red-600 lowercase">&nbsp;* {{ $errors->first('tanggal') }}</strong>
      @endif
    </div>
    <div class="mb-6 w-full px-4">
      <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Deskripsi detail (lokasi dan waktu)</label>
      <textarea id="deskripsi" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="deskripsi"></textarea>
      @if ($errors->has('deskripsi'))
        <strong class="text-red-600 lowercase">&nbsp;* {{ $errors->first('deskripsi') }}</strong>
      @endif
    </div>
    <div class="mb-6 w-full px-4" id="box-upload">
      <label for="gambar" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">*Upload Foto Pelaku</label>
      <div class="flex items-center justify-center w-full">
          <label for="gambar" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
              <div class="flex flex-col items-center justify-center pt-5 pb-6" id="desc-upload">
                  <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                  </svg>
                  <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG (MAX. 800x400px)</p>
              </div>
              <input id="gambar" type="file" name="gambar" accept="image/*" class="hidden" />
          </label>
      </div>
      @if ($errors->has('gambar'))
        <strong class="text-red-600 lowercase">&nbsp;* {{ $errors->first('gambar') }}</strong>
      @endif
    </div>
    <div id="box-preview" class="mb-6 w-full px-4" hidden>
        <label for="gambar" class="block mb-2 text-md font-medium text-gray-900 dark:text-white">*Upload Foto Pelaku</label>
        <img id="preview" src="" alt="Preview Image" class="hidden rounded-lg w-full" />
    </div>
    <div class="w-full p-4">
      <button type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-md px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Kirim Laporan</button>
    </div>
  </form>
</section>

<script>
  const desc = document.getElementById('desc-upload');
  const input = document.getElementById('gambar');
  const preview = document.getElementById('preview');
  const boxupload = document.getElementById('box-upload');
  const boxpreview = document.getElementById('box-preview');

  input.addEventListener('change', () => {
    desc.style.display = 'none';
    input.style.display = 'none';
    boxupload.setAttribute('hidden', '');
    boxpreview.removeAttribute('hidden');

    const file = input.files[0];

    if (file) {
      const reader = new FileReader();

      reader.addEventListener('load', () => {
        preview.src = reader.result;
        preview.classList.remove('hidden');
      });

      reader.readAsDataURL(file);
    }
  });
</script>
@endsection