@extends('crm.layouts.app')

@section('title', 'Insurance Management')

@section('content')
<div class="mb-6">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Insurance Management</h1>
            <p class="mt-1 text-sm text-gray-500">Manage your studio's insurance policies and claims</p>
        </div>
        <div class="mt-4 sm:mt-0 sm:flex sm:gap-x-3">
            <a href="{{ route('crm.insurance.policies.create') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                <svg class="-ml-0.5 mr-1.5 size-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                </svg>
                Add Policy
            </a>
            <a href="{{ route('crm.insurance.claims.create') }}" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                File Claim
            </a>
        </div>
    </div>
</div>

<!-- Stats -->
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 mb-8">
    <!-- Total Coverage -->
    <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
        <dt class="truncate text-sm font-medium text-gray-500">Total Coverage</dt>
        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">${{ number_format($stats['total_coverage'], 0) }}</dd>
    </div>

    <!-- Active Policies -->
    <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
        <dt class="truncate text-sm font-medium text-gray-500">Active Policies</dt>
        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $stats['active_policies'] }}</dd>
        <dd class="mt-1 text-sm text-gray-500">{{ $stats['total_policies'] }} total</dd>
    </div>

    <!-- Pending Claims -->
    <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
        <dt class="truncate text-sm font-medium text-gray-500">Pending Claims</dt>
        <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $stats['pending_claims'] }}</dd>
        <dd class="mt-1 text-sm text-gray-500">{{ $stats['total_claims'] }} total</dd>
    </div>
</div>

@if($stats['expiring_soon'] > 0)
    <!-- Expiring Policies Warning -->
    <div class="rounded-md bg-yellow-50 p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="size-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">{{ $stats['expiring_soon'] }} {{ Str::plural('policy', $stats['expiring_soon']) }} expiring in the next 30 days</h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <p>Review your policies to ensure continuous coverage.</p>
                </div>
                <div class="mt-4">
                    <a href="{{ route('crm.insurance.policies') }}" class="text-sm font-medium text-yellow-800 hover:text-yellow-700">
                        View all policies
                        <span aria-hidden="true"> &rarr;</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
    <!-- Active Policies -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Active Policies</h2>
                <a href="{{ route('crm.insurance.policies') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">
                    View all
                </a>
            </div>

            @if($policies->where('is_active', true)->count() > 0)
                <ul role="list" class="divide-y divide-gray-100">
                    @foreach($policies->where('is_active', true)->take(5) as $policy)
                        <li class="flex items-center justify-between gap-x-6 py-4">
                            <div class="min-w-0">
                                <div class="flex items-start gap-x-3">
                                    <p class="text-sm font-semibold leading-6 text-gray-900">{{ $policy->provider }}</p>
                                    @if($policy->isExpiringSoon(30))
                                        <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Expiring Soon</span>
                                    @endif
                                </div>
                                <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                    <p class="whitespace-nowrap">{{ $policy->policy_type }}</p>
                                    <svg viewBox="0 0 2 2" class="size-0.5 fill-current">
                                        <circle cx="1" cy="1" r="1" />
                                    </svg>
                                    <p class="whitespace-nowrap">{{ $policy->policy_number }}</p>
                                </div>
                                <p class="mt-1 text-xs text-gray-500">
                                    Expires: {{ $policy->expiration_date->format('M d, Y') }}
                                    ({{ $policy->days_until_expiration }} days)
                                </p>
                            </div>
                            <div class="flex flex-none items-center gap-x-4">
                                <div class="text-right">
                                    <p class="text-sm font-semibold text-gray-900">${{ number_format($policy->coverage_amount, 0) }}</p>
                                    <p class="text-xs text-gray-500">Coverage</p>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-semibold text-gray-900">No active policies</h3>
                    <p class="mt-1 text-sm text-gray-500">Get started by adding your first insurance policy.</p>
                    <div class="mt-6">
                        <a href="{{ route('crm.insurance.policies.create') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                            <svg class="-ml-0.5 mr-1.5 size-5" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                            </svg>
                            Add Policy
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Recent Claims -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-base font-semibold leading-7 text-gray-900">Recent Claims</h2>
                <a href="{{ route('crm.insurance.claims') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">
                    View all
                </a>
            </div>

            @if($claims->count() > 0)
                <ul role="list" class="divide-y divide-gray-100">
                    @foreach($claims as $claim)
                        <li class="flex items-center justify-between gap-x-6 py-4">
                            <div class="min-w-0">
                                <div class="flex items-start gap-x-3">
                                    <p class="text-sm font-semibold leading-6 text-gray-900">{{ $claim->claim_number }}</p>
                                    @if($claim->status === 'submitted')
                                        <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">Submitted</span>
                                    @elseif($claim->status === 'under_review')
                                        <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Under Review</span>
                                    @elseif($claim->status === 'approved')
                                        <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Approved</span>
                                    @elseif($claim->status === 'paid')
                                        <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Paid</span>
                                    @elseif($claim->status === 'denied')
                                        <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">Denied</span>
                                    @else
                                        <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{ ucfirst($claim->status) }}</span>
                                    @endif
                                </div>
                                <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                    <p class="whitespace-nowrap">{{ $claim->provider }}</p>
                                    <svg viewBox="0 0 2 2" class="size-0.5 fill-current">
                                        <circle cx="1" cy="1" r="1" />
                                    </svg>
                                    <p class="truncate">{{ $claim->claim_type }}</p>
                                </div>
                                <p class="mt-1 text-xs text-gray-500">Filed: {{ $claim->created_at->format('M d, Y') }}</p>
                            </div>
                            <div class="flex flex-none items-center gap-x-4">
                                <div class="text-right">
                                    <p class="text-sm font-semibold text-gray-900">${{ number_format($claim->claimed_amount, 2) }}</p>
                                    <p class="text-xs text-gray-500">Claimed</p>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="text-center py-12">
                    <svg class="mx-auto size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-semibold text-gray-900">No claims filed</h3>
                    <p class="mt-1 text-sm text-gray-500">File a claim if you need to report an incident.</p>
                    <div class="mt-6">
                        <a href="{{ route('crm.insurance.claims.create') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                            File Claim
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection