<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    @hotelSettings
    <title>{{ $item->name }} - Transaction History</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-content {
            padding: 20px;
            margin-top: 70px;
        }
        .dashboard-card {
            border-radius: 12px;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        .card-header {
            background: linear-gradient(90deg, #114b5f 0%, #1a936f 100%);
            color: white;
            border-radius: 12px 12px 0 0 !important;
            padding: 15px 25px;
        }
        .item-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <div class="container-fluid">
            <!-- Header -->
            <div class="row mb-4">
                <div class="col">
                    <h2>
                        <i class="fas fa-history me-2"></i>
                        {{ $item->name }} - Transaction History
                    </h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('inventory.index') }}">Inventory</a></li>
                            <li class="breadcrumb-item"><a href="#">{{ $item->name }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Transactions</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <!-- Item Info -->
            <div class="item-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h4>{{ $item->name }}</h4>
                        <p class="mb-0 text-muted">
                            <strong>SKU:</strong> {{ $item->sku ?? 'N/A' }} | 
                            <strong>Category:</strong> {{ $item->category }} | 
                            <strong>Current Stock:</strong> {{ $item->quantity }}
                        </p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <a href="{{ route('inventory.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Inventory
                        </a>
                    </div>
                </div>
            </div>

            <!-- Transactions Table -->
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="m-0">
                        <i class="fas fa-exchange-alt me-2"></i>Item Transactions
                    </h5>
                </div>
                <div class="card-body">
                    @if($transactions->isEmpty())
                        <div class="text-center py-5">
                            <i class="fas fa-history fa-4x text-muted mb-4"></i>
                            <h4>No Transactions Found</h4>
                            <p class="text-muted">No transaction history found for this item.</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Type</th>
                                        <th>Quantity Change</th>
                                        <th>Reference</th>
                                        <th>Performed By</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($transactions as $transaction)
                                        <tr>
                                            <td>{{ optional($transaction->created_at)->format('M d, Y H:i') }}</td>
                                            <td>
                                                @if($transaction->movement_type == 'in')
                                                    <span class="badge bg-success">Stock In</span>
                                                @elseif($transaction->movement_type == 'out')
                                                    <span class="badge bg-danger">Stock Out</span>
                                                @elseif($transaction->movement_type == 'return')
                                                    <span class="badge bg-secondary">Return / Exception</span>
                                                @else
                                                    <span class="badge bg-warning text-dark">Adjustment</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($transaction->quantity_change > 0)
                                                    <span class="text-success">+{{ $transaction->quantity_change }}</span>
                                                @else
                                                    <span class="text-danger">{{ $transaction->quantity_change }}</span>
                                                @endif
                                            </td>
                                            <td>{{ $transaction->reference_number ?? 'N/A' }}</td>
                                            <td>{{ $transaction->performer->full_name ?? trim(($transaction->performer->first_name ?? '') . ' ' . ($transaction->performer->last_name ?? '')) ?: 'System' }}</td>
                                            <td>{{ $transaction->notes ?? '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
 
<script src="{{ asset('js/theme-applier.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

