@extends('layouts.app', [
    'pageTitle' => $title,
])

@section('content')
<div>
    <!-- Header -->
    <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h2>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Daftar hutang pembelian yang belum lunas</p>
    </div>

    @include('partials.alerts')

    <!-- Summary Cards -->
    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Pembelian</p>
            <p class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white/90">{{ $summary['total_purchases'] }}</p>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Tagihan</p>
            <p class="mt-1 text-2xl font-semibold text-gray-800 dark:text-white/90">Rp {{ number_format($summary['total_amount'], 0, ',', '.') }}</p>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Sudah Dibayar</p>
            <p class="mt-1 text-2xl font-semibold text-success-600 dark:text-success-400">Rp {{ number_format($summary['total_paid'], 0, ',', '.') }}</p>
        </div>
        <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Total Hutang</p>
            <p class="mt-1 text-2xl font-semibold text-error-600 dark:text-error-400">Rp {{ number_format($summary['total_debt'], 0, ',', '.') }}</p>
        </div>
    </div>

    <!-- Filters & Print Buttons -->
    <div class="mb-6 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <form action="{{ route('reports.purchase-debt') }}" method="GET" class="flex flex-wrap gap-4">
                <div class="w-full sm:w-auto sm:min-w-[160px]">
                    <x-form.select name="status" placeholder="Semua Status">
                        <option value="unpaid" {{ $currentStatus == 'unpaid' ? 'selected' : '' }}>Belum Bayar</option>
                        <option value="partial" {{ $currentStatus == 'partial' ? 'selected' : '' }}>Sebagian</option>
                        <option value="all" {{ $currentStatus == 'all' ? 'selected' : '' }}>Semua</option>
                    </x-form.select>
                </div>
                <div class="w-full sm:w-auto sm:min-w-[160px]">
                    <x-form.select name="supplier_id" placeholder="Semua Supplier">
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}" {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->name }}
                            </option>
                        @endforeach
                    </x-form.select>
                </div>
                <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                    Filter
                </button>
                <a href="{{ route('reports.purchase-debt') }}" class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                    Reset
                </a>
            </form>
            <div class="flex gap-2">
                {{-- Print by Month Button --}}
                <button 
                    type="button"
                    onclick="openMonthDialog()"
                    class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600 transition-colors"
                >
                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                    </svg>
                    Print Per Bulan
                </button>
                {{-- Print All Button --}}
                <a 
                    href="{{ route('print.hutang-all') }}" 
                    target="_blank"
                    class="inline-flex items-center gap-2 rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
                >
                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                    </svg>
                    Print Semua
                </a>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="border-b border-gray-100 dark:border-gray-800">
                    <tr class="text-left">
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Tanggal</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Bahan</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Supplier</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Total</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Dibayar</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Sisa</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400">Status</th>
                        <th class="px-5 py-3 text-sm font-medium text-gray-500 dark:text-gray-400"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    @forelse($purchases as $purchase)
                    <tr>
                        <td class="px-5 py-4 text-sm text-gray-800 dark:text-white/90">
                            {{ $purchase->purchase_date->format('d/m/Y') }}
                        </td>
                        <td class="px-5 py-4 text-sm font-medium text-gray-800 dark:text-white/90">
                            {{ $purchase->material->name ?? '-' }}
                        </td>
                        <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                            {{ $purchase->supplierRelation->name ?? '-' }}
                        </td>
                        <td class="px-5 py-4 text-sm text-gray-800 dark:text-white/90">
                            {{ $purchase->formatted_total }}
                        </td>
                        <td class="px-5 py-4 text-sm text-success-600 dark:text-success-400">
                            {{ $purchase->formatted_paid }}
                        </td>
                        <td class="px-5 py-4 text-sm font-medium text-error-600 dark:text-error-400">
                            {{ $purchase->formatted_remaining }}
                        </td>
                        <td class="px-5 py-4">
                            @if($purchase->payment_status === 'partial')
                                <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium bg-warning-100 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                                    Sebagian
                                </span>
                            @else
                                <span class="inline-flex rounded-full px-2 py-1 text-xs font-medium bg-error-100 text-error-700 dark:bg-error-500/15 dark:text-error-400">
                                    Belum Bayar
                                </span>
                            @endif
                        </td>
                        <td class="px-5 py-4">
                            <a href="{{ route('purchases.show', $purchase) }}" class="text-sm text-brand-500 hover:text-brand-600">
                                Bayar
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-5 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                            Tidak ada hutang pembelian
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($purchases->hasPages())
    <div class="mt-4">
        {{ $purchases->links() }}
    </div>
    @endif
</div>

{{-- Month Selection Dialog --}}
<div id="monthDialog" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-800">
        <div class="mb-4 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Pilih Bulan</h3>
            <button type="button" onclick="closeMonthDialog()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="mb-6">
            <label for="printMonth" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Bulan Hutang</label>
            <input 
                type="month" 
                id="printMonth" 
                value="{{ now()->format('Y-m') }}"
                class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            >
        </div>
        <div class="flex gap-3">
            <button type="button" onclick="closeMonthDialog()" class="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                Batal
            </button>
            <button type="button" onclick="printByMonth()" class="flex-1 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                Cetak
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Month Dialog Functions
    function openMonthDialog() {
        document.getElementById('monthDialog').classList.remove('hidden');
        document.getElementById('monthDialog').classList.add('flex');
    }

    function closeMonthDialog() {
        document.getElementById('monthDialog').classList.add('hidden');
        document.getElementById('monthDialog').classList.remove('flex');
    }

    function printByMonth() {
        const month = document.getElementById('printMonth').value;
        if (month) {
            window.open(`{{ route('print.hutang') }}?month=${month}`, '_blank');
            closeMonthDialog();
        }
    }

    // Close dialogs when clicking outside
    document.getElementById('monthDialog').addEventListener('click', function(e) {
        if (e.target === this) closeMonthDialog();
    });

    // Close dialogs on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeMonthDialog();
        }
    });
</script>
@endpush