@extends('layouts.admin')

@section('title', 'Pengaturan Fee per Toko - Report Admin')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pengaturan Fee per Toko</h1>
            <p class="text-sm text-gray-500 mt-1">Konstanta potongan per toko untuk perhitungan laba</p>
        </div>
    </div>

    @if($stores->count() > 0)
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        @foreach($stores as $store)
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
            <div class="px-4 py-3 border-b border-gray-100 flex items-center gap-2">
                <span class="material-symbols-outlined text-indigo-600">store</span>
                <h3 class="font-semibold text-gray-900">{{ $store->name }}</h3>
                @if($store->code)
                <span class="text-xs text-gray-400 ml-1">({{ $store->code }})</span>
                @endif
            </div>

            <form id="storeFeeForm{{ $store->id }}" onsubmit="saveStoreFee(event, {{ $store->id }})" class="p-4 space-y-4">
                <input type="hidden" name="store_id" value="{{ $store->id }}">

                <!-- Shopee Section -->
                <div class="space-y-3">
                    <div class="flex items-center gap-1">
                        <span class="material-symbols-outlined text-orange-500 text-base">shopping_cart</span>
                        <span class="text-sm font-semibold text-gray-800">Shopee</span>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Biaya Admin</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[admin_fee_percent_shopee]"
                                       value="{{ $store->admin_fee_percent_shopee ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Biaya Layanan</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[service_fee_percent_shopee]"
                                       value="{{ $store->service_fee_percent_shopee ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Gratis Ongkir</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[free_shipping_fee_percent_shopee]"
                                       value="{{ $store->free_shipping_fee_percent_shopee ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Program Lainnya</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[other_fee_percent_shopee]"
                                       value="{{ $store->other_fee_percent_shopee ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                    </div>
                    @php
                        $shopeeTotal = ($store->admin_fee_percent_shopee ?? 0)
                            + ($store->service_fee_percent_shopee ?? 0)
                            + ($store->free_shipping_fee_percent_shopee ?? 0)
                            + ($store->other_fee_percent_shopee ?? 0);
                    @endphp
                    <div class="flex items-center gap-2 text-xs text-gray-500">
                        <span class="material-symbols-outlined text-orange-400 text-sm">info</span>
                        <span>Total biaya Shopee: <strong class="text-orange-600">{{ $shopeeTotal > 0 ? round($shopeeTotal, 2) . '%' : '0%' }}</strong> (Admin + Layanan + Ongkir + Lainnya)</span>
                    </div>
                </div>

                <!-- TikTok Section -->
                <div class="space-y-3 pt-3 border-t border-gray-100">
                    <div class="flex items-center gap-1">
                        <span class="material-symbols-outlined text-black text-base">live_tv</span>
                        <span class="text-sm font-semibold text-gray-800">TikTok</span>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Biaya Admin</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[admin_fee_percent_tiktok]"
                                       value="{{ $store->admin_fee_percent_tiktok ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Biaya Layanan</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[service_fee_percent_tiktok]"
                                       value="{{ $store->service_fee_percent_tiktok ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Gratis Ongkir</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[free_shipping_fee_percent_tiktok]"
                                       value="{{ $store->free_shipping_fee_percent_tiktok ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">Program Lainnya</label>
                            <div class="relative">
                                <input type="number" step="0.01" min="0" name="values[other_fee_percent_tiktok]"
                                       value="{{ $store->other_fee_percent_tiktok ?? '' }}"
                                       placeholder="0"
                                       class="w-full h-9 px-3 pr-8 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">%</span>
                            </div>
                        </div>
                    </div>
                    @php
                        $tiktokTotal = ($store->admin_fee_percent_tiktok ?? 0)
                            + ($store->service_fee_percent_tiktok ?? 0)
                            + ($store->free_shipping_fee_percent_tiktok ?? 0)
                            + ($store->other_fee_percent_tiktok ?? 0);
                    @endphp
                    <div class="flex items-center gap-2 text-xs text-gray-500">
                        <span class="material-symbols-outlined text-black opacity-60 text-sm">info</span>
                        <span>Total biaya TikTok: <strong class="text-gray-700">{{ $tiktokTotal > 0 ? round($tiktokTotal, 2) . '%' : '0%' }}</strong> (Admin + Layanan + Ongkir + Lainnya)</span>
                    </div>
                </div>

                <!-- Shared: Biaya Pemrosesan per Pesanan -->
                <div class="pt-3 border-t border-gray-100">
                    <label class="block text-xs font-medium text-gray-600 mb-1">Biaya Pemrosesan per Pesanan</label>
                    <div class="relative max-w-xs">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">Rp</span>
                        <input type="number" step="0.01" min="0" name="values[transaction_fee_per_order]"
                               value="{{ $store->transaction_fee_per_order ?? '' }}"
                               placeholder="0"
                               class="w-full h-9 pl-7 pr-3 rounded-lg border border-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white text-xs font-medium hover:bg-indigo-700">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-8 text-center">
        <span class="material-symbols-outlined text-gray-300 text-5xl">store</span>
        <p class="text-gray-500 mt-3">Belum ada toko. Tambahkan toko terlebih dahulu.</p>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';

    async function saveStoreFee(e, storeId) {
        e.preventDefault();
        const form = document.getElementById('storeFeeForm' + storeId);
        const values = {};
        new FormData(form).forEach((v, k) => {
            if (k.startsWith('values[')) {
                const key = k.replace('values[', '').replace(']', '');
                values[key] = v === '' ? null : v;
            }
        });

        const res = await fetch('{{ route("admin.settings.store-fee.update") }}', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ store_id: storeId, values }),
        });

        if (res.ok) {
            alert('Pengaturan toko berhasil disimpan');
        } else {
            const data = await res.json().catch(() => ({}));
            alert(data.message || 'Gagal menyimpan pengaturan toko');
        }
    }
</script>
@endpush