@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">Tambah Data Kecalakaan</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{-- @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
            </div>
            @endif

            @if (session('error'))
            <div class="alert alert-error">
                {{ session('error') }}
            </div>
            @endif --}}
                    <div class="tab-content" style="color: black;">
                        <div class="tab-pane show active" id="input-types-preview">
                            <div class="row">
                                <form action="{{ route('jalan.kecelakaan.store', $data->id) }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <h4 class="header-title">Waktu Kejadian</h4>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label">Tanggal Kejadian</label>
                                            <input class="form-control" type="date" name="tanggal">
                                        </div>
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label">Waktu Kejadian <span> (jam)</span></label>
                                            <input class="form-control" type="text" name="waktu_kejadian">
                                        </div>
                                    </div>
                                    <hr>
                                    <h4 class="header-title">Lokasi</h4>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Nama Jalan</label>
                                            <select class="form-select" name="jalans_id">
                                                <option>Pilih Jalan</option>
                                                <option value="{{ $data->nama_jalan }}">{{ $data->nama_jalan }}</option>
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">TKP/Dusun</label>
                                            <input type="text" class="form-control" name="tkp_dusun">
                                        </div>

                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Desa</label>
                                            <input type="text" class="form-control" name="desa">
                                        </div>
                                    </div>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Kecamatan</label>
                                            <input type="text" class="form-control" name="kecamatan">
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Kabupaten</label>
                                            <input type="text" class="form-control" name="kabupaten">
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Latitude</label>
                                            <input type="text" class="form-control" name="latitude">
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Longitude</label>
                                            <input type="text" class="form-control" name="longitude">
                                        </div>
                                    </div>
                                    <hr>
                                    <h4 class="header-title">Kondisi Korban</h4>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Meninggal Dunia</label>
                                            <input type="number" class="form-control" name="korban_md">
                                        </div>
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Luka Berat</label>
                                            <input type="number" class="form-control" name="korban_lb">
                                        </div> 
                                        <div class="mb-3 col-md-4">
                                            <label class="form-label">Luka Ringan</label>
                                            <input type="number" class="form-control" name="korban_lr">
                                        </div>
                                    </div>
                                    <hr>
                                    <h4 class="header-title">Informasi Lingkungan</h4>
                                    <div class="row g-2">
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Kondisi Kecelakaan</label>
                                            <select class="form-select" id="example-select" name="kondisi_kecelakaan"
                                                required>
                                                <option value="1">Ringan</option>
                                                <option value="2">Sedang</option>
                                                <option value="3">Berat</option>
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Kondisi Cahaya</label>
                                            <select class="form-select" id="example-select" name="kondisi_cahaya"
                                                required>
                                                <option value="1">Terang / Jelas</option>
                                                <option value="2">Redup / Samar</option>
                                            </select>
                                        </div>
                                        <div class="mb-3 col-md-3">
                                            <label class="form-label">Bentuk Geometri</label>
                                            <select class="form-select" id="example-select" name="bentuk_geometri"
                                                required>
                                                <option value="1">Lurus</option>
                                                <option value="2">Jembatan</option>
                                                <option value="3">Tikungan</option>
                                                <option value="4">Simpang Tiga</option>
                                                <option value="5">Simpang Empat</option>
                                            </select>
                                        </div>
                                    </div>
                                    <p><button type="submit" class="btn btn-primary plus float-right">Simpan</button></p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var timepicker = new TimePicker('time', {
            lang: 'en',
            theme: 'dark'
        });
        timepicker.on('change', function(evt) {

            var value = (evt.hour || '00') + ':' + (evt.minute || '00');
            evt.element.value = value;

        });
    </script>
    <script src="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
    <link href="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet" />
@endsection