@extends('layouts.admin')
@section('title', 'Create Branch')
@section('page-title', 'Create Branch')
@section('page-subtitle', 'Add a new branch to the organization')

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

    <div class="card-royal p-6">
        <div class="flex items-center gap-3 mb-6">
            <a href="{{ route('admin.churches.index') }}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Add New Branch</h3>
        </div>
        
        <form action="{{ route('admin.churches.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div 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-[var(--text-primary)] mb-2">Branch Type *</label>
                        <select name="type" id="type" required
                            class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                            onchange="toggleParentField()">
                            <option value="">-- Select Type --</option>
                            <option value="headquarters" {{ old('type') == 'headquarters' ? 'selected' : '' }}>Headquarters</option>
                            <option value="region" {{ old('type') == 'region' ? 'selected' : '' }}>Region</option>
                            <option value="district" {{ old('type') == 'district' ? 'selected' : '' }}>District</option>
                            <option value="branch" {{ old('type', 'branch') == 'branch' ? 'selected' : '' }}>Branch</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Branch Name *</label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                            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., Grace Church - North District">
                    </div>
                </div>

                <div id="parent-field">
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Parent Organization *</label>
                    <select name="parent_id" id="parent_id"
                        class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <option value="">-- Select Parent --</option>
                        @foreach($parentOptions ?? [] as $id => $name)
                            <option value="{{ $id }}" {{ old('parent_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                    <p class="text-xs text-[var(--text-secondary)] mt-1">Select the parent organization this branch belongs to</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Location/Area</label>
                    <input type="text" name="location" value="{{ old('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., Greater Accra, Kumasi, Tamale">
                </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') }}"
                        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., A place of worship and community">
                </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') }}"
                            class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                            placeholder="contact@branch.com">
                    </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') }}"
                            class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                            placeholder="+233 XX XXX XXXX">
                    </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)]"
                        placeholder="Full address of the branch location">{{ old('address') }}</textarea>
                </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') }}"
                        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">Branch 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">
                    <p class="text-xs text-[var(--text-secondary)] mt-2">
                        Accepted formats: PNG, JPG, JPEG, SVG. Max size: 2MB
                    </p>
                </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" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('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> Create Branch
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleParentField() {
    const type = document.getElementById('type').value;
    const parentField = document.getElementById('parent-field');
    const parentSelect = document.getElementById('parent_id');
    
    if (type === 'headquarters') {
        parentField.style.display = 'none';
        parentSelect.removeAttribute('required');
    } else {
        parentField.style.display = 'block';
        parentSelect.setAttribute('required', 'required');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', toggleParentField);
</script>
@endsection