@extends('layouts.app')

@section('title', 'Edit Church - Royal Gulf Turning Engineering')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
@endsection

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <!-- Page Title Box -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Edit Church</h4>
                        <div class="page-title-right">
                            <a href="{{ route('churches.manage') }}" class="btn btn-primary">Manage Churches</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Card -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            @if($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            <form action="{{ route('churches.update', $church->id) }}" method="POST" enctype="multipart/form-data" id="church-edit-form">
                                @csrf
                                @method('PUT')
                                <div class="mb-3">
                                    <label for="name" class="form-label">Church Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name', $church->name) }}" required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="location" class="form-label">Zip Code <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('location') is-invalid @enderror" id="location" name="location" value="{{ old('location', $church->location) }}" required>
                                    @error('location')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email', $church->email) }}" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone', $church->phone) }}" required>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="country" class="form-label">Country</label>
                                    <select class="form-control @error('country') is-invalid @enderror" id="country" name="country">
                                        <option value="">Select a country</option>
                                        @php
                                            $countries = [
                                                'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Australia', 'Austria',
                                                'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan',
                                                'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cabo Verde', 'Cambodia',
                                                'Cameroon', 'Canada', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo', 'Costa Rica',
                                                'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt',
                                                'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Eswatini', 'Ethiopia', 'Fiji', 'Finland', 'France', 'Gabon',
                                                'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana',
                                                'Haiti', 'Honduras', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel',
                                                'Italy', 'Jamaica', 'Japan', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, North', 'Korea, South', 'Kosovo',
                                                'Kuwait', 'Kyrgyzstan', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania',
                                                'Luxembourg', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius',
                                                'Mexico', 'Micronesia', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia',
                                                'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'North Macedonia', 'Norway', 'Oman',
                                                'Pakistan', 'Palau', 'Palestine', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal',
                                                'Qatar', 'Romania', 'Russia', 'Rwanda', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe',
                                                'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia',
                                                'South Africa', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Sweden', 'Switzerland', 'Syria', 'Taiwan',
                                                'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan',
                                                'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Vatican City',
                                                'Venezuela', 'Vietnam', 'Yemen', 'Zambia', 'Zimbabwe'
                                            ];
                                        @endphp
                                        
                                        @foreach($countries as $countryName)
                                            <option value="{{ $countryName }}" {{ (old('country', $church->country) == $countryName) ? 'selected' : '' }}>{{ $countryName }}</option>
                                        @endforeach
                                    </select>
                                    @error('country')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="about" class="form-label">About Church <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('about') is-invalid @enderror" id="about" name="about" rows="5">{{ old('about', $church->about) }}</textarea>
                                    @error('about')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                {{-- <div class="mb-3">
                                    <label for="map" class="form-label">Map</label>
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <input type="text" class="form-control" id="map-search" placeholder="Search for a location">
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <input type="text" class="form-control" id="latitude" placeholder="Latitude" readonly>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <input type="text" class="form-control" id="longitude" placeholder="Longitude" readonly>
                                        </div>
                                    </div>
                                    <div id="map-canvas" style="height: 300px; width: 100%; margin-bottom: 15px;" class="border rounded"></div> --}}
                                    <div class="mb-3">
                                        <label for="map-embed-code" class="form-label">Map Embed Code</label>
                                        <textarea class="form-control @error('map') is-invalid @enderror" id="map-embed-code" name="map" rows="3" placeholder="Paste Google Maps embed code here">{{ old('map', $church->map) }}</textarea>
                                        <small class="text-muted">You can paste an embed code from Google Maps or use the map above to find a location.</small>
                                        @error('map')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    @if($church->map)
                                    <div class="mb-3">
                                        <label class="form-label">Current Map Preview</label>
                                        <div class="embed-responsive embed-responsive-16by9 border rounded">
                                            {!! $church->map !!}
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                
                                <!-- Current Images -->
                                @if($church->images->count() > 0)
                                <div class="mb-3">
                                    <label class="form-label">Current Images</label>
                                    <div class="row" id="current-images">
                                        @foreach($church->images as $image)
                                        <div class="col-md-3 position-relative mb-2 image-container" data-image-id="{{ $image->id }}">
                                            <img src="{{ asset('../../admin/storage/app/public/' . $image->image) }}" alt="Church Image" class="img-thumbnail" style="width: 100px; height: auto;">
                                            <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 delete-image" data-image-id="{{ $image->id }}" style="padding: 2px 6px; font-size: 12px;">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endif
                                
                                <!-- New Images -->
                                <div class="mb-3">
                                    <label for="images" class="form-label">Add New Images</label>
                                    <input type="file" class="form-control @error('images.*') is-invalid @enderror" id="images" name="images[]" multiple accept="image/*">
                                    <div id="image-preview-container" class="mt-3">
                                        <div class="row" id="image-preview"></div>
                                    </div>
                                    @error('images.*')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-success">Update Church</button>
                                    <a href="{{ route('churches.manage') }}" class="btn btn-secondary">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include CKEditor, Bootstrap JS, and Font Awesome -->
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize CKEditor
        CKEDITOR.replace('about');
        
        // Initialize Google Maps
        initMap();
        
        // Set up CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        // Delete existing image
        $('.delete-image').on('click', function(e) {
            e.preventDefault();
            
            const imageId = $(this).data('image-id');
            const container = $(this).closest('.image-container');
            
            if (confirm('Are you sure you want to delete this image?')) {
                $.ajax({
                    url: "{{ url('church-images') }}/" + imageId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.success) {
                            container.remove();
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function() {
                        alert('An error occurred while deleting the image.');
                    }
                });
            }
        });

        // Image preview and delete functionality for new uploads
        const imageInput = document.getElementById('images');
        const previewContainer = document.getElementById('image-preview');
        let filesToUpload = new DataTransfer();

        imageInput.addEventListener('change', function (event) {
            const files = event.target.files;
            previewContainer.innerHTML = ''; // Clear previous previews
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        const col = document.createElement('div');
                        col.className = 'col-md-3 position-relative mb-2';

                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.width = '100px';
                        img.style.height = 'auto';
                        img.style.margin = '5px';
                        img.style.border = '1px solid #ccc';
                        img.style.borderRadius = '5px';

                        const deleteButton = document.createElement('button');
                        deleteButton.className = 'btn btn-danger btn-sm position-absolute top-0 end-0 m-1';
                        deleteButton.innerHTML = '<i class="fas fa-times"></i>'; // "X" icon for delete
                        deleteButton.style.padding = '2px 6px';
                        deleteButton.style.fontSize = '12px';
                        deleteButton.addEventListener('click', function () {
                            col.remove();
                            filesToUpload.items.remove(i);
                            imageInput.files = filesToUpload.files; // Update the file input
                        });

                        col.appendChild(img);
                        col.appendChild(deleteButton);
                        previewContainer.appendChild(col);

                        filesToUpload.items.add(file);
                    };
                    reader.readAsDataURL(file);
                }
            }
            imageInput.files = filesToUpload.files; // Sync the file input with the updated list
        });
    });
    
    // Google Maps initialization function
    function initMap() {
        // Default coordinates (can be set to a default location)
        const defaultLat = 25.276987;
        const defaultLng = 55.296249;
        
        // Create map
        const mapOptions = {
            center: new google.maps.LatLng(defaultLat, defaultLng),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        const map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        
        // Create marker
        let marker = new google.maps.Marker({
            position: new google.maps.LatLng(defaultLat, defaultLng),
            map: map,
            draggable: true
        });
        
        // Update coordinates when marker is dragged
        google.maps.event.addListener(marker, 'dragend', function() {
            const position = marker.getPosition();
            document.getElementById('latitude').value = position.lat();
            document.getElementById('longitude').value = position.lng();
            generateEmbedCode(position.lat(), position.lng());
        });
        
        // Initialize search box
        const searchInput = document.getElementById('map-search');
        const searchBox = new google.maps.places.SearchBox(searchInput);
        
        // Bias the SearchBox results towards current map's viewport
        map.addListener('bounds_changed', function() {
            searchBox.setBounds(map.getBounds());
        });
        
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place
        searchBox.addListener('places_changed', function() {
            const places = searchBox.getPlaces();
            
            if (places.length === 0) {
                return;
            }
            
            // For each place, get the location
            const bounds = new google.maps.LatLngBounds();
            places.forEach(function(place) {
                if (!place.geometry || !place.geometry.location) {
                    console.log("Returned place contains no geometry");
                    return;
                }
                
                // Update marker position
                marker.setPosition(place.geometry.location);
                
                // Update form fields
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
                
                // Generate embed code
                generateEmbedCode(place.geometry.location.lat(), place.geometry.location.lng());
                
                if (place.geometry.viewport) {
                    // Only geocodes have viewport
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });
        
        // Function to generate embed code
        function generateEmbedCode(lat, lng) {
            const embedCode = `<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.178530063662!2d${lng}!3d${lat}!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDE2JzM3LjIiTiA1NcKwMTcnNDYuNSJF!5e0!3m2!1sen!2sus!4v1621512603273!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>`;
            document.getElementById('map-embed-code').value = embedCode;
        }
    }
</script>

<!-- Include Font Awesome for the delete icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endsection