@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        .approval-info-tile {
            height: 100%;
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 16px 18px;
            border: 1px solid #e8ecef;
            border-radius: 10px;
            background: #fbfcfd;
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .approval-info-tile:hover {
            border-color: #9fd2d3;
            box-shadow: 0 4px 12px rgba(2, 130, 132, .08);
        }
        .approval-info-icon {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 38px;
            border-radius: 8px;
            background: rgba(2, 130, 132, .1);
            color: #028284;
        }
        .approval-info-label {
            display: block;
            margin-bottom: 4px;
            color: #8392ab;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
        }
        .approval-info-value {
            margin: 0;
            color: #344767;
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }
    </style>
    <div class="card shadow-lg mx-4 mb-0">
        <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>
                        @if ($authorize->edit == '1' && $list->approval_hrd == 'pending')
                            <button type="button" class="btn btn-success mb-0"
                                onclick="approveRequestFromShow('{{ encrypt($list->id) }}')">
                                <i class="fas fa-check-circle me-1"></i><span class="font-weight-bold">Approve</span>
                            </button>
                            <button type="button" class="btn btn-outline-danger mb-0" data-bs-toggle="modal"
                                data-bs-target="#rejectModal">
                                <i class="fas fa-times-circle me-1"></i><span class="font-weight-bold">Reject</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid pt-3 pb-4">
        <div class="row">
            {{-- Detail Information - Full Width --}}
            <div class="col-md-12">
                <div class="card mb-4 approval-detail-card" style="overflow: hidden;">
                    <div class="card-header approval-detail-header"
                        style="background: linear-gradient(135deg, #028284 0%, #008f91 100%) !important; padding: 20px 24px; border-bottom: 0;">
                        <div class="d-flex align-items-center gap-3">
                            <div class="approval-detail-icon"
                                style="width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;border-radius:8px;background:#fff;color:#028284;font-size:1.25rem;box-shadow:0 4px 10px rgba(0,0,0,.12);">
                                <i class="fas fa-clipboard-check"></i>
                            </div>
                            <div>
                                <h5 class="mb-1" style="color:#fff !important;">TNA Request Approval</h5>
                                <p class="text-sm mb-0" style="color:rgba(255,255,255,.88) !important;">Review the request information before making an approval decision</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="approval-info-tile">
                                    <span class="approval-info-icon"><i class="fas fa-user"></i></span>
                                    <div>
                                        <span class="approval-info-label">Requestor</span>
                                        <p class="approval-info-value">{{ $list->requestor_nik }} — {{ $list->requestor_name }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="approval-info-tile">
                                    <span class="approval-info-icon"><i class="fas fa-building"></i></span>
                                    <div>
                                        <span class="approval-info-label">Department</span>
                                        <p class="approval-info-value">{{ $list->requestor_departemen ?: '-' }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="approval-info-tile">
                                    <span class="approval-info-icon"><i class="fas fa-sitemap"></i></span>
                                    <div>
                                        <span class="approval-info-label">Section</span>
                                        <p class="approval-info-value">{{ $list->requestor_bagian ?: '-' }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-8 mb-3">
                                <div class="approval-info-tile">
                                    <span class="approval-info-icon"><i class="fas fa-graduation-cap"></i></span>
                                    <div>
                                        <span class="approval-info-label">Training Name</span>
                                        <p class="approval-info-value text-primary">{{ $list->name_trn }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="approval-info-tile">
                                    <span class="approval-info-icon"><i class="fas fa-calendar-alt"></i></span>
                                    <div>
                                        <span class="approval-info-label">Date Estimation</span>
                                        <p class="approval-info-value">{{ $list->month_estimation ? \Carbon\Carbon::parse($list->month_estimation)->format('d F Y') : '-' }}</p>
                                    </div>
                                </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>Rejection Reason
                                        </div>
                                        <div class="rejection-body">
                                            {{ $list->rejection_reason }}
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($authorize->edit == '1' && $list->approval_hrd == 'pending')
        <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">
                            <div class="approval-confirmation-summary mb-3">
                                <span class="text-muted small">Training</span>
                                <h6 class="mb-0">{{ $list->name_trn }}</h6>
                            </div>
                            <label class="form-label fw-bold" for="showRejectionReason">
                                Rejection Reason <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control" id="showRejectionReason" name="rejection_reason" rows="4"
                                placeholder="Explain what needs to be corrected..." required></textarea>
                            <small class="text-muted">The requestor will see this reason.</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-times me-1"></i>Reject Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
@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;
    }

    .approval-detail-card { overflow: hidden; }
    .approval-detail-header {
        padding: 20px 24px;
        background: linear-gradient(135deg, #028284 0%, #008f91 100%);
        border-bottom: 0;
    }
    .approval-detail-icon {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        border-radius: 8px;
        background: #fff;
        color: #028284;
        font-size: 1.25rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
    .approval-detail-card .card-body { padding: 28px 24px; }
    .approval-modal-header { background: #028284; }
    .approval-confirmation-summary {
        padding: 14px 16px;
        border-radius: 8px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
    }

    .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>
    function approveRequestFromShow(encryptedPrimary) {
        const trainingName = {{ Illuminate\Support\Js::from($list->name_trn) }};
        Swal.fire({
            title: 'Approve this request?',
            html: '<p class="mb-1">Training: <strong>' + $('<div>').text(trainingName).html() + '</strong></p>' +
                '<p class="text-muted text-sm mb-0">The request will continue to the TNA preparation process.</p>',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#028284',
            cancelButtonColor: '#8392ab',
            confirmButtonText: '<i class="fas fa-check me-1"></i>Yes, Approve',
            cancelButtonText: 'Cancel'
        }).then(function(result) {
            if (!result.isConfirmed) return;

            $.ajax({
                url: '{{ route('trsapr.approve') }}',
                type: 'POST',
                data: {
                    encryptedPrimary: encryptedPrimary,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Processing approval...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: function() { Swal.showLoading(); }
                    });
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Request Approved',
                        text: response.message,
                        confirmButtonColor: '#028284'
                    }).then(function() { location.reload(); });
                },
                error: function(xhr) {
                    const response = xhr.responseJSON || {};
                    Swal.fire({
                        icon: 'error',
                        title: 'Approval Failed',
                        text: response.message || 'Something went wrong.',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        });
    }
</script>
@endpush