@extends('layouts.master')
@section('title') @lang('translation.referral-codes') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.referral-codes')
@endslot
@endcomponent
@endsection

@section('content')

<h3 class="mb-4">@lang('translation.referral-codes')</h3>

<div class="mb-4 text-end">
    <a href="{{ route('create-referral-code') }}" class="btn btn-success px-4">
        <i class="mdi mdi-link-variant-plus me-1"></i>@lang('translation.create-referral-code')
    </a>
</div>

<div class="row row-cols-1 g-4 mb-4">
    @forelse ($referrals as $referral)
    @php
    $details = is_string($referral->referral_details)
    ? json_decode($referral->referral_details, true)
    : ($referral->referral_details ?? []);
    $badgeClass = match($referral->status) {
    'approved' => 'bg-success-subtle text-success',
    'rejected' => 'bg-danger-subtle text-danger',
    default => 'bg-warning-subtle text-warning',
    };
    @endphp

    <div class="col">
        <div class="card card-animate-custom p-3 shadow-sm mb-0">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="fw-semibold fs-5">{{ $referral->referral_code }}</div>
                    <div class="text-muted small">
                        Created on • {{ \Carbon\Carbon::parse($referral->request_date)->format('d M Y') }}

                    </div>
                </div>
                <div class="text-end">
                    <span class="badge text-uppercase {{ $badgeClass }}">{{ __('translation.statuses.' . $referral->status) }}</span>
                    @if($referral->status === 'approved')
                    <div class="mt-2 d-flex gap-2">
                        <button
                            class="btn btn-sm btn-outline-primary"
                            onclick="copyReferralLink('{{ $referral->referral_code }}')">
                            <i class="ri-file-copy-line me-1"></i> Copy
                        </button>
                        <button
                            class="btn btn-sm btn-outline-secondary"
                            onclick="shareReferral('{{ $referral->referral_code }}')">
                            <i class="ri-share-line me-1"></i> Share
                        </button>
                    </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="col">
        <div class="card p-5 shadow-sm text-center mb-0">
            <i class="ri-link text-muted display-4 mb-3"></i>
            <h5 class="text-muted mb-1">@lang('translation.no-referral-codes')</h5>
            <p class="text-muted">@lang('translation.no-referral-codes-description')</p>
        </div>
    </div>
    @endforelse
</div>

<script>
    const userId = "{{ auth()->id() }}"; // Laravel Auth ID

    function getReferralUrl(code) {
        return `${window.location.origin}/${userId}/${code}`;
    }

    function copyReferralLink(code) {
        const url = getReferralUrl(code);
        navigator.clipboard.writeText(url).then(() => {
            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: 'Referral link copied to clipboard.',
                timer: 2000,
                showConfirmButton: false
            });
        }).catch(() => {
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: 'Unable to copy the link.'
            });
        });
    }

    function shareReferral(code) {
        const url = getReferralUrl(code);
        if (navigator.share) {
            navigator.share({
                title: 'Join with my referral code!',
                text: `Use my referral code: ${code}`,
                url: url
            }).catch(() => {
                copyReferralLink(code);
            });
        } else {
            copyReferralLink(code);
        }
    }
</script>



@endsection