@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Request HR Letter Details"
                    description="Review the submitted HR letter request details including employee, request date, reason, language, and additional notes.">
                    <a href="{{ route('hr_letter.index') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="ion:arrow-back-outline"></iconify-icon>
                        <span>Back to List</span>
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Request Overview</h5>
                            <p class="form-section__sub mb-0">
                                View the full HR letter request information submitted for this employee.
                            </p>
                        </div>

                        <div class="request-info-grid">
                            <div class="request-info-card">
                                <div class="request-info-card__label">Employee Name</div>
                                <div class="request-info-card__value">
                                    <div class="task-staff-wrap">
                                        <div class="task-staff-avatar">
                                            {{ strtoupper(substr($hr_letter->staff->full_name ?? 'HR', 0, 2)) }}
                                        </div>
                                        <div class="ui-title">
                                            {{ $hr_letter->staff->full_name ?? '—' }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="request-info-card">
                                <div class="request-info-card__label">Date Of Request</div>
                                <div class="request-info-card__value">
                                    @if ($hr_letter->date_of_request)
                                        <div class="ui-title">{{ $hr_letter->date_of_request }}</div>
                                    @else
                                        <span class="ui-muted">Not applied yet</span>
                                    @endif
                                </div>
                            </div>

                            <div class="request-info-card">
                                <div class="request-info-card__label">Reason Of Request</div>
                                <div class="request-info-card__value">
                                    @if ($hr_letter->reason_of_request)
                                        <span class="ui-pill ui-pill--neutral">
                                            {{ ucfirst($hr_letter->reason_of_request) }}
                                        </span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </div>
                            </div>

                            <div class="request-info-card">
                                <div class="request-info-card__label">Letter Language</div>
                                <div class="request-info-card__value">
                                    @if ($hr_letter->letter_language)
                                        <span class="ui-pill ui-pill--info">
                                            {{ strtoupper($hr_letter->letter_language) }}
                                        </span>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </div>
                            </div>

                            <div class="request-info-card request-info-card--full">
                                <div class="request-info-card__label">Additional Information</div>
                                <div class="request-note-box">
                                    {{ $hr_letter->additional_information ?? 'No additional information provided.' }}
                                </div>
                            </div>
                        </div>

                        <div class="asset-actions">
                            <a href="{{ route('hr_letter.index') }}" class="asset-btn asset-btn--secondary">
                                Back
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .request-info-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .request-info-card {
            grid-column: span 3 / span 3;
            border: 1px solid #eef2f7;
            border-radius: 16px;
            background: #fff;
            padding: 1rem;
        }

        .request-info-card--full {
            grid-column: span 12 / span 12;
        }

        .request-info-card__label {
            font-size: 0.78rem;
            font-weight: 700;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.55rem;
        }

        .request-info-card__value {
            color: #111827;
        }

        .request-note-box {
            padding: 1rem;
            background: #f8fafc;
            border: 1px solid #eef2f7;
            border-radius: 14px;
            color: #374151;
            line-height: 1.7;
            min-height: 84px;
            white-space: pre-line;
        }

        .task-staff-wrap {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }

        .task-staff-avatar {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef4ff;
            color: #2563eb;
            font-weight: 700;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.25rem;
            flex-wrap: wrap;
        }

        @media (max-width: 1199.98px) {
            .request-info-card {
                grid-column: span 6 / span 6;
            }

            .request-info-card--full {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 767.98px) {
            .request-info-card,
            .request-info-card--full {
                grid-column: span 12 / span 12;
            }
        }
    </style>
@endpush