@extends('layouts.app')

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

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

    
    @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="bg-white   pt-2 mb-2">
        <form action="{{ route('laporan-penjualan.index') }}" method="GET">
            <div class="flex flex-col md:flex-row items-stretch md:items-center space-y-4 md:space-y-0 md:space-x-4">
                <label for="periode_id" class="text-gray-700 font-semibold flex-shrink-0">Pilih Periode:</label>
                <select name="periode_id" id="periode_id" class="border-gray-300  p-2 w-full focus:ring-blue-500 focus:border-blue-500">
                    @foreach ($periodes as $periode)
                        <option value="{{ $periode->id }}" {{ ($periodeDipilih->id ?? '') == $periode->id ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::parse($periode->tanggal_mulai)->translatedFormat('d F Y') }} - {{ \Carbon\Carbon::parse($periode->tanggal_selesai)->translatedFormat('d F Y') }}
                        </option>
                    @endforeach
                </select>
                <button type="submit" class="bg-blue-600 text-white px-6 py-2  hover:bg-blue-700 transition duration-300 ease-in-out shadow-md w-full md:w-auto mt-4 md:mt-0">
                    Filter
                </button>
            </div>
        </form>
    </div>

    <div class="bg-white   pt-2 mb-2">
        <h2 class="font-semibold mb-4">Ringkasan Penjualan</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-blue-100 p-4  shadow">
                <p class="text-sm font-medium text-gray-600">Penjualan Langsung</p>
                <p class=" font-bold">Rp. {{ number_format($penjualanLangsung, 2) }}</p>
            </div>
            <div class="bg-green-100 p-4  shadow">
                <p class="text-sm font-medium text-gray-600">Penjualan Piutang</p>
                <p class=" font-bold">Rp. {{ number_format($penjualanPiutang, 2) }}</p>
            </div>
            <div class="bg-yellow-100 p-4  shadow">
                <p class="text-sm font-medium text-gray-600">Penjualan Konsinyasi</p>
                <p class=" font-bold">Rp. {{ number_format($penjualanKonsinyasi, 2) }}</p>
            </div>
            <div class="bg-purple-100 p-4  shadow">
                <p class="text-sm font-medium text-gray-600">Penjualan Bahan Baku</p>
                <p class=" font-bold">Rp. {{ number_format($penjualanBahanBaku, 2) }}</p>
            </div>
        </div>
        <div class="bg-gray-200 p-4  text-center shadow">
            <p class="text-sm font-medium text-gray-800">Total Keseluruhan Penjualan</p>
            <p class="text-2xl font-extrabold text-blue-800">Rp. {{ number_format($totalPenjualan, 2) }}</p>
        </div>
    </div>
    
   <div class="bg-white   pt-2">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex flex-wrap md:flex-nowrap space-x-0 md:space-x-6 gap-2" aria-label="Tabs">
                <button type="button" class="tab-button flex-1 text-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm md: focus:outline-none transition-colors duration-200 text-gray-600 hover:text-blue-600 hover:border-blue-600 active-tab border-blue-600 text-blue-600" data-tab="tab-langsung">
                    Langsung
                </button>
                <button type="button" class="tab-button flex-1 text-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm md: focus:outline-none transition-colors duration-200 text-gray-600 hover:text-blue-600 hover:border-blue-600" data-tab="tab-piutang">
                    Piutang
                </button>
                <button type="button" class="tab-button flex-1 text-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm md: focus:outline-none transition-colors duration-200 text-gray-600 hover:text-blue-600 hover:border-blue-600" data-tab="tab-konsinyasi">
                    Konsinyasi
                </button>
                <button type="button" class="tab-button flex-1 text-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm md: focus:outline-none transition-colors duration-200 text-gray-600 hover:text-blue-600 hover:border-blue-600" data-tab="tab-bahan-baku">
                    Bahan Baku
                </button>
            </nav>
        </div>

        <div class="mt-2">
            <div id="tab-langsung" class="tab-content min-h-[300px]">
                <h2 class=" font-semibold mb-4 text-gray-800">Detail Penjualan Langsung</h2>
                
                <div class="flex justify-end mb-4">
                    <div x-data="{ open: false }" class="relative inline-block text-left">
                        <div>
                            <button @click="open = !open" 
                                    class="inline-flex justify-center w-full  px-4 py-2  font-medium text-grey focus:outline-none">
                                    <i class="fa-solid fa-cog mr-2"></i>
                                
                            </button>
                        </div>

                        <!-- Dropdown -->
                        <div x-show="open" @click.away="open = false"
                            class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                            <div class="py-1">
                                <a href="{{ route('laporan.penjualan.pdf', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-pdf mr-2"></i> PDF
                                </a>
                                <a href="{{ route('laporan.penjualan.excel', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-green-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-excel mr-2"></i> Excel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200  overflow-hidden">
                        <thead class="bg-blue-700 text-white">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">No</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Tanggal</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Keterangan</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Total Harga</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($detailLangsung as $item)
                                <tr class="hover:bg-gray-50 transition duration-150 ease-in-out">
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d F Y') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $item->keterangan ?? 'Penjualan Langsung' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">Rp. {{ number_format($item->total_harga, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="tab-piutang" class="tab-content hidden">
                <h2 class=" font-semibold mb-4 text-gray-800">Detail Penjualan Piutang</h2>
                <div class="flex justify-end mb-4">
                    <div x-data="{ open: false }" class="relative inline-block text-left">
                        <div>
                            <button @click="open = !open" 
                                    class="inline-flex justify-center w-full  px-4 py-2  font-medium text-grey focus:outline-none">
                                    <i class="fa-solid fa-cog mr-2"></i>
                                
                            </button>
                        </div>

                        <!-- Dropdown -->
                        <div x-show="open" @click.away="open = false"
                            class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                            <div class="py-1">
                                <a href="{{ route('laporan.penjualan.pdf', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-pdf mr-2"></i> PDF
                                </a>
                                <a href="{{ route('laporan.penjualan.excel', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-green-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-excel mr-2"></i> Excel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200  overflow-hidden">
                        <thead class="bg-blue-700 text-white">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">No</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Tanggal</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Keterangan</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Total Harga</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($detailPiutang as $item)
                                <tr class="hover:bg-gray-50 transition duration-150 ease-in-out">
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d F Y') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $item->keterangan ?? 'Penjualan Piutang' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">Rp. {{ number_format($item->total_harga, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="tab-konsinyasi" class="tab-content hidden">
                <h2 class=" font-semibold mb-4 text-gray-800">Detail Penjualan Konsinyasi</h2>
                <div class="flex justify-end mb-4">
                    <div x-data="{ open: false }" class="relative inline-block text-left">
                        <div>
                            <button @click="open = !open" 
                                    class="inline-flex justify-center w-full  px-4 py-2  font-medium text-grey focus:outline-none">
                                    <i class="fa-solid fa-cog mr-2"></i>
                                
                            </button>
                        </div>

                        <!-- Dropdown -->
                        <div x-show="open" @click.away="open = false"
                            class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                            <div class="py-1">
                                <a href="{{ route('laporan.penjualan.pdf', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-pdf mr-2"></i> PDF
                                </a>
                                <a href="{{ route('laporan.penjualan.excel', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-green-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-excel mr-2"></i> Excel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200  overflow-hidden">
                        <thead class="bg-blue-700 text-white">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">No</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Tanggal</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Keterangan</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Total Harga</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($detailKonsinyasi as $item)
                                <tr class="hover:bg-gray-50 transition duration-150 ease-in-out">
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ \Carbon\Carbon::parse($item->tanggal_penjualan)->translatedFormat('d F Y') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $item->keterangan ?? 'Penjualan Konsinyasi' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">Rp. {{ number_format($item->total_terjual, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="tab-bahan-baku" class="tab-content hidden">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">Detail Penjualan Bahan Baku</h2>
                <div class="flex justify-end mb-4">
                    <div x-data="{ open: false }" class="relative inline-block text-left">
                        <div>
                            <button @click="open = !open" 
                                    class="inline-flex justify-center w-full  px-4 py-2  font-medium text-grey focus:outline-none">
                                    <i class="fa-solid fa-cog mr-2"></i>
                                
                            </button>
                        </div>

                        <!-- Dropdown -->
                        <div x-show="open" @click.away="open = false"
                            class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                            <div class="py-1">
                                <a href="{{ route('laporan.penjualan.pdf', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-pdf mr-2"></i> PDF
                                </a>
                                <a href="{{ route('laporan.penjualan.excel', ['jenis' => 'langsung', 'periode_id' => $periodeDipilih->id ?? '']) }}"
                                target="_blank"
                                class="flex items-center px-4 py-2 text-sm text-green-600 hover:bg-gray-100">
                                    <i class="fa-solid fa-file-excel mr-2"></i> Excel
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200  overflow-hidden">
                        <thead class="bg-blue-700 text-white">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">No</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Tanggal</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Keterangan</th>
                                <th class="px-6 py-3 text-left text-xs font-medium  uppercase tracking-wider">Total Harga</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($detailBahanBaku as $item)
                                <tr class="hover:bg-gray-50 transition duration-150 ease-in-out">
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ \Carbon\Carbon::parse($item->tanggal)->translatedFormat('d F Y') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">{{ $item->keterangan ?? 'Penjualan Bahan Baku' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">Rp. {{ number_format($item->total_harga, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContents = document.querySelectorAll('.tab-content');

        const initialTab = document.querySelector('.tab-button[data-tab="tab-langsung"]');
        if (initialTab) {
            initialTab.classList.add('active-tab', 'border-blue-600', 'text-blue-600');
            initialTab.classList.remove('text-gray-600', 'hover:text-blue-600', 'hover:border-blue-600', 'border-transparent');
            const initialContent = document.getElementById('tab-langsung');
            if (initialContent) {
                initialContent.classList.remove('hidden');
            }
        }

        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active classes from all buttons
                tabButtons.forEach(btn => {
                    btn.classList.remove('active-tab', 'border-blue-600', 'text-blue-600');
                    btn.classList.add('text-gray-600', 'hover:text-blue-600', 'hover:border-blue-600', 'border-transparent');
                });

                // Hide all tab contents
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });

                // Add active classes to the clicked button
                button.classList.add('active-tab', 'border-blue-600', 'text-blue-600');
                button.classList.remove('text-gray-600', 'hover:text-blue-600', 'hover:border-blue-600', 'border-transparent');

                // Show the corresponding tab content
                const targetTabId = button.getAttribute('data-tab');
                const targetTabContent = document.getElementById(targetTabId);
                targetTabContent.classList.remove('hidden');
            });
        });
    });
</script>

</section>
@endsection