@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header border-bottom mb-4 d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Detail Profile</h5>
            <a href="{{ route('profile.index') }}" class="btn btn-sm btn-label-secondary">
                <i class="ti tabler-arrow-left me-1"></i> Kembali
            </a>
        </div>
        
        <div class="card-body">
            <form onsubmit="return false;">
                
                <h6 class="mb-3 text-primary"><i class="ti tabler-user me-1"></i> Informasi Akun</h6>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->nama }}" readonly />
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Email</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->email }}" readonly />
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">No. Telepon</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->telepon ?? '-' }}" readonly />
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Role</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->role ?? '-' }}" readonly />
                    </div>
                </div>

                <hr class="my-4">
                <h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Lokasi & Alamat</h6>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Provinsi</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->kecamatan->kabupatenkota->provinsi->nama ?? '-' }}" readonly />
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Kabupaten/Kota</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->kecamatan->kabupatenkota->nama ?? '-' }}" readonly />
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Kecamatan</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->kecamatan->nama ?? '-' }}" readonly />
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Desa/Kelurahan</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->desakelurahan->nama ?? '-' }}" readonly />
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label">Alamat Lengkap</label>
                    <textarea class="form-control bg-lighter" rows="2" readonly>{{ $profile->alamat ?? '-' }}</textarea>
                </div>

                <hr class="my-4">
                <h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Dokumen Pribadi</h6>

                <div class="row align-items-center">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">NIK (KTP)</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->ktp ?? '-' }}" readonly />
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">No. KK</label>
                        <input type="text" class="form-control bg-lighter" value="{{ $profile->kk ?? '-' }}" readonly />
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label d-block">File KTP</label>
                        @if($profile->path_ktp)
                            @php 
                                $isKtpPdf = strtolower(pathinfo($profile->path_ktp, PATHINFO_EXTENSION)) === 'pdf'; 
                            @endphp

                            @if($isKtpPdf)
                                <div class="p-3 border rounded text-center bg-lighter">
                                    <i class="ti tabler-file-type-pdf text-danger mb-2" style="font-size: 3rem;"></i>
                                    <p class="mb-3 text-muted">Dokumen PDF Terlampir</p>
                                    <a href="{{ asset('storage/' . $profile->path_ktp) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                        <i class="ti tabler-download me-1"></i> Lihat / Unduh
                                    </a>
                                </div>
                            @else
                                <a href="{{ asset('storage/' . $profile->path_ktp) }}" target="_blank">
                                    <img src="{{ asset('storage/' . $profile->path_ktp) }}" alt="File KTP" class="img-thumbnail" style="width: 100%; max-height: 300px; object-fit: contain; background-color: #f8f9fa;">
                                </a>
                                <small class="text-muted mt-2 d-block fst-italic">*Klik gambar untuk memperbesar.</small>
                            @endif
                        @else
                            <div class="p-4 border rounded text-center bg-lighter">
                                <span class="text-muted fst-italic">Tidak ada file KTP yang diunggah.</span>
                            </div>
                        @endif
                    </div>

                    <div class="col-md-6 mb-4">
                        <label class="form-label d-block">File KK</label>
                        @if($profile->path_kk)
                            @php 
                                $isKkPdf = strtolower(pathinfo($profile->path_kk, PATHINFO_EXTENSION)) === 'pdf'; 
                            @endphp

                            @if($isKkPdf)
                                <div class="p-3 border rounded text-center bg-lighter">
                                    <i class="ti tabler-file-type-pdf text-danger mb-2" style="font-size: 3rem;"></i>
                                    <p class="mb-3 text-muted">Dokumen PDF Terlampir</p>
                                    <a href="{{ asset('storage/' . $profile->path_kk) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                        <i class="ti tabler-download me-1"></i> Lihat / Unduh
                                    </a>
                                </div>
                            @else
                                <a href="{{ asset('storage/' . $profile->path_kk) }}" target="_blank">
                                    <img src="{{ asset('storage/' . $profile->path_kk) }}" alt="File KK" class="img-thumbnail" style="width: 100%; max-height: 300px; object-fit: contain; background-color: #f8f9fa;">
                                </a>
                                <small class="text-muted mt-2 d-block fst-italic">*Klik gambar untuk memperbesar.</small>
                            @endif
                        @else
                            <div class="p-4 border rounded text-center bg-lighter">
                                <span class="text-muted fst-italic">Tidak ada file KK yang diunggah.</span>
                            </div>
                        @endif
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection