@extends('layouts.app')

@section('title', 'Settings')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Settings</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'general' }">
  <!-- Header -->
  <div>
    <h1 class="text-3xl font-bold text-slate-900">Settings</h1>
    <p class="text-slate-600 mt-1">Manage system configuration and preferences</p>
  </div>

  <!-- Tabs -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="border-b border-slate-200">
      <div class="flex">
        <button @click="activeTab = 'general'" :class="activeTab === 'general' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          General Settings
        </button>
        <button @click="activeTab = 'hotel'" :class="activeTab === 'hotel' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Hotel Information
        </button>
        <button @click="activeTab = 'payment'" :class="activeTab === 'payment' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Payment Methods
        </button>
        <button @click="activeTab = 'email'" :class="activeTab === 'email' ? 'border-b-2 border-primary-600 text-primary-600' : 'text-slate-600'" class="px-6 py-4 font-medium text-sm transition-colors duration-200">
          Email Configuration
        </button>
      </div>
    </div>

    <!-- Form Content -->
    <form class="p-6">
      <!-- General Settings Tab -->
      <div x-show="activeTab === 'general'" class="space-y-6">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Hotel Name *</label>
          <input type="text" value="Mandala Hotel" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Hotel Logo</label>
          <div class="flex items-center space-x-6">
            <img src="https://via.placeholder.com/100" alt="Logo" class="w-20 h-20 rounded-lg">
            <input type="file" class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Timezone *</label>
            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
              <option value="UTC">UTC</option>
              <option value="EST">Eastern Time (EST)</option>
              <option value="CST">Central Time (CST)</option>
              <option value="MST">Mountain Time (MST)</option>
              <option value="PST">Pacific Time (PST)</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Currency *</label>
            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
              <option value="USD">USD ($)</option>
              <option value="EUR">EUR (€)</option>
              <option value="GBP">GBP (£)</option>
              <option value="CAD">CAD (C$)</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Date Format</label>
            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
              <option value="MM/DD/YYYY">MM/DD/YYYY</option>
              <option value="DD/MM/YYYY">DD/MM/YYYY</option>
              <option value="YYYY-MM-DD">YYYY-MM-DD</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Time Format</label>
            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
              <option value="12hour">12-hour (AM/PM)</option>
              <option value="24hour">24-hour</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Hotel Information Tab -->
      <div x-show="activeTab === 'hotel'" class="space-y-6">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Hotel Address *</label>
          <textarea class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" rows="3" required>123 Main Street, Los Angeles, CA 90210</textarea>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Phone Number *</label>
            <input type="tel" value="+1 (555) 123-4567" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Email Address *</label>
            <input type="email" value="info@mandalhotel.com" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Website</label>
            <input type="url" value="https://www.mandalhotel.com" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Tax ID</label>
            <input type="text" value="12-3456789" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">About Hotel</label>
          <textarea class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" rows="4" placeholder="Brief description about your hotel..."></textarea>
        </div>
      </div>

      <!-- Payment Methods Tab -->
      <div x-show="activeTab === 'payment'" class="space-y-6">
        <div class="space-y-4">
          <h3 class="font-semibold text-slate-900">Available Payment Methods</h3>
          <label class="flex items-center space-x-3">
            <input type="checkbox" class="rounded border-slate-300" checked>
            <span class="text-slate-700">Credit Card</span>
          </label>
          <label class="flex items-center space-x-3">
            <input type="checkbox" class="rounded border-slate-300" checked>
            <span class="text-slate-700">Debit Card</span>
          </label>
          <label class="flex items-center space-x-3">
            <input type="checkbox" class="rounded border-slate-300" checked>
            <span class="text-slate-700">PayPal</span>
          </label>
          <label class="flex items-center space-x-3">
            <input type="checkbox" class="rounded border-slate-300">
            <span class="text-slate-700">Bank Transfer</span>
          </label>
          <label class="flex items-center space-x-3">
            <input type="checkbox" class="rounded border-slate-300">
            <span class="text-slate-700">Cryptocurrency</span>
          </label>
        </div>

        <div class="space-y-4 border-t border-slate-200 pt-6">
          <h3 class="font-semibold text-slate-900">Payment Gateway Configuration</h3>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Stripe API Key</label>
            <input type="password" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="••••••••••••••••">
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">PayPal Client ID</label>
            <input type="password" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="••••••••••••••••">
          </div>
        </div>
      </div>

      <!-- Email Configuration Tab -->
      <div x-show="activeTab === 'email'" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">SMTP Host *</label>
            <input type="text" value="smtp.gmail.com" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">SMTP Port *</label>
            <input type="number" value="587" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">SMTP Username *</label>
            <input type="email" value="noreply@mandalhotel.com" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" required>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">SMTP Password *</label>
            <input type="password" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="••••••••••••••••" required>
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Encryption</label>
          <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
            <option value="tls" selected>TLS</option>
            <option value="ssl">SSL</option>
            <option value="none">None</option>
          </select>
        </div>

        <div>
          <label class="flex items-center space-x-3 mb-4">
            <input type="checkbox" class="rounded border-slate-300" checked>
            <span class="text-slate-700">Use SMTP Authentication</span>
          </label>
        </div>

        <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
          Send Test Email
        </button>
      </div>

      <!-- Form Actions -->
      <div class="flex space-x-4 mt-8 pt-6 border-t border-slate-200">
        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
          Save Settings
        </button>
        <button type="button" class="px-6 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors duration-200 font-medium">
          Reset to Default
        </button>
      </div>
    </form>
  </div>
</div>
@endsection