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

    <!-- Page Header -->
    <div class="page-header">
        <h1>🏪 Field Management</h1>
        <p>Manage your growing fields and locations</p>
        <p class="subtitle">Track geographic data, soil conditions, and plant capacity</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/fields/create" class="touch-btn touch-btn-success">+ Add New Field</a>
        <a href="/plants" class="touch-btn touch-btn-primary">🌱 Plants</a>
        <a href="/" class="touch-btn touch-btn-primary">🏠 Home</a>
    </div>

    <!-- Statistics -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ $fields->total() }}</div>
            <div class="stat-label">Total Fields</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ $fields->where('status', 'active')->count() }}</div>
            <div class="stat-label">Active Fields</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ $fields->sum('plants_count') }}</div>
            <div class="stat-label">Total Plants in Fields</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ number_format($fields->sum('acreage'), 1) }}</div>
            <div class="stat-label">Total Acres</div>
        </div>
    </div>

    <!-- Field Utilization Overview -->
    <div class="mobile-card">
        <h3>📊 Field Utilization Overview</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 20px 0;">
            <!-- Utilization Chart -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">Field Capacity Usage</h4>
                <canvas id="fieldUtilizationChart" style="max-height: 250px;"></canvas>
            </div>
            
            <!-- Top Performing Fields -->
            <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                <h4 style="margin-bottom: 15px; color: var(--soil-brown);">Top Performing Fields</h4>
                <div style="max-height: 250px; overflow-y: auto;">
                    @foreach($fields->where('plant_capacity', '>', 0)->sortByDesc(function($field) { return ($field->plants_count / $field->plant_capacity) * 100; })->take(5) as $field)
                        @php
                            $utilization = ($field->plants_count / $field->plant_capacity) * 100;
                        @endphp
                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #E0E0E0;">
                            <div>
                                <div style="font-weight: 600; color: var(--blackberry-purple);">{{ $field->name }}</div>
                                <div style="font-size: 0.85em; color: #6c757d;">{{ $field->plants_count }}/{{ $field->plant_capacity }} plants</div>
                            </div>
                            <div style="text-align: right;">
                                <div style="font-weight: bold; color: var(--leaf-green);">{{ number_format($utilization, 1) }}%</div>
                                <div style="background: #E0E0E0; height: 4px; width: 60px; border-radius: 2px; overflow: hidden; margin-top: 4px;">
                                    <div style="background: var(--leaf-green); height: 100%; width: {{ min(100, $utilization) }}%; border-radius: 2px;"></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <form method="GET" action="/fields" class="filters">
        <div class="filter-group">
            <label for="search">Search</label>
            <input type="text" id="search" name="search" class="form-control" 
                   value="{{ request('search') }}" 
                   placeholder="Name, location, topography...">
        </div>
        <div class="filter-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="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                <option value="preparation" {{ request('status') == 'preparation' ? 'selected' : '' }}>Preparation</option>
                <option value="fallow" {{ request('status') == 'fallow' ? 'selected' : '' }}>Fallow</option>
            </select>
        </div>
        <div class="filter-group" style="align-self: end;">
            <button type="submit" class="touch-btn touch-btn-primary">🔍 Search</button>
            <a href="/fields" class="touch-btn touch-btn-warning">Clear</a>
        </div>
    </form>

    @if($fields && $fields->count() > 0)
    <!-- Fields Table -->
    <table class="table">
        <thead>
            <tr>
                <th>Field Name</th>
                <th>Location</th>
                <th>Size</th>
                <th>Topography</th>
                <th>Plant Capacity</th>
                <th>Utilization</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($fields as $field)
            <tr class="field-row" onclick="window.location='/fields/{{ $field->id }}'">
                <td>
                    <strong>🏪 {{ $field->name }}</strong>
                    @if($field->field_code)
                        <br><small style="color: #6c757d;">({{ $field->field_code }})</small>
                    @endif
                </td>
                <td>
                    @if($field->city || $field->state)
                        {{ $field->city }}{{ $field->city && $field->state ? ', ' : '' }}{{ $field->state }}
                    @else
                        -
                    @endif
                </td>
                <td>
                    @if($field->acreage)
                        {{ number_format($field->acreage, 1) }} acres
                    @else
                        -
                    @endif
                </td>
                <td>
                    {{ $field->topography ? ucfirst($field->topography) : '-' }}
                </td>
                <td>
                    @if($field->plant_capacity)
                        {{ $field->plants_count }} / {{ $field->plant_capacity }}
                        <br><small style="color: #6c757d;">plants</small>
                    @else
                        -
                    @endif
                </td>
                <td>
                    @if($field->plant_capacity && $field->plant_capacity > 0)
                        @php
                            $utilization = min(100, ($field->plants_count / $field->plant_capacity) * 100);
                        @endphp
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <div style="background: #E0E0E0; height: 8px; border-radius: 4px; flex: 1; overflow: hidden;">
                                <div style="background: var(--leaf-green); height: 100%; width: {{ $utilization }}%; border-radius: 4px; transition: width 0.3s ease;"></div>
                            </div>
                            <small style="color: #6c757d; min-width: 35px;">{{ number_format($utilization, 1) }}%</small>
                        </div>
                    @else
                        -
                    @endif
                </td>
                <td>
                    @php
                        $statusClass = match($field->status) {
                            'active' => 'badge-success',
                            'inactive' => 'badge-warning',
                            'preparation' => 'badge-info',
                            'fallow' => 'badge-warning',
                            default => 'badge-secondary'
                        };
                    @endphp
                    <span class="badge {{ $statusClass }}">
                        {{ ucfirst($field->status) }}
                    </span>
                </td>
                <td onclick="event.stopPropagation();">
                    <a href="/fields/{{ $field->id }}" class="touch-btn touch-btn-primary" style="padding: 6px 10px; font-size: 11px; margin: 1px;">View</a>
                    <a href="/fields/{{ $field->id }}/edit" class="touch-btn touch-btn-warning" style="padding: 6px 10px; font-size: 11px; margin: 1px;">Edit</a>
                    @if($field->plants_count == 0)
                        <a href="/plants/create?field_id={{ $field->id }}" class="touch-btn touch-btn-success" style="padding: 6px 10px; font-size: 11px; margin: 1px;">Add Plants</a>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Pagination -->
    <div class="pagination">
        {{ $fields->links() }}
    </div>
    @else
    <!-- Empty State -->
    <div style="text-align: center; padding: 60px 20px; color: #6c757d;">
        <h3>🏪 No Fields Added Yet</h3>
        <p>Start by creating your first growing field or location.</p>
        <p>Track geographic data, soil conditions, and plant capacity for each field.</p>
        <a href="/fields/create" class="touch-btn touch-btn-success">🏪 Add Your First Field</a>
    </div>
    @endif

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Blackberry Theme Colors
const blackberryColors = {
    purple: '#6A1B9A',
    green: '#388E3C',
    orange: '#FF8F00',
    red: '#C62828',
    gray: '#E0E0E0',
    blue: '#1976D2'
};

