@extends('layouts.main')

@section('head')

<meta charset="utf-8">
<title>Consumer Dashboard - MSPDCL Surya Ghar</title>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta content="Solar Consumer Dashboard" name="description">
<meta content="" name="author">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- App favicon -->

@endsection

@section('otherCss')
<style>
.dashboard-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    color: white;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    stroke: #e9ecef;
    fill: transparent;
    stroke-width: 8;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-ring-circle.filled {
    stroke: #28a745;
}

.status-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
.status-approved { background: #d4edda; color: #155724; border: 1px solid #a3d9a4; }
.status-rejected { background: #f8d7da; color: #721c24; border: 1px solid #f1aeb5; }
.status-not-started { background: #e2e3e5; color: #383d41; border: 1px solid #ced4da; }

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #6c757d;
    border: 2px solid white;
}

.timeline-item.completed::before {
    background: #28a745;
}

.timeline-item.current::before {
    background: #007bff;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

.scheme-card {
    background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
    border-radius: 15px;
    color: white;
    border: none;
}

.announcement-card {
    border-left: 4px solid #007bff;
    transition: all 0.3s ease;
}

.announcement-card:hover {
    border-left-color: #0056b3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.quick-action-btn {
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.quick-action-btn:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    color: white;
    padding: 2rem;
    margin-bottom: 2rem;
}

#startTour {
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.1);
}

#startTour:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

#custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* semi-transparent black */
    z-index: 999; /* below Intro.js but above the app */
    display: none;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
@endsection

@section('contents')

<div class="container-fluid">
    <div id="custom-overlay"></div>
    <!-- Page-Title -->
    <x-bread-crumbs>
        <div class="float-right">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>
        </div>
        <h4 class="page-title">MSPDCL Surya Ghar</h4>
    </x-bread-crumbs>
    
    <!-- Welcome Banner -->
    <div class="welcome-banner">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h3 class="mb-2">Welcome back, {{ Auth::user()->name }}!</h3>
                <p class="mb-3">Consumer ID: <strong>{{ $consumer->consumer_id }}</strong> | Category: <strong>{{ $consumer->category->name ?? 'General' }}</strong></p>
                <div class="d-flex align-items-center">
                    <div class="mr-4">
                        <small class="opacity-75">Application Progress</small>
                        <div class="progress mt-1" style="height: 8px; background: rgba(255,255,255,0.2);">
                            <div class="progress-bar bg-light" role="progressbar" style="width: {{ $stats['completion_percentage'] }}%"></div>
                        </div>
                    </div>
                    <span class="badge badge-light">{{ number_format($stats['completion_percentage']) }}% Complete</span>
                </div>
            </div>
            <div class="col-md-4 d-flex flex-column align-items-center">
                <div class="d-inline-block position-relative mb-3">
                    <svg class="progress-ring" width="100" height="100">
                        <circle class="progress-ring-circle" stroke-width="8" fill="transparent" r="45" cx="50" cy="50"/>
                        <circle class="progress-ring-circle filled" stroke-width="8" fill="transparent" r="45" cx="50" cy="50" style="stroke-dashoffset: {{ 283 - (283 * $stats['completion_percentage'] / 100) }}"/>
                    </svg>
                    <div class="position-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                        <h4 class="mb-0 text-white">{{ number_format($stats['completion_percentage']) }}%</h4>
                        <small>Done</small>
                    </div>
                </div>
                <button type="button" id="startTour" class="btn btn-outline-light px-3 py-2 text-white" style="border-radius: 20px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.3px; transition: all 0.3s ease;">
                    <i class="fas fa-route mr-1"></i>
                    Step By Step Guide Through
                </button>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card dashboard-stat-card text-center">
                <div class="card-body">
                    <div class="stat-icon bg-white bg-opacity-20 mx-auto">
                        <i class="mdi mdi-file-document-outline text-success"></i>
                    </div>
                    <h3 class="mb-1 text-white">{{ $stats['total_uploads'] }}</h3>
                    <p class="mb-0">Documents Uploaded</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card dashboard-stat-card text-center">
                <div class="card-body">
                    <div class="stat-icon bg-white bg-opacity-20 mx-auto text-primary">
                        <i class="mdi mdi-clock-outline"></i>
                    </div>
                    <h3 class="mb-1 text-white">{{ $stats['pending_uploads'] }}</h3>
                    <p class="mb-0">Under Review</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card dashboard-stat-card text-center">
                <div class="card-body">
                    <div class="stat-icon bg-white bg-opacity-20 mx-auto">
                        <i class="mdi mdi-check-circle-outline text-warning"></i>
                    </div>
                    <h3 class="mb-1 text-white">{{ $stats['approved_uploads'] }}</h3>
                    <p class="mb-0">Approved</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card dashboard-stat-card text-center">
                <div class="card-body">
                    <div class="stat-icon bg-white bg-opacity-20 mx-auto">
                        <i class="mdi mdi-calendar-check text-info"></i>
                    </div>
                    <h3 class="mb-1 text-white">{{ $stats['days_since_registration'] }}</h3>
                    <p class="mb-0">Days Since Joining</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Application Status & Quick Actions -->
        <div class="col-lg-8">

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="mdi mdi-lightning-bolt mr-2"></i>Quick Actions
                    </h5>

                    <!-- No Due Verification Section -->
                    <div class="row mt-4">
                        <div class="col-12" id="check-no-due-action-div">
                            <div class="alert alert-info d-flex align-items-center">
                                <div class="mr-3">
                                    <i class="mdi mdi-information-outline display-4"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="alert-heading mb-1">No Due Verification Required</h6>
                                    <p class="mb-2">Before final approval, please verify that you have no pending dues with MSPDCL</p>
                                    <button type="button" class="btn btn-warning btn-sm" onclick="checkNoDueStatus()">
                                        <i class="mdi mdi-shield-check mr-1"></i>Check No Due Status
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('download-ppa-agreement') }}" class="quick-action-btn btn btn-outline-primary btn-block" id="download-ppa-format-action-div">
                                <i class="mdi mdi-download display-4 mb-2"></i>
                                <h6 class="mb-1">Download PPA Format</h6>
                                <small class="text-muted">Get the official PPA agreement format</small>
                            </a>
                        </div>
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('upload-ppa-agreement') }}" class="quick-action-btn btn btn-outline-success btn-block" id="upload-ppa-format-action-div">
                                <i class="mdi mdi-upload display-4 mb-2"></i>
                                <h6 class="mb-1">Upload Documents</h6>
                                <small class="text-muted">Upload your signed PPA and documents</small>
                            </a>
                        </div>
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('ppa.status') }}" class="quick-action-btn btn btn-outline-info btn-block" id="track-ppa-status-action-div">
                                <i class="mdi mdi-chart-timeline-variant display-4 mb-2"></i>
                                <h6 class="mb-1">Track Status</h6>
                                <small class="text-muted">Check your application progress</small>
                            </a>
                        </div>
                        <div class="col-md-6 mb-3">
                            <a href="{{ route('profile.show') }}" class="quick-action-btn btn btn-outline-secondary btn-block" id="update-profile-action-div">
                                <i class="mdi mdi-account-edit display-4 mb-2"></i>
                                <h6 class="mb-1">Update Profile</h6>
                                <small class="text-muted">Manage your account settings</small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Current Application Status -->
            <div class="card mb-4" id="application-status-card-div">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-format-list-bulleted-square mr-2"></i>Application Status
                        </h5>
                        <span class="status-badge status-{{ strtolower(str_replace(' ', '-', $stats['application_status'])) }}">
                            {{ $stats['application_status'] }}
                        </span>
                    </div>
                    
                    <div class="timeline">
                        <div class="timeline-item completed">
                            <h6 class="mb-1">Account Registration</h6>
                            <p class="text-muted mb-0">Account created and verified</p>
                            <small class="text-success">Completed on {{ Auth::user()->created_at->format('M d, Y') }}</small>
                        </div>
                        <div class="timeline-item {{ $stats['total_uploads'] > 0 ? 'completed' : 'current' }}">
                            <h6 class="mb-1">Document Upload</h6>
                            <p class="text-muted mb-0">Upload PPA and required documents</p>
                            @if($stats['total_uploads'] > 0)
                                <small class="text-success">{{ $stats['total_uploads'] }} document(s) uploaded</small>
                            @else
                                <small class="text-primary">Upload your PPA documents</small>
                            @endif
                        </div>
                        <div class="timeline-item {{ $stats['pending_uploads'] == 0 && $stats['total_uploads'] > 0 ? 'completed' : ($stats['total_uploads'] > 0 ? 'current' : '') }}">
                            <h6 class="mb-1">Document Review</h6>
                            <p class="text-muted mb-0">Documents under administrative review</p>
                            @if($stats['pending_uploads'] > 0)
                                <small class="text-warning">{{ $stats['pending_uploads'] }} document(s) under review</small>
                            @elseif($stats['total_uploads'] > 0)
                                <small class="text-success">Review completed</small>
                            @else
                                <small class="text-muted">Pending document upload</small>
                            @endif
                        </div>
                        <div class="timeline-item {{ $stats['approved_uploads'] > 0 ? 'completed' : '' }}">
                            <h6 class="mb-1">Application Approval</h6>
                            <p class="text-muted mb-0">Final approval and scheme benefits activation</p>
                            @if($stats['approved_uploads'] > 0)
                                <small class="text-success">Application approved!</small>
                            @else
                                <small class="text-muted">Awaiting approval</small>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Scheme Information -->
            <div class="card scheme-card mb-4">
                <div class="card-body text-center">
                    <i class="mdi mdi-solar-panel display-3 mb-3"></i>
                    <h5 class="card-title">Solar Scheme Benefits</h5>
                    <p class="mb-3">Take advantage of government subsidies and net metering benefits for solar installations</p>
                    <ul class="list-unstyled text-left">
                        <li class="mb-2"><i class="mdi mdi-check-circle mr-2"></i>Up to 60% subsidy</li>
                        <li class="mb-2"><i class="mdi mdi-check-circle mr-2"></i>Net metering facility</li>
                        <li class="mb-2"><i class="mdi mdi-check-circle mr-2"></i>20-year warranty</li>
                        <li class="mb-2"><i class="mdi mdi-check-circle mr-2"></i>Priority grid connection</li>
                    </ul>
                </div>
            </div>

            <!-- Recent Activity -->
            @if($recentActivity->count() > 0)
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="mdi mdi-history mr-2"></i>Recent Activity
                    </h5>
                    @foreach($recentActivity as $activity)
                    <div class="d-flex mb-3">
                        <div class="mr-3">
                            @if($activity->status == 1)
                                <i class="mdi mdi-check-circle text-success"></i>
                            @elseif($activity->status == 2)
                                <i class="mdi mdi-close-circle text-danger"></i>
                            @else
                                <i class="mdi mdi-clock-outline text-warning"></i>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">{{ $activity->message }}</h6>
                            <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Important Announcements -->
            <div class="card announcement-card" id="announcement-card-div">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="mdi mdi-bullhorn mr-2"></i>Announcements
                    </h5>
                    @foreach($announcements as $key => $announcement)
                    <div class="mb-3">
                        <h6 class="mb-1">{{ $announcement->title }}</h6>
                        <p class="text-muted mb-1">{{ $announcement->content }}</p>
                        <small class="text-primary">{{ $announcement->created_at->diffForHumans() }}</small>
                    </div>
                    <hr>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('otherJs')

