@extends('Layout.mainlayout')
@section('content')
<div class="policy-dashboard-container">
    <!-- Header -->
    <div class="dashboard-header">
        <h1 class="greeting-text">Policies Management</h1>
        <form method="GET" action="{{ route('admin.listVehicle') }}" id="filterForm">
            <select class="filter-dropdown" name="filter" onchange="document.getElementById('filterForm').submit()">
                <option value="all" {{ $current_filter == 'all' ? 'selected' : '' }}>All</option>
                <option value="third party" {{ $current_filter == 'third party' ? 'selected' : '' }}>Third Party</option>
                <option value="comprehensive" {{ $current_filter == 'comprehensive' ? 'selected' : '' }}>Comprehensive</option>
                <option value="enhanced" {{ $current_filter == 'enhanced' ? 'selected' : '' }}>Enhanced</option>
            </select>
            <input type="hidden" name="search" value="{{ $current_search }}">
        </form>
    </div>


    <!-- Stats Cards -->
    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon blue">📋</div>
                <div>
                    <div class="stat-label">Total policies</div>
                    <div class="stat-value">{{ $total_policies }}</div>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon green">📄</div>
                <div>
                    <div class="stat-label">Total Active Policies</div>
                    <div class="stat-value">{{ $active_policies }}</div>
                </div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon purple">📄</div>
                <div>
                    <div class="stat-label">Total Pending Policies</div>
                    <div class="stat-value">{{ $pending_policies }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="content-grid">
        <!-- Left Section - My Policies -->
        <div class="main-section">
            <div class="section-header">
                <h2 class="section-title">Policies History <span class="policy-count">({{ $vehicles->count() }})</span></h2>
            </div>

            <!-- Search Bar -->
            <form method="GET" action="{{ route('admin.listVehicle') }}" id="searchForm">
                <div class="search-bar">
                    <span class="search-icon">🔍</span>
                    <input type="text" name="search" placeholder="Search policies..." value="{{ $current_search }}" onchange="document.getElementById('searchForm').submit()">
                    <input type="hidden" name="filter" value="{{ $current_filter }}">
                </div>
            </form>

            <!-- Policy Cards -->
            @forelse($vehicles as $vehicle)
            <div class="policy-card">
                <div class="policy-header">
                    <div>
                        <div class="policy-name"><a href="#">{{ $vehicle->ins_class ?? 'N/A' }} </a> </div>
                        <div class="policy-number">Policy No: {{ $vehicle->policy_no ?? 'N/A' }}</div>
                    </div>
                    <span class="status-badge {{ $vehicle->status == 'active' ? 'active' : '' }}">
                        {{ ucfirst($vehicle->status ?? 'Pending') }}
                    </span>
                </div>
                <div class="policy-details">
                    <div class="policy-detail-item">
                        <div class="detail-label">Name</div>
                        <div class="detail-value">{{ $vehicle->customer->title ?? 'N/A' }} {{ $vehicle->customer->fname ?? 'N/A' }} {{ $vehicle->customer->lname ?? 'N/A' }}</div>
                    </div>
                    <div class="policy-detail-item">
                        <div class="detail-label">Email</div>
                        <div class="detail-value">{{ $vehicle->customer->email ?? 'N/A' }}</div>
                    </div>
                    <div class="policy-detail-item">
                        <div class="detail-label">Start Date</div>
                        <div class="detail-value">{{ $vehicle->created_at->format('d/m/Y') }}</div>
                    </div>
                </div>
                @if($vehicle->expiry_date)
                <div class="premium-due-alert">
                    Policy Due Date: {{ \Carbon\Carbon::parse($vehicle->expiry_date)->format('M d Y') }} 
                    <span class="days-left">
                        ({{ \Carbon\Carbon::parse($vehicle->expiry_date)->diffInDays(now()) }} days Left)
                    </span>
                </div>
                @endif
            </div>
            @empty
            <div style="text-align: center; padding: 40px; color: #999;">
                <p style="font-size: 16px; margin-bottom: 10px;">No policies found</p>
                <p style="font-size: 14px;">Try adjusting your search or filter criteria</p>
            </div>
            @endforelse
        </div>

        <!-- Right Section - Documents & Chat -->
        <div class="sidebar-section">
            <!-- Documents -->
            <div class="documents-card">
                <div class="section-header">
                    <h2 class="section-title">Documents <span class="policy-count">({{ $recent_documents->count() }})</span></h2>
                </div>

                @forelse($recent_documents as $document)
                <div class="document-item">
                    <div class="document-info">
                        <div class="document-name">{{ $document->policy_type ?? 'Insurance Document' }}</div>
                        <div class="document-id">Policy No: {{ $document->policy_no ?? 'N/A' }}</div>
                    </div>
                    <a href="#" class="download-icon">⬇</a>
                </div>
                @empty
                <div style="text-align: center; padding: 20px; color: #999;">
                    No documents available
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<script>
// Optional: Auto-submit search after typing (with debounce)
let searchTimeout;
document.querySelector('input[name="search"]').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        document.getElementById('searchForm').submit();
    }, 500);
});
</script>
@endsection