@extends('layouts.app')
@section('page-title', 'Company Settings')

@section('content')

    <x-admin-hero-header title="Company Settings" subtitle="Manage your organization's information and branding">
        <x-slot:icon>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 21V5a2 2 0 012-2h8a2 2 0 012 2v16M8 7h4M8 11h4M8 15h4m4-6h2a2 2 0 012 2v10M2 21h20"/>
            </svg>
        </x-slot:icon>
    </x-admin-hero-header>

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

        <x-form-shell title="Company information" description="Manage the organization's contact, identity and branding details." icon="office">
            <div class="space-y-5">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <label for="name" class="form-label">Company Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name"
                            value="{{ old('name', $setting->name) }}"
                            placeholder="Your company name"
                            required
                            class="form-input form-icon-office {{ $errors->has('name') ? 'form-input-error' : '' }}" />
                        @error('name')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="email" class="form-label">Company Email <span class="text-red-500">*</span></label>
                        <input type="email" id="email" name="email"
                            value="{{ old('email', $setting->email) }}"
                            placeholder="info@company.com"
                            required
                            class="form-input {{ $errors->has('email') ? 'form-input-error' : '' }}" />
                        @error('email')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="contact" class="form-label">Contact Number <span class="text-red-500">*</span></label>
                        <input type="tel" id="contact" name="contact" autocomplete="tel"
                            value="{{ old('contact', $setting->contact) }}"
                            placeholder="+92 300 0000000"
                            required
                            class="form-input {{ $errors->has('contact') ? 'form-input-error' : '' }}" />
                        @error('contact')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div>
                    <label for="address" class="form-label">Company Address <span class="text-red-500">*</span></label>
                    <textarea id="address" name="address" rows="3"
                        placeholder="Street, City, Country"
                        required
                        class="form-input resize-none {{ $errors->has('address') ? 'form-input-error' : '' }}">{{ old('address', $setting->address) }}</textarea>
                    @error('address')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>
        <div class="mt-6">
            <x-form-subsection-header title="Branding" description="Upload logos used across light and dark interfaces." icon="image" />
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                <div>
                    <p class="form-label">Favicon</p>
                    <p class="mb-3 text-xs text-surface-400">PNG - Max 512 KB - 32x32px recommended</p>
                    <div x-data="imagePreview(@js($setting->favicon_url ?? ''))"
                         @reset.window="preview = @js($setting->favicon_url ?? '')">
                        <label class="group block cursor-pointer">
                            <div class="flex h-32 flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border-2 border-dashed border-surface-300 bg-surface-50 transition-colors group-hover:border-primary-400">
                                <img x-show="preview" :src="preview" class="h-14 w-auto object-contain" alt="Favicon" />
                                <div x-show="!preview" class="flex flex-col items-center gap-1.5">
                                    <svg class="w-7 h-7 text-surface-300 transition-colors group-hover:text-primary-400"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                    <span class="text-xs text-surface-400">Click to upload</span>
                                </div>
                            </div>
                            <input type="file" name="favicon" accept="image/png,image/jpeg,image/jpg" class="sr-only"
                                @change="handleFile($event)" />
                        </label>
                        @error('favicon')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div>
                    <p class="form-label">Light Logo</p>
                    <p class="mb-3 text-xs text-surface-400">For light backgrounds - PNG, SVG, WebP - Max 2MB</p>
                    <div x-data="imagePreview(@js($setting->logo_light_url ?? ''))"
                         @reset.window="preview = @js($setting->logo_light_url ?? '')">
                        <label class="group block cursor-pointer">
                            <div class="flex h-32 flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border-2 border-dashed border-surface-300 bg-surface-50 p-3 transition-colors group-hover:border-primary-400">
                                <img x-show="preview" :src="preview" class="max-h-20 w-auto max-w-full object-contain" alt="Light Logo" />
                                <div x-show="!preview" class="flex flex-col items-center gap-1.5">
                                    <svg class="w-7 h-7 text-surface-300 transition-colors group-hover:text-primary-400"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                    <span class="text-xs text-surface-400">Click to upload</span>
                                </div>
                            </div>
                            <input type="file" name="logo_light" accept="image/*,.svg" class="sr-only"
                                @change="handleFile($event)" />
                        </label>
                        @error('logo_light')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div>
                    <p class="form-label">Dark Logo</p>
                    <p class="mb-3 text-xs text-surface-400">For dark backgrounds - PNG, SVG, WebP - Max 2MB</p>
                    <div x-data="imagePreview(@js($setting->logo_dark_url ?? ''))"
                         @reset.window="preview = @js($setting->logo_dark_url ?? '')">
                        <label class="group block cursor-pointer">
                            <div class="flex h-32 flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border-2 border-dashed border-surface-300 bg-surface-900 p-3 transition-colors group-hover:border-primary-400">
                                <img x-show="preview" :src="preview" class="max-h-20 w-auto max-w-full object-contain" alt="Dark Logo" />
                                <div x-show="!preview" class="flex flex-col items-center gap-1.5">
                                    <svg class="w-7 h-7 text-surface-600 transition-colors group-hover:text-primary-400"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                    <span class="text-xs text-surface-500">Click to upload</span>
                                </div>
                            </div>
                            <input type="file" name="logo_dark" accept="image/*,.svg" class="sr-only"
                                @change="handleFile($event)" />
                        </label>
                        @error('logo_dark')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>
        </div>

        <x-slot:actions>
            <button type="reset" class="btn-secondary">Clear Unsaved Changes</button>
            <button type="submit" class="btn-primary">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                Save Settings
            </button>
        </x-slot:actions>
        </x-form-shell>

    </form>

@endsection