<div class="modal fade bd-ubah-modal-lg" id="ubah-member" tabindex="-1" role="dialog" data-bs-backdrop="static"  data-keyboard="false">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="card-title">Ubah Data Stiker/Member</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                </button>
            </div>
            <div class="modal-body">
                <div class="custom-tab-1">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#home1"><i class="la la-user me-2"></i>Data Pengunjung</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#profile1"><i class="la la-home me-2"></i> Data Kendaraan</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#contact1"><i class="la la-phone me-2"></i>Data Akses</a>
                        </li>
                    </ul>
                    <form class="ubah-member" id="edit-member" methode="POST">
                        @csrf
                        @method('PUT')
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="home1" role="tabpanel">
                                <div class="pt-4">
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Jenis Transaksi</label>
                                                <div class="col-lg-8">
                                                    <input type="text" class="form-control" value="BARU" readonly>
                                                    <input type="hidden" class="form-control" name="jenis_transaksi" value="0" readonly>
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label required">Nama</label>
                                                <div class="col-lg-8">
                                                    <input type="text" class="form-control" name="nama"  placeholder="Masuk kan nama...." required>
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Alamat</label>
                                                <div class="col-lg-8">
                                                    <textarea type="text" class="form-control" rows="3" name="address" placeholder="JL. Hati hati raya..."></textarea>
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Telepon</label>
                                                <div class="col-lg-8">
                                                    <input type="number" class="form-control" phone="phone"  placeholder="+62 81/081...">
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label required">Periode :</label>
                                                <div class="col-lg-8">
                                                    <input class="form-control input-daterange-timepicker" type="text" name="daterange" value="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Jenis</label>
                                                <div class="col-lg-6">
                                                    <select class="select-data form-control" name="member" id="member">
                                                        <option selected value="">Pilih Jenis</option>
                                                        @foreach ($memberSelect as $member)
                                                            <option value="{{ $member->id }}">{{ $member->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Dept</label>
                                                <div class="col-lg-6">
                                                    <select class="select-data form-control" name="depart" id="department">
                                                        <option selected value="">Pilih Departemen</option>
                                                        @foreach ($departmentSelect as $department)
                                                            <option value="{{ $department->kode }}">{{ $department->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Note :</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" name="note" placeholder="Catatan...">
                                                </div>
                                            </div>
                                            <div class="mb-3 row">
                                                <label class="col-lg-3 col-form-label form-label">Harga (Rp.):</label>
                                                <div class="col-lg-6">
                                                    <input type="text" class="form-control" name="harga" placeholder="10.000">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="profile1">
                                <div class="pt-4">
                                    <h4>Tambahkan Kendaraan</h4>
                                    <div class="row form-material">
                                        <div class="col-xl-3 col-md-6 mb-3">
                                            <label class="form-label">Nomer Polisi</label>
                                            <input type="text" class="form-control nopol-add"  onkeyup="this.value = this.value.toUpperCase();" placeholder="No. Polisi">
                                            <div class="invalid-feedback">Nomer Polisi sudah ada</div>
                                        </div>
                                        <div class="col-xl-3 col-md-6 mb-3">
                                            <label class="form-label">Jenis Kendaraan :</label>
                                            <select class="select form-control" id="jenisVehicle">
                                                <option selected value="">Jenis Kendaraan</option>
                                                @foreach ($vehicleSelect as $kendaraan)
                                                    <option value="{{ $kendaraan->id }}">{{ $kendaraan->nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-md-6 mb-3">
                                            <label class="form-label">Jenis Member :</label>
                                            <select class="select-data form-control member" id="jenis-member">
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-md-6 mb-3">
                                            <label class="form-label">Merk : </label>
                                            <input type="text" class="form-control merk" onkeyup="this.value = this.value.toUpperCase();"  placeholder="Honda...">
                                        </div>
                                        <div class="col-xl-3 col-md-6 mb-3">
                                            <label class="form-label"></label>
                                            <button type="button" id="nopol-add" class="btn btn-primary btn-xs">Tambah</button>
                                        </div>
                                        <hr>
                                        <table class="table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th class="col-2 text-center p-2">Nomer Polisi</th>
                                                    <th class="col-2 text-center">Jenis Kendaraan</th>
                                                    <th class="col-2 text-center">Merk Kendaraan</th>
                                                    <th class="col-2 text-center">Type Member</th>
                                                    <th class="col-2 text-center">Aksi</th>
                                                </tr>
                                            </thead>
                                            <tbody  id="list-nopol">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="contact1">
                                <div class="pt-4">
                                    <h4>Tambahkan Kartu</h4>
                                    <div class="row form-material">
                                        <div class="col-xl-6 col-md-6 mb-3">
                                            <label class="form-label">Nomer Kartu</label>
                                            <input type="text" class="form-control kartu" placeholder="01234567...">
                                        </div>
                                        <div class="col-xl-6 col-md-6 mb-3">
                                            <label class="form-label">Nomer Urut</label>
                                            <input type="text" class="form-control nourut" placeholder="01234567...">
                                        </div>
                                        <hr>
                                        {{-- <div class="table-responsive"> --}}
                                            <table class="table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th class="col-5 text-center p-2" >Nomer Kartu</th>
                                                        <th class="col-5 text-center">No. Urut</th>
                                                        <th class="col-2 text-center">Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody  id="list-card">
                                                </tbody>
                                            </table>
                                        {{-- </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary simpan">Simpan Perubahan</button>
            </div>
        </div>
    </div>
</div>