@extends('layouts.app')

@section('subtitle', 'Profil Desa')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Profil Desa" 
        subtitle="Identitas resmi desa yang digunakan sebagai Single Source of Truth oleh Generator Surat."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Profil Desa' => route('village-profile.show')
        ]"
    >
        @if(auth()->user()->role !== 'operator')
            <x-slot name="buttons">
                <a href="{{ route('village-profile.edit') }}" class="btn btn-primary font-weight-bold shadow-sm">
                    <i class="fas fa-edit mr-1"></i> Edit Profil
                </a>
            </x-slot>
        @endif
    </x-page-header>

    <div class="row">
        <!-- Kolom Kiri: Logo & Metadata -->
        <div class="col-lg-4 mb-4">
            <!-- Card Logo -->
            <div class="card border-0 shadow-sm rounded-xl text-center p-4 mb-4" style="border-radius: 12px; background: #ffffff;">
                <div class="card-body">
                    <div class="mb-4">
                        <span class="text-xs font-weight-bold text-uppercase text-muted d-block mb-3">Logo Resmi Desa</span>
                        <div class="d-inline-block p-3 border rounded-circle bg-light shadow-xs" style="width: 150px; height: 150px; overflow: hidden;">
                            @if($profile->logo)
                                <img src="{{ asset('storage/' . $profile->logo) }}" alt="Logo Desa" class="img-fluid object-fit-contain" style="height: 100%; width: 100%;">
                            @else
                                <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Lambang_kabupaten_nias_utara.jpg" alt="Logo Default Nias Utara" class="img-fluid object-fit-contain" style="height: 100%; width: 100%;">
                            @endif
                        </div>
                    </div>
                    
                    <h5 class="font-weight-bold text-dark mb-1">{{ $profile->village_name }}</h5>
                    <p class="text-sm text-secondary font-weight-medium mb-3">Kode Desa: {{ $profile->village_code ?: '-' }}</p>
                    
                    <hr class="my-4" style="border-top: 1px solid #f1f5f9;">
                    
                    <div class="text-left text-xs text-muted">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Dibuat Pada</span>
                            <span class="font-weight-bold text-dark">{{ $profile->created_at->translatedFormat('d F Y, H:i') }} WIB</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>Terakhir Diperbarui</span>
                            <span class="font-weight-bold text-dark">{{ $profile->updated_at->translatedFormat('d F Y, H:i') }} WIB</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Detail Informasi -->
        <div class="col-lg-8 mb-4">
            <!-- Card Detail -->
            <div class="card border-0 shadow-sm rounded-xl" style="border-radius: 12px; background: #ffffff;">
                <div class="card-body p-4">
                    
                    <!-- Section A: Identitas Desa -->
                    <div class="mb-4">
                        <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-university mr-2"></i> Identitas Desa</h6>
                        <div class="row text-sm pl-3">
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Nama Desa</div>
                            <div class="col-sm-8 text-dark font-weight-bold py-2">: {{ $profile->village_name }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Kode Desa</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->village_code ?: '-' }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Alamat Kantor</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->address }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Kode Pos</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->postal_code }}</div>
                        </div>
                    </div>

                    <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                    <!-- Section B: Wilayah Administrasi -->
                    <div class="mb-4">
                        <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-map-marked-alt mr-2"></i> Wilayah Administrasi</h6>
                        <div class="row text-sm pl-3">
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Kecamatan</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->district_name }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Kabupaten</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->regency_name }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Provinsi</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->province_name }}</div>
                        </div>
                    </div>

                    <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                    <!-- Section C: Kontak -->
                    <div class="mb-4">
                        <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-phone-alt mr-2"></i> Kontak Resmi</h6>
                        <div class="row text-sm pl-3">
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Email Resmi</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->email }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Nomor Telepon</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->phone }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Website Resmi</div>
                            <div class="col-sm-8 text-dark py-2">: 
                                @if($profile->website)
                                    <a href="{{ $profile->website }}" target="_blank" class="text-primary font-weight-medium">{{ $profile->website }}</a>
                                @else
                                    -
                                @endif
                            </div>
                        </div>
                    </div>

                    <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                    <!-- Section D: Penandatangan Surat -->
                    <div class="mb-2">
                        <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-signature mr-2"></i> Pejabat Penandatangan Surat</h6>
                        <div class="row text-sm pl-3">
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Nama Pejabat</div>
                            <div class="col-sm-8 text-dark font-weight-bold py-2">: {{ $profile->signer_name }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">Jabatan Resmi</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->signer_position }}</div>
                            
                            <div class="col-sm-4 text-secondary font-weight-medium py-2">NIP</div>
                            <div class="col-sm-8 text-dark py-2">: {{ $profile->signer_nip ?: '-' }}</div>
                        </div>
                    </div>

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