@extends('layouts.app')

@section('content')
    <div class="page-header">
        <div class="row">
            <div class="col">
                <h3 class="page-title">Manajemen Akun</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Edit User</li>
                </ul>
            </div>
        </div>
    </div>

    @if (count($errors) > 0)
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Terjadi kesalahan!</strong> Silakan periksa input Anda.<br><br>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row justify-content-center">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header bg-dark">
                    <h4 class="card-title mb-0">Formulir Edit Akun</h4>
                    <p class="card-text mb-0">
                        Silakan ubah data pengguna di bawah ini.
                    </p>
                </div>
                <div class="card-body">
                    <form action="{{ route('users.update', $user->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row g-3">



                            {{-- Data Pribadi --}}
                            <div class="col-md-6">
                                <label for="name" class="form-label"><strong>Nama</strong></label>
                                <input type="text" name="name" class="form-control" id="name" placeholder="Nama"
                                    value="{{ old('name', $user->name) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="nohp" class="form-label"><strong>No HP</strong></label>
                                <input type="text" name="nohp" class="form-control" id="nohp"
                                    placeholder="Nomor HP" value="{{ old('nohp', $user->nohp) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="alamat" class="form-label"><strong>Alamat</strong></label>
                                <input type="text" name="alamat" class="form-control" id="alamat"
                                    placeholder="Alamat" value="{{ old('alamat', $user->alamat) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="provinsi" class="form-label"><strong>Provinsi</strong></label>
                                @php
                                    $provinces = new App\Http\Controllers\DependentDropdownController();
                                    $provinces = $provinces->provinces();
                                @endphp
                                <select class="form-select" name="provinsi" id="provinsi">
                                    <option value="">==Pilih Salah Satu==</option>
                                    @foreach ($provinces as $item)
                                        <option value="{{ $item->id ?? '' }}" {{ old('provinsi', $user->provinsi) == $item->id ? 'selected' : '' }}>{{ $item->name ?? '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="kota" class="form-label"><strong>Kabupaten / Kota</strong></label>
                                <select class="form-select" name="kota" id="kota">
                                    <option value="">==Pilih Salah Satu==</option>
                                    @if(old('provinsi', $user->provinsi))
                                        @php
                                            $cities = (new App\Http\Controllers\DependentDropdownController())->cities(old('provinsi', $user->provinsi));
                                        @endphp
                                        @foreach($cities as $key => $value)
                                            <option value="{{ $key }}" {{ old('kota', $user->kota) == $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="kecamatan" class="form-label"><strong>Kecamatan</strong></label>
                                <select class="form-select" name="kecamatan" id="kecamatan">
                                    <option value="">==Pilih Salah Satu==</option>
                                    @if(old('kota', $user->kota))
                                        @php
                                            $districts = (new App\Http\Controllers\DependentDropdownController())->districts(old('kota', $user->kota));
                                        @endphp
                                        @foreach($districts as $key => $value)
                                            <option value="{{ $key }}" {{ old('kecamatan', $user->kecamatan) == $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="kelurahan" class="form-label"><strong>Kelurahan</strong></label>
                                <select class="form-select" name="kelurahan" id="desa">
                                    <option value="">==Pilih Salah Satu==</option>
                                    @if(old('kecamatan', $user->kecamatan))
                                        @php
                                            $villages = (new App\Http\Controllers\DependentDropdownController())->villages(old('kecamatan', $user->kecamatan));
                                        @endphp
                                        @foreach($villages as $key => $value)
                                            <option value="{{ $key }}" {{ old('kelurahan', $user->kelurahan) == $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="tanggal_lahir" class="form-label"><strong>Tanggal Lahir</strong></label>
                                <input type="date" name="tanggal_lahir" class="form-control" id="tanggal_lahir"
                                    value="{{ old('tanggal_lahir', $user->tanggal_lahir) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="jenis_kelamin" class="form-label"><strong>Jenis Kelamin</strong></label>
                                <select name="jenis_kelamin" id="jenis_kelamin" class="form-select">
                                    <option value="">Pilih Jenis Kelamin</option>
                                    <option value="Laki-laki" {{ old('jenis_kelamin', $user->jenis_kelamin) == 'Laki-laki' ? 'selected' : '' }}>
                                        Laki-laki</option>
                                    <option value="Perempuan" {{ old('jenis_kelamin', $user->jenis_kelamin) == 'Perempuan' ? 'selected' : '' }}>
                                        Perempuan</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="foto_profil" class="form-label"><strong>Foto Profil</strong></label>
                                <input type="file" name="foto_profil" class="form-control" id="foto_profil">
                                @if($user->foto_profil)
                                    <div class="mt-2">
                                        <img src="{{ asset('storage/' . $user->foto_profil) }}" alt="Foto Profil" width="80">
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <label for="status_perkawinan" class="form-label"><strong>Status
                                        Perkawinan</strong></label>
                                <select name="status_perkawinan" id="status_perkawinan" class="form-select">
                                    <option value="">Pilih Status</option>
                                    <option value="Belum Menikah"
                                        {{ old('status_perkawinan', $user->status_perkawinan) == 'Belum Menikah' ? 'selected' : '' }}>Belum Menikah
                                    </option>
                                    <option value="Menikah" {{ old('status_perkawinan', $user->status_perkawinan) == 'Menikah' ? 'selected' : '' }}>
                                        Menikah</option>
                                    <option value="Cerai" {{ old('status_perkawinan', $user->status_perkawinan) == 'Cerai' ? 'selected' : '' }}>
                                        Cerai
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="agama" class="form-label"><strong>Agama</strong></label>
                                <select name="agama" id="agama" class="form-select">
                                    <option value="">Pilih Agama</option>
                                    <option value="Islam" {{ old('agama', $user->agama) == 'Islam' ? 'selected' : '' }}>Islam</option>
                                    <option value="Kristen" {{ old('agama', $user->agama) == 'Kristen' ? 'selected' : '' }}>Kristen</option>
                                    <option value="Katolik" {{ old('agama', $user->agama) == 'Katolik' ? 'selected' : '' }}>Katolik</option>
                                    <option value="Hindu" {{ old('agama', $user->agama) == 'Hindu' ? 'selected' : '' }}>Hindu</option>
                                    <option value="Buddha" {{ old('agama', $user->agama) == 'Buddha' ? 'selected' : '' }}>Buddha</option>
                                    <option value="Konghucu" {{ old('agama', $user->agama) == 'Konghucu' ? 'selected' : '' }}>Konghucu</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="golongan_darah" class="form-label"><strong>Golongan Darah</strong></label>
                                <select name="golongan_darah" id="golongan_darah" class="form-select">
                                    <option value="">Pilih Golongan Darah</option>
                                    <option value="A" {{ old('golongan_darah', $user->golongan_darah) == 'A' ? 'selected' : '' }}>A</option>
                                    <option value="B" {{ old('golongan_darah', $user->golongan_darah) == 'B' ? 'selected' : '' }}>B</option>
                                    <option value="AB" {{ old('golongan_darah', $user->golongan_darah) == 'AB' ? 'selected' : '' }}>AB</option>
                                    <option value="O" {{ old('golongan_darah', $user->golongan_darah) == 'O' ? 'selected' : '' }}>O</option>
                                </select>
                            </div>

                            {{-- Data Administrasi --}}
                            <div class="col-md-6">
                                <label for="npwp" class="form-label"><strong>NPWP</strong></label>
                                <input type="text" name="npwp" class="form-control" id="npwp"
                                    placeholder="NPWP" value="{{ old('npwp', $user->npwp) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="no_bpjs" class="form-label"><strong>No BPJS</strong></label>
                                <input type="text" name="no_bpjs" class="form-control" id="no_bpjs"
                                    placeholder="No BPJS" value="{{ old('no_bpjs', $user->no_bpjs) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="no_rekening" class="form-label"><strong>No Rekening</strong></label>
                                <input type="text" name="no_rekening" class="form-control" id="no_rekening"
                                    placeholder="No Rekening" value="{{ old('no_rekening', $user->no_rekening) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="nama_bank" class="form-label"><strong>Nama Bank</strong></label>
                                <select name="nama_bank" id="nama_bank" class="form-select select2">
                                    <option value="">Pilih Nama Bank</option>
                                    @foreach ($bank as $item)
                                        <option value="{{ $item->id }}" {{ old('nama_bank', $user->nama_bank) == $item->id ? 'selected' : '' }}>
                                            {{ $item->Nama }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-12">
                                <label for="roles" class="form-label"><strong>Peran</strong></label>
                                <select name="roles[]" id="roles" class="form-select" multiple>
                                    @foreach ($roles as $key => $role)
                                        <option value="{{ $key }}"
                                            {{ (collect(old('roles', $userRoleIds ?? []))->contains($key)) ? 'selected' : '' }}>
                                            {{ $role }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Data Akun --}}
                            <div class="col-md-6">
                                <label for="email" class="form-label"><strong>Email</strong></label>
                                <input type="email" name="email" class="form-control" id="email" placeholder="Email"
                                    value="{{ old('email', $user->email) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="password" class="form-label"><strong>Password</strong></label>
                                <input type="password" name="password" class="form-control" id="password"
                                    placeholder="Kosongkan jika tidak ingin mengubah password">
                                <small class="text-muted">Kosongkan jika tidak ingin mengubah password. Simpan baik-baik email dan password ini untuk login ke sistem.</small>
                            </div>

                            <div class="col-12 text-end mt-3">
                                <a href="{{ route('users.index') }}" class="btn btn-secondary me-2"><i
                                        class="fa fa-arrow-left"></i> Kembali</a>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Update
                                    Akun</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function onChangeSelect(url, id, name) {
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    id: id
                },
                success: function(data) {
                    $('#' + name).empty();
                    $('#' + name).append('<option>==Pilih Salah Satu==</option>');
                    $.each(data, function(key, value) {
                        $('#' + name).append('<option value="' + key + '">' + value + '</option>');
                    });
                }
            });
        }
        $(function() {
            $('#provinsi').on('change', function() {
                onChangeSelect('{{ route('cities') }}', $(this).val(), 'kota');
                $('#kota').empty().append('<option value="">==Pilih Salah Satu==</option>');
                $('#kecamatan').empty().append('<option value="">==Pilih Salah Satu==</option>');
                $('#desa').empty().append('<option value="">==Pilih Salah Satu==</option>');
            });
            $('#kota').on('change', function() {
                onChangeSelect('{{ route('districts') }}', $(this).val(), 'kecamatan');
                $('#kecamatan').empty().append('<option value="">==Pilih Salah Satu==</option>');
                $('#desa').empty().append('<option value="">==Pilih Salah Satu==</option>');
            })
            $('#kecamatan').on('change', function() {
                onChangeSelect('{{ route('villages') }}', $(this).val(), 'desa');
                $('#desa').empty().append('<option value="">==Pilih Salah Satu==</option>');
            })
        });
    </script>
@endpush