@extends('layouts.admin')

@section('content')
<div class="max-w-4xl">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Site Settings</h1>
        <p class="text-gray-600 mt-2">Manage your store's currency and tax configuration</p>
    </div>

    <div class="bg-white rounded-lg shadow-md p-8">
        <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- Currency Settings -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-4 pb-2 border-b">Currency Settings</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Currency Symbol</label>
                        <input
                            type="text"
                            name="currency_symbol"
                            value="{{ $settings['currency_symbol'] }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                            required
                        >
                        @error('currency_symbol')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                        <p class="text-xs text-gray-500 mt-1">Symbol displayed before prices (e.g., ৳, $, €)</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Currency Code</label>
                        <input
                            type="text"
                            name="currency_code"
                            value="{{ $settings['currency_code'] }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                            maxlength="3"
                            required
                        >
                        @error('currency_code')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                        <p class="text-xs text-gray-500 mt-1">ISO currency code (e.g., BDT, USD, EUR)</p>
                    </div>
                </div>
            </div>

            <!-- Tax Settings -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-4 pb-2 border-b">Tax Settings</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tax Rate (%)</label>
                        <input
                            type="number"
                            name="tax_rate"
                            value="{{ $settings['tax_rate'] }}"
                            step="0.01"
                            min="0"
                            max="100"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                            required
                        >
                        @error('tax_rate')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                        <p class="text-xs text-gray-500 mt-1">Enter 0 for no tax, 15 for 15% VAT, etc.</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tax Name</label>
                        <input
                            type="text"
                            name="tax_name"
                            value="{{ $settings['tax_name'] }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                            required
                        >
                        @error('tax_name')
                            <span class="text-red-500 text-sm">{{ $message }}</span>
                        @enderror
                        <p class="text-xs text-gray-500 mt-1">Display name for tax (e.g., VAT, GST, Tax)</p>
                    </div>
                </div>
            </div>

            <!-- Header Menu Settings -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-900 mb-4 pb-2 border-b">Header Menu</h2>

                <div class="flex items-center space-x-3">
                    <label class="inline-flex items-center cursor-pointer">
                        <input
                            type="checkbox"
                            name="header_show_admin_link"
                            value="1"
                            class="rounded border-gray-300 text-orange-600 focus:ring-orange-500"
                            {{ $settings['header_show_admin_link'] ? 'checked' : '' }}
                        >
                        <span class="ml-2 text-sm text-gray-900">Show "Admin Dashboard" link in the header for admin users</span>
                    </label>
                </div>
                <p class="text-xs text-gray-500 mt-2">When enabled, admin users will see a quick link to the admin dashboard in the site header.</p>

                {{-- Header categories multi-select (checkbox list) --}}
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Header Categories</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 border border-gray-200 rounded-lg p-3 max-h-56 overflow-y-auto">
                        @foreach ($categories as $category)
                            <label class="inline-flex items-center text-sm text-gray-700 cursor-pointer">
                                <input
                                    type="checkbox"
                                    name="header_menu_category_ids[]"
                                    value="{{ $category->id }}"
                                    class="rounded border-gray-300 text-orange-600 focus:ring-orange-500 mr-2"
                                    @if(in_array($category->id, $settings['header_menu_category_ids'] ?? [])) checked @endif
                                >
                                <span>{{ $category->name }}</span>
                            </label>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Choose which categories appear in the header menu. Leave all unchecked to use the default top categories.</p>
                </div>

                {{-- Header logo upload --}}
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Header Logo</label>
                    <input
                        type="file"
                        name="header_logo"
                        accept="image/*"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent bg-white"
                    >
                    @if (!empty($settings['header_logo_path']))
                        <p class="text-xs text-gray-500 mt-2 mb-1">Current logo preview:</p>
                        <div class="inline-block px-3 py-2 bg-gray-50 border border-gray-200 rounded">
                            @php($previewLogoUrl = function_exists('header_logo_url') ? header_logo_url() : null)
                            @if ($previewLogoUrl)
                                <img src="{{ $previewLogoUrl }}" alt="Header logo" class="h-10 w-auto">
                            @else
                                <span class="text-xs text-red-500">Logo file not found in storage.</span>
                            @endif
                        </div>
                    @endif
                    <p class="text-xs text-gray-500 mt-1">Optional. Upload an image to use as the site logo in the header.</p>
                </div>
            </div>

            <!-- Preview -->
            <div class="bg-gray-50 rounded-lg p-6 mb-6">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">Preview</h3>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Product Price:</span>
                        <span class="font-semibold">{{ $settings['currency_symbol'] }}100.00</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">{{ $settings['tax_name'] }} ({{ $settings['tax_rate'] }}%):</span>
                        <span class="font-semibold">{{ $settings['currency_symbol'] }}{{ number_format(100 * ($settings['tax_rate'] / 100), 2) }}</span>
                    </div>
                    <div class="flex justify-between pt-2 border-t">
                        <span class="font-semibold">Total:</span>
                        <span class="font-bold text-orange-600">{{ $settings['currency_symbol'] }}{{ number_format(100 * (1 + $settings['tax_rate'] / 100), 2) }}</span>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex gap-4">
                <button
                    type="submit"
                    class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-semibold rounded-lg transition"
                >
                    Save Settings
                </button>
                <a
                    href="{{ route('admin.dashboard') }}"
                    class="px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition"
                >
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection