@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>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        {{-- Detail Information --}}
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-clipboard-check me-2"></i>Approval Request TNA</h5>
                    <p class="text-sm text-muted mb-0">Review dan berikan keputusan approval</p>
                </div>
                <div class="card-body">
                    {{-- alert --}}
                    @include('components.alert')

                    <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: 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: Status & Created --}}
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold text-muted small">Current Status</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-6 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>
                    </div>

                    {{-- Rejection Reason - tampilkan jika status rejected --}}
                    @if ($list->approval_hrd == 'rejected' && $list->rejection_reason)
                    <div class="rejection-reason-box mt-3">
                        <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>
                    @endif
                </div>
            </div>
        </div>

        {{-- Approval Actions --}}
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-warning">
                    <h5 class="mb-0 text-white">
                        <i class="fas fa-gavel me-2 text-white"></i>Keputusan Approval
                    </h5>
                </div>
                <div class="card-body">
                    @if ($list->approval_hrd == 'pending')
                    {{-- Approve Button --}}
                    <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST" class="mb-3">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="action" value="approve">
                        <button type="submit" class="btn btn-success w-100 py-3" onclick="return confirm('Apakah Anda yakin ingin meng-APPROVE request ini?')">
                            <i class="fas fa-check-circle fa-2x mb-2 d-block"></i>
                            <span class="fw-bold">APPROVE</span>
                        </button>
                    </form>

                    {{-- Reject Button - Toggle Form --}}
                    <button type="button" class="btn btn-outline-danger w-100 py-3 mb-3" id="btnShowReject">
                        <i class="fas fa-times-circle fa-2x mb-2 d-block"></i>
                        <span class="fw-bold">REJECT</span>
                    </button>

                    {{-- Reject Form - Hidden by default --}}
                    <div id="rejectFormContainer" style="display: none;">
                        <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="action" value="reject">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Alasan Reject <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="rejection_reason" rows="3" placeholder="Masukkan alasan reject..." required></textarea>
                                <small class="text-muted">Wajib diisi jika menolak request</small>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-secondary flex-fill" id="btnCancelReject">Batal</button>
                                <button type="submit" class="btn btn-danger flex-fill" onclick="return confirm('Apakah Anda yakin ingin me-REJECT request ini?')">
                                    <i class="fas fa-times me-1"></i> Reject
                                </button>
                            </div>
                        </form>
                    </div>

                    @elseif ($list->approval_hrd == 'approved')
                    <div class="text-center mb-3">
                        <i class="fas fa-check-circle fa-4x text-success mb-3"></i>
                        <h5 class="text-success">Request Sudah Diapprove</h5>
                    </div>
                    <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="action" value="unapprove">
                        <button type="submit" class="btn btn-warning w-100 py-3" onclick="return confirm('Apakah Anda yakin ingin MEMBATALKAN approval request ini?')">
                            <i class="fas fa-undo fa-2x mb-2 d-block"></i>
                            <span class="fw-bold">UNAPPROVE</span>
                        </button>
                    </form>

                    @elseif ($list->approval_hrd == 'rejected')
                    <div class="text-center mb-3">
                        <i class="fas fa-times-circle fa-4x text-danger mb-3"></i>
                        <h5 class="text-danger">Request Sudah Direject</h5>
                    </div>
                    <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="action" value="approve">
                        <button type="submit" class="btn btn-success w-100 py-3" onclick="return confirm('Apakah Anda yakin ingin meng-APPROVE request ini?')">
                            <i class="fas fa-check-circle fa-2x mb-2 d-block"></i>
                            <span class="fw-bold">APPROVE</span>
                        </button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

    .bg-gradient-success {
        background: linear-gradient(135deg, #2dce89 0%, #26a679 100%);
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
    }

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    .btn-outline-danger {
        color: #dc3545;
        border-color: #dc3545;
    }

    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

    .btn-warning {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #212529;
    }

    .btn-warning:hover {
        background-color: #e0a800;
        border-color: #d39e00;
        color: #212529;
    }

    .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

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const btnShowReject = document.getElementById('btnShowReject');
        const btnCancelReject = document.getElementById('btnCancelReject');
        const rejectFormContainer = document.getElementById('rejectFormContainer');

        if (btnShowReject && rejectFormContainer) {
            btnShowReject.addEventListener('click', function() {
                btnShowReject.style.display = 'none';
                rejectFormContainer.style.display = 'block';
            });
        }

        if (btnCancelReject && rejectFormContainer && btnShowReject) {
            btnCancelReject.addEventListener('click', function() {
                rejectFormContainer.style.display = 'none';
                btnShowReject.style.display = 'block';
            });
        }
    });
</script>
@endpush