@extends('layouts.app')

@section('page-title', 'Detail Item Stok - ' . $stock->name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">{{ $stock->name }}</h1>
                    <p class="text-muted mb-0">{{ ucfirst($stock->category) }} • {{ $stock->unit }}</p>
                </div>
                <div class="btn-group">
                    <a href="{{ route('stock.edit', $stock) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i>Edit
                    </a>
                    <a href="{{ route('stock.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Stock Information -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Informasi Stok</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-primary mb-1">{{ $stock->current_stock }}</h3>
                                <small class="text-muted">Stok Saat Ini</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-warning mb-1">{{ $stock->min_stock }}</h3>
                                <small class="text-muted">Stok Minimum</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <strong>Status:</strong>
                        @if($stock->stock_status == 'out_of_stock')
                            <span class="badge bg-danger">{{ $stock->stock_status_text }}</span>
                        @elseif($stock->stock_status == 'low_stock')
                            <span class="badge bg-warning">{{ $stock->stock_status_text }}</span>
                        @else
                            <span class="badge bg-success">{{ $stock->stock_status_text }}</span>
                        @endif
                    </div>

                    <div class="mb-3">
                        <strong>Kategori:</strong> {{ ucfirst($stock->category) }}
                    </div>

                    <div class="mb-3">
                        <strong>Satuan:</strong> {{ $stock->unit }}
                    </div>

                    @if($stock->barcode)
                    <div class="mb-3">
                        <strong>Barcode:</strong> {{ $stock->barcode }}
                    </div>
                    @endif

                    @if($stock->supplier)
                    <div class="mb-3">
                        <strong>Supplier:</strong> {{ $stock->supplier }}
                    </div>
                    @endif

                    @if($stock->description)
                    <div class="mb-3">
                        <strong>Deskripsi:</strong>
                        <p class="mb-0">{{ $stock->description }}</p>
                    </div>
                    @endif

                    <div class="mb-3">
                        <strong>Status:</strong>
                        @if($stock->is_active)
                            <span class="badge bg-success">Aktif</span>
                        @else
                            <span class="badge bg-secondary">Tidak Aktif</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Aksi Cepat</h5>
                </div>
                <div class="card-body">
                    <button class="btn btn-success w-100 mb-2" data-bs-toggle="modal" data-bs-target="#addStockModal">
                        <i class="fas fa-plus me-2"></i>Tambah Stok
                    </button>
                    <button class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#adjustStockModal">
                        <i class="fas fa-edit me-2"></i>Sesuaikan Stok
                    </button>
                </div>
            </div>
        </div>

        <!-- Price Information -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Informasi Harga</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="text-center">
                                <h4 class="text-success mb-1">Rp {{ number_format($stock->purchase_price, 0, ',', '.') }}</h4>
                                <small class="text-muted">Harga Beli</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h4 class="text-primary mb-1">Rp {{ number_format($stock->selling_price, 0, ',', '.') }}</h4>
                                <small class="text-muted">Harga Jual</small>
                            </div>
                        </div>
                    </div>

                    <div class="text-center">
                        <h3 class="text-info mb-1">{{ number_format($stock->profit_margin, 1) }}%</h3>
                        <small class="text-muted">Margin Keuntungan</small>
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-6">
                            <strong>Keuntungan per Unit:</strong>
                        </div>
                        <div class="col-6 text-end">
                            <strong class="text-success">
                                Rp {{ number_format($stock->selling_price - $stock->purchase_price, 0, ',', '.') }}
                            </strong>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6">
                            <strong>Total Nilai Stok:</strong>
                        </div>
                        <div class="col-6 text-end">
                            <strong class="text-primary">
                                Rp {{ number_format($stock->current_stock * $stock->purchase_price, 0, ',', '.') }}
                            </strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stock Movements -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Riwayat Pergerakan Stok</h5>
                </div>
                <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                    @if($movements->count() > 0)
                        @foreach($movements->take(10) as $movement)
                        <div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
                            <div>
                                <div class="fw-bold">
                                    @if($movement->type == 'in')
                                        <span class="text-success">+{{ $movement->quantity }}</span>
                                    @elseif($movement->type == 'out')
                                        <span class="text-danger">{{ $movement->quantity }}</span>
                                    @else
                                        <span class="text-warning">{{ $movement->quantity_formatted }}</span>
                                    @endif
                                    {{ $stock->unit }}
                                </div>
                                <small class="text-muted">
                                    {{ $movement->type_text }} • {{ $movement->created_at->format('d/m/Y H:i') }}
                                </small>
                                @if($movement->notes)
                                    <br><small class="text-muted">{{ $movement->notes }}</small>
                                @endif
                            </div>
                            <div class="text-end">
                                <small class="text-muted">
                                    {{ $movement->stock_after }} {{ $stock->unit }}
                                </small>
                            </div>
                        </div>
                        @endforeach
                        
                        @if($movements->count() > 10)
                            <div class="text-center mt-3">
                                <a href="{{ route('stock.show', $stock) }}" class="btn btn-sm btn-outline-primary">
                                    Lihat Semua ({{ $movements->total() }})
                                </a>
                            </div>
                        @endif
                    @else
                        <div class="text-center text-muted">
                            <i class="fas fa-history fa-2x mb-2"></i>
                            <p>Belum ada pergerakan stok</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Stock Movements Table -->
    @if($movements->count() > 0)
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Riwayat Lengkap Pergerakan Stok</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Tanggal</th>
                                    <th>Tipe</th>
                                    <th>Jumlah</th>
                                    <th>Stok Sebelum</th>
                                    <th>Stok Sesudah</th>
                                    <th>Referensi</th>
                                    <th>Catatan</th>
                                    <th>User</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($movements as $movement)
                                <tr>
                                    <td>{{ $movement->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        @if($movement->type == 'in')
                                            <span class="badge bg-success">{{ $movement->type_text }}</span>
                                        @elseif($movement->type == 'out')
                                            <span class="badge bg-danger">{{ $movement->type_text }}</span>
                                        @else
                                            <span class="badge bg-warning">{{ $movement->type_text }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($movement->quantity >= 0)
                                            <span class="text-success">+{{ $movement->quantity }}</span>
                                        @else
                                            <span class="text-danger">{{ $movement->quantity }}</span>
                                        @endif
                                        {{ $stock->unit }}
                                    </td>
                                    <td>{{ $movement->stock_before }} {{ $stock->unit }}</td>
                                    <td>{{ $movement->stock_after }} {{ $stock->unit }}</td>
                                    <td>
                                        @if($movement->reference_type)
                                            <small class="text-muted">{{ ucfirst($movement->reference_type) }}</small>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>{{ $movement->notes ?? '-' }}</td>
                                    <td>{{ $movement->user->name ?? 'N/A' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                        {{ $movements->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Add Stock Modal -->
<div class="modal fade" id="addStockModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Stok</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('stock.add-stock', $stock) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="quantity" class="form-label">Jumlah yang Ditambahkan</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" min="1" required>
                        <div class="form-text">Satuan: {{ $stock->unit }}</div>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Catatan</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Contoh: Pembelian dari supplier ABC"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Tambah Stok</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Adjust Stock Modal -->
<div class="modal fade" id="adjustStockModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sesuaikan Stok</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('stock.adjust-stock', $stock) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="new_stock" class="form-label">Stok Baru</label>
                        <input type="number" class="form-control" id="new_stock" name="new_stock" 
                               value="{{ $stock->current_stock }}" min="0" required>
                        <div class="form-text">Satuan: {{ $stock->unit }}</div>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Catatan</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" 
                                  placeholder="Contoh: Stock opname, kerusakan, dll"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Sesuaikan Stok</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection