@extends('layouts.app')
@section('title', 'Professional Report Generator - Blackberry Farm Analytics')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>📄 Professional Report Generator</h1>
        <p>Generate comprehensive business reports for investors, lenders, and strategic planning</p>
        <p class="subtitle">Professional-grade documentation with financial modeling and projections</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/analytics" class="touch-btn touch-btn-primary">← Analytics Dashboard</a>
        <a href="/analytics/interactive-dashboard" class="touch-btn touch-btn-purple">🎮 Interactive Dashboard</a>
        <a href="/analytics/scenario-comparison" class="touch-btn touch-btn-info">🎯 Scenario Comparison</a>
        <a href="/config/projections" class="touch-btn touch-btn-secondary">⚙️ Configure Parameters</a>
    </div>

    <!-- Report Configuration -->
    <div class="mobile-card">
        <h3>📊 Report Configuration</h3>
        <form id="reportForm" method="POST" action="/analytics/reports/generate" style="margin: 20px 0;">
            @csrf
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                
                <div>
                    <label for="report_type" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📋 Report Type
                    </label>
                    <select name="report_type" id="report_type" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;"
                            onchange="updateReportOptions()">
                        <option value="executive_summary">📊 Executive Summary</option>
                        <option value="financial_analysis">💰 Financial Analysis</option>
                        <option value="business_plan">📈 Business Plan</option>
                        <option value="investor_presentation">💼 Investor Presentation</option>
                        <option value="operational_review">⚙️ Operational Review</option>
                        <option value="comprehensive">📑 Comprehensive Report</option>
                    </select>
                </div>
                
                <div>
                    <label for="output_format" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📄 Output Format
                    </label>
                    <select name="output_format" id="output_format" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="pdf">📄 PDF Report</option>
                        <option value="excel">📊 Excel Workbook</option>
                        <option value="both">📋 Both PDF & Excel</option>
                    </select>
                </div>
                
                <div>
                    <label for="analysis_period" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Analysis Period
                    </label>
                    <select name="analysis_period" id="analysis_period" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="1">1 Year Projection</option>
                        <option value="3" selected>3 Year Projection</option>
                        <option value="5">5 Year Projection</option>
                        <option value="10">10 Year Projection</option>
                    </select>
                </div>
                
                <div>
                    <label for="plant_scenario" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🌱 Plant Scenario
                    </label>
                    <select name="plant_scenario" id="plant_scenario" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="current">Current Operations</option>
                        <option value="conservative">Conservative Growth</option>
                        <option value="moderate" selected>Moderate Growth</option>
                        <option value="aggressive">Aggressive Expansion</option>
                        <option value="custom">Custom Scenario</option>
                    </select>
                </div>
            </div>
            
            <!-- Custom Scenario Fields (shown when custom is selected) -->
            <div id="customScenarioFields" style="display: none; margin-top: 20px; padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                <h4 style="color: var(--blackberry-purple); margin-bottom: 15px;">🎯 Custom Scenario Parameters</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    <div>
                        <label for="custom_plants" style="display: block; margin-bottom: 5px; font-weight: 600;">Plant Count</label>
                        <input type="number" name="custom_plants" id="custom_plants" value="5000" min="100" max="50000" class="form-control">
                    </div>
                    <div>
                        <label for="custom_yield" style="display: block; margin-bottom: 5px; font-weight: 600;">Yield/Plant (lbs)</label>
                        <input type="number" name="custom_yield" id="custom_yield" value="8" min="1" max="20" step="0.5" class="form-control">
                    </div>
                    <div>
                        <label for="custom_price" style="display: block; margin-bottom: 5px; font-weight: 600;">Price/lb ($)</label>
                        <input type="number" name="custom_price" id="custom_price" value="4.50" min="1" max="10" step="0.25" class="form-control">
                    </div>
                    <div>
                        <label for="custom_cost" style="display: block; margin-bottom: 5px; font-weight: 600;">Cost/Plant ($)</label>
                        <input type="number" name="custom_cost" id="custom_cost" value="3.50" min="1" max="15" step="0.25" class="form-control">
                    </div>
                </div>
            </div>
            
            <!-- Report Sections -->
            <div style="margin-top: 20px;">
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">📋 Include in Report</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(76, 175, 80, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="executive_summary" checked style="margin-right: 10px;">
                        <span>📊 Executive Summary</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(106, 27, 154, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="financial_projections" checked style="margin-right: 10px;">
                        <span>💰 Financial Projections</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(255, 143, 0, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="roi_analysis" checked style="margin-right: 10px;">
                        <span>📈 ROI Analysis</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(198, 40, 40, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="risk_assessment" checked style="margin-right: 10px;">
                        <span>⚠️ Risk Assessment</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(33, 150, 243, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="cash_flow" checked style="margin-right: 10px;">
                        <span>💸 Cash Flow Analysis</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(76, 175, 80, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="sensitivity_analysis" style="margin-right: 10px;">
                        <span>🌪️ Sensitivity Analysis</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(156, 39, 176, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="monte_carlo" style="margin-right: 10px;">
                        <span>🎲 Monte Carlo Simulation</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(255, 193, 7, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="equipment_planning" style="margin-right: 10px;">
                        <span>🚜 Equipment Planning</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(96, 125, 139, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="operational_metrics" style="margin-right: 10px;">
                        <span>⚙️ Operational Metrics</span>
                    </label>
                    <label style="display: flex; align-items: center; padding: 10px; background: rgba(121, 85, 72, 0.05); border-radius: 6px;">
                        <input type="checkbox" name="sections[]" value="recommendations" checked style="margin-right: 10px;">
                        <span>💡 Strategic Recommendations</span>
                    </label>
                </div>
            </div>
            
            <!-- Advanced Options -->
            <div style="margin-top: 20px;">
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">🔧 Advanced Options</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="include_charts" checked style="margin-right: 10px;">
                        <span>📊 Include Charts & Graphs</span>
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="include_assumptions" checked style="margin-right: 10px;">
                        <span>📋 Include Assumptions & Methodology</span>
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="include_raw_data" style="margin-right: 10px;">
                        <span>📈 Include Raw Data Tables</span>
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="confidential" checked style="margin-right: 10px;">
                        <span>🔒 Mark as Confidential</span>
                    </label>
                </div>
            </div>
            
            <!-- Report Branding -->
            <div style="margin-top: 20px;">
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">🎨 Report Branding</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                    <div>
                        <label for="company_name" style="display: block; margin-bottom: 5px; font-weight: 600;">Company Name</label>
                        <input type="text" name="company_name" id="company_name" value="Blackberry Farm Operations" class="form-control">
                    </div>
                    <div>
                        <label for="report_author" style="display: block; margin-bottom: 5px; font-weight: 600;">Report Author</label>
                        <input type="text" name="report_author" id="report_author" value="Farm Manager" class="form-control">
                    </div>
                    <div>
                        <label for="report_title" style="display: block; margin-bottom: 5px; font-weight: 600;">Custom Report Title</label>
                        <input type="text" name="report_title" id="report_title" placeholder="Auto-generated based on type" class="form-control">
                    </div>
                    <div>
                        <label for="report_date" style="display: block; margin-bottom: 5px; font-weight: 600;">Report Date</label>
                        <input type="date" name="report_date" id="report_date" value="{{ date('Y-m-d') }}" class="form-control">
                    </div>
                </div>
            </div>
            
            <!-- Generate Button -->
            <div style="margin-top: 30px; text-align: center;">
                <button type="submit" class="touch-btn touch-btn-success" style="padding: 15px 30px; font-size: 1.1em;">
                    📄 Generate Professional Report
                </button>
                <div style="margin-top: 10px; color: var(--soil-brown); font-size: 0.9em;">
                    Report generation may take 30-60 seconds for comprehensive reports
                </div>
            </div>
        </form>
    </div>

    <!-- Report Templates Preview -->
    <div class="mobile-card">
        <h3>📋 Report Template Previews</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            
            <!-- Executive Summary Template -->
            <div style="padding: 20px; background: rgba(76, 175, 80, 0.05); border-radius: 12px; border-left: 4px solid var(--leaf-green);">
                <h4 style="color: var(--leaf-green);">📊 Executive Summary</h4>
                <div style="margin: 15px 0;">
                    <p style="font-size: 0.9em; margin-bottom: 10px;"><strong>Ideal for:</strong> Quick overview, board presentations</p>
                    <p style="font-size: 0.9em; margin-bottom: 15px;"><strong>Length:</strong> 2-3 pages</p>
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px;">
                        <strong>Includes:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 0.85em;">
                            <li>Key financial metrics</li>
                            <li>ROI summary</li>
                            <li>Risk overview</li>
                            <li>Strategic recommendations</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Financial Analysis Template -->
            <div style="padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 12px; border-left: 4px solid var(--blackberry-purple);">
                <h4 style="color: var(--blackberry-purple);">💰 Financial Analysis</h4>
                <div style="margin: 15px 0;">
                    <p style="font-size: 0.9em; margin-bottom: 10px;"><strong>Ideal for:</strong> Lenders, financial planning</p>
                    <p style="font-size: 0.9em; margin-bottom: 15px;"><strong>Length:</strong> 5-8 pages</p>
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px;">
                        <strong>Includes:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 0.85em;">
                            <li>Detailed P&L projections</li>
                            <li>Cash flow analysis</li>
                            <li>Break-even scenarios</li>
                            <li>Sensitivity analysis</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Business Plan Template -->
            <div style="padding: 20px; background: rgba(255, 143, 0, 0.05); border-radius: 12px; border-left: 4px solid var(--warning);">
                <h4 style="color: var(--warning);">📈 Business Plan</h4>
                <div style="margin: 15px 0;">
                    <p style="font-size: 0.9em; margin-bottom: 10px;"><strong>Ideal for:</strong> Strategic planning, expansion</p>
                    <p style="font-size: 0.9em; margin-bottom: 15px;"><strong>Length:</strong> 15-25 pages</p>
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px;">
                        <strong>Includes:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 0.85em;">
                            <li>Market analysis</li>
                            <li>Financial projections</li>
                            <li>Equipment planning</li>
                            <li>Risk mitigation strategies</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Investor Presentation Template -->
            <div style="padding: 20px; background: rgba(33, 150, 243, 0.05); border-radius: 12px; border-left: 4px solid var(--sky-blue);">
                <h4 style="color: var(--sky-blue);">💼 Investor Presentation</h4>
                <div style="margin: 15px 0;">
                    <p style="font-size: 0.9em; margin-bottom: 10px;"><strong>Ideal for:</strong> Fundraising, partnerships</p>
                    <p style="font-size: 0.9em; margin-bottom: 15px;"><strong>Length:</strong> 10-15 pages</p>
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px;">
                        <strong>Includes:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 0.85em;">
                            <li>Investment highlights</li>
                            <li>Growth projections</li>
                            <li>Market opportunity</li>
                            <li>Return expectations</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Operational Review Template -->
            <div style="padding: 20px; background: rgba(96, 125, 139, 0.05); border-radius: 12px; border-left: 4px solid #607D8B;">
                <h4 style="color: #607D8B;">⚙️ Operational Review</h4>
                <div style="margin: 15px 0;">
                    <p style="font-size: 0.9em; margin-bottom: 10px;"><strong>Ideal for:</strong> Performance analysis, optimization</p>
                    <p style="font-size: 0.9em; margin-bottom: 15px;"><strong>Length:</strong> 8-12 pages</p>
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px;">
                        <strong>Includes:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 0.85em;">
                            <li>Operational metrics</li>
                            <li>Efficiency analysis</li>
                            <li>Equipment utilization</li>
                            <li>Process improvements</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Comprehensive Report Template -->
            <div style="padding: 20px; background: rgba(121, 85, 72, 0.05); border-radius: 12px; border-left: 4px solid #795548;">
                <h4 style="color: #795548;">📑 Comprehensive Report</h4>
                <div style="margin: 15px 0;">
                    <p style="font-size: 0.9em; margin-bottom: 10px;"><strong>Ideal for:</strong> Complete analysis, due diligence</p>
                    <p style="font-size: 0.9em; margin-bottom: 15px;"><strong>Length:</strong> 25-40 pages</p>
                    <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px;">
                        <strong>Includes:</strong>
                        <ul style="margin: 5px 0; padding-left: 15px; font-size: 0.85em;">
                            <li>All analytics modules</li>
                            <li>Detailed methodology</li>
                            <li>Risk modeling</li>
                            <li>Strategic roadmap</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Reports -->
    <div class="mobile-card">
        <h3>📁 Recent Reports</h3>
        <div style="margin: 20px 0;">
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;">
                    <thead style="background: var(--blackberry-purple); color: white;">
                        <tr>
                            <th style="padding: 15px; text-align: left;">Report Name</th>
                            <th style="padding: 15px; text-align: left;">Type</th>
                            <th style="padding: 15px; text-align: left;">Generated</th>
                            <th style="padding: 15px; text-align: left;">Format</th>
                            <th style="padding: 15px; text-align: left;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="border-bottom: 1px solid #E0E0E0;">
                            <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">Q3 Financial Analysis</td>
                            <td style="padding: 15px;">Financial Analysis</td>
                            <td style="padding: 15px;">{{ date('M j, Y', strtotime('-2 days')) }}</td>
                            <td style="padding: 15px;">PDF</td>
                            <td style="padding: 15px;">
                                <a href="#" class="touch-btn touch-btn-info" style="padding: 5px 10px; font-size: 0.8em;">📄 View</a>
                                <a href="#" class="touch-btn touch-btn-success" style="padding: 5px 10px; font-size: 0.8em;">⬇️ Download</a>
                            </td>
                        </tr>
                        <tr style="border-bottom: 1px solid #E0E0E0;">
                            <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">Expansion Business Plan</td>
                            <td style="padding: 15px;">Business Plan</td>
                            <td style="padding: 15px;">{{ date('M j, Y', strtotime('-1 week')) }}</td>
                            <td style="padding: 15px;">PDF + Excel</td>
                            <td style="padding: 15px;">
                                <a href="#" class="touch-btn touch-btn-info" style="padding: 5px 10px; font-size: 0.8em;">📄 View</a>
                                <a href="#" class="touch-btn touch-btn-success" style="padding: 5px 10px; font-size: 0.8em;">⬇️ Download</a>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">Investor Pitch Deck</td>
                            <td style="padding: 15px;">Investor Presentation</td>
                            <td style="padding: 15px;">{{ date('M j, Y', strtotime('-2 weeks')) }}</td>
                            <td style="padding: 15px;">PDF</td>
                            <td style="padding: 15px;">
                                <a href="#" class="touch-btn touch-btn-info" style="padding: 5px 10px; font-size: 0.8em;">📄 View</a>
                                <a href="#" class="touch-btn touch-btn-success" style="padding: 5px 10px; font-size: 0.8em;">⬇️ Download</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Report Generator JavaScript
function updateReportOptions() {
    const reportType = document.getElementById('report_type').value;
    const sections = document.querySelectorAll('input[name="sections[]"]');
    
    // Reset all checkboxes
    sections.forEach(section => section.checked = false);
    
    // Set default sections based on report type
    const defaultSections = {
        'executive_summary': ['executive_summary', 'financial_projections', 'roi_analysis', 'recommendations'],
        'financial_analysis': ['executive_summary', 'financial_projections', 'roi_analysis', 'cash_flow', 'risk_assessment', 'recommendations'],
        'business_plan': ['executive_summary', 'financial_projections', 'roi_analysis', 'cash_flow', 'equipment_planning', 'risk_assessment', 'recommendations'],
        'investor_presentation': ['executive_summary', 'financial_projections', 'roi_analysis', 'risk_assessment', 'recommendations'],
        'operational_review': ['operational_metrics', 'equipment_planning', 'sensitivity_analysis', 'recommendations'],
        'comprehensive': ['executive_summary', 'financial_projections', 'roi_analysis', 'cash_flow', 'sensitivity_analysis', 'monte_carlo', 'equipment_planning', 'operational_metrics', 'risk_assessment', 'recommendations']
    };
    
    const sectionsToCheck = defaultSections[reportType] || [];
    sections.forEach(section => {
        if (sectionsToCheck.includes(section.value)) {
            section.checked = true;
        }
    });
    
    // Update report title placeholder
    const titleInput = document.getElementById('report_title');
    const titlePlaceholders = {
        'executive_summary': 'Executive Summary - Blackberry Farm Operations',
        'financial_analysis': 'Financial Analysis & Projections',
        'business_plan': 'Strategic Business Plan',
        'investor_presentation': 'Investment Opportunity Presentation',
        'operational_review': 'Operational Performance Review',
        'comprehensive': 'Comprehensive Farm Analytics Report'
    };
    
    titleInput.placeholder = titlePlaceholders[reportType] || 'Custom Report';
}

// Show/hide custom scenario fields
document.getElementById('plant_scenario').addEventListener('change', function() {
    const customFields = document.getElementById('customScenarioFields');
    if (this.value === 'custom') {
        customFields.style.display = 'block';
    } else {
        customFields.style.display = 'none';
    }
});

// Form validation
document.getElementById('reportForm').addEventListener('submit', function(e) {
    const checkedSections = document.querySelectorAll('input[name="sections[]"]:checked');
    if (checkedSections.length === 0) {
        e.preventDefault();
        alert('Please select at least one section to include in the report.');
        return false;
    }
    
    // Show loading indicator
    const submitBtn = document.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '⏳ Generating Report...';
    submitBtn.disabled = true;
    
    // Re-enable button after 60 seconds (in case of errors)
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 60000);
});

// Initialize with default selections
updateReportOptions();
</script>
@endpush