@extends('Admin.layout.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Detail Users</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="{{ route('admin.index') }}">Dashboard</a></div>
                    <div class="breadcrumb-item">Users</div>
                    <div class="breadcrumb-item">Details</div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="card-title pb-2 m-0">User Id<br /><span>#{{ $user->id }}</span>
                                </div>
                            </div>
                            <div class="d-flex flex-column">
                                @if ($user->foto_profil == null)
                                    <img src="{{ asset('assets/img/avatar/avatar-6.png') }}"
                                        class="rounded-circle shadow align-self-center"style="max-width: 130px;"
                                        alt="" srcset="">
                                @else
                                    <img src="{{ asset('storage/foto-profil/' . $user->foto_profil) }}"
                                        class="rounded-circle shadow align-self-center" style="max-width: 130px;"
                                        alt="" srcset="">
                                @endif
                                <h4 class="align-self-center mt-3">Status : {{$user->status == 'Finished' ? 'Selesai diverifikasi' : ($user->status == 'Progress' ? 'Sedang diverifikasi' : 'Tolak')}}</h4>
                                <hr class="border border-1 opacity-75 w-100">
                                <div class="data-field">
                                    <span class="fw-bold text-start">NIK</span>
                                    <span class="text-muted ">{{ $user->nik }}</span>
                                </div>
                                <div class="data-field">
                                    <span class="fw-bold text-start">Nama</span>
                                    <span
                                        class="text-muted ">{{ ucwords(strtolower($user->nama_depan . ' ' . $user->nama_belakang)) }}</span>
                                </div>
                                <div class="data-field">
                                    <span class="fw-bold text-start">Jenis Kelamin</span>
                                    <span class="text-muted ">{{ $user->gender }}</span>
                                </div>
                            </div>
                            <hr class="border border-1 opacity-75 w-100">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="card-title pb-2 m-0">
                                    <h4>Contact</h4>
                                </div>
                            </div>

                            <div class="data-field">
                                <span class="fw-bold text-start">Email</span>
                                <span class="text-muted ">{{ $user->email }}</span>
                            </div>
                            <div class="data-field">
                                <span class="fw-bold text-start">Nomor HP</span>
                                <span class="text-muted ">{{ $user->nohp }}</span>
                            </div>
                            <hr class="border border-1 opacity-75 w-100">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="card-title pb-2 m-0">
                                    <h4>Alamat</h4>
                                </div>
                            </div>
                            <div class="data-field">
                                <span class="fw-bold text-start">Provinsi</span>
                                <span class="text-muted ">{{ ucwords(strtolower($user->getProvinceName())) }}</span>
                            </div>
                            <div class="data-field">
                                <span class="fw-bold text-start">Kota/Kabupaten</span>
                                <span class="text-muted ">{{ ucwords(strtolower($user->getCityName())) }}</span>
                            </div>
                            <div class="data-field">
                                <span class="fw-bold text-start">Kecamatan</span>
                                <span class="text-muted ">{{ ucwords(strtolower($user->getDistrictName())) }}</span>
                            </div>
                            <div class="data-field">
                                <span class="fw-bold text-start">Kelurahan</span>
                                <span class="text-muted ">{{ ucwords(strtolower($user->getVillageName())) }}</span>
                            </div>
                            <div class="data-field">
                                <span class="fw-bold text-start">Alamat</span>
                                <span class="text-muted ">{{ $user->alamat }}</span>
                            </div>
                            <hr class="border border-1 opacity-75 w-100">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="card-title pb-2 m-0">
                                    <h4>Foto KTP dan Wajah</h4>
                                </div>
                            </div>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6 col-sm-12 text-center">
                                        <!-- Kolom pertama, col-md-6 untuk layar medium dan col-sm-12 untuk layar kecil -->
                                        @if ($user->foto_ktp == null)
                                            <a href="#" id="tampilKTP">
                                                <img id="fotoKTP" src="{{ asset('storage/foto-ktp/ktp.jpg') }}"
                                                    alt="Foto KTP" class="align-self-center img-fluid"
                                                    style="max-width: 350px;">
                                            </a>
                                        @else
                                            <a href="#" id="tampilKTP">
                                                <img id="fotoKTP"
                                                    src="{{ asset('storage/foto-ktp/' . $user->foto_ktp) }}"
                                                    alt="Foto Wajah" class="align-self-center img-fluid"
                                                    style="max-width: 350px;">
                                            </a>
                                        @endif
                                    </div>
                                    <div class="col-md-6 col-sm-12 text-center">
                                        <!-- Kolom kedua, col-md-6 untuk layar medium dan col-sm-12 untuk layar kecil -->
                                        @if ($user->foto_wajah == null)
                                            <a href="#" id="tampilWajah">
                                                <img id="fotoWajah" src="{{ asset('storage/foto-wajah/wajah.jpg') }}"
                                                    alt="Foto KTP" class="align-self-center img-fluid"
                                                    style="max-width: 350px;">
                                            </a>
                                        @else
                                            <a href="#" id="tampilWajah">
                                                <img id="fotoWajah"
                                                    src="{{ asset('storage/foto-wajah/' . $user->foto_wajah) }}"
                                                    alt="Foto Wajah" class="align-self-center img-fluid"
                                                    style="max-width: 350px;">
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="data-field mt-4">
                                <span class="fw-bold text-start">Persentase Kemiripan</span>
                                <span class="text-muted ">{{ $user->persentase_kemiripan }}</span>
                            </div>
                            @if ($user->status == 'Progress')
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="card-title pb-2 m-0">
                                        <h4>Setujui pembuatan akun ini?</h4>
                                    </div>
                                </div>
                                <a class="btn btn-primary text-white" id="approveUser"
                                    data-id="{{ $user->id }}">Setujui</a>
                                <a class="btn btn-danger text-white" id="denyUser"
                                    data-id="{{ $user->id }}">Tolak</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script>
        $(document).ready(function() {
            $('#tampilKTP').on('click', function() {
                let fotoKTP = document.getElementById('fotoKTP').src;
                console.log(fotoKTP);
                Swal.fire({
                    title: 'Foto KTP',
                    imageUrl: fotoKTP,
                    imageWidth: 600,
                    // imageHeight: 1500,
                    imageAlt: 'Foto KTP'
                });
            });

            $('#tampilWajah').on('click', function() {
                let fotoWajah = document.getElementById('fotoWajah').src;
                Swal.fire({
                    title: 'Foto Wajah',
                    imageUrl: fotoWajah,
                    imageWidth: 600,
                    imageAlt: 'Foto Wajah'
                });
            });

            $('#approveUser').on('click', function() {
                let id = $(this).data('id');
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                Swal.fire({
                    title: 'Status Akun',
                    text: 'Apakah anda yakin menyetujui akun ini?',
                    icon: 'info',
                    confirmButtonText: 'Ya, setuju!',
                    showCancelButton: true,
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': csrfToken
                            }
                        });

                        $.ajax({
                            url: "{{ route('admin-user.approve', ':id') }}".replace(
                                ':id', id),
                            type: 'PUT',
                            success: function(response) {
                                Swal.fire({
                                    title: response.status ? 'Berhasil!' :
                                        'Gagal!',
                                    text: response.message,
                                    icon: response.status ? 'success' : 'error',
                                    confirmButtonText: 'OK'
                                }).then(function() {
                                    location.reload();
                                });
                            },
                            error: function(error) {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: 'Tidak ada data yang dihapus, karena ' +
                                        error,
                                    icon: 'error'
                                }).then(function() {
                                    location.reload();
                                });
                            }
                        });
                    }
                });
            });

            $('#denyUser').on('click', function() {
                let id = $(this).data('id');
                const csrfToken = $('meta[name="csrf-token"]').attr('content');
                Swal.fire({
                    title: 'Status Akun',
                    text: 'Apakah anda yakin menolak akun ini?',
                    icon: 'info',
                    confirmButtonText: 'Ya, setuju!',
                    showCancelButton: true,
                    cancelButtonText: 'Tidak'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': csrfToken
                            }
                        });

                        $.ajax({
                            url: "{{ route('admin-user.deny', ':id') }}".replace(
                                ':id', id),
                            type: 'PUT',
                            success: function(response) {
                                Swal.fire({
                                    title: response.status ? 'Berhasil!' :
                                        'Gagal!',
                                    text: response.message,
                                    icon: response.status ? 'success' : 'error',
                                    confirmButtonText: 'OK'
                                }).then(function() {
                                    location.reload();
                                });
                            },
                            error: function(error) {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: 'Gagal mengubah status akun, karena ' +
                                        error,
                                    icon: 'info'
                                });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection