@extends('layouts.app')
@section('title', 'Plant Management - Blackberry Farm')
@section('content')

<style>
        /* Ensure CSS variables are available */
        :root {
            --blackberry-purple: #6A1B9A;
            --blackberry-purple-light: #8E24AA;
            --blackberry-purple-dark: #4A148C;
            --leaf-green: #388E3C;
            --leaf-green-light: #4CAF50;
            --leaf-green-dark: #2E7D32;
            --cream: #F5F5DC;
            --light-gray: #F5F5F5;
            --medium-gray: #E0E0E0;
            --dark-gray: #424242;
            --soil-brown: #5D4037;
            --berry-red: #C62828;
            --transition-speed: 0.3s;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #F5F5DC 0%, #F5F5F5 50%, #E8F5E8 100%);
            line-height: 1.6;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }
        .btn {
            display: inline-block;
            padding: 10px 18px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            font-size: 13px;
            margin: 3px;
            border: none;
            cursor: pointer;
        }
        .btn:hover {
            background: #2980b9;
        }
        .btn-success {
            background: #27ae60;
        }
        .btn-success:hover {
            background: #219a52;
        }
        .btn-secondary {
            background: #95a5a6;
        }
        .btn-secondary:hover {
            background: #7f8c8d;
        }
        .btn-warning {
            background: #f39c12;
        }
        .btn-warning:hover {
            background: #e67e22;
        }
        .btn-danger {
            background: #e74c3c;
        }
        .btn-danger:hover {
            background: #c0392b;
        }
        .btn-sm {
            padding: 6px 12px;
            font-size: 11px;
            margin: 1px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }
        .search-bar {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .search-bar form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto;
            gap: 15px;
            align-items: end;
        }
        .form-group {
            margin: 0;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #2c3e50;
        }
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .plants-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: white;
        }
        .plants-table th,
        .plants-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
            vertical-align: middle;
        }
        .plants-table th {
            background: #f8f9fa;
            font-weight: bold;
            color: #2c3e50;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .plants-table tr:hover {
            background: #f1f3f4;
        }
        .plant-id-link {
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
        }
        .plant-id-link:hover {
            color: #2980b9;
            text-decoration: underline;
        }
        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
            text-transform: uppercase;
        }
        .status-active { background: #d4edda; color: #155724; }
        .status-dormant { background: #fff3cd; color: #856404; }
        .status-stressed { background: #f8d7da; color: #721c24; }
        .status-diseased { background: #f8d7da; color: #721c24; }
        .status-removed { background: #f8d7da; color: #721c24; }
        .status-died { background: #f8d7da; color: #721c24; }
        .plant-actions {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .plant-actions form {
            margin: 0;
        }
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }
        .empty-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }
        .pagination-wrapper {
            margin-top: 30px;
            text-align: center;
        }
        @media (max-width: 768px) {
            .container {
                padding: 15px;
                margin: 10px;
            }
            .header {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .search-bar form {
                grid-template-columns: 1fr;
            }
            .plants-table {
                font-size: 14px;
            }
            .plants-table th,
            .plants-table td {
                padding: 8px;
            }
            .plant-actions {
                flex-direction: column;
                gap: 2px;
            }
            .btn-sm {
                width: 100%;
                text-align: center;
            }
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
        }
        @media (max-width: 480px) {
            body {
                padding: 5px;
            }
            .container {
                padding: 10px;
                margin: 0;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .plants-table {
                font-size: 12px;
            }
            .plants-table th,
            .plants-table td {
                padding: 6px;
            }
        }
    </style>

    <div class="mobile-plant-container">
        <div class="mobile-page-header">
  <!-- Dashboard Header -->
    <div class="dashboard-header" style="background: linear-gradient(135deg, #6A1B9A 0%, #8E24AA 50%, #4A148C 100%); color: white; padding: 30px; text-align: center; border-bottom: 4px solid #388E3C; border-radius: 12px; margin-bottom: 30px;">
        <h1 style="font-size: 2.2em; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);"> 🌱 Plant Management</h1>
            <p>Track and manage your blackberry plants</p>
            </div>
            <div class="responsive-grid cols-2" style="margin-top: 16px;">
                <a href="/plants/create" class="touch-btn touch-btn-success">+ Add Plant</a>
                <a href="/scan" class="touch-btn touch-btn-primary">📱 Scan QR</a>
                <a href="/plants/bulk-actions" class="touch-btn touch-btn-primary">⚡ Bulk Actions</a>
                <a href="/fields" class="touch-btn touch-btn-primary">🏪 Fields</a>
            </div>
        </div>

        <!-- Statistics -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">{{ $plants->total() }}</div>
                <div class="stat-label">Total Plants</div>
            </div>
            <div class="stat-card" style="background: linear-gradient(135deg, #27ae60, #219a52);">
                <div class="stat-number">{{ $plants->where('status', 'active')->count() }}</div>
                <div class="stat-label">Active Plants</div>
            </div>
            <div class="stat-card" style="background: linear-gradient(135deg, #f39c12, #e67e22);">
                <div class="stat-number">{{ $varieties->count() }}</div>
                <div class="stat-label">Varieties Available</div>
            </div>
            <div class="stat-card" style="background: linear-gradient(135deg, #9b59b6, #8e44ad);">
                <div class="stat-number">{{ $plants->whereNotNull('qr_code')->count() }}</div>
                <div class="stat-label">QR Codes Generated</div>
            </div>
            @if(isset($fields))
            <div class="stat-card" style="background: linear-gradient(135deg, #e67e22, #d35400);">
                <div class="stat-number">{{ $fields->count() }}</div>
                <div class="stat-label">Fields Available</div>
            </div>
            @endif
        </div>

        <!-- Plant Growth Metrics Overview -->
        <div class="mobile-card" style="margin: 30px 0;">
            <h3>📊 Plant Growth & Health Metrics</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
                <!-- Plant Status Distribution -->
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🌱 Plant Status Distribution</h4>
                    <canvas id="plantStatusChart" style="max-height: 250px;"></canvas>
                </div>
                
                <!-- Variety Growth Performance -->
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🫐 Variety Distribution</h4>
                    <canvas id="varietyDistributionChart" style="max-height: 250px;"></canvas>
                </div>
            </div>
            
            <!-- Plant Health Status Cards -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">🌿 Health Overview</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;">
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #27ae60;">
                        <div style="font-size: 2em; color: #27ae60; font-weight: bold;">{{ $plants->where('status', 'active')->count() }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Healthy Plants</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #f39c12;">
                        <div style="font-size: 2em; color: #f39c12; font-weight: bold;">{{ $plants->where('status', 'dormant')->count() }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Dormant</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #e74c3c;">
                        <div style="font-size: 2em; color: #e74c3c; font-weight: bold;">{{ $plants->whereIn('status', ['stressed', 'diseased'])->count() }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">Needs Attention</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #9b59b6;">
                        <div style="font-size: 2em; color: #9b59b6; font-weight: bold;">{{ $plants->whereNotNull('qr_code')->count() }}</div>
                        <div style="font-size: 0.9em; color: var(--soil-brown); margin-top: 5px;">QR Tracked</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search and Filter Bar -->
        <div class="search-bar">
            <form method="GET" action="/plants">
                <div class="form-group">
                    <label for="search">Search</label>
                    <input type="text" id="search" name="search" class="form-control" 
                           value="{{ request('search') }}" 
                           placeholder="Plant ID, location, field...">
                </div>
                <div class="form-group">
                    <label for="variety">Variety</label>
                    <select id="variety" name="variety" class="form-control">
                        <option value="">All Varieties</option>
                        @foreach($varieties as $variety)
                            <option value="{{ $variety->id }}" {{ request('variety') == $variety->id ? 'selected' : '' }}>
                                {{ $variety->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="status">Status</label>
                    <select id="status" name="status" class="form-control">
                        <option value="">All Statuses</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="dormant" {{ request('status') == 'dormant' ? 'selected' : '' }}>Dormant</option>
                        <option value="stressed" {{ request('status') == 'stressed' ? 'selected' : '' }}>Stressed</option>
                        <option value="diseased" {{ request('status') == 'diseased' ? 'selected' : '' }}>Diseased</option>
                        <option value="removed" {{ request('status') == 'removed' ? 'selected' : '' }}>Removed</option>
                        <option value="died" {{ request('status') == 'died' ? 'selected' : '' }}>Died</option>
                    </select>
                </div>
                @if(isset($fields))
                <div class="form-group">
                    <label for="field">Field</label>
                    <select id="field" name="field" class="form-control">
                        <option value="">All Fields</option>
                        @foreach($fields as $field)
                            <option value="{{ $field->id }}" {{ request('field') == $field->id ? 'selected' : '' }}>
                                {{ $field->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @endif
                <button type="submit" class="btn">🔍 Search</button>
            </form>
        </div>

        @if($plants && $plants->count() > 0)
        <!-- Plants Table -->
        <table class="plants-table">
            <thead>
                <tr>
                    <th>Plant ID</th>
                    <th>Variety</th>
                    @if(isset($fields))
                    <th>Field</th>
                    @endif
                    <th>Location</th>
                    <th>Status</th>
                    <th>Planted</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($plants as $plant)
                <tr>
                    <td>
                        <a href="/plants/{{ $plant->plant_id }}" class="plant-id-link">
                            🫐 {{ $plant->plant_id }}
                        </a>
                    </td>
                    <td>{{ $plant->variety_name ?? 'Unknown' }}</td>
                    @if(isset($fields))
                    <td>{{ $plant->field_name ?? 'Unassigned' }}</td>
                    @endif
                    <td>{{ $plant->location ?? 'Not specified' }}</td>
                    <td>
                        <span class="status-badge status-{{ $plant->status }}">
                            {{ ucfirst($plant->status) }}
                        </span>
                    </td>
                    <td>{{ $plant->planted_date ? date('M j, Y', strtotime($plant->planted_date)) : 'Unknown' }}</td>
                    <td>
                        <div class="plant-actions">
                            <a href="/plants/{{ $plant->plant_id }}" class="btn btn-sm">View</a>
                            <a href="/plants/{{ $plant->plant_id }}/measurements/create" class="btn btn-sm btn-success">Measure</a>
                            <a href="/plants/{{ $plant->plant_id }}/edit" class="btn btn-sm btn-warning">Edit</a>
                            <a href="/plants/{{ $plant->plant_id }}/qr" class="btn btn-sm">QR</a>
                            <form method="POST" action="/plants/{{ $plant->plant_id }}" style="display: inline-block;" onsubmit="return confirmDelete('{{ $plant->plant_id }}', '{{ $plant->variety_name ?? 'Unknown Variety' }}')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Pagination -->
        <div class="pagination-wrapper">
            {{ $plants->links() }}
        </div>
        @else
        <!-- Empty State -->
        <div class="empty-state">
            <div class="empty-icon">🫐</div>
            <h2>No Plants Added Yet</h2>
            <p>Start building your blackberry farm by adding your first plant.</p>
            <p>You can track up to 10,000+ plants with individual QR codes and detailed records.</p>
            <a href="/plants/create" class="btn btn-success">🌱 Add Your First Plant</a>
            <br><br>
            <p><strong>Quick Start:</strong> Add your 40 Prime Ark Freedom plants to begin tracking growth and production.</p>
        </div>
        @endif
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Chart.js Configuration for Plant Metrics
        const plantColors = {
            active: '#27ae60',
            dormant: '#f39c12',
            stressed: '#e74c3c',
            diseased: '#c0392b',
            removed: '#95a5a6',
            died: '#7f8c8d'
        };

        // Plant Status Distribution Chart
        const statusCtx = document.getElementById('plantStatusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: [
                    'Active ({{ $plants->where("status", "active")->count() }})',
                    'Dormant ({{ $plants->where("status", "dormant")->count() }})',
                    'Stressed ({{ $plants->where("status", "stressed")->count() }})',
                    'Diseased ({{ $plants->where("status", "diseased")->count() }})',
                    'Removed ({{ $plants->where("status", "removed")->count() }})',
                    'Died ({{ $plants->where("status", "died")->count() }})'
                ],
                datasets: [{
                    data: [
                        {{ $plants->where('status', 'active')->count() }},
                        {{ $plants->where('status', 'dormant')->count() }},
                        {{ $plants->where('status', 'stressed')->count() }},
                        {{ $plants->where('status', 'diseased')->count() }},
                        {{ $plants->where('status', 'removed')->count() }},
                        {{ $plants->where('status', 'died')->count() }}
                    ],
                    backgroundColor: [
                        plantColors.active,
                        plantColors.dormant,
                        plantColors.stressed,
                        plantColors.diseased,
                        plantColors.removed,
                        plantColors.died
                    ],
                    borderColor: '#fff',
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: {
                                size: 11,
                                weight: '600'
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return `${label}: ${percentage}%`;
                            }
                        }
                    }
                }
            }
        });

        // Variety Distribution Chart
        const varietyCtx = document.getElementById('varietyDistributionChart').getContext('2d');
        new Chart(varietyCtx, {
            type: 'bar',
            data: {
                labels: [
                    @foreach($varieties as $variety)
                    '{{ $variety->name }}',
                    @endforeach
                ],
                datasets: [{
                    label: 'Plants per Variety',
                    data: [
                        @foreach($varieties as $variety)
                        {{ $plants->where('variety_id', $variety->id)->count() }},
                        @endforeach
                    ],
                    backgroundColor: [
                        '#6A1B9A', '#388E3C', '#FF8F00', '#C62828', '#1976D2', '#7B1FA2', '#689F38', '#F57C00'
                    ],
                    borderColor: '#fff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: '#f0f0f0'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.parsed.y} plants`;
                            }
                        }
                    }
                }
            }
        });

        // Animate charts on load
        window.addEventListener('load', function() {
            document.querySelectorAll('canvas').forEach(canvas => {
                canvas.style.animation = 'fadeInUp 0.6s ease-out';
            });
        });

        function confirmDelete(plantId, varietyName) {
            return confirm(
                `Are you sure you want to remove plant ${plantId} (${varietyName}) from inventory?\n\n` +
                `This will take you to a confirmation page where you can choose to:\n` +
                `• Archive the plant (recommended - preserves historical data)\n` +
                `• Permanently delete the plant and all records\n\n` +
                `Click OK to continue to the options page.`
            );
        }
    </script>
@endsection