@extends('layouts.app')

@section('content')
    @php
        $totalUsage = (float) ($totalUsage ?? 0);
        $startDate = $startDate ?? now()->startOfMonth()->toDateString();
        $endDate = $endDate ?? now()->toDateString();
    @endphp

    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Data Penggunaan Bahan' }}" />

    <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        <x-posgraf.stat-card title="Total Penggunaan (Periode)" value="{{ number_format($totalUsage, 2, ',', '.') }}" color="blue">
            <x-slot name="icon">
                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                </svg>
            </x-slot>
        </x-posgraf.stat-card>

        <x-posgraf.stat-card title="Total Baris Data" value="{{ number_format($movements->total() ?? $movements->count()) }}" color="success">
            <x-slot name="icon">
                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2"/>
                </svg>
            </x-slot>
        </x-posgraf.stat-card>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Info Sinkronisasi</div>
            <p class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
                Report ini membaca log <span class="font-semibold">stock movement tipe usage</span>. Jika order memakai bahan custom, yang masuk ke sini adalah <span class="font-semibold">komponen yang benar-benar berkurang</span>, bukan nama bahan custom-nya.
            </p>
        </div>
    </div>

    <div class="mb-6 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]" x-data="{
        dateRange: '{{ $startDate }} to {{ $endDate }}',
        presets: [
            { label: 'Hari Ini', start: '{{ now()->format('Y-m-d') }}', end: '{{ now()->format('Y-m-d') }}' },
            { label: 'Minggu Ini', start: '{{ now()->startOfWeek()->format('Y-m-d') }}', end: '{{ now()->format('Y-m-d') }}' },
            { label: 'Bulan Ini', start: '{{ now()->startOfMonth()->format('Y-m-d') }}', end: '{{ now()->format('Y-m-d') }}' },
            { label: 'Bulan Lalu', start: '{{ now()->subMonth()->startOfMonth()->format('Y-m-d') }}', end: '{{ now()->subMonth()->endOfMonth()->format('Y-m-d') }}' },
            { label: '3 Bulan', start: '{{ now()->subMonths(3)->startOfMonth()->format('Y-m-d') }}', end: '{{ now()->format('Y-m-d') }}' },
        ],
        isActivePreset(start, end) {
            return this.dateRange === (start + ' to ' + end);
        },
        applyPreset(start, end) {
            this.dateRange = start + ' to ' + end;
            this.$refs.dateInput.value = this.dateRange;
            this.$nextTick(() => {
                this.$refs.filterForm.submit();
            });
        },
        init() {
            this.$nextTick(() => {
                if (typeof flatpickr !== 'undefined') {
                    flatpickr(this.$refs.dateInput, {
                        mode: 'range',
                        static: true,
                        dateFormat: 'Y-m-d',
                        defaultDate: ['{{ $startDate }}', '{{ $endDate }}'],
                        onChange: (selectedDates, dateStr) => {
                            this.dateRange = dateStr;
                        }
                    });
                }
            });
        }
    }">
        <form x-ref="filterForm" method="GET" action="{{ route('stock.usage.index') }}" class="space-y-4">
            <div class="flex flex-wrap gap-2">
                <template x-for="preset in presets" :key="preset.label">
                    <button type="button"
                        @click="applyPreset(preset.start, preset.end)"
                        :class="isActivePreset(preset.start, preset.end)
                            ? 'bg-brand-500 border-brand-500 text-white'
                            : 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800'"
                        class="rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
                        x-text="preset.label">
                    </button>
                </template>
            </div>

            <div class="flex flex-wrap items-end gap-4">
                <div class="flex-1 min-w-[250px] max-w-sm">
                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Rentang Tanggal</label>
                    <div class="relative">
                        <input x-ref="dateInput" type="text" name="date_range" x-model="dateRange" placeholder="Pilih rentang tanggal"
                            class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 pr-10 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 focus:border-brand-500 focus:outline-none"
                            autocomplete="off" />
                        <span class="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        </span>
                    </div>
                </div>
                <div class="w-64">
                    <x-form.select
                        name="material"
                        label="Bahan"
                        placeholder="Semua Bahan"
                        :value="request('material')"
                        :options="$materials->pluck('name', 'id')->toArray()"
                        :searchable="true"
                    />
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="h-11 rounded-lg bg-brand-500 px-6 text-sm font-medium text-white hover:bg-brand-600 transition-colors">
                        <svg class="inline-block w-4 h-4 mr-1.5 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        Filter
                    </button>
                    <a href="{{ route('stock.usage.index') }}" class="h-11 flex items-center rounded-lg border border-gray-300 px-4 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 transition-colors">
                        Reset
                    </a>
                </div>
            </div>
        </form>
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="overflow-hidden rounded-xl">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
                <thead class="bg-gray-50 dark:bg-gray-800/50">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Tanggal</th>
                        <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Bahan</th>
                        <th class="px-5 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Jumlah</th>
                        <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Catatan</th>
                        <th class="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">User</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-white/[0.03]">
                    @forelse ($movements as $movement)
                        @php
                            $qty = (float) ($movement->quantity ?? $movement->qty ?? 0);
                        @endphp
                        <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors">
                            <td class="whitespace-nowrap px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ optional($movement->created_at)->format('d/m/Y H:i') }}
                            </td>
                            <td class="whitespace-nowrap px-5 py-4 text-sm font-medium text-gray-800 dark:text-white/90">
                                {{ $movement->material->name ?? '-' }}
                            </td>
                            <td class="whitespace-nowrap px-5 py-4 text-right text-sm text-blue-light-600 dark:text-blue-light-400 font-medium">
                                -{{ number_format($qty, 2, ',', '.') }} {{ $movement->material->unit ?? '' }}
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate" title="{{ $movement->notes ?? $movement->note ?? $movement->description ?? '-' }}">
                                {{ $movement->notes ?? $movement->note ?? $movement->description ?? '-' }}
                            </td>
                            <td class="whitespace-nowrap px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                {{ $movement->user->name ?? '-' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-5 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                Belum ada data penggunaan bahan pada periode ini
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($movements->hasPages())
            <div class="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
                {{ $movements->links() }}
            </div>
        @endif
    </div>
@endsection