@extends('layouts.admin')
@section('title', 'Edit Church')
@section('page-title', 'Edit Church')
@section('page-subtitle', $church->name)

@section('content')
<div class="max-w-2xl mx-auto">
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
            {{ session('success') }}
        </div>
    @endif

    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-6">Church Information</h3>
        
        <form action="{{ route('admin.churches.update', $church) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="space-y-6">
                <div class="flex items-center gap-6">
                    @if($church->logo)
                        <div class="relative">
                            <img src="{{ asset('storage/' . $church->logo) }}" alt="{{ $church->name }}" class="w-24 h-24 rounded-lg object-cover">
                        </div>
                    @endif
                    <div class="flex-1">
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Update Logo</label>
                        <input type="file" name="logo" accept="image/png,image/jpeg,image/jpg,image/svg+xml"
                            class="w-full text-sm text-[var(--text-secondary)] file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-gold-500 file:text-white hover:file:bg-gold-600 file:cursor-pointer">
                        @if($church->logo)
                            <label class="flex items-center gap-2 mt-2">
                                <input type="checkbox" name="remove_logo" value="1" class="w-4 h-4 rounded border-[var(--border-color)]">
                                <span class="text-sm text-red-500">Remove current logo</span>
                            </label>
                        @endif
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Church Name *</label>
                    <input type="text" name="name" value="{{ old('name', $church->name) }}" required
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Tagline</label>
                    <input type="text" name="tagline" value="{{ old('tagline', $church->tagline) }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Email</label>
                        <input type="email" name="email" value="{{ old('email', $church->email) }}"
                            class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $church->phone) }}"
                            class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Address</label>
                    <textarea name="address" rows="2"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">{{ old('address', $church->address) }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Location</label>
                    <input type="text" name="location" value="{{ old('location', $church->location) }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="e.g., Lagos, Nigeria">
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Service Times</label>
                    <input type="text" name="service_times" value="{{ old('service_times', $church->service_times) }}"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                        placeholder="e.g., Sunday: 9:00 AM & 11:00 AM">
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Status</label>
                    <select name="status" class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <option value="active" {{ $church->status == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ $church->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="mt-8 flex justify-end gap-4">
                <a href="{{ route('admin.churches.index') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    Cancel
                </a>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">
                    <i class="fas fa-save mr-2"></i> Update Church
                </button>
            </div>
        </form>
    </div>
</div>
@endsection