@extends('layouts.app')

@section('content')
    @php
        $formatQty = fn ($value) => rtrim(rtrim(number_format((float) $value, 3, ',', '.'), '0'), ',');
    @endphp
    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="flex items-center justify-between px-4 sm:px-0">
                <div class="flex items-center space-x-4">
                    <a href="{{ route('reports.index') }}" class="text-gray-500 hover:text-gray-700 p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </a>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">🧪 Laporan Bahan Baku</h1>
                        <p class="text-gray-600 mt-1">Pantau stok bahan baku dan mutasi per periode</p>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow-sm rounded-lg">
                <div class="p-6">
                    <form method="GET" action="{{ route('reports.raw-materials') }}" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-3">
                        <div class="xl:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Cari Bahan</label>
                            <input type="text" name="search" value="{{ $search }}" placeholder="Nama, kode, kategori"
                                class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Status Bahan</label>
                            <select name="status" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="all" @selected($status === 'all')>Semua</option>
                                <option value="normal" @selected($status === 'normal')>Normal</option>
                                <option value="low" @selected($status === 'low')>Stok Rendah</option>
                                <option value="inactive" @selected($status === 'inactive')>Nonaktif</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipe Mutasi</label>
                            <select name="movement_type" class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="all" @selected($movementType === 'all')>Semua</option>
                                <option value="in" @selected($movementType === 'in')>Masuk</option>
                                <option value="out" @selected($movementType === 'out')>Keluar</option>
                                <option value="adjustment" @selected($movementType === 'adjustment')>Adjustment</option>
                                <option value="waste" @selected($movementType === 'waste')>Waste</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Dari Tanggal</label>
                            <input type="date" name="start_date" value="{{ $startDate }}"
                                class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Sampai Tanggal</label>
                            <input type="date" name="end_date" value="{{ $endDate }}"
                                class="w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                        </div>
                        <div class="xl:col-span-6 flex gap-2">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg">
                                Filter
                            </button>
                            <a href="{{ route('reports.raw-materials') }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg">
                                Reset
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Total Bahan</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($summary['total_materials']) }}</p>
                </div>
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Bahan Aktif</p>
                    <p class="text-2xl font-bold text-emerald-600">{{ number_format($summary['active_materials']) }}</p>
                </div>
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Stok Rendah</p>
                    <p class="text-2xl font-bold text-red-600">{{ number_format($summary['low_stock_materials']) }}</p>
                </div>
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Nilai Stok (HPP Terakhir)</p>
                    <p class="text-2xl font-bold text-indigo-600">Rp {{ number_format($summary['total_stock_value'], 0, ',', '.') }}</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Mutasi Periode</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($movementSummary['total_rows']) }}</p>
                </div>
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Qty Masuk</p>
                    <p class="text-2xl font-bold text-emerald-600">{{ $formatQty($movementSummary['in_qty']) }}</p>
                </div>
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Qty Keluar + Waste</p>
                    <p class="text-2xl font-bold text-red-600">{{ $formatQty($movementSummary['out_qty']) }}</p>
                </div>
                <div class="bg-white shadow-sm rounded-lg p-4">
                    <p class="text-sm text-gray-500">Qty Adjustment</p>
                    <p class="text-2xl font-bold text-amber-600">{{ $formatQty($movementSummary['adjustment_qty']) }}</p>
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">Ringkasan Stok Bahan</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Bahan</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Kategori</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Satuan</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600">Stok</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600">Minimum</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600">HPP Terakhir</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($materials as $material)
                                @php
                                    $isLow = (float) $material->stock <= (float) $material->minimum_stock;
                                @endphp
                                <tr>
                                    <td class="px-4 py-3">
                                        <p class="font-semibold text-gray-900">{{ $material->name }}</p>
                                        <p class="text-xs text-gray-500">{{ $material->code ?: '-' }}</p>
                                    </td>
                                    <td class="px-4 py-3 text-gray-700">{{ $material->category ?: '-' }}</td>
                                    <td class="px-4 py-3 text-gray-700">{{ $material->unit }}</td>
                                    <td class="px-4 py-3 text-right {{ $isLow ? 'text-red-600 font-semibold' : 'text-gray-900' }}">
                                        {{ $formatQty($material->stock) }}
                                    </td>
                                    <td class="px-4 py-3 text-right text-gray-700">{{ $formatQty($material->minimum_stock) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-700">Rp {{ number_format((float) $material->last_purchase_price, 0, ',', '.') }}</td>
                                    <td class="px-4 py-3">
                                        @if(!$material->is_active)
                                            <span class="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-medium">Nonaktif</span>
                                        @elseif($isLow)
                                            <span class="inline-flex items-center px-2 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium">Stok Rendah</span>
                                        @else
                                            <span class="inline-flex items-center px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium">Normal</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-4 py-10 text-center text-gray-500">Belum ada data bahan baku.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3 border-t border-gray-200">
                    {{ $materials->appends(request()->except('mat_page'))->links() }}
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">Riwayat Mutasi Bahan</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Waktu</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Bahan</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Tipe</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600">Qty</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600">Sebelum</th>
                                <th class="px-4 py-3 text-right font-semibold text-gray-600">Sesudah</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">User</th>
                                <th class="px-4 py-3 text-left font-semibold text-gray-600">Catatan</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($movements as $movement)
                                @php
                                    $typeClass = match ($movement->type) {
                                        'in' => 'bg-emerald-100 text-emerald-700',
                                        'out' => 'bg-red-100 text-red-700',
                                        'waste' => 'bg-red-100 text-red-700',
                                        'adjustment' => 'bg-amber-100 text-amber-700',
                                        default => 'bg-gray-100 text-gray-700',
                                    };
                                @endphp
                                <tr>
                                    <td class="px-4 py-3 text-gray-700">{{ $movement->created_at?->format('d/m/Y H:i') }}</td>
                                    <td class="px-4 py-3 text-gray-900">
                                        {{ $movement->rawMaterial?->name ?? '-' }}
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $typeClass }}">
                                            {{ strtoupper($movement->type) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-semibold text-gray-800">{{ $formatQty($movement->quantity) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-700">{{ $formatQty($movement->stock_before) }}</td>
                                    <td class="px-4 py-3 text-right text-gray-700">{{ $formatQty($movement->stock_after) }}</td>
                                    <td class="px-4 py-3 text-gray-700">{{ $movement->user?->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-gray-600">{{ $movement->notes ?: '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-4 py-10 text-center text-gray-500">Belum ada mutasi pada periode ini.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3 border-t border-gray-200">
                    {{ $movements->appends(request()->except('mov_page'))->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection