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

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div>
                    <p><a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
                            <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" style="color: black;">
                        <table id="alternative-page-datatable" class="table table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama Jalan</th>
                                    <!-- <th>Latitude</th>
                                    <th>Longitude</th> -->
                                    <th style="text-align: center;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data->sortByDesc('created_at') as $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $item->nama_jalan }}</td>
                                    <!-- <td>{{ $item->latitude }}</td>
                                    <td>{{ $item->longitude }}</td> -->
                                    <td style="text-align: center;">
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal{{ $item->id }}" class="btn btn-warning btn-md ml-1 rounded">Edit</a>
                                        <a href="{{ route('jalan.kecelakaan.index', $item->slug) }}" class="btn btn-info">Kecelakaan</a>
                                        <a class="btn btn-danger" href="/jalan/hapus/{{ $item->id }}" onclick="return confirm('Apakah anda yakin akan menghapus data ini?')">Hapus</a>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="exampleModal{{ $item->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $item->id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel{{ $item->id }}">Edit Data Jalan</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{{ route('jalan.update', $item->id) }}" method="post" enctype="multipart/form-data">
                                                    @method('PUT')
                                                    @csrf
                                                    <div class="mb-3">
                                                        <label for="nama_jalan" class="form-label">Nama Jalan</label>
                                                        <input type="text" id="nama_jalan" class="form-control" name="nama_jalan" value="{{ old('nama_jalan', $item->nama_jalan) }}">
                                                    </div>
                                                    <!-- <div class="mb-3">
                                                        <label for="latitude" class="form-label">Latitude</label>
                                                        <input type="text" id="latitude" class="form-control" name="latitude" value="{{ old('latitude', $item->latitude) }}">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="longitude" class="form-label">Longitude</label>
                                                        <input type="text" id="longitude" class="form-control" name="longitude" value="{{ old('longitude', $item->longitude) }}">
                                                    </div> -->
                                                    <button type="submit" class="btn btn-primary float-right">Simpan</button>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>No</th>
                                    <th>Nama Jalan</th>
                                    <th style="text-align: center;">Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div> <!-- end preview-->
                </div> <!-- end tab-content-->
            </div> <!-- end card body-->
        </div> <!-- end card -->
    </div><!-- end col-->
</div> <!-- end row-->

<!-- Add Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Data Jalan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('jalan.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="nama_jalan" class="form-label">Nama Jalan</label>
                        <input type="text" id="nama_jalan" class="form-control" name="nama_jalan" required>
                    </div>
                    <!-- <div class="mb-3">
                        <label for="latitude" class="form-label">Latitude</label>
                        <input type="text" id="nama_jalan" class="form-control" name="latitude" required>
                    </div>
                    <div class="mb-3">
                        <label for="longitude" class="form-label">Longitude</label>
                        <input type="text" id="longitude" class="form-control" name="longitude" required>
                    </div> -->
                    <button type="submit" class="btn btn-primary float-right">Simpan</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection