@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edit - untuk approval --}}
                        @if ($authorize->edit == '1')
                            {{-- button edit/approval --}}
                            <button class="btn btn-warning mb-0"
                                onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($list->id)) }}'"><i
                                    class="fas fa-edit me-1"> </i><span class="font-weight-bold">Approval</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            {{-- Detail Information - Full Width --}}
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Detail Request TNA</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            {{-- Row 1: Requestor Info --}}
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold text-muted small">NIK</label>
                                <p class="mb-0 fs-6">{{ $list->requestor_nik }}</p>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold text-muted small">Requestor</label>
                                <p class="mb-0 fs-6">{{ $list->requestor_name }}</p>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold text-muted small">Departemen</label>
                                <p class="mb-0 fs-6">{{ $list->requestor_departemen }}</p>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold text-muted small">Bagian</label>
                                <p class="mb-0 fs-6">{{ $list->requestor_bagian }}</p>
                            </div>

                            {{-- Row 2: Status & Date --}}
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold text-muted small">Status Approval</label>
                                <p class="mb-0">
                                    @if ($list->approval_hrd == 'approved')
                                        <span class="badge bg-success"><i class="fas fa-check me-1"></i>Approved</span>
                                    @elseif ($list->approval_hrd == 'rejected')
                                        <span class="badge bg-danger"><i class="fas fa-times me-1"></i>Rejected</span>
                                    @else
                                        <span class="badge bg-warning text-white"><i class="fas fa-clock me-1"></i>Pending</span>
                                    @endif
                                </p>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-bold text-muted small">Created At</label>
                                <p class="mb-0 fs-6">{{ $list->created_at ? \Carbon\Carbon::parse($list->created_at)->format('d F Y H:i') : '-' }}</p>
                            </div>

                            {{-- Row 3: Training Info --}}
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold text-muted small">Training Name</label>
                                <p class="mb-0 fs-6 fw-bold text-primary">{{ $list->name_trn }}</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold text-muted small">Date</label>
                                <p class="mb-0 fs-6">{{ \Carbon\Carbon::parse($list->month_estimation)->format('d F Y') }}</p>
                            </div>

                            {{-- Row 3: Description --}}
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold text-muted small">Description</label>
                                <div class="bg-light p-3 rounded">
                                    <p class="mb-0 fs-6">{{ $list->description ?: '-' }}</p>
                                </div>
                            </div>

                            {{-- Row 4: Rejection Reason --}}
                            @if ($list->approval_hrd == 'rejected' && $list->rejection_reason)
                                <div class="col-md-12">
                                    <div class="rejection-reason-box">
                                        <div class="rejection-header">
                                            <i class="fas fa-exclamation-triangle me-2"></i>Alasan Penolakan
                                        </div>
                                        <div class="rejection-body">
                                            {{ $list->rejection_reason }}
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .badge {
        font-weight: 500;
        padding: 0.5em 0.8em;
    }

    .rejection-reason-box {
        border: 1px solid #f5c6cb;
        border-radius: 8px;
        background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        overflow: hidden;
    }

    .rejection-header {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: #ffffff;
        font-weight: 600;
        padding: 12px 16px;
        font-size: 14px;
    }

    .rejection-body {
        padding: 16px;
        color: #721c24;
        font-size: 14px;
        line-height: 1.5;
    }
</style>
@endpush