@extends('layouts.app')
@section('title', 'BOM Pick List Details')

@section('content')
<div class="page-content">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h6 class="card-title">BOM Pick List Details</h6>
                        <div>
                            <a href="{{ route('warehouses.bom-pick-list.index') }}" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-arrow-left me-1"></i>Back to List
                            </a>
                            @if($bomPickList->status === 'pending')
                                <button class="btn btn-success" onclick="updateStatus('in_progress')">
                                    <i class="fas fa-play me-1"></i>Start Pick List
                                </button>
                            @elseif($bomPickList->status === 'in_progress')
                                <button class="btn btn-primary" onclick="updateStatus('completed')">
                                    <i class="fas fa-check me-1"></i>Complete Pick List
                                </button>
                            @endif
                        </div>
                    </div>

                    <!-- Pick List Info -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title text-white">M-Number</h6>
                                            <h4 class="mb-0">{{ $bomPickList->m_number }}</h4>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-hashtag fa-2x opacity-75"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title text-white">Status</h6>
                                            <h4 class="mb-0">{{ ucfirst(str_replace('_', ' ', $bomPickList->status)) }}</h4>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-flag fa-2x opacity-75"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title text-white">Finished Goods</h6>
                                            <h4 class="mb-0">{{ $bomPickList->manufacturingBom->finishedGoods->name ?? 'N/A' }}</h4>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-box fa-2x opacity-75"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1">
                                            <h6 class="card-title text-white">Planned Output</h6>
                                            <h4 class="mb-0">{{ $bomPickList->manufacturingRun->planned_output_qty }}</h4>
                                            <small>{{ $bomPickList->manufacturingBom->basic_unit }}</small>
                                        </div>
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-calculator fa-2x opacity-75"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Assigned Employees -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">Assigned Employees/Workers</h6>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Code</th>
                                            <th>Employee Type</th>
                                            <th>Team</th>
                                            <th>Status</th>
                                            <th>Assigned By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($bomPickList->employees as $employee)
                                        <tr>
                                            <td>{{ $employee->employee->name }}</td>
                                            <td>{{ $employee->employee->code }}</td>
                                            <td>
                                                <span class="badge bg-info">{{ ucfirst($employee->employee->employee_type) }}</span>
                                            </td>
                                            <td>{{ $employee->employee->team_name ?? '-' }}</td>
                                            <td>
                                                @if($employee->is_checked)
                                                    <span class="badge bg-success">Completed</span>
                                                @else
                                                    <span class="badge bg-warning">Pending</span>
                                                @endif
                                            </td>
                                            <td>{{ $employee->assignedBy->name ?? 'N/A' }}</td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">No employees assigned</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Required Ingredients -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">Required Ingredients</h6>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Ingredient</th>
                                            <th>SKU</th>
                                            <th>Base Quantity</th>
                                            <th>Scaling Factor</th>
                                            <th>Required Quantity</th>
                                            <th>Unit</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($bomPickList->manufacturingBom->ingredients as $ingredient)
                                        <tr>
                                            <td>{{ $ingredient->ingredientAccount->name }}</td>
                                            <td>{{ $ingredient->ingredientAccount->sku ?? '-' }}</td>
                                            <td>{{ number_format($ingredient->quantity_required, 4) }}</td>
                                            <td>{{ $bomPickList->manufacturingRun->scaling_factor }}</td>
                                            <td>
                                                <strong>{{ number_format($ingredient->quantity_required * $bomPickList->manufacturingRun->scaling_factor, 4) }}</strong>
                                            </td>
                                            <td>{{ $ingredient->unit }}</td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted">No ingredients found</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    @if($bomPickList->notes)
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">Notes</h6>
                            <div class="card">
                                <div class="card-body">
                                    <p class="mb-0">{{ $bomPickList->notes }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Pick List Info -->
                    <div class="row">
                        <div class="col-12">
                            <h6 class="mb-3">Pick List Information</h6>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="list-unstyled">
                                                <li><strong>Created By:</strong> {{ $bomPickList->createdBy->name ?? 'N/A' }}</li>
                                                <li><strong>Created At:</strong> {{ $bomPickList->created_at->format('M d, Y H:i') }}</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <ul class="list-unstyled">
                                                @if($bomPickList->updatedBy)
                                                <li><strong>Updated By:</strong> {{ $bomPickList->updatedBy->name }}</li>
                                                <li><strong>Updated At:</strong> {{ $bomPickList->updated_at->format('M d, Y H:i') }}</li>
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('custom-scripts')
<script>
function updateStatus(status) {
    if (confirm('Are you sure you want to update the status to ' + status.replace('_', ' ') + '?')) {
        $.ajax({
            url: "{{ route('warehouses.bom-pick-list.update-status', $bomPickList->id) }}",
            type: 'PUT',
            data: {
                status: status,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    alert('Status updated successfully');
                    location.reload();
                } else {
                    alert('Error updating status');
                }
            },
            error: function() {
                alert('Error updating status');
            }
        });
    }
}
</script>
@endpush
