@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-semibold text-slate-900">Laporan Keuntungan</h2>
                <p class="text-sm text-slate-500">Hitung profit berdasarkan harga pokok dan harga jual.</p>
            </div>
            <x-button href="{{ route('reports.profit.export', request()->query()) }}" variant="secondary">
                Export Excel
            </x-button>
        </div>

        <x-card>
            <form method="get" class="grid gap-4 md:grid-cols-5" id="profit-filter-form">
                <x-select name="period" label="Periode" id="profit-period-select">
                    <option value="daily" {{ $period === 'daily' ? 'selected' : '' }}>Harian</option>
                    <option value="range" {{ $period === 'range' ? 'selected' : '' }}>Range Tanggal</option>
                    <option value="monthly" {{ $period === 'monthly' ? 'selected' : '' }}>Bulanan</option>
                </x-select>
                <div id="profit-filter-daily" class="{{ $period === 'daily' ? '' : 'hidden' }}">
                    <x-input name="date" label="Tanggal" type="date" :value="$date" id="profit-date" />
                </div>
                <div id="profit-filter-range" class="grid gap-4 md:grid-cols-2 md:col-span-2 {{ $period === 'range' ? '' : 'hidden' }}">
                    <x-input name="start_date" label="Mulai" type="date" :value="$startDate" id="profit-start" />
                    <x-input name="end_date" label="Sampai" type="date" :value="$endDate" id="profit-end" />
                </div>
                <div id="profit-filter-monthly" class="{{ $period === 'monthly' ? '' : 'hidden' }}">
                    <x-input name="month" label="Bulan" type="month" :value="$month" id="profit-month" />
                </div>
                <x-select name="menu" label="Nama Menu" id="menu-select">
                    <option value="">Semua</option>
                    @foreach($menuOptions as $menuOption)
                        <option value="{{ $menuOption }}" {{ $menuName === $menuOption ? 'selected' : '' }}>{{ $menuOption }}</option>
                    @endforeach
                </x-select>
            </form>
        </x-card>

        <div class="grid gap-4 md:grid-cols-3">
            <x-card>
                <p class="text-sm text-slate-500">Total Item</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ $totalQty }}</p>
            </x-card>
            <x-card>
                <p class="text-sm text-slate-500">Total Omzet</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ format_rupiah($totalOmzet) }}</p>
            </x-card>
            <x-card>
                <p class="text-sm text-slate-500">Total Profit</p>
                <p class="mt-2 text-2xl font-semibold text-slate-900">{{ format_rupiah($totalProfit) }}</p>
            </x-card>
        </div>

        <x-card>
            <x-table>
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-3">Order No</th>
                        <th class="px-4 py-3">Tanggal</th>
                        <th class="px-4 py-3">Menu</th>
                        <th class="px-4 py-3 text-right">Qty</th>
                        <th class="px-4 py-3 text-right">Harga Jual</th>
                        <th class="px-4 py-3 text-right">Harga Pokok</th>
                        <th class="px-4 py-3 text-right">Subtotal</th>
                        <th class="px-4 py-3 text-right">Profit</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($items as $item)
                        @php($lineProfit = ((float) $item->harga - (float) $item->menu_harga_pokok) * (int) $item->qty)
                        <tr class="border-b border-slate-100">
                            <td class="px-4 py-3 font-medium text-slate-800">{{ $item->order_no }}</td>
                            <td class="px-4 py-3">{{ \Illuminate\Support\Carbon::parse($item->tanggal)->format('d-m-Y H:i') }}</td>
                            <td class="px-4 py-3">{{ $item->menu_nama }}</td>
                            <td class="px-4 py-3 text-right">{{ $item->qty }}</td>
                            <td class="px-4 py-3 text-right">{{ format_rupiah($item->harga) }}</td>
                            <td class="px-4 py-3 text-right">{{ format_rupiah($item->menu_harga_pokok) }}</td>
                            <td class="px-4 py-3 text-right">{{ format_rupiah($item->line_total) }}</td>
                            <td class="px-4 py-3 text-right">{{ format_rupiah($lineProfit) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td class="px-4 py-6 text-center text-slate-500" colspan="8">Data kosong.</td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table>

            <div class="mt-4">{{ $items->links() }}</div>
        </x-card>
    </div>

    <script>
        const profitForm = document.getElementById('profit-filter-form');
        if (profitForm) {
            profitForm.querySelectorAll('select').forEach((select) => {
                select.classList.remove('select2');
            });
        }

        const profitPeriodSelect = document.getElementById('profit-period-select');
        const profitFilterDaily = document.getElementById('profit-filter-daily');
        const profitFilterRange = document.getElementById('profit-filter-range');
        const profitFilterMonthly = document.getElementById('profit-filter-monthly');
        const profitDate = document.getElementById('profit-date');
        const profitStart = document.getElementById('profit-start');
        const profitEnd = document.getElementById('profit-end');
        const profitMonth = document.getElementById('profit-month');
        const profitMenu = document.getElementById('menu-select');

        function toggleProfitFields() {
            const value = profitPeriodSelect.value;
            profitFilterDaily.classList.toggle('hidden', value !== 'daily');
            profitFilterRange.classList.toggle('hidden', value !== 'range');
            profitFilterMonthly.classList.toggle('hidden', value !== 'monthly');
        }

        function canSubmit() {
            const value = profitPeriodSelect.value;
            if (value === 'daily') {
                return Boolean(profitDate?.value);
            }
            if (value === 'range') {
                return Boolean(profitStart?.value && profitEnd?.value);
            }
            if (value === 'monthly') {
                return Boolean(profitMonth?.value);
            }
            return true;
        }

        function submitIfReady() {
            if (profitForm && canSubmit()) {
                profitForm.submit();
            }
        }

        const handleProfitPeriodChange = () => {
            toggleProfitFields();
        };

        profitPeriodSelect?.addEventListener('change', handleProfitPeriodChange);
        document.addEventListener('change', (event) => {
            if (event.target && event.target.id === 'profit-period-select') {
                handleProfitPeriodChange();
            }
        }, true);
        if (window.$ && $.fn.select2) {
            $(document).on('select2:select', '#profit-period-select', handleProfitPeriodChange);
        }

        profitDate?.addEventListener('change', submitIfReady);
        profitStart?.addEventListener('change', submitIfReady);
        profitEnd?.addEventListener('change', submitIfReady);
        profitMonth?.addEventListener('change', submitIfReady);
        profitMenu?.addEventListener('change', submitIfReady);

        toggleProfitFields();
    </script>

@endsection
