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

@push('styles')
<style>
    .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:680px">
    <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.event_permit.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-calendar2-event" style="color:var(--accent)"></i> Detail Izin Kegiatan</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-card-text"></i> Detail Acara
        </div>
        
        <div class="form-group">
            <label class="form-label">Nama Kegiatan</label>
            <div class="readonly-text">{{ $data->nama_kegiatan }}</div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px">
            <div>
                <label class="form-label">Lokasi Acara (@)</label>
                <div class="readonly-text">{{ $data->at_acara ?? '-' }}</div>
            </div>
            <div>
                <label class="form-label">Tanggal & Jam Acara</label>
                <div class="readonly-text">{{ \Carbon\Carbon::parse($data->tanggal_jam_acara)->format('d M Y, H:i') }}</div>
            </div>
        </div>

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