@extends('layouts.app')
@section('title', 'Field Details - {{ $field->name }} - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>🏪 {{ $field->name }}</h1>
        @if($field->field_code)
            <p>Field Code: {{ $field->field_code }}</p>
        @endif
        <p class="subtitle">Field Details and Plant Management</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-3" style="margin-bottom: 30px;">
        <a href="/fields/{{ $field->id }}/edit" class="touch-btn touch-btn-warning">✏️ Edit Field</a>
        <a href="/plants/create?field_id={{ $field->id }}" class="touch-btn touch-btn-success">🌱 Add Plants</a>
        <a href="/fields" class="touch-btn touch-btn-primary">← Back to Fields</a>
    </div>

    <!-- Status and Key Metrics -->
    <div class="stats-grid">
        <div class="stat-card {{ $field->status === 'active' ? 'green' : 'orange' }}">
            <div class="stat-number">{{ ucfirst($field->status) }}</div>
            <div class="stat-label">Field Status</div>
        </div>
        @if($field->acreage)
        <div class="stat-card today">
            <div class="stat-number">{{ number_format($field->acreage, 1) }}</div>
            <div class="stat-label">Acres</div>
        </div>
        @endif
        @if($field->plant_capacity)
        <div class="stat-card week">
            <div class="stat-number">{{ $field->plants->count() }}/{{ $field->plant_capacity }}</div>
            <div class="stat-label">Plant Capacity</div>
        </div>
        @endif
        @if($field->plant_capacity && $field->plant_capacity > 0)
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format(min(100, ($field->plants->count() / $field->plant_capacity) * 100), 1) }}%</div>
            <div class="stat-label">Utilization</div>
        </div>
        @endif
    </div>

    <!-- Main Content Grid -->
    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin: 30px 0;">
        
        <!-- Left Column - Detailed Information -->
        <div>
            <!-- Location Information -->
            @if($field->city || $field->state || $field->street_address || $field->latitude)
            <div class="mobile-card">
                <h3>📍 Location Details</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    @if($field->street_address)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Address</div>
                        <div>{{ $field->street_address }}</div>
                    </div>
                    @endif
                    @if($field->city || $field->state)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">City/State</div>
                        <div>{{ $field->city }}{{ $field->city && $field->state ? ', ' : '' }}{{ $field->state }} {{ $field->zip_code }}</div>
                    </div>
                    @endif
                    @if($field->county)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">County</div>
                        <div>{{ $field->county }}</div>
                    </div>
                    @endif
                    @if($field->latitude && $field->longitude)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Coordinates</div>
                        <div style="font-family: monospace; font-size: 0.9em;">{{ $field->latitude }}, {{ $field->longitude }}</div>
                    </div>
                    @endif
                    @if($field->elevation_feet)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Elevation</div>
                        <div>{{ number_format($field->elevation_feet) }} feet</div>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Terrain & Soil Information -->
            @if($field->topography || $field->soil_type || $field->drainage || $field->slope_percentage || $field->aspect || $field->soil_ph)
            <div class="mobile-card">
                <h3>🌱 Terrain & Soil Conditions</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    @if($field->topography)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Topography</div>
                        <div>{{ ucfirst($field->topography) }}</div>
                    </div>
                    @endif
                    @if($field->soil_type)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Soil Type</div>
                        <div>{{ ucfirst(str_replace('_', ' ', $field->soil_type)) }}</div>
                    </div>
                    @endif
                    @if($field->drainage)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Drainage</div>
                        <div>{{ ucfirst(str_replace('_', ' ', $field->drainage)) }}</div>
                    </div>
                    @endif
                    @if($field->slope_percentage)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Slope</div>
                        <div>{{ $field->slope_percentage }}%</div>
                    </div>
                    @endif
                    @if($field->aspect)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Aspect</div>
                        <div>{{ ucfirst($field->aspect) }}</div>
                    </div>
                    @endif
                    @if($field->soil_ph)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Soil pH</div>
                        <div>
                            {{ $field->soil_ph }}
                            @php
                                $ph = $field->soil_ph;
                                if ($ph >= 5.5 && $ph <= 6.5) {
                                    $status = 'Ideal for Blackberries';
                                    $class = 'ph-ideal';
                                } elseif ($ph < 5.5) {
                                    $status = 'Too Acidic';
                                    $class = 'ph-low';
                                } else {
                                    $status = 'Too Alkaline';
                                    $class = 'ph-high';
                                }
                            @endphp
                            <span class="ph-indicator {{ $class }}">{{ $status }}</span>
                        </div>
                    </div>
                    @endif
                    @if($field->last_soil_test)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Last Soil Test</div>
                        <div>{{ date('M j, Y', strtotime($field->last_soil_test)) }}</div>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- Infrastructure -->
            @if($field->irrigation_type || $field->access_road || $field->has_electricity || $field->has_water_access || $field->has_storage)
            <div class="mobile-card">
                <h3>🔧 Infrastructure & Utilities</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    @if($field->irrigation_type)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Irrigation System</div>
                        <div>{{ ucfirst(str_replace('_', ' ', $field->irrigation_type)) }}</div>
                    </div>
                    @endif
                    @if($field->access_road)
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Access Road</div>
                        <div>{{ ucfirst(str_replace('_', ' ', $field->access_road)) }}</div>
                    </div>
                    @endif
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Electricity</div>
                        <div>
                            @if($field->has_electricity)
                                <span style="color: var(--leaf-green); font-weight: 600;">✓ Available</span>
                            @else
                                <span style="color: #999;">✗ Not Available</span>
                            @endif
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Water Access</div>
                        <div>
                            @if($field->has_water_access)
                                <span style="color: var(--leaf-green); font-weight: 600;">✓ Available</span>
                            @else
                                <span style="color: #999;">✗ Not Available</span>
                            @endif
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 600; color: var(--soil-brown); margin-bottom: 5px;">Storage</div>
                        <div>
                            @if($field->has_storage)
                                <span style="color: var(--leaf-green); font-weight: 600;">✓ Available</span>
                            @else
                                <span style="color: #999;">✗ Not Available</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Notes Section -->
            @if($field->notes)
            <div class="mobile-card">
                <h3>📝 Field Notes</h3>
                <div style="background: rgba(106, 27, 154, 0.05); padding: 20px; border-radius: 8px; border-left: 4px solid var(--blackberry-purple);">
                    {{ $field->notes }}
                </div>
            </div>
            @endif
        </div>

        <!-- Right Column - Summary Info & Actions -->
        <div>
            <!-- Field Summary -->
            <div class="mobile-card">
                <h3>📋 Field Summary</h3>
                <div style="margin: 15px 0;">
                    @if($field->plant_capacity && $field->plant_capacity > 0)
                        @php
                            $utilization = ($field->plants->count() / $field->plant_capacity) * 100;
                        @endphp
                        <div style="margin-bottom: 20px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                <span style="font-weight: 600; color: var(--soil-brown);">Field Utilization</span>
                                <span style="font-weight: 600; color: var(--blackberry-purple);">{{ number_format($utilization, 1) }}%</span>
                            </div>
                            <div style="background: #E0E0E0; height: 12px; border-radius: 6px; overflow: hidden;">
                                <div style="background: linear-gradient(135deg, var(--leaf-green), var(--leaf-green-light)); height: 100%; width: {{ min(100, $utilization) }}%; border-radius: 6px; transition: width 0.3s ease;"></div>
                            </div>
                        </div>
                    @endif
                    
                    <div style="display: grid; gap: 12px;">
                        @if($field->topography)
                        <div style="display: flex; justify-content: space-between;">
                            <span style="color: var(--soil-brown);">Terrain:</span>
                            <span style="font-weight: 600;">{{ ucfirst($field->topography) }}</span>
                        </div>
                        @endif
                        @if($field->planting_pattern)
                        <div style="display: flex; justify-content: space-between;">
                            <span style="color: var(--soil-brown);">Pattern:</span>
                            <span style="font-weight: 600;">{{ $field->planting_pattern }}</span>
                        </div>
                        @endif
                        <div style="display: flex; justify-content: space-between;">
                            <span style="color: var(--soil-brown);">Created:</span>
                            <span style="font-weight: 600;">{{ date('M j, Y', strtotime($field->created_at)) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="mobile-card">
                <h3>⚡ Quick Actions</h3>
                <div style="display: grid; gap: 10px;">
                    <a href="/plants/create?field_id={{ $field->id }}" class="touch-btn touch-btn-success">🌱 Add Plants</a>
                    <a href="/soil-tests/create?field_id={{ $field->id }}" class="touch-btn touch-btn-primary">🧪 Soil Test</a>
                    <a href="/fields/{{ $field->id }}/edit" class="touch-btn touch-btn-warning">✏️ Edit Field</a>
                </div>
            </div>

            <!-- Plant Management -->
            <div class="mobile-card">
                <h3>🌱 Plant Management</h3>
                @if($field->plants && $field->plants->count() > 0)
                    <div style="margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <span style="color: var(--soil-brown);">Plants in Field:</span>
                            <span style="font-weight: 600; color: var(--blackberry-purple);">{{ $field->plants->count() }}</span>
                        </div>
                        <div style="max-height: 200px; overflow-y: auto;">
                            @foreach($field->plants->take(5) as $plant)
                            <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #E0E0E0;">
                                <div>
                                    <a href="/plants/{{ $plant->plant_id }}" style="color: var(--blackberry-purple); font-weight: 600; text-decoration: none;">
                                        {{ $plant->plant_id }}
                                    </a>
                                    <br><small style="color: #6c757d;">{{ $plant->variety->name ?? 'Unknown' }}</small>
                                </div>
                                <span class="badge badge-{{ $plant->status === 'active' ? 'success' : 'warning' }}">
                                    {{ ucfirst($plant->status) }}
                                </span>
                            </div>
                            @endforeach
                            @if($field->plants->count() > 5)
                            <div style="text-align: center; padding: 10px 0;">
                                <small style="color: #6c757d;">... and {{ $field->plants->count() - 5 }} more plants</small>
                            </div>
                            @endif
                        </div>
                    </div>
                    <a href="/plants?field_id={{ $field->id }}" class="touch-btn touch-btn-primary" style="width: 100%;">View All Plants</a>
                @else
                    <div style="text-align: center; padding: 20px 0; color: #6c757d;">
                        <p>No plants in this field yet</p>
                        <small>Add plants to start tracking growth</small>
                    </div>
                    <a href="/plants/create?field_id={{ $field->id }}" class="touch-btn touch-btn-success" style="width: 100%;">Add First Plant</a>
                @endif
            </div>

            <!-- Danger Zone -->
            <div class="mobile-card" style="border-left: 4px solid var(--berry-red);">
                <h3 style="color: var(--berry-red);">⚠️ Danger Zone</h3>
                <p style="font-size: 0.9em; color: #6c757d; margin-bottom: 15px;">
                    @if($field->plants && $field->plants->count() > 0)
                        This field has {{ $field->plants->count() }} plants. Deleting will mark the field as inactive.
                    @else
                        Permanently delete this field. This action cannot be undone.
                    @endif
                </p>
                <form method="POST" action="/fields/{{ $field->id }}" onsubmit="return confirmFieldDelete('{{ $field->name }}')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="touch-btn" style="background: linear-gradient(135deg, var(--berry-red), #D32F2F); color: white; width: 100%;">
                        🗑️ Delete Field
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Mobile Responsive: Stack columns on smaller screens -->
    <style>
        @media (max-width: 968px) {
            div[style*="grid-template-columns: 2fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
        }
    </style>
    
    <script>
        function confirmFieldDelete(fieldName) {
            return confirm(`Are you sure you want to delete field "${fieldName}"?\n\nIf this field has plants, it will be marked as inactive instead of deleted.`);
        }
    </script>


@endsection