<script src="{{ asset('plugins/moment/moment.js') }}"></script>
<script src="https://unpkg.com/intro.js/minified/intro.min.js" defer></script>

<script>
$(document).ready(function() {
    // Animate progress ring on page load
    setTimeout(function() {
        $('.progress-ring-circle.filled').css('stroke-dashoffset', '{{ 283 - (283 * $stats['completion_percentage'] / 100) }}');
    }, 500);
    
    // Add some interactive effects
    $('.quick-action-btn').hover(
        function() {
            $(this).find('i').addClass('animated pulse');
        },
        function() {
            $(this).find('i').removeClass('animated pulse');
        }
    );
});

function checkNoDueStatus() {
    // Show loading state
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="mdi mdi-loading mdi-spin mr-1"></i>Checking...';
    button.disabled = true;
    
    // Simulate API call (replace with actual endpoint when ready)
    setTimeout(function() {
        // Reset button
        button.innerHTML = originalText;
        button.disabled = false;
        
        // Show result (this will be replaced with actual API response)
        Swal.fire({
            title: 'No Due Verification',
            html: `
                <div class="text-left">
                    <p><strong>Consumer ID:</strong> {{ $consumer->consumer_id }}</p>
                    <p><strong>Consumer Number:</strong> {{ $consumer->consumer_no }}</p>
                    <p><strong>Status:</strong> <span class="badge badge-success">No Outstanding Dues</span></p>
                    <hr>
                    <small class="text-muted">Last Updated: ${new Date().toLocaleDateString()}</small>
                </div>
            `,
            icon: 'success',
            confirmButtonText: 'Continue with Application',
            showCancelButton: true,
            cancelButtonText: 'Close'
        });
    }, 2000);
}

document.addEventListener('DOMContentLoaded', () => {
    const key = 'appTourDone';

    const createTour = () => {
        const tour = introJs();
        tour.setOptions({
            steps: [
                { intro: 'Welcome! Quick tour of the interface.' },
                { element: '#check-no-due-action-div', intro: 'First you need to check for any outstanding dues to continue using the application and upload your PPA and other documents.' },
                { element: '#download-ppa-format-action-div', intro: 'Download the PPA format here.' },
                { element: '#upload-ppa-format-action-div', intro: 'Upload the completed PPA format here.' },
                { element: '#track-ppa-status-action-div', intro: 'Track the status of your PPA here.' },
                { element: '#update-profile-action-div', intro: 'Update your profile information here.' },
                { element: '#application-status-card-div', intro: 'View the status of your application here.' },
                { element: '#announcement-card-div', intro: 'View the latest announcements here.' },
                { element: '#startTour', intro: 'You can restart this tour anytime by clicking this button.' }
            ],
            showProgress: true,
            nextLabel: 'Next →',
            prevLabel: '← Back',
            doneLabel: 'Finish',
            scrollToElement: true,
            overlayOpacity: 0.5,
            disableInteraction: true,
            exitOnOverlayClick: false
        });

        tour.oncomplete(() => localStorage.setItem(key, '1'));
        tour.onexit(()     => localStorage.setItem(key, '1'));

        return tour;
    };

    // Auto-start once
    if (!localStorage.getItem(key)) {
        setTimeout(() => createTour().start(), 500);
    }

    // Manual trigger (always fresh tour)
    document.getElementById('startTour').addEventListener('click', (e) => {
        e.preventDefault();
        createTour().start();
    });
});
</script>

@endsection