@extends('layouts.master')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Laporan Stok Barang</h3>
                        <div class="card-tools">
                            <a href="{{ route('laporan.export-pdf-stok-barang') }}" class="btn btn-danger">
                                <i class="fas fa-file-pdf"></i> PDF
                            </a>
                            <a href="{{ route('laporan.export-excel-stok-barang') }}" class="btn btn-success">
                                <i class="fas fa-file-excel"></i> Excel
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Summary Cards -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <div class="card bg-primary text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Total Barang</h5>
                                        <h2 class="mb-0">{{ $allBarangs->count() }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-success text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Barang Tersedia</h5>
                                        <h2 class="mb-0">{{ $summary['available'] ?? 0 }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-danger text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Barang Kosong</h5>
                                        <h2 class="mb-0">{{ $summary['empty'] ?? 0 }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-warning text-dark">
                                    <div class="card-body">
                                        <h5 class="card-title">Barang Inden</h5>
                                        <h2 class="mb-0">{{ $summary['inden'] ?? 0 }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card bg-dark text-white">
                                    <div class="card-body">
                                        <h5 class="card-title">Total Nilai Stok</h5>
                                        <h2 class="mb-0">Rp {{ number_format($allBarangs->sum('total_nilai'), 0, ',', '.') }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Search Section -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <form method="GET" action="{{ route('laporan.stok-barang') }}" id="searchForm">
                                    <div class="input-group">
                                        <input type="text" 
                                               class="form-control" 
                                               name="search" 
                                               id="searchInput"
                                               placeholder="Cari berdasarkan nama barang atau kode barang..." 
                                               value="{{ $search ?? '' }}">
                                        <input type="hidden" name="filter" value="{{ $filter ?? 'all' }}">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="submit">
                                                <i class="fas fa-search"></i> Cari
                                            </button>
                                            @if(isset($search) && !empty($search))
                                                <a href="{{ route('laporan.stok-barang', ['filter' => $filter]) }}" 
                                                   class="btn btn-secondary">
                                                    <i class="fas fa-times"></i> Reset
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @if(isset($search) && !empty($search))
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="alert alert-info">
                                        <i class="fas fa-search"></i> 
                                        <strong>Hasil pencarian untuk:</strong> "{{ $search }}" 
                                        <span class="badge badge-primary ml-2">{{ $barangs->count() }} hasil ditemukan</span>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Filter Section -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="btn-group" role="group">
                                    <a href="{{ route('laporan.stok-barang', array_filter(['filter' => 'all', 'search' => $search ?? ''])) }}" 
                                       class="btn btn-outline-primary {{ $filter === 'all' ? 'active' : '' }}">
                                        Semua
                                    </a>
                                    <a href="{{ route('laporan.stok-barang', array_filter(['filter' => 'available', 'search' => $search ?? ''])) }}" 
                                       class="btn btn-outline-success {{ $filter === 'available' ? 'active' : '' }}">
                                        Tersedia
                                    </a>
                                    <a href="{{ route('laporan.stok-barang', array_filter(['filter' => 'empty', 'search' => $search ?? ''])) }}" 
                                       class="btn btn-outline-danger {{ $filter === 'empty' ? 'active' : '' }}">
                                        Kosong
                                    </a>
                                    <a href="{{ route('laporan.stok-barang', array_filter(['filter' => 'inden', 'search' => $search ?? ''])) }}" 
                                       class="btn btn-outline-warning {{ $filter === 'inden' ? 'active' : '' }}">
                                        Inden
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Kode Barang</th>
                                        <th>Nama Barang</th>
                                        <th>Stok Gudang 1</th>
                                        <th>Stok Gudang 2</th>
                                        <th>Total Stok</th>
                                        <th>Satuan</th>
                                        <th>HPP</th>
                                        <th>Total Nilai</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $row = 0; @endphp
                                    @forelse ($barangs as $key => $barang)
                                        @php
                                            $total_stok = ($barang->barang->lokasi_barang->stok_lokasi_1 ?? 0) + ($barang->barang->lokasi_barang->stok_lokasi_2 ?? 0);
                                            $show = false;
                                            if ($filter === 'inden' && $total_stok < 0) $show = true;
                                            if ($filter === 'available' && $total_stok > 0) $show = true;
                                            if ($filter === 'empty' && $total_stok == 0) $show = true;
                                            if ($filter === 'all') $show = true;
                                        @endphp
                                        @if($show)
                                        @php $row++; @endphp
                                        <tr>
                                            <td>{{ $row }}</td>
                                            <td>{{ $barang->barang->kode }}</td>
                                            <td>{{ $barang->barang->nama }}</td>
                                            <td class="text-right">{{ number_format($barang->barang->lokasi_barang->stok_lokasi_1 ?? 0, 0, ',', '.') }}</td>
                                            <td class="text-right">{{ number_format($barang->barang->lokasi_barang->stok_lokasi_2 ?? 0, 0, ',', '.') }}</td>
                                            <td class="text-right">{{ number_format($total_stok, 0, ',', '.') }}</td>
                                            <td>{{ $barang->barang->satuan }}</td>
                                            <td class="text-right">Rp {{ number_format($barang->hpp, 0, ',', '.') }}</td>
                                            <td class="text-right">Rp {{ number_format($total_stok * $barang->hpp, 0, ',', '.') }}</td>
                                            <td>
                                                @if($total_stok > 0)
                                                    <span class="badge bg-success">Tersedia</span>
                                                @elseif($total_stok == 0)
                                                    <span class="badge bg-danger">Kosong</span>
                                                @else
                                                    <span class="badge bg-warning text-dark">Inden</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @endif
                                    @empty
                                        <tr>
                                            <td colspan="10" class="text-center py-4">
                                                <div class="d-flex flex-column align-items-center">
                                                    <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                                                    <h5 class="text-muted mb-2">
                                                        @if($filter === 'available')
                                                            Tidak ada barang yang tersedia
                                                        @elseif($filter === 'empty')
                                                            Tidak ada barang yang kosong
                                                        @elseif($filter === 'inden')
                                                            Tidak ada barang inden
                                                        @else
                                                            Tidak ada data barang
                                                        @endif
                                                    </h5>
                                                    <p class="text-muted">
                                                        @if($filter === 'available')
                                                            Semua barang saat ini kosong
                                                        @elseif($filter === 'empty')
                                                            Semua barang saat ini tersedia
                                                        @elseif($filter === 'inden')
                                                            Tidak ada barang dengan status inden
                                                        @else
                                                            Belum ada data barang yang dimasukkan
                                                        @endif
                                                    </p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                @if($barangs instanceof \Illuminate\Pagination\LengthAwarePaginator)
                                    Menampilkan {{ $barangs->firstItem() ?? 0 }} sampai {{ $barangs->lastItem() ?? 0 }} dari
                                    {{ $barangs->total() }} data
                                @else
                                    Menampilkan {{ $barangs->count() }} data
                                @endif
                            </div>
                            <div>
                                @if($barangs instanceof \Illuminate\Pagination\LengthAwarePaginator)
                                    {{ $barangs->links('pagination::bootstrap-4') }}
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .card {
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .badge {
        font-size: 0.9em;
        padding: 8px 12px;
    }
    .table th {
        background-color: #f8f9fa;
    }
    .stock-row:hover {
        background-color: #f8f9fa;
    }
    .btn-group .btn {
        margin-right: 5px;
    }
    .btn-group .btn:last-child {
        margin-right: 0;
    }
    
    /* Search styles */
    .search-highlight {
        background-color: #fff3cd;
        font-weight: bold;
    }
    
    #searchInput {
        border-radius: 0.375rem 0 0 0.375rem !important;
    }
    
    .input-group-append .btn {
        border-radius: 0 0.375rem 0.375rem 0 !important;
    }
    
    .search-info {
        color: #6c757d;
        font-size: 0.9em;
        margin-top: 5px;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Auto submit search after user stops typing (debounce)
    let searchTimeout;
    $('#searchInput').on('input', function() {
        clearTimeout(searchTimeout);
        const searchValue = $(this).val();
        
        searchTimeout = setTimeout(function() {
            if (searchValue.length >= 2 || searchValue.length === 0) {
                $('#searchForm').submit();
            }
        }, 500); // Wait 500ms after user stops typing
    });

    // Enter key submit
    $('#searchInput').on('keypress', function(e) {
        if (e.which === 13) {
            clearTimeout(searchTimeout);
            $('#searchForm').submit();
        }
    });

    // Highlight search results
    const searchTerm = $('#searchInput').val();
    if (searchTerm && searchTerm.length > 0) {
        highlightSearchTerm(searchTerm);
    }
});

function highlightSearchTerm(term) {
    if (!term) return;
    
    const regex = new RegExp(`(${term})`, 'gi');
    
    // Highlight in table cells
    $('tbody tr').each(function() {
        const $row = $(this);
        
        // Highlight in kode barang (column 2)
        const $kodeCell = $row.find('td:nth-child(2)');
        const kodeText = $kodeCell.text();
        if (kodeText.toLowerCase().includes(term.toLowerCase())) {
            $kodeCell.html(kodeText.replace(regex, '<span class="search-highlight">$1</span>'));
        }
        
        // Highlight in nama barang (column 3)
        const $namaCell = $row.find('td:nth-child(3)');
        const namaText = $namaCell.text();
        if (namaText.toLowerCase().includes(term.toLowerCase())) {
            $namaCell.html(namaText.replace(regex, '<span class="search-highlight">$1</span>'));
        }
    });
}
</script>
@endpush