103 lines
7.1 KiB
PHP
103 lines
7.1 KiB
PHP
@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"> * {{ $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"> * {{ $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"> * {{ $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
|