@extends('layouts.app')

@section('title', 'Edit CBO')

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mb-6">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fas fa-edit mr-2"></i> Edit CBO
                </h2>
                <a href="{{ route('cbos.index') }}" class="inline-flex items-center px-4 py-2 bg-white text-indigo-600 border border-transparent rounded-md font-semibold text-xs uppercase tracking-widest hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-arrow-left mr-2"></i> Back to CBOs
                </a>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('cbos.update', $cbo) }}" class="space-y-6">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Basic Information Card -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-indigo-600"></i> Basic Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label for="branch_id" class="block text-sm font-medium text-gray-700 mb-1">Branch</label>
                            <select name="branch_id" id="branch_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" required>
                                <option value="">-- Select Branch --</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ old('branch_id', $cbo->branch_id) == $branch->id ? 'selected' : '' }}>
                                        {{ $branch->branch_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('branch_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="credit_officer_id" class="block text-sm font-medium text-gray-700 mb-1">Credit Officer</label>
                            <select name="credit_officer_id" id="credit_officer_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" required>
                                <option value="">-- Select Credit Officer --</option>
                                @foreach($officers as $officer)
                                    <option value="{{ $officer->id }}" {{ old('credit_officer_id', $cbo->credit_officer_id) == $officer->id ? 'selected' : '' }}>
                                        {{ $officer->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('credit_officer_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="cbo_name" class="block text-sm font-medium text-gray-700 mb-1">CBO Name</label>
                                <input type="text" name="cbo_name" id="cbo_name" value="{{ old('cbo_name', $cbo->cbo_name) }}" 
                                       class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" required>
                                @error('cbo_name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="cbo_code" class="block text-sm font-medium text-gray-700 mb-1">CBO Code</label>
                                <input type="text" name="cbo_code" id="cbo_code" value="{{ old('cbo_code', $cbo->cbo_code) }}" 
                                       class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" required>
                                @error('cbo_code')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="formation_date" class="block text-sm font-medium text-gray-700 mb-1">Formation Date</label>
                            <input type="date" name="formation_date" id="formation_date" value="{{ old('formation_date', $cbo->formation_date->format('Y-m-d')) }}" 
                                   class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border" required>
                            @error('formation_date')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Location Information Card -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-map-marker-alt mr-2 text-indigo-600"></i> Location Information
                    </h3>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                            <textarea name="address" id="address" rows="2" 
                                      class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">{{ old('address', $cbo->address) }}</textarea>
                            @error('address')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="province" class="block text-sm font-medium text-gray-700 mb-1">Province</label>
                                <select name="province" id="province" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                                    <option value="">-- Select Province --</option>
                                    @foreach($provinces as $province => $districts)
                                        <option value="{{ $province }}" {{ old('province', $cbo->province) == $province ? 'selected' : '' }}>
                                            {{ $province }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('province')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="district" class="block text-sm font-medium text-gray-700 mb-1">District</label>
                                <select name="district" id="district" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                                    <option value="">-- Select District --</option>
                                </select>
                                @error('district')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="ds_division" class="block text-sm font-medium text-gray-700 mb-1">DS Division</label>
                                <input type="text" name="ds_division" id="ds_division" value="{{ old('ds_division', $cbo->ds_division) }}" 
                                       class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                                @error('ds_division')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="gs_division" class="block text-sm font-medium text-gray-700 mb-1">GS Division</label>
                                <input type="text" name="gs_division" id="gs_division" value="{{ old('gs_division', $cbo->gs_division) }}" 
                                       class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                                @error('gs_division')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Meeting Information Card -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-calendar-alt mr-2 text-indigo-600"></i> Meeting Information
                </h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="meeting_day" class="block text-sm font-medium text-gray-700 mb-1">Meeting Day</label>
                        <select name="meeting_day" id="meeting_day" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                            <option value="">-- Select Day --</option>
                            @foreach(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
                                <option value="{{ $day }}" {{ old('meeting_day', $cbo->meeting_day) == $day ? 'selected' : '' }}>
                                    {{ $day }}
                                </option>
                            @endforeach
                        </select>
                        @error('meeting_day')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="meeting_time" class="block text-sm font-medium text-gray-700 mb-1">Meeting Time</label>
                        <input type="time" name="meeting_time" id="meeting_time" value="{{ old('meeting_time', $cbo->meeting_time) }}" 
                               class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                        @error('meeting_time')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="meeting_frequency" class="block text-sm font-medium text-gray-700 mb-1">Frequency</label>
                        <select name="meeting_frequency" id="meeting_frequency" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
                            <option value="">-- Select Frequency --</option>
                            @foreach(['Weekly', 'Bi-weekly', 'Monthly'] as $frequency)
                                <option value="{{ $frequency }}" {{ old('meeting_frequency', $cbo->meeting_frequency) == $frequency ? 'selected' : '' }}>
                                    {{ $frequency }}
                                </option>
                            @endforeach
                        </select>
                        @error('meeting_frequency')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col sm:flex-row justify-end gap-3 pt-6">
            <a href="{{ route('cbos.index') }}" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                <i class="fas fa-times mr-2"></i> Cancel
            </a>
            <button type="submit" class="inline-flex items-center px-6 py-3 bg-indigo-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                <i class="fas fa-save mr-2"></i> Update CBO
            </button>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    // Sri Lankan provinces and districts data
    const provinces = @json($provinces);
    const provinceSelect = document.getElementById('province');
    const districtSelect = document.getElementById('district');
    
    // Dynamic district loading based on province selection
    provinceSelect.addEventListener('change', function() {
        const selectedProvince = this.value;
        districtSelect.innerHTML = '<option value="">-- Select District --</option>';
        
        if (selectedProvince && provinces[selectedProvince]) {
            provinces[selectedProvince].forEach(district => {
                const option = document.createElement('option');
                option.value = district;
                option.textContent = district;
                districtSelect.appendChild(option);
            });
        }
    });

    // Auto-close alerts after 5 seconds
    setTimeout(() => {
        document.querySelectorAll('[role="alert"]').forEach(alert => {
            alert.style.display = 'none';
        });
    }, 5000);
</script>
@endsection