@extends('layout.app')

@section('title', 'Detail Material - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Detail Material" 
    :breadcrumbs="[
        ['name' => 'Material', 'url' => route('material.index')],
        ['name' => 'Detail']
    ]"
>
    <a href="{{ route('material.stock-in.with-material', $material) }}" class="btn btn-sm bg-gradient-success mb-0 me-2">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">add</i> Barang Masuk
    </a>
    <a href="{{ route('material.stock-out', $material) }}" class="btn btn-sm bg-gradient-warning mb-0 me-2">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">remove</i> Barang Keluar
    </a>
    <a href="{{ route('material.edit', $material) }}" class="btn btn-sm bg-gradient-warning mb-0 me-2">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
    </a>
    <a href="{{ route('material.index') }}" class="btn btn-sm bg-gradient-secondary mb-0">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">arrow_back</i> Kembali
    </a>
</x-material-page-header>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <!-- Material Info -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Material</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-md-6">
                            @if($material->foto)
                            <div class="mb-3 text-center">
                                <img src="{{ asset('uploads/materials/' . $material->foto) }}" 
                                     alt="{{ $material->nama_barang }}" 
                                     class="img-fluid rounded"
                                     style="max-width: 300px;">
                            </div>
                            @endif
                            <div class="mb-3">
                                <strong>Kode Barang:</strong>
                                <div class="text-muted h5">
                                    <span class="badge badge-sm bg-gradient-primary">{{ $material->kode_barang }}</span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <strong>Nama Barang:</strong>
                                <div class="text-muted h5">{{ $material->nama_barang }}</div>
                            </div>
                            <div class="mb-3">
                                <strong>Kategori:</strong>
                                <div>
                                    <span class="badge badge-sm bg-gradient-info">{{ $material->kategori }}</span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <strong>Merk:</strong>
                                <div class="text-muted">{{ $material->merk ?? '-' }}</div>
                            </div>
                            <div class="mb-3">
                                <strong>Spesifikasi:</strong>
                                <div class="text-muted">{{ $material->spesifikasi ?? '-' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <strong>Satuan:</strong>
                                <div class="text-muted">{{ $material->satuan }}</div>
                            </div>
                            <div class="mb-3">
                                <strong>Harga Beli:</strong>
                                <div class="text-muted h5">{{ $material->formatted_harga_beli }}</div>
                            </div>
                            <div class="mb-3">
                                <strong>Stok Minimal:</strong>
                                <div class="text-muted">{{ $material->stok_minimal }} {{ $material->satuan }}</div>
                            </div>
                            <div class="mb-3">
                                <strong>Lokasi Gudang:</strong>
                                <div class="text-muted">{{ $material->lokasi_gudang ?? '-' }}</div>
                            </div>
                            <div class="mb-3">
                                <strong>Status:</strong>
                                <div>
                                    <span class="badge badge-sm bg-gradient-{{ $material->aktif ? 'success' : 'danger' }}">
                                        {{ $material->aktif ? 'Aktif' : 'Nonaktif' }}
                                    </span>
                                </div>
                            </div>
                            @if($material->deskripsi)
                            <div class="mb-3">
                                <strong>Deskripsi:</strong>
                                <div class="text-muted">{{ $material->deskripsi }}</div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Stock Statistics -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3 bg-gradient-info text-white">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">bar_chart</i> Statistik Stok
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center">
                                <h2 class="mb-0 text-primary">{{ $currentStok }}</h2>
                                <small class="text-muted">Stok Saat Ini</small>
                                <div class="mt-2">
                                    <span class="badge badge-sm bg-gradient-{{ $material->stok_status_badge_class }}">
                                        {{ $material->stok_status }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <h2 class="mb-0 text-success">{{ $totalMasuk }}</h2>
                                <small class="text-muted">Total Masuk</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <h2 class="mb-0 text-danger">{{ $totalKeluar }}</h2>
                                <small class="text-muted">Total Keluar</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Stock History -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Riwayat Transaksi Stok</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                            <tr>
                                <th scope="col">Tanggal</th>
                                <th scope="col">Tipe</th>
                                <th scope="col">Jumlah</th>
                                <th scope="col">Stok Sebelum</th>
                                <th scope="col">Stok Sesudah</th>
                                <th scope="col">Sumber/Tujuan</th>
                                <th scope="col">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($material->stocks as $stock)
                            <tr>
                                <td>{{ $stock->tanggal_transaksi->format('d/m/Y') }}</td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-{{ $stock->tipe == 'Masuk' ? 'success' : 'danger' }}">
                                        {{ $stock->tipe }}
                                    </span>
                                </td>
                                <td>{{ $stock->jumlah }} {{ $material->satuan }}</td>
                                <td>{{ $stock->stok_sebelum }}</td>
                                <td>{{ $stock->stok_sesudah }}</td>
                                <td>{{ $stock->sumber_tujuan ?? '-' }}</td>
                                <td>{{ $stock->keterangan ?? '-' }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center">
                                    <p class="text-muted mt-3">Belum ada transaksi stok</p>
                                </td>
                            </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Aksi Cepat</h6>
                </div>
                <div class="card-body pt-0">
                    <a href="{{ route('material.stock-in.with-material', $material) }}" class="btn bg-gradient-success mb-0 w-100 mb-2">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">add</i> Barang Masuk
                    </a>
                    <a href="{{ route('material.stock-out', $material) }}" class="btn bg-gradient-warning mb-0 w-100 mb-2">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">remove</i> Barang Keluar
                    </a>
                    <a href="{{ route('material.edit', $material) }}" class="btn bg-gradient-primary mb-0 w-100 mb-2">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">edit</i> Edit Material
                    </a>
                </div>
            </div>
            
            <!-- Stock Alert -->
            @if($material->stok_status == 'Habis' || $material->stok_status == 'Menipis')
            <div class="card my-4 border border-{{ $material->stok_status == 'Habis' ? 'danger' : 'warning' }}">
                <div class="card-header pb-0 pt-3 bg-gradient-{{ $material->stok_status == 'Habis' ? 'danger' : 'warning' }} text-white">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i> Alert Stok
                    </h6>
                </div>
                <div class="card-body">
                    <p class="mb-0">
                        Stok {{ $material->stok_status == 'Habis' ? 'habis' : 'menipis' }}!
                        <br>Stok saat ini: <strong>{{ $currentStok }} {{ $material->satuan }}</strong>
                        <br>Stok minimal: <strong>{{ $material->stok_minimal }} {{ $material->satuan }}</strong>
                    </p>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection