@extends('layouts.app')

@section('title', 'General Application Settings')

@section('content')
    <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white mb-6">
        General Settings
    </h1>

    {{-- Form Container --}}
    <div
        class="max-w-2xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">

        {{-- Form points to settings.update route --}}
        <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data" class="space-y-8">
            @csrf
            @method('PUT')

            {{-- Bulk Delete Settings --}}
            <fieldset>
                <legend
                    class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                    Bulk Delete Options</legend>
                <div class="space-y-4">
                    {{-- Campaign Bulk Delete Toggle --}}
                    {{-- Uses Alpine for interactive toggle state --}}
                    <div x-data="{ enabled: {{ json_encode(old('enable_campaign_bulk_delete', $settings['enable_campaign_bulk_delete'] ?? true)) }} }" class="flex items-center justify-between">
                        <span class="flex-grow flex flex-col mr-4">
                            <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
                                id="campaign-bulk-label">Enable Campaign Bulk Delete</span>
                            <span class="text-xs text-gray-500 dark:text-gray-400">Allow selecting multiple campaigns for
                                deletion on the index page.</span>
                        </span>
                        {{-- Hidden input submits the actual boolean value (0 or 1) --}}
                        <input type="hidden" name="enable_campaign_bulk_delete" :value="enabled ? 1 : 0">
                        {{-- The button visually represents the toggle --}}
                        <button type="button"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
                            :class="{ 'bg-indigo-600': enabled, 'bg-gray-200 dark:bg-gray-600': !enabled }" role="switch"
                            :aria-checked="enabled.toString()" aria-labelledby="campaign-bulk-label"
                            @click="enabled = !enabled"> {{-- Toggles Alpine state on click --}}
                            <span aria-hidden="true"
                                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                :class="{ 'translate-x-5': enabled, 'translate-x-0': !enabled }"></span>
                            {{-- Moving knob --}}
                        </button>
                    </div>
                    @error('enable_campaign_bulk_delete')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror

                    {{-- Product Bulk Delete Toggle --}}
                    <div x-data="{ enabled: {{ json_encode(old('enable_product_bulk_delete', $settings['enable_product_bulk_delete'] ?? true)) }} }" class="flex items-center justify-between">
                        <span class="flex-grow flex flex-col mr-4">
                            <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
                                id="product-bulk-label">Enable Product Bulk Delete</span>
                            <span class="text-xs text-gray-500 dark:text-gray-400">Allow selecting multiple products for
                                deletion on the index page.</span>
                        </span>
                        <input type="hidden" name="enable_product_bulk_delete" :value="enabled ? 1 : 0">
                        <button type="button"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
                            :class="{ 'bg-indigo-600': enabled, 'bg-gray-200 dark:bg-gray-600': !enabled }" role="switch"
                            :aria-checked="enabled.toString()" aria-labelledby="product-bulk-label"
                            @click="enabled = !enabled">
                            <span aria-hidden="true"
                                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                :class="{ 'translate-x-5': enabled, 'translate-x-0': !enabled }"></span>
                        </button>
                    </div>
                    @error('enable_product_bulk_delete')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </fieldset>

            {{-- Locale Settings --}}
            <fieldset class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600">
                <legend
                    class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                    Localization</legend>
                <div>
                    <label for="app_timezone"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Application Timezone <span
                            class="text-red-500">*</span></label>
                    <select name="app_timezone" id="app_timezone" required
                        class="block w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100 appearance-none @error('app_timezone') border-red-500 ring-1 ring-red-500 @enderror">
                        @foreach ($timezones as $timezone)
                            <option value="{{ $timezone }}" @selected(old('app_timezone', $settings['app_timezone']) === $timezone)>
                                {{ $timezone }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Sets the default timezone for date display and
                        processing.</p>
                    @error('app_timezone')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                {{-- Add Date/Time Format Selectors here if needed --}}
            </fieldset>

            {{-- Organization Details --}}
            <fieldset class="space-y-6 pt-6 border-t border-gray-200 dark:border-gray-600">
                <legend
                    class="text-lg font-semibold text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-600 pb-2 mb-4">
                    Organization Details</legend>
                <div>
                    <label for="org_name"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Organization Name <span
                            class="text-red-500">*</span></label>
                    <input type="text" name="org_name" id="org_name"
                        value="{{ old('org_name', $settings['org_name'] ?? '') }}" required
                        class="block w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('org_name') border-red-500 ring-1 ring-red-500 @enderror">
                    @error('org_name')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="org_email"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Organization Email <span
                            class="text-red-500">*</span></label>
                    <input type="email" name="org_email" id="org_email"
                        value="{{ old('org_email', $settings['org_email'] ?? '') }}" required
                        placeholder="e.g., contact@yourorg.com"
                        class="block w-full mt-1 px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('org_email') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Public contact or default sender address.</p>
                    @error('org_email')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="org_logo"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Organization Logo
                        (Optional)</label>
                    @if ($settings['org_logo_path'])
                        <div class="mb-2 flex items-center space-x-4">
                            <img src="{{ asset('storage/' . $settings['org_logo_path']) }}" alt="Current Org Logo"
                                class="h-12 w-auto rounded border p-1 bg-gray-100">
                            {{-- Optional: Add a remove checkbox --}}
                            {{-- <label for="remove_org_logo" class="flex items-center text-xs text-red-600"><input type="checkbox" id="remove_org_logo" name="remove_org_logo" value="1" class="h-4 w-4 text-red-600 border-gray-300 rounded mr-1"> Remove Logo</label> --}}
                        </div>
                    @endif
                    <input type="file" name="org_logo" id="org_logo"
                        accept="image/jpeg,image/png,image/gif,image/svg+xml"
                        class="block w-full text-sm text-gray-500 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 dark:file:bg-gray-600 file:text-indigo-700 dark:file:text-indigo-200 hover:file:bg-indigo-100 dark:hover:file:bg-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('org_logo') border-red-500 ring-1 ring-red-500 @enderror">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Recommended: SVG or PNG with transparent
                        background. Max 1MB.</p>
                    @error('org_logo')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </fieldset>


            {{-- Submit Button --}}
            <div class="flex justify-end pt-8 border-t border-gray-200 dark:border-gray-600">
                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    Save General Settings
                </button>
            </div>
        </form>
    </div> {{-- End Form Container --}}

@endsection