@extends('layouts.authenticated')

@section('title', auth()->user()->role === 'partner' ? 'Laporan Penjualan Saya' : 'Total Penjualan')
@section('page-title', auth()->user()->role === 'partner' ? 'Laporan Penjualan Saya' : 'Total Penjualan per Mitra')

@section('page-content')
<div id="partner-sales-page"
     class="relative space-y-6 animate-fade-in"
     x-data='partnerSalesPage({
         dateFrom: @json($dateFrom instanceof \Carbon\Carbon ? $dateFrom->format('Y-m-d') : $dateFrom),
         dateTo: @json($dateTo instanceof \Carbon\Carbon ? $dateTo->format('Y-m-d') : $dateTo),
         branchId: @json((string) ($branchId ?? '')),
         cashierId: @json((string) ($cashierId ?? '')),
         sortBy: @json((string) ($sortBy ?? 'name')),
     })'
     x-init="init()">

    <div id="partner-sales-loading" class="reports-indicator fixed inset-0 left-0 lg:left-64 top-24 z-40 flex items-start justify-center pt-6 bg-white/55 dark:bg-slate-950/55 backdrop-blur-sm" style="display: none;">
        <div class="flex items-center gap-3 rounded-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 shadow-2xl">
            <svg class="h-5 w-5 animate-spin text-blue-600" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-80" d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="4" stroke-linecap="round"></path>
            </svg>
            <div>
                <p class="text-sm font-semibold text-slate-900 dark:text-white">Memperbarui laporan</p>
                <p class="text-xs text-slate-500 dark:text-slate-400">Mengambil data terbaru...</p>
            </div>
        </div>
    </div>

    <style>
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fade-in 0.25s ease-out;
        }
        .reports-indicator {
            opacity: 0;
            transition: opacity 180ms ease;
            pointer-events: none;
        }
        .htmx-request .reports-indicator,
        .reports-indicator.htmx-request {
            opacity: 1;
            pointer-events: auto;
            display: flex !important;
        }
    </style>

    <!-- Hero -->
    <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-sm">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.12),transparent_28%),radial-gradient(circle_at_bottom_left,rgba(16,185,129,0.10),transparent_26%)]"></div>
        <div class="relative p-6 lg:p-8">
            <div class="grid gap-6 xl:grid-cols-[minmax(0,1.55fr)_minmax(320px,0.95fr)] xl:items-start">
                <div class="max-w-3xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-300 text-xs font-semibold tracking-wide uppercase">
                        {{ auth()->user()->role === 'partner' ? 'Laporan Penjualan Saya' : 'Total Penjualan Mitra' }}
                    </div>
                    <h1 class="mt-4 text-2xl lg:text-3xl font-semibold text-slate-900 dark:text-white leading-tight">
                        {{ auth()->user()->role === 'partner' ? 'Laporan Penjualan Saya' : 'Total Penjualan per Mitra' }}
                    </h1>
                    <p class="mt-3 text-sm lg:text-base text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
                        {{ auth()->user()->role === 'partner' ? 'Rekapitulasi total penjualan produk Anda beserta informasi rekening bank periode' : 'Rekapitulasi total penjualan produk mitra beserta informasi rekening bank periode' }}
                        <span class="font-semibold text-slate-900 dark:text-white">{{ $periodLabel }}</span>.
                    </p>
                </div>

                <div class="space-y-4 xl:pl-2">
                    <div class="flex flex-wrap items-center justify-start xl:justify-end gap-2">
                        <a href="{{ route('reports.partner-sales.pdf', request()->query()) }}"
                           target="_blank"
                           rel="noopener"
                           class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-sm font-semibold border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors shadow-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3v9m0 0l-3-3m3 3l3-3m-9 8h12a2 2 0 002-2v-3H6v3a2 2 0 002 2z"></path>
                            </svg>
                            PDF
                        </a>
                        <a href="{{ route('reports.partner-sales.excel', request()->query()) }}"
                           target="_blank"
                           rel="noopener"
                           class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-sm font-semibold border border-emerald-200 dark:border-emerald-900/50 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 transition-colors shadow-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3v9m0 0l-3-3m3 3l3-3M5 14h14a2 2 0 012 2v2H3v-2a2 2 0 012-2z"></path>
                            </svg>
                            Excel
                        </a>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-700/40 p-4">
                            <p class="text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Cabang</p>
                            <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                                {{ $selectedBranch?->name ?? 'Semua Cabang' }}
                            </p>
                        </div>
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-700/40 p-4">
                            <p class="text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Periode</p>
                            <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{{ $periodLabel }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <form id="partner-sales-filters"
          method="GET"
          action="{{ route('reports.partner-sales') }}"
          x-ref="filtersForm"
          hx-get="{{ route('reports.partner-sales') }}"
          hx-target="#partner-sales-page"
          hx-select="#partner-sales-page"
          hx-swap="outerHTML"
          hx-push-url="true"
          hx-indicator="#partner-sales-loading"
          class="relative overflow-hidden rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 shadow-sm">
        <div class="flex flex-col xl:flex-row xl:items-end gap-4">
            <div class="flex-1">
                <div class="flex items-center justify-between gap-3 mb-3">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Filter Laporan</h2>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Atur periode dan cabang untuk melihat analisis yang tepat.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-3">
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Dari</label>
                        <input type="date" name="date_from" x-model="dateFrom"
                               @change="queueSubmit()"
                               class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Sampai</label>
                        <input type="date" name="date_to" x-model="dateTo"
                               @change="queueSubmit()"
                               class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    @if($canSelectBranch)
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Cabang</label>
                        <select name="branch_id" x-model="branchId"
                                @change="queueSubmit()"
                                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Semua Cabang</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    @if(auth()->user()->role !== 'partner')
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Kasir</label>
                        <select name="cashier_id" x-model="cashierId"
                                @change="queueSubmit()"
                                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Semua Kasir</option>
                            @forelse($cashiers as $cashier)
                                <option value="{{ $cashier->id }}">
                                    {{ $cashier->name }}{{ $cashier->branch?->name ? ' - ' . $cashier->branch->name : '' }}
                                </option>
                            @empty
                                <option value="" disabled>Tidak ada kasir</option>
                            @endforelse
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Urutkan</label>
                        <select name="sort_by" x-model="sortBy"
                                @change="queueSubmit()"
                                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="date">Tanggal Transaksi Terakhir</option>
                            <option value="name">Nama Mitra</option>
                        </select>
                    </div>
                    @endif
                </div>
            </div>

            <div class="xl:w-[380px]">
                <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2 block">Preset Cepat</label>
                <div class="grid grid-cols-2 sm:grid-cols-5 xl:grid-cols-2 gap-2">
                    <button type="button" @click="applyPreset('today')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Hari ini</button>
                    <button type="button" @click="applyPreset('7d')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">7 hari</button>
                    <button type="button" @click="applyPreset('30d')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">30 hari</button>
                    <button type="button" @click="applyPreset('month')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Bulan ini</button>
                    <button type="button" @click="applyPreset('year')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Tahun ini</button>
                    <div class="col-span-2 xl:col-span-2 px-4 py-2.5 rounded-xl text-xs text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-700/40 border border-dashed border-slate-200/70 dark:border-slate-700">
                        Filter diterapkan otomatis saat nilai berubah.
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Table Section -->
    <div class="rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden shadow-sm">
        <div class="px-6 py-5 border-b border-slate-200/70 dark:border-slate-700 flex justify-between items-center">
            <div>
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">
                    {{ auth()->user()->role === 'partner' ? 'Laporan Penjualan Saya' : 'Laporan Penjualan Per Mitra' }}
                </h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
                    {{ auth()->user()->role === 'partner' ? 'Rekapitulasi total penjualan produk Anda beserta informasi rekening bank.' : 'Rekapitulasi total penjualan produk mitra beserta informasi rekening bank.' }}
                </p>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 dark:bg-slate-700/50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 font-medium">No</th>
                        @if(auth()->user()->role !== 'partner')
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Nama Mitra</th>
                        @endif
                        <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Total Transfer</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Bank</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">No Rekening</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Nama Rekening</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                    @forelse($partners as $index => $partner)
                        @php
                            $partnerGrandTotal = 0;
                            foreach($branches as $branch) {
                                $partnerGrandTotal += $salesMatrix[$partner->id][$branch->id] ?? 0;
                            }
                        @endphp
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">{{ $index + 1 }}</td>
                            @if(auth()->user()->role !== 'partner')
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-semibold text-slate-900 dark:text-white">{{ $partner->name }}</div>
                                <div class="text-xs text-slate-400 font-mono">{{ $partner->code }}</div>
                            </td>
                            @endif
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-bold text-blue-600 dark:text-blue-400">
                                 {{ number_format($partnerGrandTotal, 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                @if($partner->nama_bank)
                                    <span class="px-2.5 py-1 rounded-xl bg-slate-100 dark:bg-slate-700 text-xs font-semibold text-slate-700 dark:text-slate-300">
                                        {{ $partner->nama_bank }}
                                    </span>
                                @else
                                    <span class="text-slate-400 dark:text-slate-500">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400 font-mono">
                                {{ $partner->no_rekening ?? '-' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400 font-semibold">
                                {{ $partner->nama_rekening ?? '-' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ auth()->user()->role === 'partner' ? 5 : 6 }}" class="px-6 py-10 text-center text-sm text-slate-500 dark:text-slate-400">
                                Belum ada data mitra dengan transaksi.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
window.partnerSalesPage = function(initial = {}) {
    return {
        dateFrom: initial.dateFrom ?? '',
        dateTo: initial.dateTo ?? '',
        branchId: initial.branchId ?? '',
        cashierId: initial.cashierId ?? '',
        sortBy: initial.sortBy ?? 'date',
        submitTimer: null,
        init() {
            // Initialization if required
        },
        queueSubmit(delay = 250) {
            if (this.submitTimer) {
                window.clearTimeout(this.submitTimer);
            }

            this.submitTimer = window.setTimeout(() => {
                this.submitTimer = null;
                const form = this.$refs.filtersForm;
                if (form) {
                    htmx.trigger(form, 'submit');
                }
            }, delay);
        },
        applyPreset(preset) {
            const today = new Date();
            let fromDate = new Date();
            let toDate = new Date();

            switch (preset) {
                case 'today':
                    fromDate = today;
                    toDate = today;
                    break;
                case '7d':
                    fromDate.setDate(today.getDate() - 6);
                    break;
                case '30d':
                    fromDate.setDate(today.getDate() - 29);
                    break;
                case 'month':
                    fromDate = new Date(today.getFullYear(), today.getMonth(), 1);
                    toDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
                    break;
                case 'year':
                    fromDate = new Date(today.getFullYear(), 0, 1);
                    toDate = new Date(today.getFullYear(), 11, 31);
                    break;
            }

            const formatDate = (d) => {
                const y = d.getFullYear();
                const m = String(d.getMonth() + 1).padStart(2, '0');
                const r = String(d.getDate()).padStart(2, '0');
                return `${y}-${m}-${r}`;
            };

            this.dateFrom = formatDate(fromDate);
            this.dateTo = formatDate(toDate);
            this.queueSubmit(0);
        }
    };
};
</script>
@endpush