@extends('layouts.app')

@section('title', 'Laporan Stok - Dazry Laundry App')
@section('page_title', 'Laporan Stok')

@section('content')
<section class="bg-white text-sm pt-6">


    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif
    <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6">
        {{-- Dropdown Pilih Periode --}}
        <div class="mb-4 md:mb-0 w-full md:w-auto">
            <form method="GET" class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-1">Pilih Periode</label>
                     <form id="filter-form" action="{{ route('laporan.stok') }}" method="GET">
                        <select name="periode_id" onchange="this.form.submit()" class="form-select w-full md:w-100 border-gray-300 ">>
                            @foreach ($periodes as $periode)
                                <option value="{{ $periode->id }}" {{ $periode_id_aktif == $periode->id ? 'selected' : '' }}>
                                    {{ \Carbon\Carbon::parse($periode->tanggal_mulai)->format('d M Y') }} - {{ \Carbon\Carbon::parse($periode->tanggal_selesai)->format('d M Y') }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>
            </form>
        </div>

        {{-- Tombol Export --}}
        <div class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-2 w-full md:w-auto mt-4 md:mt-0">
            <a href="{{ route('laporan.stok.print.pdf', ['periode_id' => $periode_id_aktif]) }}" target="_blank" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded inline-flex items-center text-sm">
                <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
            </a>
            <a href="{{ route('laporan.stok.print.excel', ['periode_id' => $periode_id_aktif]) }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded inline-flex items-center text-sm">
                <i class="fas fa-file-excel mr-2"></i> Ekspor Excel
            </a>
        </div>
    </div>
    
    <div class="text-lg font-bold mb-4">Per Tanggal: {{ $tanggal }}</div>

    <div x-data="{ activeTab: 'bahan-baku', dropdownOpen: { 'bahan-baku': false, 'kemasan': false, 'produk-setengah-jadi': false, 'produk-jadi': false } }" class="mb-6 ">
        <div class="flex border-b border-gray-200 overflow-x-auto whitespace-nowrap">
            <button @click="activeTab = 'bahan-baku'"
                    :class="{ 'border-b-2 border-blue-500 text-blue-500 font-semibold': activeTab === 'bahan-baku' }"
                    class="px-4 py-2 text-gray-600 focus:outline-none transition-colors duration-200">
                Bahan Baku
            </button>
            <button @click="activeTab = 'kemasan'"
                    :class="{ 'border-b-2 border-blue-500 text-blue-500 font-semibold': activeTab === 'kemasan' }"
                    class="px-4 py-2 text-gray-600 focus:outline-none transition-colors duration-200">
                Kemasan
            </button>
            <button @click="activeTab = 'bahan-penolong'"
                    :class="{ 'border-b-2 border-blue-500 text-blue-500 font-semibold': activeTab === 'bahan-penolong' }"
                    class="px-4 py-2 text-gray-600 focus:outline-none transition-colors duration-200">
                Bahan Penolong
            </button>
            <button @click="activeTab = 'produk-setengah-jadi'"
                    :class="{ 'border-b-2 border-blue-500 text-blue-500 font-semibold': activeTab === 'produk-setengah-jadi' }"
                    class="px-4 py-2 text-gray-600 focus:outline-none transition-colors duration-200">
                Produk Setengah Jadi
            </button>
            <button @click="activeTab = 'produk-jadi'"
                    :class="{ 'border-b-2 border-blue-500 text-blue-500 font-semibold': activeTab === 'produk-jadi' }"
                    class="px-4 py-2 text-gray-600 focus:outline-none transition-colors duration-200">
                Produk Jadi
            </button>
        </div>

        <div class="p-4 bg-white  min-h-[400px]">
            <div x-show="activeTab === 'bahan-baku'" class="overflow-x-auto">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Bahan Baku</h2>
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class=" px-4 py-2  flex items-center">
                            <i class="fas fa-cog"></i>
                        </button>
                        <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-1 z-10">
                            <a href="{{ route('laporan.stok-detail.pdf', ['jenis' => 'bahan-baku']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
                            </a>
                            <a href="{{ route('laporan.stok-detail.excel', ['jenis' => 'bahan-baku']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-excel"></i> Export Excel
                            </a>
                        </div>
                    </div>
                </div>
                <table class="min-w-full border border-gray-300 bg-white">
                    <thead class="bg-blue-700 text-white">
                        <tr>
                            <th class="w-2 px-4 py-2 border">No</th>
                            <th class="px-4 py-2 border">Nama</th>
                            <th class="px-4 py-2 border">Stok</th>
                            <th class="px-4 py-2 border">Satuan</th>
                            <th class="px-4 py-2 border">Harga Beli Rata2</th>
                            <th class="px-4 py-2 border">Nilai Persediaan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($bahanBakus as $bahan)
                        <tr>
                            <td class="px-4 py-2 border">{{ $loop->iteration }}</td>
                            <td class="px-4 py-2 border">{{ $bahan->nama }}</td>
                            <td class="px-4 py-2 border">{{ $bahan->stok_saat_ini }}</td>
                            <td class="px-4 py-2 border">{{ $bahan->satuan_pemakaian }}</td>
                            <td class="px-4 py-2 border">Rp {{ number_format($bahan->harga_beli_rata2,0,',','.') }}</td>
                            <td class="px-4 py-2 border">Rp {{ number_format($bahan->stok_saat_ini * $bahan->harga_beli_rata2,0,',','.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div x-show="activeTab === 'kemasan'" class="overflow-x-auto min-h-[400px]">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Kemasan</h2>
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class=" px-4 py-2  flex items-center">
                           <i class="fas fa-cog"></i>
                        </button>
                        <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-1 z-10">
                            <a href="{{ route('laporan.stok-detail.pdf', ['jenis' => 'kemasan']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
                            </a>
                            <a href="{{ route('laporan.stok-detail.excel', ['jenis' => 'kemasan']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-excel mr-2"></i> Export Excel
                            </a>
                        </div>
                    </div>
                </div>
                <table class="min-w-full border border-gray-300 bg-white ">
                    <thead class="bg-blue-700 text-white">
                        <tr>
                            <th class="w-1 px-4 py-2 border">No</th>
                            <th class="px-4 py-2 border">Nama</th>
                            <th class="px-4 py-2 border">Stok</th>
                            <th class="px-4 py-2 border">Satuan</th>
                            <th class="px-4 py-2 border">Nilai Persediaan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($kemasans as $kemasan)
                        <tr>
                            <td class="px-4 py-2 border">{{ $loop->iteration }}</td>
                            <td class="px-4 py-2 border">{{ $kemasan->nama }}</td>
                            <td class="px-4 py-2 border">{{ $kemasan->stok_saat_ini }}</td>
                            <td class="px-4 py-2 border">{{ $kemasan->satuan }}</td>
                            <td class="px-4 py-2 border">
                                Rp {{ number_format($kemasan->stok_saat_ini * ($kemasan->harga_beli ?? 0),0,',','.') }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div x-show="activeTab === 'bahan-penolong'" class="overflow-x-auto min-h-[400px]">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Bahan Penolong</h2>
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class=" px-4 py-2  flex items-center">
                           <i class="fas fa-cog"></i>
                        </button>
                        <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-1 z-10">
                            <a href="{{ route('laporan.stok-detail.pdf', ['jenis' => 'kemasan']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
                            </a>
                            <a href="{{ route('laporan.stok-detail.excel', ['jenis' => 'kemasan']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-excel mr-2"></i> Export Excel
                            </a>
                        </div>
                    </div>
                </div>
                <table class="min-w-full border border-gray-300 bg-white ">
                    <thead class="bg-blue-700 text-white">
                        <tr>
                            <th class="w-1 px-4 py-2 border">No</th>
                            <th class="px-4 py-2 border">Nama</th>
                            <th class="px-4 py-2 border">Stok</th>
                            <th class="px-4 py-2 border">Satuan</th>
                            <th class="px-4 py-2 border">Nilai Persediaan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($kemasans as $kemasan)
                        <tr>
                            <td class="px-4 py-2 border">{{ $loop->iteration }}</td>
                            <td class="px-4 py-2 border">{{ $kemasan->nama }}</td>
                            <td class="px-4 py-2 border">{{ $kemasan->stok_saat_ini }}</td>
                            <td class="px-4 py-2 border">{{ $kemasan->satuan }}</td>
                            <td class="px-4 py-2 border">
                                Rp {{ number_format($kemasan->stok_saat_ini * ($kemasan->harga_beli ?? 0),0,',','.') }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div x-show="activeTab === 'produk-setengah-jadi'" class="overflow-x-auto min-h-[400px]">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Produk Setengah Jadi</h2>
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class=" px-4 py-2  flex items-center">
                            <i class="fas fa-cog"></i>
                        </button>
                        <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-1 z-10">
                            <a href="{{ route('laporan.stok-detail.pdf', ['jenis' => 'produk-setengah-jadi']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
                            </a>
                            <a href="{{ route('laporan.stok-detail.excel', ['jenis' => 'produk-setengah-jadi']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-excel mr-2"></i> Export Excel
                            </a>
                        </div>
                    </div>
                </div>
                <table class="min-w-full border border-gray-300 bg-white ">
                    <thead class="bg-blue-700 text-white">
                        <tr>
                            <th class="w-1 px-4 py-2 border">No</th>
                            <th class="px-4 py-2 border">Nama</th>
                            <th class="px-4 py-2 border">Stok</th>
                            <th class="px-4 py-2 border">Satuan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($produkSJ as $sj)
                        <tr>
                            <td class="px-4 py-2 border">{{ $loop->iteration }}</td>
                            <td class="px-4 py-2 border">{{ $sj->nama }}</td>
                            <td class="px-4 py-2 border">{{ $sj->stok_saat_ini }}</td>
                            <td class="px-4 py-2 border">{{ $sj->satuan }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div x-show="activeTab === 'produk-jadi'" class="overflow-x-auto min-h-[400px]">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Produk Jadi</h2>
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class=" px-4 py-2  flex items-center">
                            <i class="fas fa-cog"></i>
                        </button>
                        <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-1 z-10">
                            <a href="{{ route('laporan.stok-detail.pdf', ['jenis' => 'produk-jadi']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-pdf mr-2"></i> Cetak PDF
                            </a>
                            <a href="{{ route('laporan.stok-detail.excel', ['jenis' => 'produk-jadi']) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="fas fa-file-excel mr-2"></i> Export Excel
                            </a>
                        </div>
                    </div>
                </div>
                <table class="min-w-full border border-gray-300 bg-white ">
                    <thead class="bg-blue-700 text-white">
                        <tr>
                            <th class="w-1 px-4 py-2 border">No</th>
                            <th class="px-4 py-2 border">Nama</th>
                            <th class="px-4 py-2 border">Stok</th>
                            <th class="px-4 py-2 border">Harga Pokok</th>
                            <th class="px-4 py-2 border">Harga Jual</th>
                            <th class="px-4 py-2 border">Nilai Persediaan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($produkJadi as $pj)
                        <tr>
                            <td class="px-4 py-2 border">{{ $loop->iteration }}</td>
                            <td class="px-4 py-2 border">{{ $pj->nama }}</td>
                            <td class="px-4 py-2 border">{{ $pj->stok_saat_ini }}</td>
                            <td class="px-4 py-2 border">Rp {{ number_format($pj->harga_pokok,0,',','.') }}</td>
                            <td class="px-4 py-2 border">Rp {{ number_format($pj->harga_jual,0,',','.') }}</td>
                            <td class="px-4 py-2 border">Rp {{ number_format($pj->stok_saat_ini * $pj->harga_pokok,0,',','.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

   

</section>
@endsection