{{-- index.blade.php --}}
@extends('layouts.app')
@section('title', 'Production Orders')

@section('content')
<style>
    .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
    }
    .status-badge.draft { background: #6c757d; color: #fff; }
    .status-badge.approved { background: #17a2b8; color: #fff; }
    .status-badge.in_production { background: #007bff; color: #fff; }
    .status-badge.on_hold { background: #ffc107; color: #212529; }
    .status-badge.completed { background: #28a745; color: #fff; }
    .status-badge.cancelled { background: #dc3545; color: #fff; }
    
    .priority-badge {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        display: inline-block;
    }
    .priority-badge.low { background: #28a745; color: #fff; }
    .priority-badge.medium { background: #ffc107; color: #212529; }
    .priority-badge.high { background: #fd7e14; color: #fff; }
    .priority-badge.urgent { background: #dc3545; color: #fff; }
    
    .progress-bar-custom {
        height: 6px;
        border-radius: 3px;
        background: #e9ecef;
        overflow: hidden;
        margin-bottom: 4px;
    }
    .progress-bar-custom .bar {
        height: 100%;
        border-radius: 3px;
        background: #28a745;
        transition: width 0.3s ease;
    }
    
    /* Table Styles */
    .table-production {
        background: #ffffff !important;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .table-production thead {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
    }
    .table-production thead th {
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        color: #495057;
        padding: 12px 10px;
        border-bottom: none;
        white-space: nowrap;
    }
    .table-production tbody td {
        padding: 12px 10px;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
    }
    .table-production tbody tr:hover {
        background: #f8f9fa !important;
    }
    .table-production tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* Action Buttons */
    .btn-action {
        padding: 5px 12px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 4px;
        border: none;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .btn-action i {
        font-size: 14px;
    }
    .btn-action.btn-view {
        background: #17a2b8;
        color: #ffffff;
    }
    .btn-action.btn-view:hover {
        background: #138496;
        color: #ffffff;
    }
    .btn-action.btn-edit {
        background: #ffc107;
        color: #212529;
    }
    .btn-action.btn-edit:hover {
        background: #e0a800;
        color: #212529;
    }
    .btn-action.btn-delete {
        background: #dc3545;
        color: #ffffff;
    }
    .btn-action.btn-delete:hover {
        background: #c82333;
        color: #ffffff;
    }
    
    .btn-action-wrapper {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }
    
    /* Stats Cards */
    .stat-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 15px 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
        border-left: 4px solid #007bff;
    }
    .stat-card:hover {
        transform: translateY(-2px);
    }
    .stat-card .stat-label {
        font-size: 13px;
        color: #6c757d;
        font-weight: 500;
        margin-bottom: 4px;
    }
    .stat-card .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #212529;
    }
    .stat-card.stat-total { border-left-color: #6c757d; }
    .stat-card.stat-draft { border-left-color: #6c757d; }
    .stat-card.stat-approved { border-left-color: #17a2b8; }
    .stat-card.stat-production { border-left-color: #007bff; }
    .stat-card.stat-completed { border-left-color: #28a745; }
    .stat-card.stat-hold { border-left-color: #ffc107; }
    
    /* Card Header */
    .card-header-custom {
        background: #ffffff;
        padding: 15px 20px;
        border-bottom: 2px solid #e9ecef;
        border-radius: 8px 8px 0 0;
    }
    .card-header-custom h5 {
        font-weight: 600;
        color: #212529;
        margin: 0;
    }
    
    /* Empty State */
    .empty-state {
        padding: 60px 20px;
        text-align: center;
    }
    .empty-state .empty-icon {
        font-size: 60px;
        color: #dee2e6;
        margin-bottom: 15px;
    }
    .empty-state h5 {
        color: #495057;
        margin-bottom: 10px;
    }
    .empty-state p {
        color: #6c757d;
        margin-bottom: 20px;
    }
    
    /* Filter Section */
    .filter-section {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .filter-section .form-control,
    .filter-section .form-select {
        background: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }
    .filter-section .form-control:focus,
    .filter-section .form-select:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    /* Pagination */
    .pagination-custom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        border-top: 1px solid #e9ecef;
    }
    .pagination-custom .pagination-info {
        color: #6c757d;
        font-size: 14px;
    }
    .pagination-custom .pagination-links .pagination {
        margin: 0;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .stat-card .stat-value {
            font-size: 22px;
        }
        .btn-action {
            font-size: 12px;
            padding: 4px 10px;
        }
        .btn-action i {
            font-size: 12px;
        }
    }
</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 Orders
    </h1>
</section>

<section class="content">
    @include('manufacturing.partials.navigation')
    
    {{-- Stats Cards --}}
    <div class="row mb-4">
        @php
            $total = array_sum($statusCounts);
        @endphp
        <div class="col-md-2 col-6">
            <div class="stat-card stat-total">
                <div class="stat-label">Total Productions</div>
                <div class="stat-value">{{ $total }}</div>
            </div>
        </div>
        <div class="col-md-2 col-6">
            <div class="stat-card stat-draft">
                <div class="stat-label">Draft</div>
                <div class="stat-value">{{ $statusCounts['draft'] ?? 0 }}</div>
            </div>
        </div>
        <div class="col-md-2 col-6">
            <div class="stat-card stat-approved">
                <div class="stat-label">Approved</div>
                <div class="stat-value">{{ $statusCounts['approved'] ?? 0 }}</div>
            </div>
        </div>
        <div class="col-md-2 col-6">
            <div class="stat-card stat-production">
                <div class="stat-label">In Production</div>
                <div class="stat-value">{{ $statusCounts['in_production'] ?? 0 }}</div>
            </div>
        </div>
        <div class="col-md-2 col-6">
            <div class="stat-card stat-completed">
                <div class="stat-label">Completed</div>
                <div class="stat-value">{{ $statusCounts['completed'] ?? 0 }}</div>
            </div>
        </div>
        <div class="col-md-2 col-6">
            <div class="stat-card stat-hold">
                <div class="stat-label">On Hold</div>
                <div class="stat-value">{{ $statusCounts['on_hold'] ?? 0 }}</div>
            </div>
        </div>
    </div>
    <br>
    <div class="card" style="background: transparent; border: none; box-shadow: none;">
        <div class="card-header-custom" style="background: #ffffff; padding: 15px 20px; border-bottom: 2px solid #e9ecef; border-radius: 8px 8px 0 0;">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h5 class="mb-0">
                    <i class="bi bi-list-ul"></i> Production List
                </h5>
                <a href="{{ route('manufacturing.production.orders.create') }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-circle"></i> Create Production
                </a>
            </div>
        </div>
        
        <div class="card-body" style="background: #ffffff; border-radius: 0 0 8px 8px; padding: 20px;">
            {{-- Filters --}}
            <div class="filter-section">
                <form method="GET" class="row g-2 align-items-end">
                    <div class="col-md-3 col-sm-6">
                        <label class="form-label small text-muted">Search</label>
                        <input type="text" name="search" class="form-control form-control-sm" placeholder="Search productions..." value="{{ request('search') }}">
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <label class="form-label small text-muted">Status</label>
                        <select name="status" class="form-select form-select-sm">
                            <option value="">All Status</option>
                            @foreach($statuses as $key => $label)
                                <option value="{{ $key }}" {{ request('status') == $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <label class="form-label small text-muted">Priority</label>
                        <select name="priority" class="form-select form-select-sm">
                            <option value="">All Priority</option>
                            @foreach($priorities as $key => $label)
                                <option value="{{ $key }}" {{ request('priority') == $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <label class="form-label small text-muted">From Date</label>
                        <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <label class="form-label small text-muted">To Date</label>
                        <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
                    </div>
                    <div class="col-md-1 col-sm-6">
                        <button type="submit" class="btn btn-primary btn-sm w-100">
                            <i class="bi bi-search"></i> Filter
                        </button>
                    </div>
                    <div class="col-md-1 col-sm-6">
                        <a href="{{ route('manufacturing.production.orders.index') }}" class="btn btn-secondary btn-sm w-100">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
            
            {{-- Table --}}
            <div class="table-responsive">
                <table class="table table-production table-hover">
                    <thead>
                        <tr>
                            <th style="min-width: 120px;">Production #</th>
                            <th style="min-width: 120px;">Product</th>
                            <th style="min-width: 80px;">BOM</th>
                            <th style="min-width: 100px;">Planned Qty</th>
                            <th style="min-width: 100px;">Produced</th>
                            <th style="min-width: 120px;">Progress</th>
                            <th style="min-width: 80px;">Priority</th>
                            <th style="min-width: 100px;">Status</th>
                            <th style="min-width: 130px;">Dates</th>
                            <th style="min-width: 180px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($orders as $order)
                            <tr>
                                <td>
                                    <a href="{{ route('manufacturing.production.orders.show', $order->id) }}" class="fw-bold text-primary text-decoration-none">
                                        {{ $order->production_order_number }}
                                    </a>
                                    @if($order->schedule)
                                        <br>
                                        <small class="text-muted">{{ $order->schedule->schedule_code }}</small>
                                    @endif
                                </td>
                                <td>
                                    <span class="fw-medium">{{ $order->product->name ?? 'N/A' }}</span>
                                    <br>
                                    <small class="text-muted">SKU: {{ $order->product->sku ?? 'N/A' }}</small>
                                </td>
                                <td>
                                    <span class="small">{{ $order->billOfMaterial->bom_code ?? 'N/A' }}</span>
                                </td>
                                <td>
                                    <span class="fw-medium">{{ number_format($order->planned_quantity, 2) }}</span>
                                    <br>
                                    <small class="text-muted">{{ $order->unit_of_measure }}</small>
                                </td>
                                <td>
                                    <span class="fw-medium">{{ number_format($order->produced_quantity, 2) }}</span>
                                    <br>
                                    <small class="text-muted">{{ $order->unit_of_measure }}</small>
                                </td>
                                <td>
                                    <div class="progress-bar-custom">
                                        <div class="bar" style="width: {{ $order->progress_percentage }}%;"></div>
                                    </div>
                                    <small class="fw-medium">{{ number_format($order->progress_percentage, 1) }}%</small>
                                </td>
                                <td>
                                    <span class="priority-badge {{ $order->priority }}">
                                        {{ $order->priority_label }}
                                    </span>
                                </td>
                                <td>
                                    <span class="status-badge {{ $order->status }}">
                                        {{ $order->status_label }}
                                    </span>
                                </td>
                                <td>
                                    <div>
                                        <small>
                                            <i class="bi bi-calendar-start"></i>
                                            {{ $order->planned_start_date ? $order->planned_start_date->format('d M Y') : 'N/A' }}
                                        </small>
                                    </div>
                                    @if($order->planned_end_date)
                                        <div>
                                            <small>
                                                <i class="bi bi-calendar-end"></i>
                                                {{ $order->planned_end_date->format('d M Y') }}
                                            </small>
                                        </div>
                                    @endif
                                    @if($order->planned_end_date && $order->planned_end_date < now() && $order->status != 'completed' && $order->status != 'cancelled')
                                        <div>
                                            <span class="text-danger small">
                                                <i class="bi bi-exclamation-triangle"></i> Overdue
                                            </span>
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-action-wrapper">
                                        <a href="{{ route('manufacturing.production.orders.show', $order->id) }}" 
                                           class="btn-action btn-view" 
                                           title="View Production Details">
                                            <i class="bi bi-eye"></i> View
                                        </a>
                                        
                                        @if(in_array($order->status, ['draft', 'approved']))
                                            <a href="{{ route('manufacturing.production.orders.edit', $order->id) }}" 
                                               class="btn-action btn-edit" 
                                               title="Edit Production">
                                                <i class="bi bi-pencil"></i> Edit
                                            </a>
                                        @endif
                                        
                                        @if(in_array($order->status, ['draft', 'cancelled']))
                                            <form action="{{ route('manufacturing.production.orders.destroy', $order->id) }}" 
                                                  method="POST" 
                                                  class="d-inline" 
                                                  onsubmit="return confirm('Are you sure you want to delete this production?\n\nProduction: {{ $order->production_order_number }}\nStatus: {{ $order->status_label }}\nProduct: {{ $order->product->name ?? 'N/A' }}')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete" title="Delete Production">
                                                    <i class="bi bi-trash"></i> Delete
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10">
                                    <div class="empty-state">
                                        <div class="empty-icon">
                                            <i class="bi bi-inbox"></i>
                                        </div>
                                        <h5>No Production Records Found</h5>
                                        <p>Start by creating your first production record.</p>
                                        <a href="{{ route('manufacturing.production.orders.create') }}" class="btn btn-primary">
                                            <i class="bi bi-plus-circle"></i> Create First Production
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            {{-- Pagination --}}
            @if($orders->hasPages())
                <div class="pagination-custom">
                    <div class="pagination-info">
                        Showing {{ $orders->firstItem() ?? 0 }} to {{ $orders->lastItem() ?? 0 }} of {{ $orders->total() }} results
                    </div>
                    <div class="pagination-links">
                        {{ $orders->appends(request()->query())->links() }}
                    </div>
                </div>
            @else
                <div class="pagination-custom">
                    <div class="pagination-info">
                        Showing {{ $orders->total() }} results
                    </div>
                </div>
            @endif
        </div>
    </div>
</section>

@push('scripts')
<script>
    // Auto-submit filter on change for select inputs
    document.querySelectorAll('.filter-section select').forEach(function(select) {
        select.addEventListener('change', function() {
            this.closest('form').submit();
        });
    });
    
    // Add loading state to filter button
    document.querySelector('.filter-section form').addEventListener('submit', function(e) {
        const btn = this.querySelector('button[type="submit"]');
        if (btn) {
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';
            btn.disabled = true;
        }
    });
</script>
@endpush
@endsection