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

@section('content')
<form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Hotel Images -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-images text-gold mr-3"></i>
            Hotel Images
        </h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Hotel Logo</label>
                <input type="file" name="hotel_logo" accept="image/*" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                @if(isset($settings['hotel_logo']) && $settings['hotel_logo'])
                <div class="mt-2">
                    <img src="{{ asset('storage/' . $settings['hotel_logo']) }}" alt="Logo" class="h-20 object-contain">
                    <p class="text-xs text-gray-500 mt-1">Current logo</p>
                </div>
                @endif
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Hero/Banner Image</label>
                <input type="file" name="hero_image" accept="image/*" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                @if(isset($settings['hero_image']) && $settings['hero_image'])
                <div class="mt-2">
                    <img src="{{ asset('storage/' . $settings['hero_image']) }}" alt="Hero" class="h-32 object-cover rounded">
                    <p class="text-xs text-gray-500 mt-1">Current banner</p>
                </div>
                @endif
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">About Hotel Image</label>
                <input type="file" name="about_image" accept="image/*" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                @if(isset($settings['about_image']) && $settings['about_image'])
                <div class="mt-2">
                    <img src="{{ asset('storage/' . $settings['about_image']) }}" alt="About" class="h-32 object-cover rounded">
                    <p class="text-xs text-gray-500 mt-1">Current image</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Hotel Information -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-hotel text-gold mr-3"></i>
            Hotel Information
        </h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Hotel Name</label>
                <input type="text" name="hotel_name" value="{{ $settings['hotel_name'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tagline</label>
                <input type="text" name="hotel_tagline" value="{{ $settings['hotel_tagline'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">About Hotel</label>
                <textarea name="about_text" rows="4" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">{{ $settings['about_text'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

    <!-- Contact Information -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-phone-alt text-gold mr-3"></i>
            Contact Information
        </h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                <input type="text" name="hotel_phone" value="{{ $settings['hotel_phone'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="+254 700 123 456">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <input type="email" name="hotel_email" value="{{ $settings['hotel_email'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                <textarea name="hotel_address" rows="2" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">{{ $settings['hotel_address'] ?? '' }}</textarea>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
                    <input type="text" name="hotel_city" value="{{ $settings['hotel_city'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                    <input type="text" name="hotel_country" value="{{ $settings['hotel_country'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                </div>
            </div>
        </div>
    </div>

    <!-- Social Media -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-share-alt text-gold mr-3"></i>
            Social Media Links
        </h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Website</label>
                <input type="url" name="hotel_website" value="{{ $settings['hotel_website'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Facebook URL</label>
                <input type="url" name="facebook_url" value="{{ $settings['facebook_url'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Twitter URL</label>
                <input type="url" name="twitter_url" value="{{ $settings['twitter_url'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Instagram URL</label>
                <input type="url" name="instagram_url" value="{{ $settings['instagram_url'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
        </div>
    </div>

    <!-- Booking Settings -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-cog text-gold mr-3"></i>
            Booking Settings
        </h3>
        <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Check-in Time</label>
                    <input type="time" name="check_in_time" value="{{ $settings['check_in_time'] ?? '14:00' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Check-out Time</label>
                    <input type="time" name="check_out_time" value="{{ $settings['check_out_time'] ?? '12:00' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tax Rate (%)</label>
                    <input type="number" name="tax_rate" value="{{ $settings['tax_rate'] ?? '16' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" min="0" max="100">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
                    <select name="currency" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                        <option value="NGN" {{ ($settings['currency'] ?? '') == 'NGN' ? 'selected' : '' }}>NGN - Nigerian Naira</option>
                        <option value="USD" {{ ($settings['currency'] ?? '') == 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                        <option value="GBP" {{ ($settings['currency'] ?? '') == 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                        
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Booking Email</label>
                <input type="email" name="booking_email" value="{{ $settings['booking_email'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
        </div>
    </div>

    <!-- Email Notifications -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-envelope text-gold mr-3"></i>
            Email Notifications
        </h3>
        <div class="space-y-4">
            <p class="text-sm text-gray-500 mb-4">Enable or disable automatic email notifications for various events.</p>
            <div class="space-y-3">
                <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
                    <div>
                        <span class="font-medium text-gray-700">Booking Received</span>
                        <p class="text-xs text-gray-500">Notify admins when new booking is submitted</p>
                    </div>
                    <input type="hidden" name="notify_booking_received" value="0">
                    <input type="checkbox" name="notify_booking_received" value="1" {{ ($settings['notify_booking_received'] ?? '1') == '1' ? 'checked' : '' }} class="w-5 h-5 text-gold rounded focus:ring-gold">
                </label>
                <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
                    <div>
                        <span class="font-medium text-gray-700">Booking Confirmed</span>
                        <p class="text-xs text-gray-500">Send confirmation email to guest</p>
                    </div>
                    <input type="hidden" name="notify_booking_confirmed" value="0">
                    <input type="checkbox" name="notify_booking_confirmed" value="1" {{ ($settings['notify_booking_confirmed'] ?? '1') == '1' ? 'checked' : '' }} class="w-5 h-5 text-gold rounded focus:ring-gold">
                </label>
                <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
                    <div>
                        <span class="font-medium text-gray-700">Booking Cancelled</span>
                        <p class="text-xs text-gray-500">Notify guest when booking is cancelled</p>
                    </div>
                    <input type="hidden" name="notify_booking_cancelled" value="0">
                    <input type="checkbox" name="notify_booking_cancelled" value="1" {{ ($settings['notify_booking_cancelled'] ?? '1') == '1' ? 'checked' : '' }} class="w-5 h-5 text-gold rounded focus:ring-gold">
                </label>
                <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
                    <div>
                        <span class="font-medium text-gray-700">Check-in Notification</span>
                        <p class="text-xs text-gray-500">Send welcome email when guest checks in</p>
                    </div>
                    <input type="hidden" name="notify_checkin" value="0">
                    <input type="checkbox" name="notify_checkin" value="1" {{ ($settings['notify_checkin'] ?? '1') == '1' ? 'checked' : '' }} class="w-5 h-5 text-gold rounded focus:ring-gold">
                </label>
                <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
                    <div>
                        <span class="font-medium text-gray-700">Check-out Reminder</span>
                        <p class="text-xs text-gray-500">Send reminder email before check-out</p>
                    </div>
                    <input type="hidden" name="notify_checkout" value="0">
                    <input type="checkbox" name="notify_checkout" value="1" {{ ($settings['notify_checkout'] ?? '1') == '1' ? 'checked' : '' }} class="w-5 h-5 text-gold rounded focus:ring-gold">
                </label>
                <label class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
                    <div>
                        <span class="font-medium text-gray-700">Low Stock Alerts</span>
                        <p class="text-xs text-gray-500">Notify managers when inventory is low</p>
                    </div>
                    <input type="hidden" name="notify_low_stock" value="0">
                    <input type="checkbox" name="notify_low_stock" value="1" {{ ($settings['notify_low_stock'] ?? '1') == '1' ? 'checked' : '' }} class="w-5 h-5 text-gold rounded focus:ring-gold">
                </label>
            </div>
        </div>
    </div>

    <!-- Bank Details -->
    <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-university text-gold mr-3"></i>
            Bank Payment Details (for online bookings)
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Bank Name</label>
                <input type="text" name="bank_name" value="{{ $settings['bank_name'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="e.g. First Bank of Nigeria">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Account Name</label>
                <input type="text" name="bank_account_name" value="{{ $settings['bank_account_name'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="Hotel Company Name">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Account Number</label>
                <input type="text" name="bank_account_number" value="{{ $settings['bank_account_number'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="10-digit account number">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Account Type</label>
                <select name="bank_account_type" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                    <option value="">Select Type</option>
                    <option value="Savings" {{ ($settings['bank_account_type'] ?? '') == 'Savings' ? 'selected' : '' }}>Savings</option>
                    <option value="Current" {{ ($settings['bank_account_type'] ?? '') == 'Current' ? 'selected' : '' }}>Current</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Sort Code / Branch Code</label>
                <input type="text" name="bank_sort_code" value="{{ $settings['bank_sort_code'] ?? '' }}" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="e.g. 011">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
                <select name="bank_currency" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
                    <option value="NGN" {{ ($settings['bank_currency'] ?? 'NGN') == 'NGN' ? 'selected' : '' }}>Nigerian Naira (NGN)</option>
                    <option value="USD" {{ ($settings['bank_currency'] ?? '') == 'USD' ? 'selected' : '' }}>US Dollar (USD)</option>
                    <option value="GBP" {{ ($settings['bank_currency'] ?? '') == 'GBP' ? 'selected' : '' }}>British Pound (GBP)</option>
                    <option value="EUR" {{ ($settings['bank_currency'] ?? '') == 'EUR' ? 'selected' : '' }}>Euro (EUR)</option>
                </select>
            </div>
            <div class="md:col-span-2 lg:col-span-3">
                <label class="block text-sm font-medium text-gray-700 mb-1">Payment Instructions (shown to guests)</label>
                <textarea name="payment_instructions" rows="2" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="Instructions for guests on how to make payment">{{ $settings['payment_instructions'] ?? '' }}</textarea>
            </div>
        </div>
    <!-- Color Theme -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-navy mb-6 flex items-center">
            <i class="fas fa-palette text-gold mr-3"></i>
            Color Theme
        </h3>
        <p class="text-sm text-gray-500 mb-4">Customize the colors used throughout the website. Use hex color codes (e.g., #D4AF37).</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Primary Color (Gold)</label>
                <div class="flex gap-2">
                    <input type="color" id="primary_color_picker" value="{{ $settings['primary_color'] ?? '#D4AF37' }}" class="h-10 w-14 border rounded cursor-pointer" onchange="document.getElementById('primary_color').value = this.value">
                    <input type="text" name="primary_color" id="primary_color" value="{{ $settings['primary_color'] ?? '#D4AF37' }}" class="flex-1 border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="#D4AF37">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Primary Dark</label>
                <div class="flex gap-2">
                    <input type="color" id="primary_dark_picker" value="{{ $settings['primary_dark'] ?? '#B8941F' }}" class="h-10 w-14 border rounded cursor-pointer" onchange="document.getElementById('primary_dark').value = this.value">
                    <input type="text" name="primary_dark" id="primary_dark" value="{{ $settings['primary_dark'] ?? '#B8941F' }}" class="flex-1 border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="#B8941F">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Secondary Color (Navy)</label>
                <div class="flex gap-2">
                    <input type="color" id="secondary_color_picker" value="{{ $settings['secondary_color'] ?? '#1a1a2e' }}" class="h-10 w-14 border rounded cursor-pointer" onchange="document.getElementById('secondary_color').value = this.value">
                    <input type="text" name="secondary_color" id="secondary_color" value="{{ $settings['secondary_color'] ?? '#1a1a2e' }}" class="flex-1 border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="#1a1a2e">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Secondary Dark</label>
                <div class="flex gap-2">
                    <input type="color" id="secondary_dark_picker" value="{{ $settings['secondary_dark'] ?? '#16213e' }}" class="h-10 w-14 border rounded cursor-pointer" onchange="document.getElementById('secondary_dark').value = this.value">
                    <input type="text" name="secondary_dark" id="secondary_dark" value="{{ $settings['secondary_dark'] ?? '#16213e' }}" class="flex-1 border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold" placeholder="#16213e">
                </div>
            </div>
        </div>
        <div class="mt-4 p-4 bg-gray-50 rounded-lg">
            <p class="text-sm font-medium text-gray-700 mb-2">Preview</p>
            <div class="flex gap-4">
                <span class="px-4 py-2 rounded" id="preview_primary" style="background-color: {{ $settings['primary_color'] ?? '#D4AF37' }}; color: white;">Primary</span>
                <span class="px-4 py-2 rounded" id="preview_secondary" style="background-color: {{ $settings['secondary_color'] ?? '#1a1a2e' }}; color: white;">Secondary</span>
            </div>
        </div>
    </div>
</div>

<div class="mt-6 flex justify-end">
    <button type="submit" class="px-6 py-3 bg-gold text-white rounded-lg hover:bg-gold-dark transition font-medium">
        <i class="fas fa-save mr-2"></i>Save All Settings
    </button>
</div>
</form>
@endsection