@extends('layouts.portal')

@section('title', 'Will Lifecycle Report')
@section('page_title', 'Will Lifecycle Report')
@section('page_subtitle', 'Track will creation, approval, and payment journey')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'reports-master'])
@endsection

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <!-- Header with Export Button -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Will Lifecycle Report</h1>
            <p class="text-gray-600 mt-1">Complete audit trail from creation to approval - Total Wills: {{ $willsLifecycle->count() }}</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.reports.master.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Back
            </a>
            <a href="{{ route('admin.reports.master.will-lifecycle.export.excel', array_merge(request()->query(), [])) }}" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                <i class="fas fa-file-excel mr-2"></i>Export Excel
            </a>
            <a href="{{ route('admin.reports.master.will-lifecycle.export.pdf', array_merge(request()->query(), [])) }}" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                <i class="fas fa-file-pdf mr-2"></i>Export PDF
            </a>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <form method="GET" action="{{ route('admin.reports.master.will-lifecycle') }}" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Search (Client Name/IC/Email)</label>
                <input type="text" name="search" value="{{ $search }}" placeholder="Enter name, IC, or email..." class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Month</label>
                <select name="month" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Months</option>
                    <option value="1" {{ $month == 1 ? 'selected' : '' }}>January</option>
                    <option value="2" {{ $month == 2 ? 'selected' : '' }}>February</option>
                    <option value="3" {{ $month == 3 ? 'selected' : '' }}>March</option>
                    <option value="4" {{ $month == 4 ? 'selected' : '' }}>April</option>
                    <option value="5" {{ $month == 5 ? 'selected' : '' }}>May</option>
                    <option value="6" {{ $month == 6 ? 'selected' : '' }}>June</option>
                    <option value="7" {{ $month == 7 ? 'selected' : '' }}>July</option>
                    <option value="8" {{ $month == 8 ? 'selected' : '' }}>August</option>
                    <option value="9" {{ $month == 9 ? 'selected' : '' }}>September</option>
                    <option value="10" {{ $month == 10 ? 'selected' : '' }}>October</option>
                    <option value="11" {{ $month == 11 ? 'selected' : '' }}>November</option>
                    <option value="12" {{ $month == 12 ? 'selected' : '' }}>December</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Year</label>
                <select name="year" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">All Years</option>
                    @foreach($years as $y)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-search mr-2"></i>Filter
                </button>
                <a href="{{ route('admin.reports.master.will-lifecycle') }}" class="px-4 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition-colors">
                    <i class="fas fa-redo mr-2"></i>Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Lifecycle Wills Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="bg-gray-900 border-b-2 border-gray-300 text-white">
                        <th class="px-4 py-3 text-left font-semibold">Will ID</th>
                        <th class="px-4 py-3 text-left font-semibold">Client Name</th>
                        <th class="px-4 py-3 text-left font-semibold">Will Type</th>
                        <th class="px-4 py-3 text-center font-semibold">Status</th>
                        
                        <!-- Created Section -->
                        <th class="px-4 py-3 text-left font-semibold bg-blue-900">Created By</th>
                        <th class="px-4 py-3 text-left font-semibold bg-blue-900">Role</th>
                        <th class="px-4 py-3 text-left font-semibold bg-blue-900">Created Date</th>
                        
                        <!-- Invoice Section -->
                        <th class="px-4 py-3 text-left font-semibold bg-green-900">Invoice Date</th>
                        <th class="px-4 py-3 text-right font-semibold bg-green-900">Invoice Amount</th>
                        <th class="px-4 py-3 text-left font-semibold bg-green-900">Invoice Status</th>
                        
                        <!-- Payment Section -->
                        <th class="px-4 py-3 text-left font-semibold bg-purple-900">Payment Date</th>
                        <th class="px-4 py-3 text-right font-semibold bg-purple-900">Payment Amount</th>
                        <th class="px-4 py-3 text-left font-semibold bg-purple-900">Payment Status</th>
                        <th class="px-4 py-3 text-left font-semibold bg-purple-900">Method</th>
                        
                        <!-- Approval Section -->
                        <th class="px-4 py-3 text-left font-semibold bg-orange-900">Approved By</th>
                        <th class="px-4 py-3 text-left font-semibold bg-orange-900">Approved Date</th>
                        
                        <!-- Version & Counts -->
                        <th class="px-4 py-3 text-center font-semibold bg-cyan-900">Version</th>
                        <th class="px-4 py-3 text-left font-semibold bg-cyan-900">Version History</th>
                        <th class="px-4 py-3 text-center font-semibold bg-cyan-900">Bene</th>
                        <th class="px-4 py-3 text-center font-semibold bg-cyan-900">Liab</th>
                        
                        <!-- Edit Request Section (Rose) -->
                        <th class="px-4 py-3 text-left font-semibold bg-rose-900">Edit Request Date</th>
                        <th class="px-4 py-3 text-left font-semibold bg-rose-900">Edit Created By</th>
                        <th class="px-4 py-3 text-center font-semibold bg-rose-900">Edit Status</th>
                        <th class="px-4 py-3 text-left font-semibold bg-rose-900">Sections Edited</th>
                        <th class="px-4 py-3 text-left font-semibold bg-rose-900">Edit Payment</th>
                        <th class="px-4 py-3 text-left font-semibold bg-rose-900">Edit Approved Date</th>
                        <th class="px-4 py-3 text-left font-semibold bg-rose-900">Edit Approved By</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($willsLifecycle as $will)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <!-- Basic Info -->
                        <td class="px-4 py-3 font-mono font-semibold text-blue-600">{{ $will['id'] }}</td>
                        <td class="px-4 py-3 font-medium">{{ $will['client_name'] }}</td>
                        <td class="px-4 py-3">{{ ucfirst($will['will_type']) }}</td>
                        <td class="px-4 py-3 text-center">
                            @php
                            $statusClass = match($will['status']) {
                                'completed' => 'bg-green-100 text-green-800',
                                'draft' => 'bg-yellow-100 text-yellow-800',
                                'pending_approval' => 'bg-orange-100 text-orange-800',
                                'approved' => 'bg-blue-100 text-blue-800',
                                default => 'bg-gray-100 text-gray-800'
                            };
                            @endphp
                            <span class="inline-block px-2 py-1 {{ $statusClass }} rounded font-semibold">{{ ucfirst(str_replace('_', ' ', $will['status'])) }}</span>
                        </td>
                        
                        <!-- Created Section (Blue) -->
                        <td class="px-4 py-3 bg-blue-50">{{ $will['created_by_name'] }}</td>
                        <td class="px-4 py-3 bg-blue-50"><span class="inline-block px-2 py-1 bg-blue-200 text-blue-900 rounded text-xs font-semibold">{{ ucfirst($will['created_by_role']) }}</span></td>
                        <td class="px-4 py-3 bg-blue-50 text-blue-900 font-semibold">{{ $will['created_date'] }}</td>
                        
                        <!-- Invoice Section (Green) -->
                        <td class="px-4 py-3 bg-green-50">
                            @if($will['invoice_raised_date'] !== 'Not Raised')
                            <span class="text-green-900 font-semibold">{{ $will['invoice_raised_date'] }}</span>
                            @else
                            <span class="text-red-600 font-semibold">{{ $will['invoice_raised_date'] }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 bg-green-50 text-right font-semibold text-green-900">RM {{ $will['invoice_amount'] }}</td>
                        <td class="px-4 py-3 bg-green-50">
                            <span class="inline-block px-2 py-1 @if($will['invoice_status'] === 'pending') bg-yellow-200 text-yellow-900 @elseif($will['invoice_status'] === 'paid') bg-green-200 text-green-900 @else bg-gray-200 text-gray-900 @endif rounded text-xs font-semibold">{{ ucfirst($will['invoice_status']) }}</span>
                        </td>
                        
                        <!-- Payment Section (Purple) -->
                        <td class="px-4 py-3 bg-purple-50">
                            @if($will['payment_date'] !== 'Not Paid')
                            <span class="text-purple-900 font-semibold">{{ $will['payment_date'] }}</span>
                            @else
                            <span class="text-red-600 font-semibold">{{ $will['payment_date'] }}</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 bg-purple-50 text-right font-semibold text-purple-900">RM {{ $will['payment_amount'] }}</td>
                        <td class="px-4 py-3 bg-purple-50">
                            @php
                            $paymentStatusClass = match($will['payment_status']) {
                                'Completed' => 'bg-green-200 text-green-900',
                                'Pending' => 'bg-yellow-200 text-yellow-900',
                                'Failed' => 'bg-red-200 text-red-900',
                                default => 'bg-gray-200 text-gray-900'
                            };
                            @endphp
                            <span class="inline-block px-2 py-1 {{ $paymentStatusClass }} rounded text-xs font-semibold">{{ $will['payment_status'] }}</span>
                        </td>
                        <td class="px-4 py-3 bg-purple-50 text-purple-900">{{ $will['payment_method'] }}</td>
                        
                        <!-- Approval Section (Orange) -->
                        <td class="px-4 py-3 bg-orange-50">
                            <span class="inline-block px-2 py-1 bg-orange-200 text-orange-900 rounded text-xs font-semibold">{{ $will['approved_by_name'] }}</span>
                        </td>
                        <td class="px-4 py-3 bg-orange-50 text-orange-900 font-semibold">{{ $will['approved_date'] }}</td>
                        
                        <!-- Version & Counts (Cyan) -->
                        <td class="px-4 py-3 bg-cyan-50 text-center font-semibold text-cyan-900">{{ $will['version'] }}</td>
                        <td class="px-4 py-3 bg-cyan-50 text-cyan-900 whitespace-pre-wrap text-xs">{{ $will['version_history_string'] }}</td>
                        <td class="px-4 py-3 bg-cyan-50 text-center text-cyan-900">{{ $will['beneficiaries_count'] }}</td>
                        <td class="px-4 py-3 bg-cyan-50 text-center text-cyan-900">{{ $will['liabilities_count'] }}</td>
                        
                        <!-- Edit Request Section (Rose) -->
                        <td class="px-4 py-3 bg-rose-50 text-sm">{{ $will['edit_request_created_date'] }}</td>
                        <td class="px-4 py-3 bg-rose-50"><small>{{ $will['edit_request_created_by'] }}</small></td>
                        <td class="px-4 py-3 bg-rose-50 text-center">
                            @php
                            $editStatusClass = match($will['edit_request_status']) {
                                'Approved' => 'bg-green-200 text-green-900',
                                'Pending' => 'bg-yellow-200 text-yellow-900',
                                'Rejected' => 'bg-red-200 text-red-900',
                                'No Edits' => 'bg-gray-200 text-gray-900',
                                default => 'bg-gray-200 text-gray-900'
                            };
                            @endphp
                            <span class="inline-block px-2 py-1 {{ $editStatusClass }} rounded text-xs font-semibold">{{ $will['edit_request_status'] }}</span>
                        </td>
                        <td class="px-4 py-3 bg-rose-50"><small>{{ $will['edit_request_sections'] }}</small></td>
                        <td class="px-4 py-3 bg-rose-50 text-sm">{{ $will['edit_request_payment_status'] }}</td>
                        <td class="px-4 py-3 bg-rose-50 text-sm">{{ $will['edit_request_approved_date'] }}</td>
                        <td class="px-4 py-3 bg-rose-50"><small>{{ $will['edit_request_approved_by'] }}</small></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="27" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-3xl mb-3 block opacity-50"></i>
                            No will lifecycle data found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

<style>
.sidebar-item.active a {
background-color: rgba(59, 130, 246, 0.1);
border-left: 3px solid #3b82f6;
padding-left: calc(0.5rem - 3px);
}

/* Make table scrollable horizontally on smaller screens */
@media (max-width: 768px) {
.overflow-x-auto {
overflow-x: auto;
}
table {
min-width: 2400px;
}
}
</style>

@endsection