@extends('layouts.admin')

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

@section('content')
@php
use App\Models\Setting;
$groups = ['general' => 'General', 'contact' => 'Contact', 'social' => 'Social', 'advanced' => 'Advanced'];
$currentGroup = request('group', 'general');
@endphp

<!-- Tabs -->
<div class="flex gap-2 mb-6 overflow-x-auto">
    @foreach($groups as $key => $label)
    <a href="{{ route('admin.settings.index', ['group' => $key]) }}" 
       class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $currentGroup === $key ? 'bg-blue-600 text-white' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}">
        {{ $label }}
    </a>
    @endforeach
</div>

@if(session('success'))
<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
    {{ session('success') }}
</div>
@endif

<!-- Common Settings for General Group -->
@if($currentGroup === 'general')
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Site Information</h3>
        <form method="POST" action="{{ route('admin.settings.store') }}">
            @csrf
            <input type="hidden" name="key" value="site_title">
            <input type="hidden" name="type" value="text">
            <input type="hidden" name="group" value="general">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Site Title</label>
                <input type="text" name="value" value="{{ Setting::getValue('site_title', 'BMS - Hospital Management') }}" 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                Save
            </button>
        </form>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Site Logo</h3>
        <form method="POST" action="{{ route('admin.settings.store') }}">
            @csrf
            <input type="hidden" name="key" value="site_logo">
            <input type="hidden" name="type" value="text">
            <input type="hidden" name="group" value="general">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Logo URL</label>
                <input type="text" name="value" value="{{ Setting::getValue('site_logo', '') }}" 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="https://example.com/logo.png">
                @if(Setting::getValue('site_logo'))
                <div class="mt-2">
                    <img src="{{ Setting::getValue('site_logo') }}" alt="Current Logo" class="h-12 object-contain">
                </div>
                @endif
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                Save
            </button>
        </form>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Contact Information</h3>
    <form method="POST" action="{{ route('admin.settings.store') }}">
        @csrf
        <input type="hidden" name="group" value="general">
        <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">Contact Email</label>
                <input type="hidden" name="settings[0][key]" value="contact_email">
                <input type="hidden" name="settings[0][type]" value="email">
                <input type="email" name="settings[0][value]" value="{{ Setting::getValue('contact_email', '') }}" 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="contact@example.com">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Contact Phone</label>
                <input type="hidden" name="settings[1][key]" value="contact_phone">
                <input type="hidden" name="settings[1][type]" value="text">
                <input type="text" name="settings[1][value]" value="{{ Setting::getValue('contact_phone', '') }}" 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="+1 234 567 8900">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Contact Address</label>
                <input type="hidden" name="settings[2][key]" value="contact_address">
                <input type="hidden" name="settings[2][type]" value="textarea">
                <textarea name="settings[2][value]" rows="2"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="123 Main Street, City, Country">{{ Setting::getValue('contact_address', '') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Working Hours</label>
                <input type="hidden" name="settings[3][key]" value="working_hours">
                <input type="hidden" name="settings[3][type]" value="text">
                <input type="text" name="settings[3][value]" value="{{ Setting::getValue('working_hours', '') }}" 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="Mon-Fri: 9AM - 6PM">
            </div>
        </div>
        <div class="mt-4">
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                Save Contact Info
            </button>
        </div>
    </form>
</div>
@endif

<!-- Add New Setting -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Add New Setting</h3>
    <form method="POST" action="{{ route('admin.settings.store') }}" class="flex flex-wrap gap-4 items-end">
        @csrf
        <div class="flex-1 min-w-[200px]">
            <label class="block text-sm font-medium text-gray-700 mb-1">Key</label>
            <input type="text" name="key" placeholder="setting_key" required
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div class="flex-1 min-w-[200px]">
            <label class="block text-sm font-medium text-gray-700 mb-1">Value</label>
            <input type="text" name="value" placeholder="Value"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div class="w-32">
            <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
            <select name="type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="text">Text</option>
                <option value="textarea">Textarea</option>
                <option value="number">Number</option>
                <option value="email">Email</option>
                <option value="url">URL</option>
                <option value="boolean">Boolean</option>
            </select>
        </div>
        <input type="hidden" name="group" value="{{ $currentGroup }}">
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            Add
        </button>
    </form>
</div>

<!-- Settings List -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="p-4 border-b border-gray-100">
        <h3 class="text-lg font-semibold text-gray-800">All {{ ucfirst($currentGroup) }} Settings</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($settings as $setting)
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4">
                        <span class="font-medium text-gray-800">{{ $setting->key }}</span>
                    </td>
                    <td class="px-6 py-4 max-w-xs">
                        @if($setting->type === 'textarea')
                            <span class="text-sm text-gray-600 line-clamp-2">{{ $setting->value }}</span>
                        @elseif($setting->type === 'boolean')
                            <span class="px-2 py-1 text-xs font-medium rounded-full {{ $setting->value === 'true' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $setting->value === 'true' ? 'True' : 'False' }}
                            </span>
                        @elseif($setting->type === 'url' || $setting->type === 'image')
                            <a href="{{ $setting->value }}" target="_blank" class="text-blue-600 hover:underline text-sm truncate block max-w-xs">
                                {{ $setting->value }}
                            </a>
                        @else
                            <span class="text-sm text-gray-600 truncate block max-w-xs">{{ $setting->value }}</span>
                        @endif
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">{{ $setting->type }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-2">
                            <form method="POST" action="{{ route('admin.settings.update', $setting) }}" class="flex items-center gap-2">
                                @csrf
                                @method('PUT')
                                <input type="text" name="value" value="{{ $setting->value }}" 
                                       class="w-40 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500">
                                <button type="submit" class="text-blue-600 hover:text-blue-700 text-sm">Save</button>
                            </form>
                            <form method="POST" action="{{ route('admin.settings.destroy', $setting) }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit" onclick="return confirm('Delete?')" class="text-red-600 hover:text-red-700">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                        No settings found in this group
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection