@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1>🚀 Master Logistics Command Center</h1>
            <p>AI-Powered, Blockchain-Secured, Sustainable Logistics Management</p>
        </div>
    </div>
    
    <!-- Key Performance Indicators -->
    <div class="row">
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h3>{{ $data['operational_metrics']['active_shipments'] }}</h3>
                    <small>Active Shipments</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h3>{{ $data['operational_metrics']['on_time_delivery_rate'] }}%</h3>
                    <small>On-Time Delivery</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h3>{{ $data['sustainability_score']['overall_score'] }}</h3>
                    <small>Sustainability Score</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h3>{{ $data['blockchain_status']['active_contracts'] }}</h3>
                    <small>Smart Contracts</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-danger text-white">
                <div class="card-body text-center">
                    <h3>{{ $data['compliance_status']['overall_compliance'] }}%</h3>
                    <small>Compliance Score</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-dark text-white">
                <div class="card-body text-center">
                    <h3>PKR {{ number_format($data['financial_health']['monthly_revenue']) }}</h3>
                    <small>Monthly Revenue</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- AI Insights & Predictions -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-gradient-primary text-white">
                    <h5>🤖 AI Insights & Predictions</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <strong>Demand Forecast:</strong> {{ $data['ai_insights']['demand_forecast'] }}
                    </div>
                    <div class="alert alert-success">
                        <strong>Pricing Recommendation:</strong> {{ $data['ai_insights']['pricing_recommendation'] }}
                    </div>
                    <div class="alert alert-warning">
                        <strong>Route Optimization:</strong> {{ $data['ai_insights']['route_optimization'] }}
                    </div>
                    <div class="alert alert-primary">
                        <strong>Risk Prediction:</strong> {{ $data['ai_insights']['risk_prediction'] }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-gradient-success text-white">
                    <h5>🌱 Sustainability Dashboard</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Carbon Footprint</h6>
                            <p class="text-success">{{ $data['sustainability_score']['carbon_footprint'] }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6>Green Initiatives</h6>
                            <p class="text-info">{{ $data['sustainability_score']['green_initiatives'] }} active projects</p>
                        </div>
                    </div>
                    <div class="progress mb-3">
                        <div class="progress-bar bg-success" style="width: {{ $data['sustainability_score']['overall_score'] }}%">
                            {{ $data['sustainability_score']['overall_score'] }}% Sustainable
                        </div>
                    </div>
                    <small class="text-muted">{{ $data['sustainability_score']['certification_progress'] }}</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Blockchain & Customer Experience -->
    <div class="row mt-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-gradient-warning text-white">
                    <h5>⛓️ Blockchain Status</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><strong>Smart Contracts:</strong> {{ $data['blockchain_status']['active_contracts'] }}</li>
                        <li><strong>Automated Payments:</strong> {{ $data['blockchain_status']['automated_payments'] }}</li>
                        <li><strong>Digital Signatures:</strong> {{ $data['blockchain_status']['digital_signatures'] }}</li>
                        <li><strong>Audit Entries:</strong> {{ $data['blockchain_status']['audit_trail_entries'] }}</li>
                    </ul>
                    <button class="btn btn-warning btn-sm" onclick="createSmartContract()">Create Smart Contract</button>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-gradient-info text-white">
                    <h5>👥 Customer Experience</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h6>Satisfaction Score</h6>
                            <div class="progress mb-2">
                                <div class="progress-bar bg-info" style="width: {{ $data['operational_metrics']['customer_satisfaction'] * 20 }}%">
                                    {{ $data['operational_metrics']['customer_satisfaction'] }}/5.0
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info btn-sm" onclick="openCustomerChat()">Customer Chat</button>
                    <button class="btn btn-outline-info btn-sm" onclick="viewFeedback()">View Feedback</button>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-gradient-danger text-white">
                    <h5>⚠️ Alerts & Issues</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-danger alert-sm">
                        <strong>High Priority ({{ count($data['pending_issues']['high_priority']) }}):</strong>
                        <ul class="mb-0">
                            @foreach($data['pending_issues']['high_priority'] as $issue)
                            <li>{{ $issue }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="alert alert-warning alert-sm">
                        <strong>Weather Warnings:</strong> {{ $data['shipment_alerts']['weather_warnings'] }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Financial Health & Compliance -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-gradient-success text-white">
                    <h5>💰 Financial Health</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Monthly Revenue</h6>
                            <h4 class="text-success">PKR {{ number_format($data['financial_health']['monthly_revenue']) }}</h4>
                        </div>
                        <div class="col-md-6">
                            <h6>Profit Margin</h6>
                            <h4 class="text-info">{{ $data['financial_health']['profit_margin'] }}%</h4>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <small>Outstanding Receivables</small>
                            <p>PKR {{ number_format($data['financial_health']['outstanding_receivables']) }}</p>
                        </div>
                        <div class="col-md-6">
                            <small>Revenue Growth</small>
                            <p class="text-success">+{{ $data['financial_health']['revenue_growth'] }}%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-gradient-primary text-white">
                    <h5>✅ Compliance Status</h5>
                </div>
                <div class="card-body">
                    <div class="progress mb-3">
                        <div class="progress-bar" style="width: {{ $data['compliance_status']['overall_compliance'] }}%">
                            {{ $data['compliance_status']['overall_compliance'] }}% Compliant
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <small>Pending Tax Returns</small>
                            <p class="text-warning">{{ $data['compliance_status']['pending_tax_returns'] }}</p>
                        </div>
                        <div class="col-md-6">
                            <small>Upcoming Deadlines</small>
                            <p class="text-info">{{ $data['compliance_status']['upcoming_deadlines'] }}</p>
                        </div>
                    </div>
                    <button class="btn btn-primary btn-sm" onclick="generateComplianceReport()">Generate Report</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5>🚀 Quick Actions</h5>
                </div>
                <div class="card-body">
                    <button class="btn btn-primary" onclick="automateExportProcess()">Automate Export Process</button>
                    <button class="btn btn-success" onclick="predictDemand()">AI Demand Prediction</button>
                    <button class="btn btn-info" onclick="optimizePricing()">Optimize Pricing</button>
                    <button class="btn btn-warning" onclick="trackSustainability()">Sustainability Report</button>
                    <button class="btn btn-danger" onclick="emergencyProtocol()">Emergency Protocol</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function automateExportProcess() {
    const shipmentId = prompt('Enter Shipment ID:');
    if (shipmentId) {
        fetch('/api/master/automate-export', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ shipment_id: shipmentId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Export process automated successfully!');
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        });
    }
}

function predictDemand() {
    const commodityType = prompt('Enter commodity type (vegetables/rice/spices):');
    const region = prompt('Enter region:');
    
    if (commodityType && region) {
        fetch('/api/master/predict-demand', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ 
                commodity_type: commodityType,
                region: region
            })
        })
        .then(response => response.json())
        .then(data => {
            alert('Demand Prediction: ' + JSON.stringify(data.predicted_demand, null, 2));
        });
    }
}

function optimizePricing() {
    alert('Opening AI Pricing Optimizer...');
    // Redirect to pricing optimization page
    window.location.href = '/pricing/optimize';
}

function trackSustainability() {
    fetch('/api/master/sustainability-report', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        alert('Sustainability Score: ' + data.sustainability_score + '\nCarbon Footprint Reduction: ' + data.carbon_neutrality_progress.progress_percentage + '%');
    });
}

function createSmartContract() {
    const shipmentId = prompt('Enter Shipment ID for Smart Contract:');
    if (shipmentId) {
        fetch('/api/master/create-smart-contract', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ shipment_id: shipmentId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Smart Contract Created!\nContract Hash: ' + data.contract_hash);
            }
        });
    }
}

function openCustomerChat() {
    window.open('/customer/chat', '_blank', 'width=800,height=600');
}

function viewFeedback() {
    window.location.href = '/customer/feedback';
}

function generateComplianceReport() {
    fetch('/api/master/compliance-report', {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        alert('Overall Compliance: ' + data.overall_compliance.toFixed(1) + '%\nCritical Deadlines: ' + Object.keys(data.critical_deadlines).length);
    });
}

function emergencyProtocol() {
    if (confirm('Activate Emergency Protocol? This will alert all stakeholders.')) {
        alert('Emergency Protocol Activated!\n- All managers notified\n- Emergency response team alerted\n- Real-time monitoring activated');
    }
}

// Real-time updates
setInterval(function() {
    // Update dashboard metrics every 30 seconds
    fetch('/api/master/real-time-metrics')
        .then(response => response.json())
        .then(data => {
            // Update metrics without page reload
            console.log('Dashboard updated:', data);
        });
}, 30000);
</script>
@endsection