{{-- show.blade.php --}}
@extends('layouts.app')
@section('title', 'Production Order Details')

@section('content')
<style>
    .info-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        border-left: 4px solid #007bff;
    }
    .info-card .label {
        font-size: 12px;
        color: #6c757d;
        text-transform: uppercase;
        font-weight: 600;
    }
    .info-card .value {
        font-size: 16px;
        font-weight: 500;
        color: #212529;
    }
    .info-card.danger {
        border-left-color: #dc3545;
    }
    .info-card.success {
        border-left-color: #28a745;
    }
    .info-card.warning {
        border-left-color: #ffc107;
    }
    .info-card.info {
        border-left-color: #17a2b8;
    }
    .info-card.primary {
        border-left-color: #007bff;
    }
    
    .stage-timeline {
        position: relative;
        padding-left: 20px;
    }
    .stage-timeline::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }
    .stage-item {
        position: relative;
        padding: 10px 15px;
        margin-bottom: 15px;
        background: #fff;
        border-radius: 6px;
        border: 1px solid #e9ecef;
    }
    .stage-item::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 15px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #007bff;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px #007bff;
    }
    .stage-item.completed::before {
        background: #28a745;
        box-shadow: 0 0 0 2px #28a745;
    }
    .stage-item .stage-time {
        font-size: 12px;
        color: #6c757d;
    }
    .stage-item .stage-user {
        font-size: 12px;
        color: #6c757d;
    }
    
    .progress-status {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
    }
    .progress-status.draft { background: #6c757d; color: #fff; }
    .progress-status.approved { background: #17a2b8; color: #fff; }
    .progress-status.in_production { background: #007bff; color: #fff; }
    .progress-status.on_hold { background: #ffc107; color: #212529; }
    .progress-status.completed { background: #28a745; color: #fff; }
    .progress-status.cancelled { background: #dc3545; color: #fff; }
    
    .ingredient-table th {
        background: #f8f9fa;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
    }
    .ingredient-table td {
        vertical-align: middle;
    }
    
    .badge-priority {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
    }
    .badge-priority.low { background: #28a745; color: #fff; }
    .badge-priority.medium { background: #ffc107; color: #212529; }
    .badge-priority.high { background: #fd7e14; color: #fff; }
    .badge-priority.urgent { background: #dc3545; color: #fff; }

    .main-card {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 25px;
        margin-bottom: 20px;
    }
    
    .main-card .card-header-custom {
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    
    .main-card .card-header-custom h3 {
        margin: 0;
        font-weight: 600;
        color: #212529;
    }
    
    .section-divider {
        border-top: 1px solid #e9ecef;
        margin: 25px 0;
    }
    
    .section-title-custom {
        font-weight: 600;
        font-size: 16px;
        color: #212529;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 8px;">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
        </svg>
        Production Order Details
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    {{-- Main Card with White Background --}}
    <div class="main-card">
        {{-- Production Header --}}
        <div class="card-header-custom">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                <div>
                    <h3 class="mb-1">{{ $order->production_order_number }}</h3>
                    <p class="text-muted mb-0">
                        <i class="bi bi-clock"></i> Created: {{ $order->created_at->format('d M Y, H:i') }}
                    </p>
                </div>
                <div class="text-end">
                    <span class="progress-status {{ $order->status }}">
                        {{ $order->status_label }}
                    </span>
                    <br>
                    <span class="badge-priority {{ $order->priority }}">
                        {{ $order->priority_label }}
                    </span>
                </div>
            </div>
        </div>
        
        {{-- Progress Bar --}}
        <div class="mb-4">
            <div class="d-flex justify-content-between mb-1">
                <span class="fw-medium">Progress</span>
                <span class="fw-medium">{{ number_format($order->progress_percentage, 1) }}%</span>
            </div>
            <div class="progress" style="height: 20px; background: #e9ecef;">
                <div class="progress-bar bg-success" role="progressbar" 
                     style="width: {{ $order->progress_percentage }}%;" 
                     aria-valuenow="{{ $order->progress_percentage }}" 
                     aria-valuemin="0" aria-valuemax="100">
                    {{ number_format($order->progress_percentage, 1) }}%
                </div>
            </div>
            <div class="d-flex justify-content-between mt-1">
                <span class="text-muted small">
                    <i class="bi bi-box"></i> Planned: {{ $order->planned_quantity }} {{ $order->unit_of_measure }}
                </span>
                <span class="text-muted small">
                    <i class="bi bi-check-circle"></i> Produced: {{ $order->produced_quantity }} {{ $order->unit_of_measure }}
                </span>
            </div>
        </div>
        
        <hr class="section-divider">
        
        {{-- Info Cards --}}
        <div class="row mb-4">
            <div class="col-md-3 col-sm-6">
                <div class="info-card primary">
                    <div class="label">Product</div>
                    <div class="value">{{ $order->product->name ?? 'N/A' }}</div>
                    <small class="text-muted">SKU: {{ $order->product->sku ?? 'N/A' }}</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-card info">
                    <div class="label">BOM</div>
                    <div class="value">{{ $order->billOfMaterial->bom_code ?? 'N/A' }}</div>
                    <small class="text-muted">{{ $order->billOfMaterial->name ?? '' }}</small>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-card {{ $order->planned_end_date && $order->planned_end_date < now() && $order->status != 'completed' ? 'danger' : 'success' }}">
                    <div class="label">Schedule</div>
                    <div class="value">
                        {{ $order->planned_start_date ? $order->planned_start_date->format('d M Y') : 'N/A' }}
                        @if($order->planned_end_date)
                            <br>
                            <small>→ {{ $order->planned_end_date->format('d M Y') }}</small>
                        @endif
                    </div>
                    @if($order->planned_end_date && $order->planned_end_date < now() && $order->status != 'completed')
                        <small class="text-danger">⚠ Overdue</small>
                    @endif
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="info-card warning">
                    <div class="label">Assignment</div>
                    <div class="value">{{ $order->assignedTo->username ?? 'Unassigned' }}</div>
                    <small class="text-muted">
                        @if($order->machine)
                            <i class="bi bi-cpu"></i> {{ $order->machine->name }}
                        @endif
                        @if($order->shift)
                            | <i class="bi bi-clock"></i> {{ $order->shift }}
                        @endif
                    </small>
                </div>
            </div>
        </div>
        
        <hr class="section-divider">
        
        {{-- Ingredients Table --}}
        <div class="mb-4">
            <div class="section-title-custom">
                <i class="bi bi-box-seam"></i> Raw Materials
                <span class="badge bg-secondary">{{ $order->ingredients->count() }}</span>
            </div>
            
            @if($order->ingredients->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered ingredient-table">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Raw Material</th>
                                <th class="text-center" style="width: 120px;">Planned Qty</th>
                                <th class="text-center" style="width: 120px;">Used Qty</th>
                                <th class="text-center" style="width: 100px;">Wastage %</th>
                                <th class="text-center" style="width: 80px;">Unit</th>
                                <th class="text-center" style="width: 120px;">Usage %</th>
                                <th class="text-center" style="width: 120px;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->ingredients as $index => $ingredient)
                                <tr>
                                    <td class="text-center">{{ $index + 1 }}</td>
                                    <td>
                                        {{ $ingredient->rawMaterial->name ?? 'N/A' }}
                                        @if($ingredient->alternative_material_id)
                                            <br>
                                            <small class="text-muted">
                                                <i class="bi bi-arrow-right"></i> Alt: {{ $ingredient->alternativeMaterial->name ?? 'N/A' }}
                                            </small>
                                        @endif
                                        @if($ingredient->is_optional)
                                            <span class="badge bg-warning text-dark ms-1">Optional</span>
                                        @endif
                                    </td>
                                    <td class="text-center">{{ number_format($ingredient->planned_quantity, 2) }}</td>
                                    <td class="text-center">{{ number_format($ingredient->used_quantity, 2) }}</td>
                                    <td class="text-center">{{ number_format($ingredient->wastage_percentage, 1) }}%</td>
                                    <td class="text-center">{{ $ingredient->unit_of_measure }}</td>
                                    <td class="text-center">
                                        @php
                                            $usagePercent = $ingredient->usage_percentage;
                                        @endphp
                                        <div class="progress" style="height: 15px; background: #e9ecef;">
                                            <div class="progress-bar {{ $usagePercent >= 100 ? 'bg-success' : ($usagePercent >= 75 ? 'bg-info' : ($usagePercent >= 50 ? 'bg-warning' : 'bg-secondary')) }}" 
                                                 role="progressbar" 
                                                 style="width: {{ min($usagePercent, 100) }}%;" 
                                                 aria-valuenow="{{ $usagePercent }}" 
                                                 aria-valuemin="0" 
                                                 aria-valuemax="100">
                                                {{ number_format($usagePercent, 1) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if($ingredient->used_quantity >= $ingredient->planned_quantity)
                                            <span class="badge bg-success">Fulfilled</span>
                                        @elseif($ingredient->used_quantity > 0)
                                            <span class="badge bg-warning text-dark">Partial</span>
                                        @else
                                            <span class="badge bg-secondary">Pending</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="table-active">
                                <td colspan="2" class="text-end"><strong>Totals</strong></td>
                                <td class="text-center"><strong>{{ number_format($order->ingredients->sum('planned_quantity'), 2) }}</strong></td>
                                <td class="text-center"><strong>{{ number_format($order->ingredients->sum('used_quantity'), 2) }}</strong></td>
                                <td colspan="4"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> No ingredients added to this production.
                </div>
            @endif
        </div>
        
        <hr class="section-divider">
        
        {{-- Stages / Timeline --}}
        @if($order->stages->count() > 0)
            <div class="mb-4">
                <div class="section-title-custom">
                    <i class="bi bi-clock-history"></i> Activity Timeline
                </div>
                <div class="stage-timeline">
                    @foreach($order->stages as $stage)
                        <div class="stage-item {{ $loop->first ? 'completed' : '' }}">
                            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                                <div>
                                    <strong>{{ ucfirst(str_replace('_', ' ', $stage->stage)) }}</strong>
                                    @if($stage->notes)
                                        <p class="mb-0 text-muted small">{{ $stage->notes }}</p>
                                    @endif
                                </div>
                                <div class="text-end">
                                    <div class="stage-time">
                                        <i class="bi bi-calendar"></i> {{ $stage->created_at->format('d M Y, H:i') }}
                                    </div>
                                    <div class="stage-user">
                                        <i class="bi bi-person"></i> {{ $stage->user->username ?? 'System' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            
            <hr class="section-divider">
        @endif
        
        {{-- Notes --}}
        @if($order->notes)
            <div class="mb-4">
                <div class="section-title-custom">
                    <i class="bi bi-sticky"></i> Notes
                </div>
                <div class="p-3 bg-light rounded">
                    {{ $order->notes }}
                </div>
            </div>
            
            <hr class="section-divider">
        @endif
        
        {{-- Schedule Info --}}
        @if($order->schedule)
            <div class="mb-4">
                <div class="section-title-custom">
                    <i class="bi bi-calendar-event"></i> Schedule Information
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-card primary">
                            <div class="label">Schedule Code</div>
                            <div class="value">{{ $order->schedule->schedule_code }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-card info">
                            <div class="label">Schedule Status</div>
                            <div class="value">
                                <span class="progress-status {{ $order->schedule->status }}">
                                    {{ ucfirst($order->schedule->status) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <hr class="section-divider">
        @endif
        
        {{-- Actions --}}
        <div class="d-flex flex-wrap gap-2 mt-3 pt-3">
            @if(in_array($order->status, ['draft', 'approved']))
                <a href="{{ route('manufacturing.production.orders.edit', $order->id) }}" class="btn btn-warning">
                    <i class="bi bi-pencil"></i> Edit Production
                </a>
            @endif
            
            @if($order->status == 'draft')
                <button type="button" class="btn btn-primary" onclick="updateStatus('approved')">
                    <i class="bi bi-check-circle"></i> Approve
                </button>
            @endif
            
            @if($order->status == 'approved')
                <button type="button" class="btn btn-primary" onclick="updateStatus('in_production')">
                    <i class="bi bi-play-circle"></i> Start Production
                </button>
            @endif
            
            @if($order->status == 'in_production')
                <button type="button" class="btn btn-success" onclick="updateStatus('completed')">
                    <i class="bi bi-check2-circle"></i> Complete
                </button>
                <button type="button" class="btn btn-warning" onclick="updateStatus('on_hold')">
                    <i class="bi bi-pause-circle"></i> Hold
                </button>
            @endif
            
            @if($order->status == 'on_hold')
                <button type="button" class="btn btn-primary" onclick="updateStatus('in_production')">
                    <i class="bi bi-play-circle"></i> Resume
                </button>
            @endif
            
           
            
            <a href="{{ route('manufacturing.production.orders.index') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Back to List
            </a>
        </div>
    </div>
</section>

<script>
function updateStatus(status) {
    if (!confirm('Are you sure you want to change status to "' + status + '"?')) {
        return;
    }
    
    const notes = prompt('Enter notes for this status change (optional):');
    
    fetch('{{ route("manufacturing.production.orders.update-status", $order->id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            status: status,
            notes: notes || ''
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Status updated successfully!');
            window.location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while updating status.');
    });
}
</script>
@endsection