@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">
        {{-- Full Width - TNA Request Approval + Approval Decision --}}
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-clipboard-check me-2"></i>TNA Request Approval</h5>
                    <p class="text-sm text-muted mb-0">Review and provide approval decision</p>
                </div>
                <div class="card-body approval-review-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">Department</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">Section</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>Rejection Reason
                        </div>
                        <div class="rejection-body">
                            {{ $list->rejection_reason }}
                        </div>
                    </div>
                    @endif

                    {{-- Approval Decision Section --}}
                    <hr class="horizontal dark my-4 approval-decision-divider">
                    <div class="approval-decision-section">
                        <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                            <div>
                                <h6 class="fw-bold mb-1"><i class="fas fa-gavel me-2"></i>Approval Decision</h6>
                                <p class="text-muted text-sm mb-0">
                                    @if ($list->approval_hrd == 'pending')
                                        Review the request details below before submitting a final decision.
                                    @else
                                        The current decision is shown below. Use the available action only when a correction is required.
                                    @endif
                                </p>
                            </div>
                            @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 Review</span>
                            @endif
                        </div>

                        @if ($list->approval_hrd == 'pending')
                            <div class="d-flex flex-column flex-md-row gap-3">
                                {{-- Approve Button - Opens Modal --}}
                                <div class="flex-fill">
                                    <button type="button" class="btn btn-success w-100 py-2" data-bs-toggle="modal" data-bs-target="#approveModal">
                                        <i class="fas fa-check-circle me-1"></i>
                                        <span class="fw-bold">Approve Request</span>
                                    </button>
                                </div>

                                {{-- Reject Button - Opens Modal --}}
                                <div class="flex-fill">
                                    <button type="button" class="btn btn-outline-danger w-100 py-2" data-bs-toggle="modal" data-bs-target="#rejectModal">
                                        <i class="fas fa-times-circle me-1"></i>
                                        <span class="fw-bold">Reject with Reason</span>
                                    </button>
                                </div>
                            </div>

                        @elseif ($list->approval_hrd == 'approved')
                            <div class="d-flex flex-column flex-md-row align-items-center gap-3">
                                <div class="text-center flex-fill">
                                    <i class="fas fa-check-circle fa-3x text-success mb-2"></i>
                                    <h6 class="text-success mb-0">Request Approved</h6>
                                </div>
                                <div class="flex-fill">
                                    <button type="button" class="btn btn-warning w-100 py-2" data-bs-toggle="modal" data-bs-target="#unapproveModal">
                                        <i class="fas fa-undo me-1"></i>
                                        <span class="fw-bold">Return to Pending</span>
                                    </button>
                                </div>
                            </div>

                        @elseif ($list->approval_hrd == 'rejected')
                            <div class="d-flex flex-column flex-md-row align-items-center gap-3">
                                <div class="text-center flex-fill">
                                    <i class="fas fa-times-circle fa-3x text-danger mb-2"></i>
                                    <h6 class="text-danger mb-0">Request Rejected</h6>
                                </div>
                                <div class="flex-fill">
                                    <button type="button" class="btn btn-success w-100 py-2" data-bs-toggle="modal" data-bs-target="#approveModal">
                                        <i class="fas fa-check-circle me-1"></i>
                                        <span class="fw-bold">Change Decision to Approved</span>
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Reject Reason Modal --}}
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title text-white" id="rejectModalLabel">
                    <i class="fas fa-times-circle me-2"></i>Reject TNA Request
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="action" value="reject">
                <div class="modal-body">
                    <p class="text-muted mb-3">Please provide a reason for rejecting this TNA request.</p>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Rejection Reason <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="rejection_reason" rows="4" placeholder="Enter rejection reason..." required></textarea>
                        <small class="text-muted">This reason will be visible to the requestor</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to REJECT this request?')">
                        <i class="fas fa-times me-1"></i> Reject Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Approve Confirmation Modal --}}
<div class="modal fade" id="approveModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #028284;">
                <h5 class="modal-title text-white" id="approveModalLabel">
                    <i class="fas fa-check-circle me-2"></i>Approve TNA Request
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="action" value="approve">
                <div class="modal-body">
                    <div class="text-center mb-3">
                        <i class="fas fa-check-circle fa-3x mb-3" style="color:#028284;"></i>
                        <p class="fs-6 mb-0">Are you sure you want to <strong style="color:#028284;">APPROVE</strong> this TNA request?</p>
                        <p class="text-muted small mt-2 mb-0">This action will approve the training request submitted by <strong>{{ $list->requestor_name }}</strong>.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> No, Cancel
                    </button>
                    <button type="submit" class="btn text-white" style="background-color:#028284;">
                        <i class="fas fa-check me-1"></i> Yes, Approve
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Unapprove Confirmation Modal --}}
<div class="modal fade" id="unapproveModal" tabindex="-1" aria-labelledby="unapproveModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title text-dark" id="unapproveModalLabel">
                    <i class="fas fa-undo me-2"></i>Unapprove TNA Request
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ url($url_menu . '/' . encrypt($list->id)) }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="action" value="unapprove">
                <div class="modal-body">
                    <div class="text-center mb-3">
                        <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                        <p class="fs-6 mb-0">Are you sure you want to <strong class="text-warning">UNAPPROVE</strong> this TNA request?</p>
                        <p class="text-muted small mt-2 mb-0">This will revert the status back to <strong>Pending</strong>.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-arrow-left me-1"></i> No, Cancel
                    </button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-undo me-1"></i> Yes, Unapprove
                    </button>
                </div>
            </form>
        </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: #028284;
        border-color: #028284;
    }

    .btn-success:hover {
        background-color: #026566;
        border-color: #024f50;
    }

    .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;
    }

    .approval-decision-section {
        background: #f6fbfb;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #bfe3e3;
        border-left: 5px solid #028284;
        order: -1;
        margin-bottom: 24px;
    }

    .approval-review-body {
        display: flex;
        flex-direction: column;
    }

    .approval-decision-divider { display: none; }

    .modal-header.bg-danger,
    .modal-header.bg-success,
    .modal-header.bg-warning {
        border-radius: 0;
    }

    .modal-header.bg-danger .modal-title,
    .modal-header.bg-success .modal-title,
    .modal-header.bg-warning .modal-title {
        font-size: 1.1rem;
    }
</style>
@endpush