@extends('master')

@section('header-konten')
    <!-- Page header -->
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">Data Jalan & Saluran</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="/dashboard" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ url('perumahan') }}" class="breadcrumb-item">Perumahan</a>
                    <a href="{{ url('perumahan/detail/' . $perumahan->id_perumahan) }}" class="breadcrumb-item">Detail
                        Perumahan</a>
                    <span class="breadcrumb-item active">Data Jalan & Saluran</span>
                    {{-- <a href="#" class="breadcrumb-item">Data Perumahan</a> --}}
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>

            <div class="collapse d-lg-block ms-lg-auto" id="breadcrumb_elements">
                <div class="d-lg-flex mb-2 mb-lg-0">
                    <a href="#" class="d-flex align-items-center text-body py-2">
                        <i class="ph-lifebuoy me-2"></i>
                        Bantuan
                    </a>

                    <div class="dropdown ms-lg-3">
                        <a href="#" class="d-flex align-items-center text-body dropdown-toggle py-2"
                            data-bs-toggle="dropdown">
                            <i class="ph-gear me-2"></i>
                            <span class="flex-1">Pengaturan</span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-end w-100 w-lg-auto">
                            <a href="#" class="dropdown-item">
                                <i class="ph-shield-warning me-2"></i>
                                Keamanan Akun
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="ph-chart-bar me-2"></i>
                                Analitik
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="ph-lock-key me-2"></i>
                                Privasi
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="#" class="dropdown-item">
                                <i class="ph-gear me-2"></i>
                                Semua pengaturan
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page header -->
@endsection

@section('konten')
    <!-- Input fields -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Data Jalan & Saluran " "</h5>
        </div>

        <div class="card-body">
            <div>
                <a href="{{ url('perumahan/detail/' . $perumahan->id_perumahan) }}" class="btn btn-primary"><i
                        class="ph-arrow-left"></i> Kembali</a>
            </div>

            <!-- Cards in grid columns -->
            <div class="mb-3">
                <h6 class="mb-0">
                    {{-- Card grid --}}
                </h6>
                {{-- <span class="text-muted d-block">Render cards in grid columns</span> --}}
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body row">
                        <div class="col-md-6 mb-2">
                            <button href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#"><i
                                    class="ph-gear"></i>&nbsp;Atur Kolom yang Ditampilkan</button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table datatable-basic table-bordered table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama Jalan</th>
                                    <th>Panjang Eksisting</th>
                                    <th>Lbr Jalan Eks</th>
                                    <th>L Saluran Kanan Eks</th>
                                    <th>L Saluran Kiri Eks</th>
                                    <th>Jalan RR</th>
                                    <th>Jalan RS</th>
                                    <th>Jalan RB</th>
                                    <th>Jalan Baik</th>
                                    <th>Foto Jalan</th>
                                </tr>
                            </thead>
                            <tbody>

                                {{-- @foreach ($data as $dt) --}}
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>

                                {{-- @endforeach --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            @endsection