@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 Kecelakaan</li>
                </ol>
                <h4 class="Header-title">Data Kecelakaan</h4>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-5">
                        <p><a href="kecelakaan/create" class="btn btn-success"><i class="uil-plus-circle"></i> Tambah</a></p>
                    </div>
                    <div class="col-lg-7">
                        <h3 class="text-info">{{$nama_jalan->nama_jalan}}</h3>
                    </div>
                </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 class="text-center">
                                <tr>
                                    <th>No</th>
                                    <th>Nama Jalan</th>
                                    <th>Tanggal</th>
                                    <th>Jam</th>
                                    <th>Tingkat Kerawanan</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                @foreach ($data->sortByDesc('created_at') as $data)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{$data->nama_jalan}}</td>
                                    <td>
                                        @php
                                        $formattedDate = \Carbon\Carbon::parse($data->tanggal)->translatedFormat('d-m-Y');
                                        @endphp
                                        {{ $formattedDate }}
                                    </td>
                                    <td>{{$data->waktu_kejadian}}</td>
                                    <td>{{ $data->tingkat_kerawanan }}</td>
                                    <td>
                                    <a href="{{ route('jalan.kecelakaan.edit', ['jalan' => $data->jalan->slug, 'kecelakaan' => $data->id]) }}" class="btn btn-warning btn-md ml-1">Edit</a>
                                        
                                        <a href="{{ route('jalan.kecelakaan.detail', ['jalan' => $data->jalan->slug, 'kecelakaan' => $data->id]) }}"
                                            class="btn btn-info btn-md ml-1">Detail</a>
                                            <!-- <button type="button" value="{{$data->id}}" class="btn btn-primary showbtn" data-bs-toggle="modal" data-bs-target="#detail-data">Detail</button> -->
                                        <a class="btn btn-danger" href="/kecelakaan/hapus/{{ $data->id }}" onclick="return confirm('Apakah anda yakin akan menghapus data ini?')">Hapus</a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="text-center">
                                    <th>No</th>
                                    <th>Nama Jalan</th>
                                    <th>Tanggal</th>
                                    <th>Jam</th>
                                    <th>Tingkat Kerawanan</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('dashboard.kecelakaan.detail')

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    jQuery(document).ready(function() {
        jQuery(document).on('click', '.showbtn', function() {
            var kecelakaan = jQuery(this).val();
            var jalan = {{$nama_jalan->id}};
            $.ajax({
                type: "GET",
                url: '/dashboard/jalan/' + jalan + '/kecelakaan/' + kecelakaan,
                success: function(response) {
                    var formattedDate = moment(response.detail.tanggal).format('DD-M-YYYY');
                    $('input[name="tanggal"]').val(formattedDate);
                    $('input[name="waktu_kejadian"]').val(response.detail.waktu_kejadian);
                    $('input[name="nama_jalan"]').val(response.detail.nama_jalan);
                    $('input[name="tkp_dusun"]').val(response.detail.tkp_dusun);
                    $('input[name="desa"]').val(response.detail.desa);
                    $('input[name="kecamatan"]').val(response.detail.kecamatan);
                    $('input[name="kabupaten"]').val(response.detail.kabupaten);
                    $('input[name="latitude"]').val(response.detail.latitude);
                    $('input[name="longitude"]').val(response.detail.longitude);
                    $('input[name="korban_md"]').val(response.detail.korban_md);
                    $('input[name="korban_lb"]').val(response.detail.korban_lb);
                    $('input[name="korban_lr"]').val(response.detail.korban_lr);
                    $('input[name="kondisi_kecelakaan"]').val(response.detail.kondisi_kecelakaan);
                    $('input[name="kondisi_cahaya"]').val(response.detail.kondisi_cahaya);
                    $('input[name="bentuk_geometri"]').val(response.detail.bentuk_geometri);
                }
            });
        });
    });
</script>

@push('js')
@endpush

@endsection