@extends('layouts.home.index')
@section('title','Form RHA')
@section('content')

@include('report._js.form')

@push('style')
<style>
    .category-title h1 {
        color: #085F94;
    }
</style>    
@endpush

<div class="container">
    <div class="category-home">
        <div class="category">

            <div class="category-title mb-5 text-center">
                <h1 class="fw-bold">PILIH KATEGORI</h1>
            </div>

            <div class="category-grid mb-4">

                <div class="category-item shadow" data-category="7">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/tsunami.png') }}" alt="">
                        <small for="" class="text-white">Tsunami</small>
                    </div>
                </div>
    
                <div class="category-item shadow" data-category="2">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/gempa.png') }}" alt="">
                        <small for="" class="text-white">Gempa</small>
                    </div>
                </div>
            
                <div class="category-item shadow" data-category="4">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/longsor.png') }}" alt="">
                        <small for="" class="text-white">Longsor</small>
                    </div>
                </div>
    
                <div class="category-item shadow" data-category="1">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/banjir.png') }}" alt="">
                        <small for="" class="text-white">Banjir</small>
                    </div>
                </div>
            
                <div class="category-item shadow" data-category="3">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/erupsi.png') }}" alt="">
                        <small for="" class="text-white">Erupsi</small>
                    </div>
                </div>

                <div class="category-item shadow" data-category="5">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/kebakaran.png') }}" alt="">
                        <small for="" class="text-white">Kebakaran</small>
                    </div>
                </div>

                <div class="category-item shadow" data-category="6">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/puting-beliung.png') }}" alt="">
                        <small for="" class="text-white">Puting Beliung</small>
                    </div>
                </div>
                
                <div class="category-item shadow" data-category="8">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/abrasi.png') }}" alt="">
                        <small for="" class="text-white">Abrasi</small>
                    </div>
                </div>

                <div class="category-item shadow" data-category="9">
                    <div class="category-content">
                        <img src="{{ asset('assets/img/category/kekeringan.png') }}" alt="">
                        <small for="" class="text-white">Kekeringan</small>
                    </div>
                </div>
    
            </div>
        </div>
    </div>
</div>
@endsection