@extends('layouts.admin')

@section('page-title', 'Seller Settings')

@section('content')
<div class="space-y-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Seller Settings</h2>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Left Column --}}
        <div class="space-y-6">
            {{-- Seller Products Commission --}}
            <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
                <div class="px-6 py-4 border-b">
                    <h4 class="text-base font-semibold text-gray-800">Seller Products Commission</h4>
                </div>
                <div class="p-6">
                    <form action="{{ route('admin.settings.update') }}" method="POST">
                        @csrf
                        <table class="w-full text-sm">
                            <tbody>
                                <tr class="border-b">
                                    <td class="py-3 pr-4">Category Based Commission</td>
                                    <td class="py-3">
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" name="category_commission_status" value="1" {{ \App\Models\Setting::get('category_commission_status', 0) == 1 ? 'checked' : '' }} class="sr-only peer status-toggle" data-setting="category_commission_status">
                                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                                        </label>
                                    </td>
                                </tr>
                                <tr class="border-b">
                                    <td class="py-3 pr-4">Seller Based Commission</td>
                                    <td class="py-3">
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox" name="seller_commission_status" value="1" {{ \App\Models\Setting::get('seller_commission_status', 0) == 1 ? 'checked' : '' }} class="sr-only peer status-toggle" data-setting="seller_commission_status">
                                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                                        </label>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        {{-- Seller Commission Field --}}
                        <div id="seller-commission-field" class="mt-4 {{ \App\Models\Setting::get('seller_commission_status', 0) == 1 ? '' : 'hidden' }}">
                            <div class="flex items-end gap-3">
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Seller Commission *</label>
                                    <div class="relative">
                                        <input type="number" step="any" name="seller_commission" value="{{ \App\Models\Setting::get('seller_commission', 10) }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg pr-10 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter Seller Commission">
                                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">%</span>
                                    </div>
                                </div>
                                <button type="submit" class="px-4 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium transition">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Contact Message to Seller Mail --}}
            <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
                <div class="px-6 py-4 border-b">
                    <h4 class="text-base font-semibold text-gray-800">Seller Page Contact message to seller mail</h4>
                </div>
                <div class="p-6">
                    <table class="w-full text-sm">
                        <tbody>
                            <tr>
                                <td class="py-3 pr-4">Message to seller mail</td>
                                <td class="py-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="contact_message_to_seller_mail" value="1" {{ \App\Models\Setting::get('contact_message_to_seller_mail', 0) == 1 ? 'checked' : '' }} class="sr-only peer status-toggle" data-setting="contact_message_to_seller_mail">
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Right Column --}}
        <div>
            <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
                <div class="px-6 py-4 border-b">
                    <h4 class="text-base font-semibold text-gray-800">Commission Info</h4>
                </div>
                <div class="p-6">
                    <div class="text-sm text-gray-600 space-y-3">
                        <p class="font-medium text-gray-800">Type Details:</p>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Category Based Commission: If Category Based Commission is enabled, Seller product based commission will not be applicable.</li>
                            <li>Seller Based Commission: Given Seller Based Commission percentage amount will be deducted from seller earnings.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.querySelectorAll('.status-toggle').forEach(toggle => {
    toggle.addEventListener('change', function() {
        const setting = this.dataset.setting;
        const value = this.checked ? 1 : 0;

        fetch('{{ route("admin.settings.update") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ [setting]: value }),
        });
    });
});

document.querySelector('[name="seller_commission_status"]')?.addEventListener('change', function() {
    const field = document.getElementById('seller-commission-field');
    if (this.checked) {
        field.classList.remove('hidden');
    } else {
        field.classList.add('hidden');
    }
});
</script>
@endsection