@extends('layout.template')
@section('content')

<main id="main" class="main">

    <div class="pagetitle">
        <h1>Informasi Pelanggan</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">Pelanggan</li>
                <li class="breadcrumb-item active">Informasi</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg">

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Cari Data Pelanggan</h5>
                        <div class="row">
                            <div class="col-2">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" id="nosamb" style="box-shadow: none;">
                                    <span class="input-group-text" id="basic-addon2" onclick="myCopy()">
                                        <i class="ri-file-copy-2-fill"></i>
                                    </span>
                                </div>
                            </div>
                        </div>


                        <div class="row pt-3">
                            <div class="col">
                                <!-- Bordered Tabs -->
                                <ul class="nav nav-tabs nav-tabs-bordered">

                                    <li class="nav-item">
                                        <button class="nav-link" data-bs-toggle="tab"
                                            data-bs-target="#profile-overview">Informasi Pelanggan</button>
                                    </li>

                                    <li class="nav-item">
                                        <button class="nav-link active" data-bs-toggle="tab"
                                            data-bs-target="#profile-edit">Detail Pelanggan</button>
                                    </li>
                                </ul>
                                <div class="tab-content pt-2">

                                    <div class="tab-pane fade profile-overview" id="profile-overview">
                                        <table class="table table-sm table-hover">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="small">Periode</th>
                                                    <th scope="col" class="small">Stan Lalu</th>
                                                    <th scope="col" class="small">Stan Kini</th>
                                                    <th scope="col" class="small">Pakai (M3)</th>
                                                    <th scope="col" class="small">Pakai (Rp)</th>
                                                    <th scope="col" class="small">Administrasi</th>
                                                    <th scope="col" class="small">Dn. Meter</th>
                                                    <th scope="col" class="small">Rek Air</th>
                                                    <th scope="col" class="small">Denda</th>
                                                    <th scope="col" class="small">Total</th>
                                                    <th scope="col" class="small">L</th>
                                                    <th scope="col" class="small">Tgl Bayar</th>
                                                    <th scope="col" class="small">Kasir</th>
                                                    <th scope="col" class="small">Loket</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>

                                    </div>

                                    <div class="tab-pane fade show active profile-edit pt-3" id="profile-edit">
                                        <form>
                                            <div class="px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">No.
                                                        Samb</label>
                                                    <div class="col-sm-3 input">
                                                        <input type="text" class="form-control" id="nosamb" name="search" readonly>
                                                    </div>
                                                    <div class="col-sm input">
                                                        <div class="form-check mt-2">
                                                            <label id="status" class="form-check-label"
                                                                for="exampleRadios1"></label>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm"></div>
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Nama
                                                        Pemilik</label>
                                                    <div class="col-sm-3 input">
                                                        <input id="namapemilik" name="namapemilik" type="text" class="form-control" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Nama</label>
                                                    <div class="col-sm-4 input">
                                                        <input type="text" class="form-control" id="nama" name="nama" readonly>
                                                    </div>
                                                    <div class="col-sm"></div>
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Bangunan
                                                        Milik</label>
                                                    <div class="col-sm-3 input">
                                                        <input name="kepemilikanbangunan" id="kepemilikanbangunan" type="text" class="form-control"
                                                            readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Alamat
                                                        Pasang</label>
                                                    <div class="col-sm-4 input">
                                                        <input type="text" class="form-control" id="alamat" name="alamat" readonly>
                                                    </div>
                                                    <div class="col-sm"></div>
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Merk
                                                        Meter</label>
                                                    <div class="col-sm-3 input">
                                                        <input name="merk" id="merk" type="text" class="form-control" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Alamat
                                                        KTP</label>
                                                    <div class="col-sm-4 input">
                                                        <input type="text" class="form-control" name="alamatktp" id="alamatktp" readonly>
                                                    </div>
                                                    <div class="col-sm"></div>
                                                    <label
                                                        class="col-sm-2 col-form-label font-weight-bolder">Serimeter</label>
                                                    <div class="col-sm-3 input">
                                                        <input name="serimeter" id="serimeter" type="text" class="form-control" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label
                                                        class="col-sm-2 col-form-label font-weight-bolder">Pekerjaan</label>
                                                    <div class="col-sm-4 input">
                                                        <input type="text" class="form-control" name="pekerjaan" id="pekerjaan" readonly>
                                                    </div>
                                                    <div class="col-sm"></div>
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Mode
                                                        Bayar</label>
                                                    <div class="col-sm-3 input">
                                                        <input name="modebayar" id="modebayar" type="text" class="form-control" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Nomor
                                                        KTP</label>
                                                    <div class="col-sm-4 input">
                                                        <input type="text" class="form-control" name="noktp" id="noktp" readonly>
                                                    </div>

                                                    <div class="col-6"></div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Nomor
                                                        HP</label>
                                                    <div class="col-sm-4 input">
                                                        <input type="text" class="form-control" name="nohp" id="nohp" readonly>
                                                    </div>

                                                    <div class="col-6"></div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Unit /
                                                        Wilayah</label>
                                                    <div class="col-sm input">
                                                        <input type="text" class="form-control" name="kodeunit" id="kodeunit" readonly>
                                                    </div>
                                                    <div class="col-sm-3 input">
                                                        <input type="text" class="form-control" name="namaunit" id="namaunit" readonly>
                                                    </div>

                                                    <div class="col-6"></div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Rayon</label>
                                                    <div class="col-sm input">
                                                        <input type="text" class="form-control" name="koderayon" id="koderayon" readonly>
                                                    </div>
                                                    <div class="col-sm-3 input">
                                                        <input type="text" class="form-control" name="namarayon" id="namarayon" readonly>
                                                    </div>

                                                    <div class="col-6"></div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label class="col-sm-2 col-form-label font-weight-bolder">Kode
                                                        Jalan</label>
                                                    <div class="col-sm input">
                                                        <input type="text" class="form-control" name="kodejalan" id="kodejalan" readonly>
                                                    </div>
                                                    <div class="col-sm-3 input">
                                                        <input type="text" class="form-control" name="namajalan" id="namajalan" readonly>
                                                    </div>
                                                    <div class="col-6"></div>
                                                </div>
                                            </div>
                                            <div class="mt-3 px-5">
                                                <div class="row">
                                                    <label
                                                        class="col-sm-2 col-form-label font-weight-bolder">Golongan</label>
                                                    <div class="col-sm input">
                                                        <input type="text" class="form-control" name="kodegol" id="kodegol" readonly>
                                                    </div>
                                                    <div class="col-sm-3 input">
                                                        <input type="text" class="form-control" name="golongan" id="golongan" readonly>
                                                    </div>
                                                    <div class="col-6"></div>
                                                </div>
                                            </div>
                                        </form>

                                        <br>
                                        <div class="px-5">
                                            <span class="">Histori Perubahan Status</span>
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-sm mt-1">
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Waktu</th>
                                                            <th>Jenis</th>
                                                            <th>Keterangan</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="data-history">
                                                        <!--<tr>
                                                    <td id="histori_tgl"></td>
                                                    <td id="histori_jenis"></td>
                                                    <td id="histori_ket"></td>
                                                </tr>-->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- End Bordered Tabs -->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </section>

</main><!-- End #main -->

@endsection