ladill-transfer/resources/views/transfer/transfers/show.blade.php

<x-user-layout>
    <x-slot name="title">{{ $transfer->title }}</x-slot>
    @php
        $qrCode = $transfer->qrCode;
        $publicUrl = $qrCode?->publicUrl();
        $fmtBytes = function (int $bytes) {
            if ($bytes >= 1048576) return number_format($bytes / 1048576, 1).' MB';
            return number_format($bytes / 1024, 0).' KB';
        };
    @endphp
    <div class="space-y-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <a href="{{ route('transfer.transfers.index') }}" class="text-sm text-slate-500 hover:text-slate-700">← All transfers</a>
                <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $transfer->title }}</h1>
                <p class="mt-1 text-sm text-slate-500">
                    @if($transfer->isInGracePeriod())
                        <span class="font-medium text-amber-700">Payment due</span> · files kept until {{ $transfer->grace_ends_at?->format('M j, Y') }}
                    @elseif($transfer->paid_until)
                        Paid through {{ $transfer->paid_until->format('M j, Y') }}
                    @else
                        Billing pending
                    @endif
                    · {{ $fmtBytes($transfer->storage_bytes) }} stored · GHS {{ number_format($transfer->monthlyCostGhs(), 2) }}/mo
                </p>
            </div>
            <form method="post" action="{{ route('transfer.transfers.destroy', $transfer) }}" onsubmit="return confirm('Delete this transfer and its files?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="rounded-xl border border-red-200 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50">Delete</button>
            </form>
        </div>

        @if(session('success'))
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
        @endif

        @if($transfer->recipient_email)
            <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
                Recipient: <span class="font-medium text-slate-900">{{ $transfer->recipient_email }}</span>
                @if($transfer->recipientMilestoneSent('created'))
                    <span class="text-slate-400">·</span>
                    Download link emailed
                @endif
            </div>
        @endif

        <div class="grid gap-6 lg:grid-cols-2">
            <div class="rounded-2xl border border-slate-200 bg-white p-6">
                <h2 class="font-semibold text-slate-900">Share link</h2>
                @if($publicUrl)
                    <div class="mt-3 flex gap-2">
                        <input type="text" readonly value="{{ $publicUrl }}"
                               class="flex-1 rounded-xl border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700"
                               onclick="this.select()">
                        <button type="button" onclick="navigator.clipboard.writeText('{{ $publicUrl }}')"
                                class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Copy</button>
                    </div>
                @endif
                @if($transfer->isPasswordProtected())
                    <p class="mt-3 text-sm text-amber-700">Password protected</p>
                @endif
                @if($transfer->message)
                    <p class="mt-4 text-sm text-slate-600">{{ $transfer->message }}</p>
                @endif
            </div>

            @if($qrCode && $previewDataUri)
                <div class="rounded-2xl border border-slate-200 bg-white p-6 text-center">
                    <h2 class="font-semibold text-slate-900">QR code</h2>
                    <img src="{{ $previewDataUri }}" alt="QR code" class="mx-auto mt-4 h-48 w-48 rounded-xl border border-slate-100">
                    <div class="mt-4 flex flex-wrap justify-center gap-2">
                        <a href="{{ route('transfer.transfers.download', [$transfer, 'png']) }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">PNG</a>
                        <a href="{{ route('transfer.transfers.download', [$transfer, 'svg']) }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">SVG</a>
                        <a href="{{ route('transfer.transfers.download', [$transfer, 'pdf']) }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">PDF</a>
                    </div>
                </div>
            @endif
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white">
            <div class="border-b border-slate-100 px-6 py-4">
                <h2 class="font-semibold text-slate-900">Files ({{ $transfer->files->count() }})</h2>
            </div>
            <div class="divide-y divide-slate-100">
                @foreach($transfer->files as $file)
                    <div class="flex items-center justify-between px-6 py-4">
                        <div>
                            <p class="font-medium text-slate-900">{{ $file->original_name }}</p>
                            <p class="text-xs text-slate-500">{{ $file->humanSize() }} · {{ number_format($file->downloads_total) }} downloads</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</x-user-layout>