@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">Back</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row align-items-stretch">
            {{-- Detail Information --}}
            <div class="col-md-8 d-flex">
                <div class="card mb-4 w-100">
                    <div class="card-header py-2">
                        <h5 class="mb-0"><i class="fas fa-history me-2"></i>TNA Request History Detail</h5>
                    </div>
                    <div class="card-body py-3">
                        <div class="row">
                            {{-- Row 1: Requestor Info --}}
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">NIK</label>
                                <p class="mb-0">{{ $list->requestor_nik }}</p>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Requestor</label>
                                <p class="mb-0">{{ $list->requestor_name }}</p>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Department</label>
                                <p class="mb-0">{{ $list->requestor_departemen }}</p>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Section</label>
                                <p class="mb-0">{{ $list->requestor_bagian }}</p>
                            </div>

                            {{-- Row 2: Training Info & Date --}}
                            <div class="col-md-6 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Training Name</label>
                                <p class="mb-0 fw-bold text-primary">{{ $list->name_trn }}</p>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Date</label>
                                <p class="mb-0">{{ \Carbon\Carbon::parse($list->month_estimation)->format('d F Y') }}</p>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Status</label>
                                <p class="mb-0">
                                    @php
                                        $finalStatus = 'pending';
                                        if ($list->approval_hrd == 'rejected') {
                                            $finalStatus = 'rejected';
                                        } elseif (isset($tna_header) && $tna_header && $tna_header->approval_hrd == 'rejected') {
                                            $finalStatus = 'rejected';
                                        } elseif (isset($tna_header) && $tna_header && $tna_header->approval_atasan == 'rejected') {
                                            $finalStatus = 'rejected';
                                        } elseif ($list->approval_hrd == 'approved') {
                                            $finalStatus = 'approved';
                                        }
                                    @endphp
                                    @if ($finalStatus == 'approved')
                                        <span class="badge bg-success"><i class="fas fa-check me-1"></i>Approved</span>
                                    @elseif ($finalStatus == '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>

                            {{-- Row 3: Description & Created --}}
                            <div class="col-md-6 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Description</label>
                                <p class="mb-0">{{ $list->description ?: '-' }}</p>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label fw-bold text-muted small mb-0">Created At</label>
                                <p class="mb-0">{{ $list->created_at ? \Carbon\Carbon::parse($list->created_at)->format('d M Y H:i') : '-' }}</p>
                            </div>
                            {{-- Rejection Reasons - Request TNA --}}
                            @if ($list->approval_hrd == 'rejected' && $list->rejection_reason)
                                <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold text-danger small mb-0"><i class="fas fa-exclamation-triangle me-1"></i>Rejection Reason (Request)</label>
                                    <p class="mb-0 text-danger">{{ $list->rejection_reason }}</p>
                                </div>
                            @else
                                <div class="col-md-3 mb-2"></div>
                            @endif
                        </div>

                        {{-- Rejection Reasons - Form TNA --}}
                        @if (isset($tna_header) && $tna_header && ($tna_header->approval_hrd == 'rejected' || $tna_header->approval_atasan == 'rejected'))
                            <div class="row">
                                @if ($tna_header->approval_hrd == 'rejected' && $tna_header->reject_reason_hrd)
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold text-danger small mb-0"><i class="fas fa-exclamation-triangle me-1"></i>Rejection Reason TNA Form (HRD)</label>
                                        <p class="mb-0 text-danger">{{ $tna_header->reject_reason_hrd }}</p>
                                    </div>
                                @endif
                                @if ($tna_header->approval_atasan == 'rejected' && $tna_header->reject_reason_atasan)
                                    <div class="col-md-6 mb-2">
                                        <label class="form-label fw-bold text-danger small mb-0"><i class="fas fa-exclamation-triangle me-1"></i>Rejection Reason TNA Form (Supervisor)</label>
                                        <p class="mb-0 text-danger">{{ $tna_header->reject_reason_atasan }}</p>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Tracking Steps --}}
            <div class="col-md-4 d-flex">
                <div class="card mb-4 w-100">
                    <div class="card-header py-2">
                        <h5 class="mb-0"><i class="fas fa-route me-2"></i>Tracking</h5>
                    </div>
                    <div class="card-body py-3">
                        <div class="timeline timeline-one-side">
                            {{-- Step 1: Request Approval --}}
                            <div class="timeline-block mb-3">
                                <span class="timeline-step
                                    @if($steps['step1']['status'] == 'approved') bg-success
                                    @elseif($steps['step1']['status'] == 'rejected') bg-danger
                                    @elseif($steps['step1']['status'] == 'disabled') bg-dark
                                    @else bg-secondary @endif">
                                    @if($steps['step1']['status'] == 'approved')
                                        <i class="fas fa-check text-white"></i>
                                    @elseif($steps['step1']['status'] == 'rejected')
                                        <i class="fas fa-times text-white"></i>
                                    @elseif($steps['step1']['status'] == 'disabled')
                                        <i class="fas fa-ban text-white"></i>
                                    @else
                                        <i class="fas fa-clock text-white"></i>
                                    @endif
                                </span>
                                <div class="timeline-content">
                                    <h6 class="mb-1 {{ $steps['step1']['status'] == 'rejected' ? 'text-danger' : '' }}">{{ $steps['step1']['label'] }}</h6>
                                    <p class="text-sm text-muted mb-0">{{ $steps['step1']['description'] }}</p>
                                </div>
                            </div>

                            {{-- Step 2: TNA HRD Approval --}}
                            <div class="timeline-block mb-3">
                                <span class="timeline-step
                                    @if($steps['step2']['status'] == 'approved') bg-success
                                    @elseif($steps['step2']['status'] == 'rejected') bg-danger
                                    @elseif($steps['step2']['status'] == 'disabled') bg-dark
                                    @else bg-secondary @endif">
                                    @if($steps['step2']['status'] == 'approved')
                                        <i class="fas fa-check text-white"></i>
                                    @elseif($steps['step2']['status'] == 'rejected')
                                        <i class="fas fa-times text-white"></i>
                                    @elseif($steps['step2']['status'] == 'disabled')
                                        <i class="fas fa-ban text-white"></i>
                                    @else
                                        <i class="fas fa-clock text-white"></i>
                                    @endif
                                </span>
                                <div class="timeline-content">
                                    <h6 class="mb-1 {{ $steps['step2']['status'] == 'rejected' ? 'text-danger' : '' }}">{{ $steps['step2']['label'] }}</h6>
                                    <p class="text-sm text-muted mb-0">{{ $steps['step2']['description'] }}</p>
                                </div>
                            </div>

                            {{-- Step 3: TNA Atasan Approval --}}
                            <div class="timeline-block mb-3">
                                <span class="timeline-step
                                    @if($steps['step3']['status'] == 'approved') bg-success
                                    @elseif($steps['step3']['status'] == 'rejected') bg-danger
                                    @elseif($steps['step3']['status'] == 'disabled') bg-dark
                                    @else bg-secondary @endif">
                                    @if($steps['step3']['status'] == 'approved')
                                        <i class="fas fa-check text-white"></i>
                                    @elseif($steps['step3']['status'] == 'rejected')
                                        <i class="fas fa-times text-white"></i>
                                    @elseif($steps['step3']['status'] == 'disabled')
                                        <i class="fas fa-ban text-white"></i>
                                    @else
                                        <i class="fas fa-clock text-white"></i>
                                    @endif
                                </span>
                                <div class="timeline-content">
                                    <h6 class="mb-1 {{ $steps['step3']['status'] == 'rejected' ? 'text-danger' : '' }}">{{ $steps['step3']['label'] }}</h6>
                                    <p class="text-sm text-muted mb-0">{{ $steps['step3']['description'] }}</p>
                                </div>
                            </div>

                            {{-- Step 4: Convert to TRN --}}
                            <div class="timeline-block">
                                <span class="timeline-step
                                    @if($steps['step4']['status'] == 'approved') bg-success
                                    @elseif($steps['step4']['status'] == 'rejected') bg-danger
                                    @elseif($steps['step4']['status'] == 'disabled') bg-dark
                                    @else bg-secondary @endif">
                                    @if($steps['step4']['status'] == 'approved')
                                        <i class="fas fa-check text-white"></i>
                                    @elseif($steps['step4']['status'] == 'rejected')
                                        <i class="fas fa-times text-white"></i>
                                    @elseif($steps['step4']['status'] == 'disabled')
                                        <i class="fas fa-ban text-white"></i>
                                    @else
                                        <i class="fas fa-clock text-white"></i>
                                    @endif
                                </span>
                                <div class="timeline-content">
                                    <h6 class="mb-1 {{ $steps['step4']['status'] == 'approved' ? 'text-success' : '' }}">{{ $steps['step4']['label'] }}</h6>
                                    <p class="text-sm text-muted mb-0">{{ $steps['step4']['description'] }}</p>
                                </div>
                            </div>
                        </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);
    }

    .btn-primary {
        background-color: #1a535c;
        border-color: #1a535c;
    }

    .btn-primary:hover {
        background-color: #134043;
        border-color: #134043;
    }

    .timeline {
        position: relative;
        padding-left: 30px;
    }

    .timeline-block {
        position: relative;
        padding-left: 20px;
    }

    .timeline-block:not(:last-child)::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 28px;
        width: 2px;
        height: calc(100% + 5px);
        background: #e9ecef;
    }

    .timeline-step {
        position: absolute;
        left: -30px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    .timeline-content {
        padding-bottom: 5px;
    }

    .timeline-content h6 {
        font-size: 14px;
    }

    .timeline-content p {
        font-size: 12px;
    }

    .badge {
        font-weight: 500;
        padding: 0.4em 0.6em;
        font-size: 12px;
    }

    .form-label {
        font-size: 12px;
    }
</style>
@endpush