@extends('admin.layouts.app')
@section('title','Subscription — '.$subscription->subscription_id)
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.subscriptions.index') }}" style="color:inherit;text-decoration:none;">Subscriptions</a>
    <span>/</span> {{ $subscription->subscription_id }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ $subscription->full_name }}</h1>
        <p class="page-subtitle"><code>{{ $subscription->subscription_id }}</code></p>
    </div>
    <a href="{{ route('admin.subscriptions.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card h-100" style="border-top:3px solid #2563eb;">
            <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-user text-primary me-2"></i>Subscriber Details</h6></div>
            <div class="card-body" style="font-size:13px;">
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Name</span>
                    <span>
                        @if($subscription->donor)
                        <a href="{{ route('admin.donors.show',$subscription->donor) }}">{{ $subscription->full_name }}</a>
                        @else
                        {{ $subscription->full_name }}
                        @endif
                    </span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom"><span class="text-muted">Email</span><span>{{ $subscription->email ?? '—' }}</span></div>
                <div class="d-flex justify-content-between py-1 border-bottom"><span class="text-muted">Mobile</span><span>{{ $subscription->mobile ?? '—' }}</span></div>
                <div class="d-flex justify-content-between py-1"><span class="text-muted">Address</span><span class="text-end">{{ $subscription->address ?? '—' }}</span></div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card h-100" style="border-top:3px solid #16a34a;">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-sync text-success me-2"></i>Subscription Details</h6>
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Change Status</button>
                    <ul class="dropdown-menu" style="font-size:12px;">
                        @foreach(['active','paused','cancelled','failed','completed'] as $s)
                        <li>
                            <a class="dropdown-item change-status-link" href="#" data-status="{{ $s }}">{{ ucfirst($s) }}</a>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="card-body" style="font-size:13px;">
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Amount</span>
                    <span style="font-weight:700;color:#16a34a;font-size:16px;">₹{{ number_format($subscription->amount,2) }}</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Frequency</span><span>{{ ucfirst(str_replace('_',' ',$subscription->frequency)) }}</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Status</span>
                    <span id="statusBadge" class="badge bg-{{ $subscription->status==='active'?'success':($subscription->status==='paused'?'warning text-dark':($subscription->status==='completed'?'info':'secondary')) }}">{{ ucfirst($subscription->status) }}</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Start Date</span><span>{{ $subscription->start_date?->format('d M Y') ?? '—' }}</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Next Payment</span><span>{!! $subscription->next_payment_date_label !!}</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Total Collected</span><span style="font-weight:700;">₹{{ number_format($subscription->total_collected,2) }}</span>
                </div>
                <div class="d-flex justify-content-between py-1">
                    <span class="text-muted">Payment Count</span><span>{{ $subscription->payment_count }}</span>
                </div>
            </div>
        </div>
    </div>

    @if($subscription->notes)
    <div class="col-12">
        <div class="card">
            <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-sticky-note text-warning me-2"></i>Notes</h6></div>
            <div class="card-body" style="font-size:13px;">{{ $subscription->notes }}</div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.change-status-link').forEach(function(link) {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const status = this.dataset.status;
        fetch('{{ route("admin.subscriptions.change-status",$subscription) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ status: status }),
        })
        .then(r => r.json())
        .then(d => {
            if (d.success) {
                if (typeof toastr !== 'undefined') toastr.success(d.message);
                setTimeout(() => location.reload(), 800);
            }
        })
        .catch(() => { if (typeof toastr !== 'undefined') toastr.error('Failed to update status.'); });
    });
});
</script>
@endpush