@extends('layouts.portal')

@section('title', 'Manage Will')
@section('page_title', 'Will Management')
@section('page_subtitle', 'View and manage your will details')

@push('styles')
<style>
    * {
        scroll-behavior: smooth;
    }

    .will-container {
        background: #f8fafc;
        min-height: 100vh;
        padding: 30px 20px;
    }

    .header-section {
        background: linear-gradient(135deg, #7c2d12 0%, #5b1f0a 100%);
        border-radius: 12px;
        padding: 28px;
        color: white;
        margin-bottom: 28px;
        box-shadow: 0 10px 30px rgba(123, 45, 18, 0.15);
        position: relative;
        overflow: hidden;
    }

    .header-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 500px;
        height: 500px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .header-content {
        position: relative;
        z-index: 2;
    }

    .header-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }

    .header-subtitle {
        font-size: 0.95rem;
        opacity: 0.9;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.8rem;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .will-id {
        font-family: 'Monaco', 'Menlo', monospace;
        background: rgba(255, 255, 255, 0.15);
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.85rem;
    }

    .header-actions {
        display: flex;
        gap: 10px;
        margin-top: 16px;
    }

    .btn {
        padding: 10px 18px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
    }

    .btn-white {
        background: white;
        color: #7c2d12;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        background: #f9fafb;
    }

    .btn-outline {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1.5px solid rgba(255, 255, 255, 0.3);
    }

    .btn-outline:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .tabs-section {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .tabs-header {
        display: flex;
        border-bottom: 1px solid #e5e7eb;
        padding: 0;
        background: #fafbfc;
    }

    .tab-btn {
        flex: 1;
        padding: 14px 16px;
        background: none;
        border: none;
        cursor: pointer;
        font-weight: 600;
        color: #9ca3af;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .tab-btn:hover {
        color: #7c2d12;
        background: #fef3f2;
    }

    .tab-btn.active {
        color: #7c2d12;
    }

    .tab-btn.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(135deg, #7c2d12 0%, #5b1f0a 100%);
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.3s ease;
    }

    .tab-content.active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .content-area {
        padding: 28px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }

    .info-card {
        background: #fafbfc;
        padding: 16px;
        border-radius: 8px;
        border-left: 3px solid #7c2d12;
        transition: all 0.2s ease;
    }

    .info-card:hover {
        box-shadow: 0 2px 8px rgba(123, 45, 18, 0.08);
        background: #fcf8f7;
    }

    .info-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

    .info-value {
        font-size: 1rem;
        font-weight: 500;
        color: #374151;
    }

    .info-value.empty {
        color: #d1d5db;
        font-style: italic;
    }

    .update-timeline {
        position: relative;
        padding: 12px 0;
    }

    .timeline-item {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        position: relative;
    }

    .timeline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 19px;
        top: 50px;
        width: 2px;
        height: calc(100% - 40px);
        background: linear-gradient(180deg, #e5e7eb 0%, transparent 100%);
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.85rem;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .timeline-icon.blue {
        background: linear-gradient(135deg, #7c2d12 0%, #5b1f0a 100%);
    }

    .timeline-icon.green {
        background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    }

    .timeline-icon.purple {
        background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    }

    .timeline-icon.red {
        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    }

    .timeline-icon.gray {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }

    .timeline-content {
        flex: 1;
        padding-top: 3px;
    }

    .timeline-title {
        font-weight: 700;
        color: #111827;
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .timeline-description {
        color: #6b7280;
        font-size: 0.9rem;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .timeline-meta {
        display: flex;
        gap: 16px;
        font-size: 0.8rem;
        color: #9ca3af;
    }

    .timeline-date {
        font-family: 'Monaco', 'Menlo', monospace;
        font-weight: 500;
    }

    .timeline-by {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #9ca3af;
    }

    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: 12px;
        opacity: 0.4;
    }

    .empty-state p {
        font-size: 1rem;
        margin-top: 8px;
    }

    @media (max-width: 768px) {
        .header-section {
            padding: 20px;
        }

        .header-title {
            font-size: 1.4rem;
        }

        .header-subtitle {
            font-size: 0.85rem;
            flex-direction: column;
            gap: 8px;
        }

        .header-actions {
            flex-direction: column;
        }

        .btn {
            justify-content: center;
            width: 100%;
        }

        .content-area {
            padding: 20px;
        }

        .info-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .tab-btn {
            font-size: 0.85rem;
            padding: 12px 12px;
        }
    }
</style>
@endpush

@section('sidebar')
    @include('client.partials.sidebar', ['active' => 'will'])
@endsection

@section('content')
<div class="will-container">
    <div class="max-w-6xl mx-auto">
        <!-- Header Section -->
        <div class="header-section">
            <div class="header-content">
                <h1 class="header-title">Will Management</h1>
                <div class="header-subtitle">
                    <span class="will-id">ID: #{{ $will->id }}</span>
                    <span class="status-badge">
                        {{ ucfirst(str_replace('_', ' ', $will->status)) }}
                    </span>
                </div>
                <div class="header-actions">
                    <a href="{{ route('client.will.view', $will) }}" class="btn btn-white">
                        <i class="fas fa-eye"></i>View Full Will
                    </a>
                    <button onclick="window.print()" class="btn btn-outline">
                        <i class="fas fa-print"></i>Print
                    </button>
                </div>
            </div>
        </div>

        <!-- Tabs Section -->
        <div class="tabs-section">
            <div class="tabs-header">
                <button class="tab-btn active" onclick="switchTab('overview', this)">
                    <i class="fas fa-info-circle"></i>Overview
                </button>
                <button class="tab-btn" onclick="switchTab('updates', this)">
                    <i class="fas fa-history"></i>Update History
                </button>
            </div>

            <!-- Overview Tab -->
            <div id="overview" class="tab-content active">
                <div class="content-area">
                    <h2 style="font-size: 1.4rem; font-weight: 700; color: #111827; margin-bottom: 22px;">Personal Information</h2>
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-label">First Name</div>
                            <div class="info-value {{ !$client->first_name ? 'empty' : '' }}">{{ $client->first_name ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Last Name</div>
                            <div class="info-value {{ !$client->last_name ? 'empty' : '' }}">{{ $client->last_name ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Email Address</div>
                            <div class="info-value {{ !$client->email ? 'empty' : '' }}">{{ $client->email ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Phone Number</div>
                            <div class="info-value {{ !$client->phone ? 'empty' : '' }}">{{ $client->phone ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">IC/Passport</div>
                            <div class="info-value {{ !$client->ic_number ? 'empty' : '' }}">{{ $client->ic_number ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Date of Birth</div>
                            <div class="info-value {{ !$client->dob ? 'empty' : '' }}">{{ $client->dob ? date('d M Y', strtotime($client->dob)) : 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Occupation</div>
                            <div class="info-value {{ !$client->occupation ? 'empty' : '' }}">{{ $client->occupation ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Emergency Contact</div>
                            <div class="info-value {{ !$client->emergency_contact_name ? 'empty' : '' }}">{{ $client->emergency_contact_name ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card">
                            <div class="info-label">Emergency Phone</div>
                            <div class="info-value {{ !$client->emergency_contact_phone ? 'empty' : '' }}">{{ $client->emergency_contact_phone ?? 'Not provided' }}</div>
                        </div>
                    </div>
                    <div class="info-grid" style="margin-top: 20px;">
                        <div class="info-card" style="grid-column: 1 / -1;">
                            <div class="info-label">Address</div>
                            <div class="info-value {{ !$client->address ? 'empty' : '' }}">{{ $client->address ?? 'Not provided' }}</div>
                        </div>
                        <div class="info-card" style="grid-column: 1 / -1;">
                            <div class="info-label">Source of Funds</div>
                            <div class="info-value {{ !$client->source_of_funds ? 'empty' : '' }}">{{ $client->source_of_funds ?? 'Not provided' }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Update History Tab -->
            <div id="updates" class="tab-content">
                <div class="content-area">
                    <h2 style="font-size: 1.4rem; font-weight: 700; color: #111827; margin-bottom: 22px;">Update History</h2>
                    
                    @php
                        $updates = [];
                        
                        if($will->updated_at) {
                            $updates[] = [
                                'timestamp' => $will->updated_at,
                                'action' => 'Will Updated',
                                'description' => 'Will document was modified',
                                'changed_by' => 'Client',
                                'icon' => 'fa-file-alt',
                                'color' => 'blue'
                            ];
                        }
                        
                        if($client->familyMembers->count() > 0) {
                            foreach($client->familyMembers as $member) {
                                if($member->updated_at && $member->updated_at->greaterThan(now()->subDays(30))) {
                                    $updates[] = [
                                        'timestamp' => $member->updated_at,
                                        'action' => 'Family Member Updated',
                                        'description' => $member->full_name . ' (' . ucfirst($member->relationship) . ') information was updated',
                                        'changed_by' => 'Client',
                                        'icon' => 'fa-users',
                                        'color' => 'green'
                                    ];
                                }
                            }
                        }
                        
                        if($client->assets->count() > 0) {
                            foreach($client->assets as $asset) {
                                if($asset->updated_at && $asset->updated_at->greaterThan(now()->subDays(30))) {
                                    $updates[] = [
                                        'timestamp' => $asset->updated_at,
                                        'action' => 'Asset Updated',
                                        'description' => $asset->description . ' (RM ' . number_format($asset->value, 2) . ')',
                                        'changed_by' => 'Client',
                                        'icon' => 'fa-coins',
                                        'color' => 'purple'
                                    ];
                                }
                            }
                        }
                        
                        if($client->liabilities->count() > 0) {
                            foreach($client->liabilities as $liability) {
                                if($liability->updated_at && $liability->updated_at->greaterThan(now()->subDays(30))) {
                                    $updates[] = [
                                        'timestamp' => $liability->updated_at,
                                        'action' => 'Liability Updated',
                                        'description' => $liability->creditor . ' (RM ' . number_format($liability->amount, 2) . ')',
                                        'changed_by' => 'Client',
                                        'icon' => 'fa-credit-card',
                                        'color' => 'red'
                                    ];
                                }
                            }
                        }
                        
                        $updates[] = [
                            'timestamp' => $will->created_at,
                            'action' => 'Will Created',
                            'description' => 'Will document #' . $will->id . ' was created',
                            'changed_by' => 'System',
                            'icon' => 'fa-plus-circle',
                            'color' => 'gray'
                        ];
                        
                        usort($updates, function($a, $b) {
                            return $b['timestamp']->getTimestamp() - $a['timestamp']->getTimestamp();
                        });
                    @endphp
                    
                    @if(count($updates) > 0)
                        <div class="update-timeline">
                            @foreach($updates as $update)
                            <div class="timeline-item">
                                <div class="timeline-icon {{ $update['color'] }}">
                                    <i class="fas {{ $update['icon'] }}"></i>
                                </div>
                                <div class="timeline-content">
                                    <div class="timeline-title">{{ $update['action'] }}</div>
                                    <div class="timeline-description">{{ $update['description'] }}</div>
                                    <div class="timeline-meta">
                                        <span class="timeline-date">{{ $update['timestamp']->format('M d, Y • H:i A') }}</span>
                                        <span class="timeline-by">
                                            <i class="fas fa-user"></i>
                                            {{ $update['changed_by'] }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <p>No updates recorded yet</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function switchTab(tabName, button) {
        // Hide all tabs
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.remove('active');
        });
        
        // Remove active class from all buttons
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        
        // Show selected tab
        document.getElementById(tabName).classList.add('active');
        button.classList.add('active');
    }
</script>
@endsection