@extends('layouts.admin')

@section('title', $recurringInvoice->name)

@section('page-title', 'Recurring Invoice Details')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-[#111418] text-gray-900 mb-2">{{ $recurringInvoice->name }}</h2>
                <p class="text-sm text-[#617589]">Customer: {{ $recurringInvoice->customer->name }}</p>
            </div>
            <span class="px-3 py-1 rounded-lg text-sm font-medium {{ $recurringInvoice->status === 'active' ? 'bg-green-100 text-green-800' : ($recurringInvoice->status === 'paused' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                {{ ucfirst($recurringInvoice->status) }}
            </span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Frequency</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ ucfirst($recurringInvoice->frequency) }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Start Date</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ $recurringInvoice->start_date->format('M d, Y') }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Next Invoice Date</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ $recurringInvoice->next_invoice_date ? $recurringInvoice->next_invoice_date->format('M d, Y') : 'N/A' }}</p>
            </div>
            <div>
                <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">End Date</p>
                <p class="text-sm text-[#111418] text-gray-900">{{ $recurringInvoice->end_date ? $recurringInvoice->end_date->format('M d, Y') : 'No end date' }}</p>
            </div>
            @if($recurringInvoice->occurrences)
                <div>
                    <p class="text-xs font-semibold text-[#617589] uppercase tracking-wider mb-2">Occurrences</p>
                    <p class="text-sm text-[#111418] text-gray-900">{{ $recurringInvoice->occurrences }} ({{ $recurringInvoice->invoices->count() }} generated)</p>
                </div>
            @endif
        </div>

        <div class="mt-6 pt-6 border-t border-[#e5e7eb] flex gap-3">
            @if($recurringInvoice->status === 'active')
                <form method="POST" action="{{ route('admin.recurring-invoices.pause', $recurringInvoice) }}" class="inline">
                    @csrf
                    <button type="submit" class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg hover:bg-yellow-200 transition-colors">
                        Pause
                    </button>
                </form>
            @elseif($recurringInvoice->status === 'paused')
                <form method="POST" action="{{ route('admin.recurring-invoices.resume', $recurringInvoice) }}" class="inline">
                    @csrf
                    <button type="submit" class="px-4 py-2 bg-green-100 text-green-800 rounded-lg hover:bg-green-200 transition-colors">
                        Resume
                    </button>
                </form>
            @endif
            <form method="POST" action="{{ route('admin.recurring-invoices.cancel', $recurringInvoice) }}" onsubmit="return confirm('Are you sure you want to cancel this recurring invoice?')" class="inline">
                @csrf
                <button type="submit" class="px-4 py-2 bg-red-100 text-red-800 rounded-lg hover:bg-red-200 transition-colors">
                    Cancel
                </button>
            </form>
        </div>
    </div>

    @if($recurringInvoice->invoices->count() > 0)
        <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
            <h3 class="text-lg font-bold text-[#111418] text-gray-900 mb-6">Generated Invoices</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-background-light border-b border-[#e5e7eb]">
                        <tr>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase tracking-wider">Invoice #</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase tracking-wider">Date</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase tracking-wider text-right">Total</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase tracking-wider">Status</th>
                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase tracking-wider text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#e5e7eb]">
                        @foreach($recurringInvoice->invoices as $invoice)
                            <tr>
                                <td class="py-4 px-4">
                                    <a href="{{ route('admin.invoices.show', $invoice) }}" class="text-primary hover:underline">
                                        {{ $invoice->invoice_number }}
                                    </a>
                                </td>
                                <td class="py-4 px-4 text-sm text-[#617589]">
                                    {{ $invoice->issue_date->format('M d, Y') }}
                                </td>
                                <td class="py-4 px-4 text-sm font-medium text-[#111418] text-gray-900 text-right">
                                    {{ $invoice->currency }} {{ number_format($invoice->total, 2) }}
                                </td>
                                <td class="py-4 px-4">
                                    <span class="px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                        {{ ucfirst($invoice->status) }}
                                    </span>
                                </td>
                                <td class="py-4 px-4 text-right">
                                    <a href="{{ route('admin.invoices.show', $invoice) }}" class="text-primary hover:underline text-sm">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>
@endsection