@extends('layouts.admin.index')

@section('content')
<div id="main-wrapper">
  <!-- Sidebar -->
  @include('layouts.admin.sidebar')
  <div class="page-wrapper">
    <!--  Header -->
    @include('layouts.admin.header')

    <div class="body-wrapper">
      <div class="container-fluid">
        {{ $disabled ? Breadcrumbs::render('UserView',$model->id) : ($model->id ? Breadcrumbs::render('UserEdit',$model->id) : Breadcrumbs::render('UserAdd')) }}
        <div class="card w-100">
          <div class="card-body">
            <form role="form" action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
              <div class="mb-3 fv-row">
                <label class="form-label" for="name">Nama Lengkap</label>
                <input class="form-control" type="text" id="name" name="name" value="{{ old('name', $model->name) }}" placeholder="Nama Lengkap" @readonly($disabled)/>
                @error('name')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="username">Username</label>
                <input class="form-control" type="text" id="username" name="username" value="{{ old('username', $model->username) }}" placeholder="Username" @readonly($disabled)/>
                @error('username')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="email">Email</label>
                <input class="form-control" type="email" id="email" name="email" value="{{ old('email', $model->email) }}" placeholder="Email" @readonly($disabled)/>
                @error('email')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="phone">No. Telepon/Handphone/Whatsapp</label>
                <input class="form-control" type="text" id="phone" name="phone" value="{{ old('phone', $model->phone) }}" placeholder="No. Telepon" @readonly($disabled)/>
                @error('phone')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="institution_id">Lembaga</label>
                </div>
                <select class="form-select select2" name="institution_id" id="institution_id" data-live-search="true" @disabled($disabled)>
                  <option value="">Pilih Lembaga</option>
                  @foreach($institution as $r)
                    <option value="{{ $r->id }}" @selected($r->id == old('institution_id', $model->institution_id))>{{ $r->name }} - {{ $r->organization_type->name }}</option>
                  @endforeach
                </select>
                @error('institution_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="role_id">Role</label>
                </div>
                <select class="form-select select2" name="role_id" id="role_id" data-live-search="true" @disabled($disabled)>
                  <option value="">Pilih Role</option>
                  @foreach($role as $r)
                    <option value="{{ $r->id }}" @selected($r->id == old('role_id', $model->role_id))>{{ $r->name }}</option>
                  @endforeach
                </select>
                @error('role_id')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              @if(!$model->id)
                <div class="mb-3 fv-row">
                  <label class="form-label" for="password">Password</label>
                  <div class="input-group input-group-merge">
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Konfirmasi Password" id="inputPassword" />
                    <span class="input-group-text">
                      <a id="toggle-password" href="javascript:void(0)" class="text-dark">
                        <i class="ti ti-eye"></i>
                      </a>
                    </span>
                    @error('password')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="mb-3 fv-row">
                  <label class="form-label" for="password_confirmation">Konfirmasi Password</label>
                  <div class="input-group input-group-merge">
                    <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="Konfirmasi Password" id="inputPasswordConfirm" />
                    <span class="input-group-text">
                      <a id="toggle-password-confirm" href="javascript:void(0)" class="text-dark">
                        <i class="ti ti-eye"></i>
                      </a>
                    </span>
                    @error('password_confirmation')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
              @endif
              <input type="hidden" name="id" value="{{ $model->id }}" />
              {{ csrf_field() }}
              <div class="d-flex w-100 justify-content-end">
                @if(!$disabled)
                  <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
                @endif
              </div>
            </form>
            @if($disabled && ($model->email_verified_at == null) && auth()->user()->role_id == 1 && $model->id != 1)
              <div class="d-flex w-100 justify-content-end">
                <a class="btn btn-primary me-2 approve-confirmation" data-action="{{ route('user.approve') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin menyetujui data ini?" href="javascript:void(0)">
                  <i class="ti ti-check me-2"></i>Setuju
                </a>
                <a class="btn btn-danger reject-confirmation" data-action="{{ route('user.reject') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin menyetujui data ini?" href="javascript:void(0)">
                  <i class="ti ti-x me-2"></i>Tolak
                </a>
              </div>
            @endif
            @if($disabled && $model->is_active && $model->email_verified_at && auth()->user()->role_id == 1 && $model->id != 1)
              <div class="d-flex w-100 justify-content-end">
                <a class="btn btn-danger non-active-confirmation" data-action="{{ route('user.set-non-active') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin me-non-aktifkan akun ini?" href="javascript:void(0)">
                  <i class="ti ti-x me-2"></i>Non-Aktifkan
                </a>
              </div>
            @endif
            @if($disabled && !$model->is_active && $model->email_verified_at && auth()->user()->role_id == 1 && $model->id != 1)
              <div class="d-flex w-100 justify-content-end">
                <a class="btn btn-success me-2 active-confirmation" data-action="{{ route('user.set-active') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin mengaktifkan akun ini?" href="javascript:void(0)">
                  <i class="ti ti-check me-2"></i>Aktifkan
                </a>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script type="module">
  $(document).ready(function() {
    $('#province_id').on('change', function() {
      const provinceId = $(this).val();
      if(provinceId) {
        $.ajax({
          url: `/api/cities/${provinceId}`,
          type: "GET",
          data : {"_token":"{{ csrf_token() }}"},
          dataType: "json",
          success:function(data)
          {
            if(data){
              $('#city_id').empty();
              $('#city_id').append('<option value="">Pilih Kabupaten/Kota</option>');
              $.each(data, function(key, city){
                $('select[name="city_id"]').append(`<option value="${city.id}">${city.type} ${city.name}</option>`);
              });
              // If old city value exists, re-select it
              var oldCityId = '{{ old('city_id', $model->city_id) }}';
              if (oldCityId) {
                  $('#city_id').val(oldCityId);
              }
            }else{
              $('#city_id').empty();
            }
          }
        });
      }else{
        $('#city_id').empty();
      }
    });

    $('#city_id').on('change', function() {
      const city_id = $(this).val();
      if(city_id) {
        $.ajax({
          url: `/api/subdistricts/${city_id}`,
          type: "GET",
          data : {"_token":"{{ csrf_token() }}"},
          dataType: "json",
          success:function(data)
          {
            if(data){
              $('#subdistrict_id').empty();
              $('#subdistrict_id').append('<option value="">Pilih Kecamatan</option>');
              $.each(data, function(key, sd){
                $('select[name="subdistrict_id"]').append('<option value="'+ sd.id +'">' + sd.name+ '</option>');
              });
              // If old city value exists, re-select it
              var oldSubdistrictId = '{{ old('subdistrict_id', $model->subdistrict_id) }}';
              if (oldSubdistrictId) {
                  $('#subdistrict_id').val(oldSubdistrictId);
              }
            }else{
              $('#subdistrict_id').empty();
            }
          }
        });
      }else{
        $('#subdistrict_id').empty();
      }
    });

    $('#subdistrict_id').on('change', function() {
      const subdistrict_id = $(this).val();
      if(subdistrict_id) {
        $.ajax({
          url: `/api/villages/${subdistrict_id}`,
          type: "GET",
          data : {"_token":"{{ csrf_token() }}"},
          dataType: "json",
          success:function(data)
          {
            if(data){
              $('#village_id').empty();
              $('#village_id').append('<option value="">Pilih Desa/Kelurahan</option>');
              $.each(data, function(key, sd){
                $('select[name="village_id"]').append('<option value="'+ sd.id +'">' + sd.name+ '</option>');
              });
              // If old city value exists, re-select it
              var oldVillageId = '{{ old('village_id', $model->village_id) }}';
              if (oldVillageId) {
                  $('#village_id').val(oldVillageId);
              }
            }else{
              $('#village_id').empty();
            }
          }
        });
      }else{
        $('#village_id').empty();
      }
    });

    const oldProvinceId = '{{ old('province_id', $model->province_id) }}';
    if (oldProvinceId) {
        $('#province_id').trigger('change');
    }
    const oldCityId = '{{ old('city_id', $model->city_id) }}';
    if (oldCityId) {
        $('#city_id').trigger('change');
    }
    const oldSubdistrictId = '{{ old('subdistrict_id', $model->subdistrict_id) }}';
    if (oldSubdistrictId) {
        $('#subdistrict_id').trigger('change');
    }
  });
</script>
@endpush