@extends('layout.layout')

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

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Certificates Request"
                    description="Review student certificates requests, filter them by student or status, and update each request decision."
                />

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <div class="mb-0 ui-title">Filters</div>
                            <p class="mb-0 ui-muted">Filter requests by student, program or academy name, status, and request date.</p>
                        </div>
                    </div>

                    <div class="p-3">
                        <form method="GET" action="{{ route('requestHardCopy') }}" class="d-flex flex-wrap gap-3 align-items-end">
                            <div class="flex-grow-1" style="min-width: 180px; max-width: 240px;">
                                <label for="student_id" class="form-label">Student</label>
                                <select name="student_id" id="student_id" class="form-select form-select-sm">
                                    <option value="">All Students</option>
                                    @foreach ($students as $student)
                                        <option value="{{ $student->id }}" {{ $filters['student_id'] == $student->id ? 'selected' : '' }}>
                                            {{ $student->first_name }} {{ $student->last_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex-grow-1" style="min-width: 180px; max-width: 220px;">
                                <label for="track_name" class="form-label">Program / Academy</label>
                                <input
                                    type="text"
                                    name="track_name"
                                    id="track_name"
                                    value="{{ $filters['track_name'] ?? '' }}"
                                    class="form-control form-control-sm"
                                    placeholder="Search by name"
                                >
                            </div>

                            <div style="min-width: 140px; max-width: 180px;">
                                <label for="status" class="form-label">Status</label>
                                <select name="status" id="status" class="form-select form-select-sm">
                                    <option value="">All</option>
                                    <option value="pending" {{ ($filters['status'] ?? '') === 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="accepted" {{ ($filters['status'] ?? '') === 'accepted' ? 'selected' : '' }}>Accepted</option>
                                    <option value="rejected" {{ ($filters['status'] ?? '') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>

                            <div style="min-width: 150px; max-width: 180px;">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="date" name="start_date" id="start_date" value="{{ $filters['start_date'] ?? '' }}" class="form-control form-control-sm">
                            </div>

                            <div style="min-width: 150px; max-width: 180px;">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="date" name="end_date" id="end_date" value="{{ $filters['end_date'] ?? '' }}" class="form-control form-control-sm">
                            </div>

                            <div style="min-width: 100px; max-width: 120px;">
                                <label for="per_page" class="form-label">Show</label>
                                <select name="per_page" id="per_page" class="form-select form-select-sm">
                                    @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                        <option value="{{ $count }}" {{ request('per_page', 10) == $count ? 'selected' : '' }}>
                                            {{ $count }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="ms-auto d-flex gap-2 flex-wrap align-items-end">
                                <button type="submit" class="asset-btn asset-btn--primary">
                                    Apply Filters
                                </button>
                                <a href="{{ route('requestHardCopy') }}" class="asset-btn asset-btn--secondary">
                                    Reset
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div>
                            <div class="mb-0 ui-title">Student Requests</div>
                            <p class="mb-0 ui-muted">Accept or reject pending certificates requests directly from the table below.</p>
                        </div>
                    </div>

                    <x-table
                        :headers="['#', 'Student', 'Program / Academy', 'Program Level', 'Delivery Type', 'Shipping Address', 'Status', 'Request Date', 'Action']"
                        :paginator="$student_requests"
                        emptyMessage="No certificates requests found."
                    >
                        @foreach ($student_requests as $index => $hardCopyRequest)
                            @php
                                $course = $hardCopyRequest->staffScheduled;
                                $student = $hardCopyRequest->student;
                                $studentName = $student?->full_name ?: trim(($student?->first_name ?? '') . ' ' . ($student?->last_name ?? ''));
                                $programName = $course?->schedule_type === 'track'
                                    ? $course?->track?->name_en
                                    : ($course?->academyProduct?->name_en ?? $course?->course_name_en);
                                $canBookWestminsterDemo = $hardCopyRequest->certificate_type === 'westminster' && ! $hardCopyRequest->demo_staff_scheduled_id;
                                $statusKey = match ($hardCopyRequest->status) {
                                    'accepted' => 'success',
                                    'rejected' => 'warn',
                                    default => 'neutral',
                                };
                            @endphp

                            <tr>
                                <td class="ui-id text-center">
                                    {{ method_exists($student_requests, 'firstItem') ? $student_requests->firstItem() + $index : $index + 1 }}
                                </td>
                                <td class="text-center ui-title">
                                    <a href="{{ route('students.show', $hardCopyRequest->student_id) }}">
                                        {{ $studentName ?: '-' }}
                                    </a>
                                </td>
                                <td class="text-center ui-muted">{{ $programName ?? '-' }}</td>
                                <td class="text-center ui-muted">{{ $course?->trackLevel?->name_en ?? '-' }}</td>
                                <td class="text-center ui-muted">{{ ucfirst($hardCopyRequest->delivery_type ?? '-') }}</td>
                                <td class="text-center ui-muted">
                                    @if ($hardCopyRequest->delivery_type === 'hard' && $hardCopyRequest->shipping_address)
                                        {{ $hardCopyRequest->shipping_address }}
                                    @else
                                        -
                                    @endif
                                </td>

                                <td class="text-center">
                                    <span class="ui-pill ui-pill--{{ $statusKey }}">{{ ucfirst($hardCopyRequest->status) }}</span>
                                </td>
                                <td class="text-center ui-muted">
                                    {{ $hardCopyRequest->created_at ? \Carbon\Carbon::parse($hardCopyRequest->created_at)->format('Y-m-d h:i A') : '-' }}
                                </td>
                                <td class="text-center">
                                    <div class="d-inline-flex gap-2 flex-wrap justify-content-center">
                                        <button type="button" class="btn btn-outline-primary btn-sm radius-8" data-bs-toggle="modal" data-bs-target="#hardCopyDetailsModal{{ $hardCopyRequest->id }}">
                                            Details
                                        </button>
                                        @if ($canBookWestminsterDemo)
                                            <a href="{{ route('scheduleDemo', ['student_id' => $hardCopyRequest->student_id, 'hard_copy_request_id' => $hardCopyRequest->id]) }}" class="btn btn-outline-info btn-sm radius-8">
                                                Book Demo
                                            </a>
                                        @endif

                                    @if ($hardCopyRequest->status === 'pending')
                                        <form action="{{ route('requestHardCopy.updateStatus', $hardCopyRequest->id) }}" method="POST" class="d-inline-flex gap-2 flex-wrap justify-content-center">
                                            @csrf
                                            @method('PUT')
                                            <button type="submit" name="status" value="accepted" class="btn btn-outline-success btn-sm radius-8">
                                                Accept
                                            </button>
                                            <button type="submit" name="status" value="rejected" class="btn btn-outline-danger btn-sm radius-8">
                                                Reject
                                            </button>
                                        </form>
                                    @else
                                        <span class="ui-pill ui-pill--{{ $statusKey }}">{{ ucfirst($hardCopyRequest->status) }}</span>
                                    @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>

                    @foreach ($student_requests as $hardCopyRequest)
                        @php
                            $course = $hardCopyRequest->staffScheduled;
                            $student = $hardCopyRequest->student;
                            $invoice = $hardCopyRequest->invoice;
                            $demoSchedule = $hardCopyRequest->demoSchedule;
                            $demoSession = $demoSchedule?->scheduledSessions?->first();
                            $studentName = $student?->full_name ?: trim(($student?->first_name ?? '') . ' ' . ($student?->last_name ?? ''));
                            $programName = $course?->schedule_type === 'track'
                                ? $course?->track?->name_en
                                : ($course?->academyProduct?->name_en ?? $course?->course_name_en);
                            $shouldShowRequestContactDetails = $hardCopyRequest->certificate_type === 'pearson';
                            $shouldShowWestminsterDemo = $hardCopyRequest->certificate_type === 'westminster';
                            $isSoftCertificateRequest = $hardCopyRequest->delivery_type === 'soft';
                            $isHardCertificateRequest = $hardCopyRequest->delivery_type === 'hard';
                            $certificatePrice = (float) ($hardCopyRequest->certificate_price ?? $hardCopyRequest->paymentConfiguration?->price ?? 0);
                            $shouldShowPaymentDetails = $certificatePrice > 0;
                            $teacherName = trim(($course?->staff?->first_name ?? '') . ' ' . ($course?->staff?->last_name ?? ''));
                            $managerName = trim(($course?->staff?->manager?->first_name ?? '') . ' ' . ($course?->staff?->manager?->last_name ?? ''));
                            $demoTesterName = trim(($demoSchedule?->staff?->first_name ?? '') . ' ' . ($demoSchedule?->staff?->last_name ?? ''));
                            $demoTeacherFeedback = $demoSchedule?->teacherFeedback
                                ? $demoSchedule->teacherFeedback
                                    ->where('student_id', $hardCopyRequest->student_id)
                                    ->sortByDesc('created_at')
                                    ->first()
                                : null;
                            $demoFeedbackResult = strtolower((string) ($demoTeacherFeedback?->result ?? ''));
                            $demoFeedbackResultKey = match ($demoFeedbackResult) {
                                'pass' => 'success',
                                'fail' => 'warn',
                                default => 'neutral',
                            };
                            $demoFeedbackTeacherName = trim(($demoTeacherFeedback?->teacher?->first_name ?? '') . ' ' . ($demoTeacherFeedback?->teacher?->last_name ?? ''));
                            $courseAdminNames = $course?->courseAdmins?->map(function ($assignment) {
                                if ($assignment->admin?->staff) {
                                    return trim(($assignment->admin->staff->first_name ?? '') . ' ' . ($assignment->admin->staff->last_name ?? ''));
                                }

                                return $assignment->admin?->full_name;
                            })->filter()->unique()->join(', ');
                            $secondaryAdminNames = $course?->secondaryAdmins?->map(function ($admin) {
                                if ($admin->staff) {
                                    return trim(($admin->staff->first_name ?? '') . ' ' . ($admin->staff->last_name ?? ''));
                                }

                                return $admin->full_name;
                            })->filter()->unique()->join(', ');
                            $receipt = $invoice?->getRawOriginal('invoice_img') ?: $invoice?->invoice_img;

                            if (is_string($receipt)) {
                                $decodedReceipt = json_decode($receipt, true);
                                if (json_last_error() === JSON_ERROR_NONE) {
                                    $receipt = $decodedReceipt;
                                }
                            }

                            if (is_array($receipt)) {
                                $receipt = collect($receipt)->flatten()->filter()->first();
                            }
                        @endphp

                        <div class="modal fade" id="hardCopyDetailsModal{{ $hardCopyRequest->id }}" tabindex="-1" aria-labelledby="hardCopyDetailsModalLabel{{ $hardCopyRequest->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <div>
                                            <h5 class="modal-title" id="hardCopyDetailsModalLabel{{ $hardCopyRequest->id }}">Certificate Request Details</h5>
                                            <p class="mb-0 ui-muted">Request #{{ $hardCopyRequest->id }} for {{ $studentName ?: 'Student' }}</p>
                                        </div>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>

                                    <div class="modal-body">
                                        <div class="hard-copy-detail-grid">
                                            <div class="hard-copy-detail">
                                                <span>Student Code</span>
                                                <strong>{{ $student?->student_code ?? '-' }}</strong>
                                            </div>
                                            <div class="hard-copy-detail">
                                                <span>Student Email</span>
                                                <strong>{{ $student?->email ?? '-' }}</strong>
                                            </div>
                                            <div class="hard-copy-detail">
                                                <span>Student Mobile</span>
                                                <strong>{{ $student?->mobile ?? '-' }}</strong>
                                            </div>

                                        </div>

                                        <div class="hard-copy-section">
                                            <div>Certificate</div>
                                            <div class="hard-copy-detail-grid">
                                                <div class="hard-copy-detail">
                                                    <span>Certificate Type</span>
                                                    <strong>{{ ucfirst($hardCopyRequest->certificate_type ?? '-') }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Name On Certificate</span>
                                                    <strong>{{ $hardCopyRequest->certificate_name ?? '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Delivery Type</span>
                                                    <strong>{{ ucfirst($hardCopyRequest->delivery_type ?? '-') }}</strong>
                                                </div>
                                                @if ($isHardCertificateRequest)
                                                    <div class="hard-copy-detail hard-copy-detail--wide">
                                                        <span>Shipping Address</span>
                                                        <strong>{{ $hardCopyRequest->shipping_address ?: '-' }}</strong>
                                                    </div>
                                                @endif
                                                @if ($shouldShowRequestContactDetails)
                                                    <div class="hard-copy-detail">
                                                        <span>Request Country</span>
                                                        <strong>{{ $hardCopyRequest->country ?? '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Request Email</span>
                                                        <strong>{{ $hardCopyRequest->email ?? '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Preferred Exam Date</span>
                                                        <strong>{{ $hardCopyRequest->preferred_exam_date ? \Carbon\Carbon::parse($hardCopyRequest->preferred_exam_date)->format('Y-m-d') : '-' }}</strong>
                                                    </div>
                                                @endif
                                                <div class="hard-copy-detail">
                                                    <span>Certificate Price</span>
                                                    <strong>${{ number_format($certificatePrice, 2) }}</strong>
                                                </div>
                                            </div>
                                            @if ($hardCopyRequest->request_note)
                                                <div class="hard-copy-note">
                                                    <span>Request Note</span>
                                                    <p>{{ $hardCopyRequest->request_note }}</p>
                                                </div>
                                            @endif
                                        </div>

                                        @if ($isSoftCertificateRequest)
                                            <div class="hard-copy-section">
                                                <div>Soft Certificate File</div>
                                                <div class="hard-copy-upload">
                                                    <div>
                                                        <span class="hard-copy-upload__label">Uploaded Certificate</span>
                                                        @if ($hardCopyRequest->soft_certificate_file)
                                                            <a href="{{ asset($hardCopyRequest->soft_certificate_file) }}" target="_blank" class="fw-semibold">
                                                                View Certificate
                                                            </a>
                                                        @else
                                                            <span class="ui-muted">No certificate uploaded yet.</span>
                                                        @endif
                                                    </div>

                                                    <form action="{{ route('requestHardCopy.uploadSoftCertificate', $hardCopyRequest->id) }}" method="POST" enctype="multipart/form-data" class="hard-copy-upload__form">
                                                        @csrf
                                                        <input type="file" name="soft_certificate_file" class="form-control form-control-sm" accept=".pdf,.jpg,.jpeg,.png" required>
                                                        <button type="submit" class="asset-btn asset-btn--primary btn-sm">
                                                            {{ $hardCopyRequest->soft_certificate_file ? 'Replace Certificate' : 'Upload Certificate' }}
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        @endif

                                        @if ($shouldShowWestminsterDemo)
                                            <div class="hard-copy-section">
                                                <div class="d-flex align-items-center justify-content-between gap-2 flex-wrap mb-2">
                                                    <div class="mb-0">Westminster Demo</div>
                                                    @if (! $demoSchedule)
                                                        <a href="{{ route('scheduleDemo', ['student_id' => $hardCopyRequest->student_id, 'hard_copy_request_id' => $hardCopyRequest->id]) }}" class="asset-btn asset-btn--primary btn-sm">
                                                            Book Demo
                                                        </a>
                                                    @endif
                                                </div>
                                                <div class="hard-copy-detail-grid">
                                                    <div class="hard-copy-detail">
                                                        <span>Demo ID</span>
                                                        <strong>{{ $demoSchedule?->id ?? '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Demo Product</span>
                                                        <strong>{{ $demoSchedule?->academyProduct?->name_en ?? '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Tester</span>
                                                        <strong>{{ $demoTesterName ?: '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Demo Date</span>
                                                        <strong>{{ $demoSession?->session_date ? \Carbon\Carbon::parse($demoSession->session_date)->format('Y-m-d') : '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Demo Time</span>
                                                        <strong>
                                                            @if ($demoSession)
                                                                {{ \Carbon\Carbon::parse($demoSession->start_time)->format('h:i A') }} - {{ \Carbon\Carbon::parse($demoSession->end_time)->format('h:i A') }}
                                                            @else
                                                                -
                                                            @endif
                                                        </strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Status</span>
                                                        <strong>{{ $demoSchedule ? 'Booked' : 'Not Booked' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Feedback Result</span>
                                                        <strong>
                                                            <span class="ui-pill ui-pill--{{ $demoFeedbackResultKey }}">
                                                                {{ $demoTeacherFeedback?->result ? ucfirst($demoTeacherFeedback->result) : 'Pending' }}
                                                            </span>
                                                        </strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Feedback By</span>
                                                        <strong>{{ $demoFeedbackTeacherName ?: '-' }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="hard-copy-section">
                                            <div>Course</div>
                                            <div class="hard-copy-detail-grid">
                                                <div class="hard-copy-detail">
                                                    <span>Course ID</span>
                                                    <strong>{{ $course?->id ?? '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Schedule Type</span>
                                                    <strong>{{ ucfirst($course?->schedule_type ?? '-') }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Program / Academy</span>
                                                    <strong>{{ $programName ?? '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Level</span>
                                                    <strong>{{ $course?->trackLevel?->name_en ?? '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Track Type</span>
                                                    <strong>{{ $course?->trackType?->name ?? '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Category</span>
                                                    <strong>{{ $course?->category?->name_en ?? '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Teacher</span>
                                                    <strong>{{ $teacherName ?: '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Teacher Manager</span>
                                                    <strong>{{ $managerName ?: '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Assigned Admins</span>
                                                    <strong>{{ $courseAdminNames ?: '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Secondary Admins</span>
                                                    <strong>{{ $secondaryAdminNames ?: '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>Start Date</span>
                                                    <strong>{{ $course?->start_date ? \Carbon\Carbon::parse($course->start_date)->format('Y-m-d') : '-' }}</strong>
                                                </div>
                                                <div class="hard-copy-detail">
                                                    <span>End Date</span>
                                                    <strong>{{ $course?->end_date ? \Carbon\Carbon::parse($course->end_date)->format('Y-m-d') : '-' }}</strong>
                                                </div>
                                            </div>
                                        </div>

                                        @if ($shouldShowPaymentDetails)
                                            <div class="hard-copy-section">
                                                <div>Payment</div>
                                                <div class="hard-copy-detail-grid">
                                                    <div class="hard-copy-detail">
                                                        <span>Invoice Number</span>
                                                        <strong>{{ $invoice?->invoice_number ?? '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Payment Status</span>
                                                        <strong>{{ $invoice?->payment_status ? ucfirst(str_replace('_', ' ', $invoice->payment_status)) : '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Bill Status</span>
                                                        <strong>{{ $invoice?->bill_status ? ucfirst(str_replace('_', ' ', $invoice->bill_status)) : '-' }}</strong>
                                                    </div>
                                                    <div class="hard-copy-detail">
                                                        <span>Payment Method</span>
                                                        <strong>{{ $invoice?->payment_type ? ucfirst($invoice->payment_type) : '-' }}</strong>
                                                    </div>

                                                    <div class="hard-copy-detail">
                                                        <span>Price</span>
                                                        <strong>{{ $invoice?->net_price !== null ? '$' . number_format((float) $invoice->net_price, 2) : '-' }}</strong>
                                                    </div>

                                                    <div class="hard-copy-detail">
                                                        <span>Request Date</span>
                                                        <strong>{{ $hardCopyRequest->created_at ? \Carbon\Carbon::parse($hardCopyRequest->created_at)->format('Y-m-d h:i A') : '-' }}</strong>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .hard-copy-detail-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        }

        .hard-copy-detail {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px;
        }

        .hard-copy-detail span,
        .hard-copy-note span {
            color: #64748b;
            display: block;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .hard-copy-detail strong {
            color: #111827;
            display: block;
            font-size: 14px;
            overflow-wrap: anywhere;
        }

        .hard-copy-detail--wide {
            grid-column: 1 / -1;
        }

        .hard-copy-section {
            margin-top: 18px;
        }

        .hard-copy-section div {
            color: #111827;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .hard-copy-note {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-top: 12px;
            padding: 12px;
        }

        .hard-copy-note p {
            margin: 0;
            overflow-wrap: anywhere;
        }

        .hard-copy-upload {
            align-items: center;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: space-between;
            padding: 12px;
        }

        .hard-copy-upload__label {
            color: #64748b;
            display: block;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .hard-copy-upload__form {
            align-items: center;
            display: flex;
            flex: 1 1 320px;
            gap: 8px;
            justify-content: flex-end;
        }

        .hard-copy-upload__form input {
            max-width: 260px;
        }

        @media (max-width: 576px) {
            .hard-copy-upload__form {
                align-items: stretch;
                flex-direction: column;
            }

            .hard-copy-upload__form input {
                max-width: none;
            }
        }
    </style>
@endpush