@extends('template.app')

@section('content')
<div class="blog">
  <div class="container">
      <div class="row">
        <div class="col-lg-4 offset-lg-4  wow fadeInDown animated" data-wow-duration="1s" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
          <div class="section-heading">
            <h4>Profil <em>User</em></h4>
            <div class="line-dec"></div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-4">
            <div class="blog-card">
              <div class="card">
            <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
              @if (auth()->user()->foto)
                  <img src="{{ asset('images/' . auth()->user()->foto) }}" alt="Profile" class="rounded-circle" width="100px"> </br>
              @else
                  <img src="{{ asset('images/profil.png') }}" alt="Profile" class="rounded-circle" width="100px"> </br>
              @endif
              <h3>{{Auth::user()->nama}}</h3>
              <h4>{{ Auth::user()->nik}}</h4>
            </div>
        </div>
            </div>

        </div>


        <div class="col-md-8">
            <div class="blog-card">
                <div class="card">
                  <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                      <button class="nav-link active" id="nav-detail-tab" data-bs-toggle="tab" data-bs-target="#nav-detail" type="button" role="tab" aria-controls="nav-detail" aria-selected="true">Detail Profil</button>

                      <button class="nav-link" id="nav-edit-tab" data-bs-toggle="tab" data-bs-target="#nav-edit" type="button" role="tab" aria-controls="nav-edit" aria-selected="false">Edit Profil</button>

                       <button class="nav-link" id="nav-password-tab" data-bs-toggle="tab" data-bs-target="#nav-password" type="button" role="tab" aria-controls="nav-password" aria-selected="false">Ubah Password</button>
                    </div>
                  </nav>  
                 <div class="tab-content" id="nav-tabContent">
                  <br>
                  <div class="tab-pane fade show active" id="nav-detail" role="tabpanel" aria-labelledby="nav-detail-tab">
                    <div class="row">
                            <div class="col-lg-2 col-md-3 label ">NIK</div>
                            <div class="col-lg-1 col-md-1 label ">:</div>
                            <div class="col-lg-9 col-md-8">{{ Auth::user()->nik ?? "-"}}</div>
                          </div>
                          <div class="row">
                            <div class="col-lg-2 col-md-3 label ">Nama</div>
                            <div class="col-lg-1 col-md-1 label ">:</div>
                            <div class="col-lg-9 col-md-8">{{ Auth::user()->nama ?? "-"}}</div>
                          </div>
                          <div class="row">
                            <div class="col-lg-2 col-md-3 label ">Username</div>
                            <div class="col-lg-1 col-md-1 label ">:</div>
                            <div class="col-lg-9 col-md-8">{{ Auth::user()->username ?? "-"}}</div>
                          </div>
                          <div class="row">
                            <div class="col-lg-2 col-md-3 label ">Telepon</div>
                            <div class="col-lg-1 col-md-1 label ">:</div>
                            <div class="col-lg-9 col-md-8">{{ Auth::user()->telp ?? "-" }}</div>
                          </div>
                          <div class="row">
                            <div class="col-lg-2 col-md-3 label ">Email</div>
                            <div class="col-lg-1 col-md-1 label ">:</div>
                            <div class="col-lg-9 col-md-8">{{ Auth::user()->email ?? "-" }}</div>
                          </div>
                          <div class="row">
                            <div class="col-lg-2 col-md-3 label ">Alamat</div>
                            <div class="col-lg-1 col-md-1 label ">:</div>
                            <div class="col-lg-9 col-md-8">{{ Auth::user()->alamat ?? "-" }}</div>
                          </div>
                  </div>
                  <div class="tab-pane fade" id="nav-edit" role="tabpanel" aria-labelledby="nav-edit-tab">
                    <form method="POST" action="{{route('user.edit')}}" enctype="multipart/form-data">
                           @csrf
                           {{method_field('POST')}}

                            <div class="row mb-3">
                                <label for="foto" class="col-md-4 col-lg-3 col-form-label">Foto
                                </label>
                                <div class="col-md-8 col-lg-9">
                                  <input class="form-control input-box form-ensurance-header-control" id="foto" type="file" name="foto">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <label for="nik" class="col-md-4 col-lg-3 col-form-label">Nik
                                </label>
                                <div class="col-md-8 col-lg-9">
                                  <input name="nik" type="text" class="form-control" id="nik" value="{{ Auth::user()->nik }}">
                                </div>
                            </div>
                            <div class="row mb-3">
                              <label for="nama" class="col-md-4 col-lg-3 col-form-label">Full Name</label>
                              <div class="col-md-8 col-lg-9">
                                <input name="nama" type="text" class="form-control" id="nama" value="{{ Auth::user()->nama }}" required>
                              </div>
                            </div>
                            <div class="row mb-3">
                              <label for="username" class="col-md-4 col-lg-3 col-form-label">Username</label>
                              <div class="col-md-8 col-lg-9">
                                <input name="username" type="text" class="form-control" id="username" value="{{ Auth::user()->username }}" required>
                              </div>
                            </div>
                            <div class="row mb-3">
                              <label for="telp" class="col-md-4 col-lg-3 col-form-label">Phone</label>
                              <div class="col-md-8 col-lg-9">
                                <input name="telp" type="text" class="form-control" id="telp" value="{{ Auth::user()->telp}}" required>
                              </div>
                            </div>
                            <div class="row mb-3">
                              <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                              <div class="col-md-8 col-lg-9">
                                <input name="email" type="email" class="form-control" id="Email" value="{{ Auth::user()->email}}" required>
                              </div>
                            </div>
                            <!-- <div class="row mb-3">
                              <label for="Alamat" class="col-md-4 col-lg-3 col-form-label">Alamat</label>
                              <div class="col-md-8 col-lg-9">
                                <input name="alamat" type="text" class="form-control" id="Alamat" value="{{ Auth::user()->alamat}}" required>
                              </div>
                            </div> -->
                            <div class="row mb-3">
                                      <label for="company" class="col-md-4 col-lg-3 col-form-label">Provinsi</label>
                                         <div class="col-md-8 col-lg-9">
                                            <select class="custom-select" name="selectProvinsi" id="selectProvinsi">
                                                {{-- <option>Provinsi</option> --}}
                                            </select>
                                        </div>
                            </div>
                            {{-- kabupaten/kota --}}
                            <div class="row mb-3">
                                      <label for="company" class="col-md-4 col-lg-3 col-form-label">kabupaten/kota</label>
                                         <div class="col-md-8 col-lg-9">
                                            <select class="custom-select" name="selectKabupaten" id="selectKabupaten">
                                                {{-- <option>Kabupaten</option> --}}
                                            </select>
                                        </div>
                            </div>
                            {{-- kecamatan --}}
                            <div class="row mb-3">
                                      <label for="company" class="col-md-4 col-lg-3 col-form-label">kecamatan</label>
                                         <div class="col-md-8 col-lg-9">
                                            <select class="custom-select" name="selectKecamatan" id="selectKecamatan">
                                                {{-- <option value="Kecamatan"></option> --}}
                                            </select>
                                        </div>
                            </div>
                            {{-- kelurahan --}}
                            <div class="row mb-3">
                                      <label for="company" class="col-md-4 col-lg-3 col-form-label">Kelurahan</label>
                                         <div class="col-md-8 col-lg-9">
                                            <select class="custom-select" name="selectKelurahan" id="selectKelurahan">
                                                {{-- <option> Kelurahan </option> --}}
                                            </select>
                                        </div>
                            </div>
                            {{-- final alamat --}}
                            <div class="form-group">
                                        <label class="form-label">Alamat</label>
                                        <textarea class="form-control" name="alamat" id="alamat">{{$data->alamat ?? ''}}</textarea>
                            </div>
                            <div class="text-center">
                              <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                    </form>
                  </div>
                  <div class="tab-pane fade" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
                    @if (session('error'))
                            <div class="alert alert-danger">
                            {{ session('error') }}
                            </div>
                        @endif
                        @if (session('success'))
                            <div class="alert alert-success">
                            {{ session('success') }}
                            </div>
                        @endif

                        <form method="POST" action="{{ route('changepassword') }}" enctype="multipart/form-data">
                        @csrf
                        {{method_field('POST')}}
                          
                          <div class="row mb-3">
                            <label for="current-password" class="col-md-4 col-lg-3 col-form-label">Current Password</label>
                            <div class="col-md-8 col-lg-9">
                              <input name="current-password" type="password" class="form-control" id="current-password" required>
                              @if ($errors->has('current-password'))
                                  <div class="invalid-feedback">
                                  {{ $errors->first('current-password') }}
                                  </div>
                              @endif
                            </div>
                          </div>
                          <div class="row mb-3">
                            <label for="new-password" class="col-md-4 col-lg-3 col-form-label">New Password</label>
                            <div class="col-md-8 col-lg-9">
                              <input name="new-password" type="password" class="form-control" id="new-password" required>
                              @if ($errors->has('new-password'))
                                  <div class="invalid-feedback">
                                  {{ $errors->first('new-password') }}
                                  </div>
                              @endif
                            </div>
                          </div>
                          <div class="row mb-3">
                            <label for="new-password-confirm" class="col-md-4 col-lg-3 col-form-label">Re-enter New Password</label>
                            <div class="col-md-8 col-lg-9">
                              <input name="new-password-confirm" type="password" class="form-control" id="new-password-confirm" required>
                              @if ($errors->has('new-password-confirm'))
                                  <div class="invalid-feedback">
                                  {{ $errors->first('new-password-confirm') }}
                                  </div>
                              @endif
                            </div>
                          </div>
                          <div class="text-center">
                            <button type="submit" class="btn btn-primary">Change Password</button>
                          </div>
                        </form>
                  </div>
                </div> 
            </div>
        </div>


      </div>
  </div>
