@extends('dashboard/layouts.template')
@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-left">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="">Dashboard</a></li>
                    <li class="breadcrumb-item active">Data Rules</li>
                </ol>
                <h4 class="Header-title">Data Rules</h4>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="">
                    <p><a href="rules/create" class="btn btn-success"> <i class="uil-plus-circle"></i>
                            &nbsp Tambah</a></p>
                </div>
                @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                @endif

                @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                @endif

                <br>

                <div class="tab-content">
                    <div class="tab-pane show active" id="alt-pagination-preview">
                        <table id="alternative-page-datatable" class="table table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Waktu Kejadian</th>
                                    <th>Kondisi Kecelakaan</th>
                                    <th>Kondisi Cahaya</th>
                                    <th>Bentuk Geometri</th>
                                    <th>Tingkat Kerawanan</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rules->sortByDesc('created_at') as $rule)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $rule->waktu_kejadian }}</td>
                                    <td>{{ $rule->kondisi_kecelakaan }}</td>
                                    <td>{{ $rule->kondisi_cahaya }}</td>
                                    <td>{{ $rule->bentuk_geometri}}</td>
                                    <td style="color:
                                            @if ($rule->tingkat_kerawanan == 'Sangat Rawan') red
                                            @elseif ($rule->tingkat_kerawanan == 'Rawan') orange
                                            @else green @endif">
                                        {{ $rule->tingkat_kerawanan }}
                                    </td>

                                    <td>
                                        <a href="{{ route('rules.edit', $rule->id) }}" class="btn btn-warning btn-md ml-1">Edit</a>

                                        <a class="btn btn-danger" href="/rule/hapus/{{ $rule->id }}" onclick="return confirm('Apakah anda yakin akan menghapus data ini?')">Hapus</a>

                                        <!-- <button type="button" class="btn btn-danger ml-1" data-bs-toggle="modal" data-bs-target="#warning-alert-modal">Hapus
                                        </button> -->
                                        <!-- <div id="warning-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                                            <div class="modal-dialog modal-sm">
                                                <div class="modal-content">
                                                    <div class="modal-body p-4">
                                                        <div class="text-center">
                                                            <i class="ri-alert-line h1 text-warning"></i>
                                                            <h4 class="mt-2">Hapus Data</h4>
                                                            <div class="text-center">
                                                                <p class="mt-3">Anda yakin menghapus data?
                                                                </p>
                                                            </div>
                                                            <form action="{{ route('rules.destroy', $rule->id) }}" class="d-inline" method="POST">
                                                                {{ csrf_field() }}
                                                                {{ method_field('delete') }}
                                                                <button class="btn btn-danger ml-1">Hapus</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> -->
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>No</th>
                                    <th>Waktu Kejadian</th>
                                    <th>Kondisi Kecelakaan</th>
                                    <th>Kondisi Cahaya</th>
                                    <th>Bentuk Geometri</th>
                                    <th>Tingkat Kerawanan</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div> <!-- end preview-->
                </div> <!-- end tab-content-->
            </div> <!-- end card body-->
        </div> <!-- end card -->
    </div><!-- end col-->
</div>
@endsection