@extends('layouts.app')
@section('title', 'Detail Pernikahan — Satu Mimpi Loket')

@push('styles')
<style>
    .preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .preview-item { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
    .preview-item img { width: 100%; height: 100%; object-fit: cover; }
    .readonly-text { padding: 12px 16px; background: var(--bg-primary); border-radius: 8px; border: 1px solid var(--border); font-weight: 500; }
</style>
@endpush

@section('content')
<div style="max-width:720px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
        <a href="{{ route('gov.dashboard') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Kembali</a>
        @if(in_array($data->status, ['draft', 'pending'], true))
            <a href="{{ route('gov.marriage.edit', $data->id) }}" class="btn btn-primary"><i class="bi bi-pencil-fill"></i> Edit</a>
        @else
            <button type="button" class="btn btn-secondary" disabled style="opacity:.55;cursor:not-allowed">
                <i class="bi bi-lock"></i> Tidak bisa diedit
            </button>
        @endif
    </div>
    <h1 class="page-title"><i class="bi bi-arrow-through-heart" style="color:var(--accent)"></i> Detail Pernikahan</h1>

    <div class="card">
        <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
            <i class="bi bi-calendar-event"></i> Jadwal & Lokasi
        </div>
        
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
            <div>
                <label class="form-label">Tanggal Pernikahan</label>
                <div class="readonly-text">{{ \Carbon\Carbon::parse($data->tanggal_pernikahan)->format('d M Y') }}</div>
            </div>
            <div>
                <label class="form-label">Lokasi Saat Ini (@)</label>
                <div class="readonly-text">{{ $data->at_saat_ini ?? '-' }}</div>
            </div>
        </div>

        <hr class="divider">

        <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
            <i class="bi bi-people-fill"></i> Data Mempelai & Saksi
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
            <div>
                <label class="form-label">NIK Suami</label>
                <div class="readonly-text">{{ $data->suami_nik ?? '-' }}</div>
            </div>
            <div>
                <label class="form-label">NIK Istri</label>
                <div class="readonly-text">{{ $data->istri_nik ?? '-' }}</div>
            </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
            <div>
                <label class="form-label">Nama Saksi</label>
                <div class="readonly-text">{{ $data->saksi_nama ?? '-' }}</div>
            </div>
            <div>
                <label class="form-label">Hubungan Saksi</label>
                <div class="readonly-text">{{ $data->saksi_hubungan ?? '-' }}</div>
            </div>
        </div>

        <div style="margin-bottom:16px">
            <label class="form-label">Dinikahkan Oleh</label>
            <div class="readonly-text">{{ $data->dinikahkan_oleh ?? '-' }}</div>
        </div>

        <hr class="divider">

        <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
            <i class="bi bi-images"></i> Lampiran
        </div>

        <div>
            @if($data->lampiran && (is_array(json_decode($data->lampiran, true)) && count(json_decode($data->lampiran, true)) > 0))
                <div class="preview-container">
                    @foreach(json_decode($data->lampiran, true) as $img)
                        <div class="preview-item">
                            <a href="{{ $img }}" target="_blank"><img src="{{ $img }}" alt="Lampiran"></a>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="readonly-text">Tidak ada lampiran.</div>
            @endif
        </div>

        @include('gov.approval', ['data' => $data])
    </div>
</div>
@endsection