@extends('layouts.app')

@section('title', 'Permohonan KP')

@section('content')
    <div class="page-heading">
        <div class="eyebrow">KTM</div>
        <div class="d-flex justify-content-between flex-column flex-lg-row gap-3">
            <div>
                <h1 class="h3 mb-1">{{ $application->name }}</h1>
                <p class="text-secondary mb-0">{{ $application->pusatMengundi?->name }} - Saluran {{ $application->selectedKtmAssignment?->saluranMengundi?->number ?? '-' }}</p>
            </div>
            <a href="{{ route('ktm.applications.index') }}" class="btn btn-outline-secondary align-self-start">
                <i class="bi bi-arrow-left me-1"></i>Kembali
            </a>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-12 col-xl-7">
            <div class="content-panel p-3 p-md-4">
                <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                    <h2 class="h5 mb-0">Maklumat KP</h2>
                    <span class="badge text-bg-light border">{{ $application->status }}</span>
                </div>
                <dl class="row mb-0">
                    <dt class="col-sm-4">No. Kad Pengenalan</dt>
                    <dd class="col-sm-8">{{ $application->ic_number }}</dd>
                    <dt class="col-sm-4">Telefon</dt>
                    <dd class="col-sm-8">{{ $application->phone_number }}</dd>
                    <dt class="col-sm-4">Emel</dt>
                    <dd class="col-sm-8">{{ $application->email ?: '-' }}</dd>
                    <dt class="col-sm-4">Alamat</dt>
                    <dd class="col-sm-8">{{ $application->address ?: '-' }}</dd>
                    <dt class="col-sm-4">Sumber</dt>
                    <dd class="col-sm-8">{{ $application->source }}</dd>
                    <dt class="col-sm-4">Jawatan</dt>
                    <dd class="col-sm-8">{{ $application->requestedPosition?->code }} - {{ $application->requestedPosition?->name }}</dd>
                </dl>
            </div>
        </div>
        <div class="col-12 col-xl-5">
            <div class="content-panel p-3 p-md-4 mb-4">
                <h2 class="h5 mb-3">Tindakan</h2>
                @if (in_array($application->status, ['submitted', 'under_ppm_review', 'approved'], true))
                    <form method="POST" action="{{ route('ktm.applications.approve', $application->public_uuid) }}" class="mb-3">
                        @csrf
                        <button class="btn btn-primary w-100" type="submit">
                            <i class="bi bi-person-check me-1"></i>Lulus dan Assign KP
                        </button>
                    </form>
                @endif

                @if ($application->source === 'created_by_ktm' && $application->status !== 'assigned')
                    <form method="POST" action="{{ route('ktm.applications.destroy', $application->public_uuid) }}" data-confirm>
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-outline-danger w-100" type="submit">
                            <i class="bi bi-trash me-1"></i>Padam Rekod KTM-created
                        </button>
                    </form>
                @endif
            </div>

            <div class="content-panel p-3 p-md-4">
                <h2 class="h5 mb-3">Sejarah Status</h2>
                @forelse ($application->statusHistories->sortByDesc('created_at') as $history)
                    <div class="border-bottom pb-2 mb-2">
                        <div class="fw-semibold">{{ $history->from_status ?: '-' }} ke {{ $history->to_status }}</div>
                        <div class="small text-secondary">{{ $history->created_at?->format('d/m/Y H:i') }} oleh {{ $history->changedBy?->name ?? 'Sistem' }}</div>
                        @if ($history->note)
                            <div class="small">{{ $history->note }}</div>
                        @endif
                    </div>
                @empty
                    <p class="text-secondary mb-0">Tiada sejarah status.</p>
                @endforelse
            </div>
        </div>
    </div>
@endsection