@extends('admin.layouts.app')

@section('title', 'Edit Contact Page')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">Edit Contact Page</h1>
                <a href="{{ route('admin.contact.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Overview
                </a>
            </div>
        </div>
    </div>

    @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"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form action="{{ route('admin.contact.update') }}" method="POST">
        @csrf
        @method('PUT')

        <!-- Hero Section -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-star me-2"></i>Hero Section
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="hero_title" class="form-label">Hero Title</label>
                            <input type="text" class="form-control @error('hero_title') is-invalid @enderror" 
                                   id="hero_title" name="hero_title" 
                                   value="{{ old('hero_title', $heroSection->title ?? 'Get In Touch') }}" 
                                   placeholder="Enter hero section title">
                            @error('hero_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="hero_content" class="form-label">Hero Description</label>
                            <textarea class="form-control @error('hero_content') is-invalid @enderror" 
                                      id="hero_content" name="hero_content" rows="3" 
                                      placeholder="Enter hero section description">{{ old('hero_content', $heroSection->content ?? 'Ready to start your educational journey? Our expert team is here to guide you every step of the way.') }}</textarea>
                            @error('hero_content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Offices Section -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="bi bi-building me-2"></i>Global Offices Section
                </h5>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addOfficeModal">
                            <i class="bi bi-plus-circle"></i> Add Office
                        </button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="offices_title" class="form-label">Section Title</label>
                            <input type="text" class="form-control @error('offices_title') is-invalid @enderror" 
                                   id="offices_title" name="offices_title" 
                                   value="{{ old('offices_title', $officesSection->title ?? 'Our Global Offices') }}" 
                                   placeholder="Enter offices section title">
                            @error('offices_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="offices_content" class="form-label">Section Description</label>
                            <textarea class="form-control @error('offices_content') is-invalid @enderror" 
                                      id="offices_content" name="offices_content" rows="3" 
                                      placeholder="Enter offices section description">{{ old('offices_content', $officesSection->content ?? 'Connect with us at any of our international locations') }}</textarea>
                            @error('offices_content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Current Offices -->
                @if($officesSection && isset($officesSection->data['offices']))
                    <div class="mt-4">
                        <h6>Current Offices:</h6>
                        <div class="row" id="officesList">
                            @foreach($officesSection->data['offices'] as $index => $office)
                                <div class="col-md-6 mb-3 office-item" data-index="{{ $index }}">
                                    <div class="card border">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="card-title">{{ $office['city'] }}, {{ $office['country'] }}</h6>
                                                    <p class="card-text small mb-1"><i class="bi bi-geo-alt"></i> {{ $office['address'] }}</p>
                                                    <p class="card-text small mb-1"><i class="bi bi-telephone"></i> {{ $office['phone'] }}</p>
                                                    <p class="card-text small mb-1"><i class="bi bi-envelope"></i> {{ $office['email'] }}</p>
                                                    <p class="card-text small mb-0"><i class="bi bi-clock"></i> {{ $office['hours'] }}</p>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-danger remove-office" data-index="{{ $index }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Quick Contact Section -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-telephone me-2"></i>Quick Contact Section
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="quick_contact_title" class="form-label">Section Title</label>
                            <input type="text" class="form-control @error('quick_contact_title') is-invalid @enderror" 
                                   id="quick_contact_title" name="quick_contact_title" 
                                   value="{{ old('quick_contact_title', $quickContactSection->title ?? 'Need Immediate Assistance?') }}" 
                                   placeholder="Enter quick contact section title">
                            @error('quick_contact_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="quick_contact_content" class="form-label">Section Description</label>
                            <textarea class="form-control @error('quick_contact_content') is-invalid @enderror" 
                                      id="quick_contact_content" name="quick_contact_content" rows="3" 
                                      placeholder="Enter quick contact section description">{{ old('quick_contact_content', $quickContactSection->content ?? 'Our team is available 24/7 to answer your questions and provide guidance') }}</textarea>
                            @error('quick_contact_content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="bi bi-check-lg"></i> Update Contact Page
            </button>
        </div>
    </form>
</div>

<!-- Add Office Modal -->
<div class="modal fade" id="addOfficeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Office</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addOfficeForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="office_city" class="form-label">City</label>
                                <input type="text" class="form-control" id="office_city" name="city" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="office_country" class="form-label">Country</label>
                                <input type="text" class="form-control" id="office_country" name="country" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="office_address" class="form-label">Address</label>
                        <textarea class="form-control" id="office_address" name="address" rows="2" required></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="office_phone" class="form-label">Phone</label>
                                <input type="text" class="form-control" id="office_phone" name="phone" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="office_email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="office_email" name="email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="office_hours" class="form-label">Working Hours</label>
                                <input type="text" class="form-control" id="office_hours" name="hours" placeholder="e.g., Mon-Fri: 9AM-6PM" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="office_description" class="form-label">Description</label>
                                <input type="text" class="form-control" id="office_description" name="description" placeholder="e.g., Our headquarters and main office" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Add Office</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    console.log('Contact edit page loaded');
    console.log('CSRF Token:', $('meta[name="csrf-token"]').attr('content'));
    
    // Add Office
    $('#addOfficeForm').on('submit', function(e) {
        e.preventDefault();
        console.log('Add office form submitted');
        
        var formData = $(this).serialize();
        console.log('Form data:', formData);
        
        $.ajax({
            url: '{{ route("admin.contact.add-office") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log('Success response:', response);
                if (response.success) {
                    alert('Office added successfully!');
                    $('#addOfficeModal').modal('hide');
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                console.log('AJAX Error:', xhr);
                console.log('Status:', status);
                console.log('Error:', error);
                console.log('Response Text:', xhr.responseText);
                
                if (xhr.status === 419) {
                    alert('Session expired. Please refresh the page and try again.');
                } else if (xhr.status === 401 || xhr.status === 403) {
                    alert('Authentication required. Please log in to the admin panel first.');
                    window.location.href = '{{ route("admin.login") }}';
                } else {
                    alert('An error occurred while adding the office. Status: ' + xhr.status + '. Please check the console for details.');
                }
            }
        });
    });
    
    // Remove Office
    $('.remove-office').on('click', function() {
        if (confirm('Are you sure you want to remove this office?')) {
            var officeIndex = $(this).data('index');
            console.log('Removing office at index:', officeIndex);
            
            $.ajax({
                url: '{{ route("admin.contact.remove-office") }}',
                method: 'DELETE',
                data: {
                    index: officeIndex
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log('Remove office success response:', response);
                    if (response.success) {
                        alert('Office removed successfully!');
                        location.reload();
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.log('Remove office AJAX Error:', xhr);
                    console.log('Status:', status);
                    console.log('Error:', error);
                    console.log('Response Text:', xhr.responseText);
                    
                    if (xhr.status === 419) {
                        alert('Session expired. Please refresh the page and try again.');
                    } else if (xhr.status === 401 || xhr.status === 403) {
                        alert('Authentication required. Please log in to the admin panel first.');
                        window.location.href = '{{ route("admin.login") }}';
                    } else {
                        alert('An error occurred while removing the office. Status: ' + xhr.status + '. Please check the console for details.');
                    }
                }
            });
        }
    });
});
</script>
@endpush