@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 Data Keluarga</h5>
            <a href="{{ route('keluarga.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;">
                
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Informasi KK</h6>
                        <div class="mb-3">
                            <label class="form-label">No. Kartu Keluarga</label>
                            <input type="text" class="form-control bg-lighter" value="{{ $keluarga->kk }}" readonly />
                        </div>
                        
                        <hr class="my-4">
                        <h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Lokasi Wilayah & Adat</h6>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Provinsi</label>
                                <input type="text" class="form-control bg-lighter" value="{{ $keluarga->desakelurahan->kecamatan->kabupatenkota->provinsi->nama ?? '-' }}" readonly />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kabupaten/Kota</label>
                                <input type="text" class="form-control bg-lighter" value="{{ $keluarga->desakelurahan->kecamatan->kabupatenkota->nama ?? '-' }}" readonly />
                            </div>
                        </div>

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

                        <div class="mb-3">
                            <label class="form-label">Data Adat</label>
                            <input type="text" class="form-control bg-lighter" value="{{ $keluarga->adat->nama ?? 'Tidak terikat adat' }}" readonly />
                        </div>
                    </div>

                    <div class="col-lg-6 mb-4">
                        <h6 class="mb-3 text-primary"><i class="ti tabler-upload me-1"></i> Dokumen Fisik</h6>
                        
                        @if($keluarga->path_kk)
                            @php 
                                $isPdf = strtolower(pathinfo($keluarga->path_kk, PATHINFO_EXTENSION)) === 'pdf'; 
                            @endphp

                            @if($isPdf)
                                <div class="p-5 border rounded text-center bg-lighter">
                                    <i class="ti tabler-file-type-pdf text-danger mb-3" style="font-size: 4rem;"></i>
                                    <p class="mb-3 text-muted fw-medium">{{ $keluarga->file_kk }}</p>
                                    <a href="{{ asset('storage/' . $keluarga->path_kk) }}" target="_blank" class="btn btn-primary">
                                        <i class="ti tabler-external-link me-1"></i> Buka PDF
                                    </a>
                                </div>
                            @else
                                <div class="border rounded p-2 text-center bg-lighter">
                                    <a href="{{ asset('storage/' . $keluarga->path_kk) }}" target="_blank" title="Klik untuk memperbesar">
                                        <img src="{{ asset('storage/' . $keluarga->path_kk) }}" alt="File KK" class="img-fluid rounded" style="max-height: 400px; object-fit: contain;">
                                    </a>
                                </div>
                                <small class="text-muted mt-2 d-block text-center fst-italic">*Klik gambar untuk melihat resolusi penuh</small>
                            @endif
                        @else
                            <div class="p-5 border rounded text-center bg-lighter">
                                <i class="ti tabler-photo-off text-muted mb-3" style="font-size: 4rem;"></i>
                                <p class="mb-0 text-muted fst-italic">Belum ada dokumen KK yang diunggah.</p>
                            </div>
                        @endif
                    </div>
                </div>

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