</div>

<script>
        let selectProvinsi = document.getElementById('selectProvinsi');
        let selectKabupaten = document.getElementById('selectKabupaten');
        let selectKecamatan = document.getElementById('selectKecamatan');
        let selectKelurahan = document.getElementById('selectKelurahan');
        let alamat = document.getElementById('alamat');
        document.addEventListener('DOMContentLoaded', function(){
            fetchProvinsi();
            selectKabupaten.style.display = "none";
            selectKecamatan.style.display = "none";
            selectKelurahan.style.display = "none";
            getValueToAlamat();
        });
        const config = {
            method : 'GET'
        }
        // fetch provinsi get data
        async function fetchProvinsi(){
            const URL = `http://www.emsifa.com/api-wilayah-indonesia/api/provinces.json`;
            await fetch(URL, config)
            .then(response => response.json())
            // .then(provinsi => console.log(provinsi))
            .then(provinsi => {
                if(provinsi != null || undefined){
                    provinsi.map(data=>{
                        let opt = document.createElement('option');
                        opt.value = data.id;
                        opt.innerHTML = data.name;
                        selectProvinsi.appendChild(opt);
                        // console.log(selectProvinsi)
                    })
                }else{
                    let opt = document.createElement('option');
                        opt.value = "";
                        opt.innerHTML = "Data tidak tersedia";
                        selectProvinsi.appendChild(opt);
                }
            }).catch(error => alert(`Data provinsi tidak ada`));
        }
        // fetch kabupaten/kota get data
        async function fetchKabupaten(id){
            const URL = `http://www.emsifa.com/api-wilayah-indonesia/api/regencies/${id === undefined || null ? "" : id}.json`;
            await fetch(URL, config)
            .then(response => response.json())
            .then(kabupaten =>{
                if (kabupaten !== null || undefined) {
                        kabupaten.map(data => {
                            let opt = document.createElement('option');
                            opt.value = data.id;
                            opt.innerHTML = data.name;
                            selectKabupaten.appendChild(opt);
                        })
                    } else {
                        let opt = document.createElement('option');
                        opt.value = "";
                        opt.innerHTML = "Data tidak tersedia";
                        selectKabupaten.appendChild(opt);
                    }
            })
        }
        // fetch kecamatan get data
        async function fetchKecamatan(id){
            const URL = `http://www.emsifa.com/api-wilayah-indonesia/api/districts/${id === undefined || null ? ""  : id}.json`;
            await fetch(URL, config)
            .then(response => response.json())
            .then(kecamatan =>{
                if (kecamatan !== null || undefined) {
                        kecamatan.map(data => {
                            let opt = document.createElement('option');
                            opt.value = data.id;
                            opt.innerHTML = data.name;
                            selectKecamatan.appendChild(opt);
                        })
                    } else {
                        let opt = document.createElement('option');
                        opt.value = "";
                        opt.innerHTML = "Data tidak tersedia";
                        selectKecamatan.appendChild(opt);
                    }
            })
        }
    
        async function fetchKelurahan(id){
            const URL = `http://www.emsifa.com/api-wilayah-indonesia/api/villages/${id === undefined || null ? "" : id}.json`;
            await fetch(URL, config)
            .then(response => response.json())
            .then(kelurahan => {
                if(kelurahan !== null || undefined){
                    kelurahan.map(data => {
                        let opt = document.createElement('option');
                        opt.value = data.id;
                        opt.innerHTML = data.name;
                        selectKelurahan.appendChild(opt);
                    })
                }else{
                    let opt = document.createElement('option');
                    opt.value = "";
                    opt.innerHTML = "Data Tidak Tersedia";
                    selectKelurahan.appendChild(opt);
                }
            })
        }
        selectProvinsi.addEventListener('change', () => {
            fetchKabupaten(selectProvinsi.value);
            selectKabupaten.style.display = "block";
            selectKabupaten.innerHTML = '';
            selectKecamatan.innerHTML = '';
            selectKelurahan.innerHTML = '';
        });
        
        selectKabupaten.addEventListener('change', () => {
            fetchKecamatan(selectKabupaten.value);
            selectKecamatan.style.display = "block";
            selectKecamatan.innerHTML = '';
            selectKelurahan.innerHTML = '';
        });
        
        selectKecamatan.addEventListener('change', () => {
            fetchKelurahan(selectKecamatan.value);
            selectKelurahan.style.display = "block";
            selectKelurahan.innerHTML = '';
        });
        function getValueToAlamat() {
            alamat.addEventListener('change', () => {
                let alamatText = alamat.value;
                document.getElementById('alamat').value = `${alamatText}, ${selectKelurahan.options[selectKelurahan.selectedIndex].text}, ${selectKecamatan.options[selectKecamatan.selectedIndex].text}, ${selectKabupaten.options[selectKabupaten.selectedIndex].text}, ${selectProvinsi.options[selectProvinsi.selectedIndex].text}, `;
                // console.log(`${alamatText}, ${selectKelurahan.options[  selectKelurahan.selectedIndex].text}, ${selectKecamatan.options[selectKecamatan.selectedIndex].text}, ${selectKabupaten.options[selectKabupaten.selectedIndex].text}, ${selectProvinsi.options[selectProvinsi.selectedIndex].text}, `);
                
            });
        }
    </script>

  


@endsection