// Field Utilization Chart
const fieldUtilizationCtx = document.getElementById('fieldUtilizationChart').getContext('2d');

// Prepare data for fields with capacity
const fieldsData = [
    @foreach($fields->where('plant_capacity', '>', 0) as $field)
    {
        name: '{{ $field->name }}',
        capacity: {{ $field->plant_capacity }},
        current: {{ $field->plants_count }},
        utilization: {{ number_format(($field->plants_count / $field->plant_capacity) * 100, 1) }}
    },
    @endforeach
];

// Create horizontal bar chart for field utilization
new Chart(fieldUtilizationCtx, {
    type: 'bar',
    data: {
        labels: fieldsData.map(field => field.name),
        datasets: [{
            label: 'Plants',
            data: fieldsData.map(field => field.current),
            backgroundColor: fieldsData.map(field => {
                const util = field.utilization;
                if (util >= 80) return blackberryColors.red;
                if (util >= 60) return blackberryColors.orange;
                if (util >= 40) return blackberryColors.green;
                return blackberryColors.blue;
            }),
            borderColor: 'white',
            borderWidth: 2
        }, {
            label: 'Available Capacity',
            data: fieldsData.map(field => field.capacity - field.current),
            backgroundColor: blackberryColors.gray,
            borderColor: 'white',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        scales: {
            x: {
                stacked: true,
                beginAtZero: true,
                grid: {
                    color: '#f0f0f0'
                }
            },
            y: {
                stacked: true,
                grid: {
                    display: false
                }
            }
        },
        plugins: {
            legend: {
                position: 'top',
                labels: {
                    font: {
                        size: 12,
                        weight: '600'
                    }
                }
            },
            tooltip: {
                callbacks: {
                    title: function(context) {
                        return context[0].label;
                    },
                    label: function(context) {
                        const fieldIndex = context.dataIndex;
                        const field = fieldsData[fieldIndex];
                        if (context.datasetIndex === 0) {
                            return `Current Plants: ${field.current} (${field.utilization}%)`;
                        } else {
                            return `Available Capacity: ${field.capacity - field.current}`;
                        }
                    }
                }
            }
        }
    }
});

// Animate chart on load
window.addEventListener('load', function() {
    document.getElementById('fieldUtilizationChart').style.animation = 'fadeInUp 0.6s ease-out';
});
</script>

<style>
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

canvas {
    border-radius: 8px;
}
</style>
@endpush