@extends('layouts.app')

@section('title', __('Edit Profile'))

@section('content')
    <div class="container py-4">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-3 mb-4">
                @include('profile.partials.sidebar')
            </div>

            <!-- Main Content -->
            <div class="col-lg-9">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">{{ __('Edit Profile') }}</h4>
                    </div>
                    <div class="card-body">
                        <form id="profile-form">
                            @csrf

                            <div class="mb-3">
                                <label for="name" class="form-label">{{ __('Full Name') }}</label>
                                <input type="text" class="form-control" id="name" name="name"
                                       value="{{ $user->name }}" required>
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">{{ __('Email Address') }}</label>
                                <input type="email" class="form-control" id="email" name="email"
                                       value="{{ $user->email }}" required>
                            </div>

                            <div class="mb-3">
                                <label for="phone" class="form-label">{{ __('Phone Number') }}</label>
                                <input type="tel" class="form-control" id="phone" name="phone"
                                       value="{{ $user->phone }}">
                            </div>

                            <div class="mb-3">
                                <label for="preferred_locale" class="form-label">{{ __('Preferred Language') }}</label>
                                <select class="form-select" id="preferred_locale" name="preferred_locale" required>
                                    @foreach($locales as $localeCode => $locale)
                                        <option value="{{ $localeCode }}"
                                            {{ $user->preferred_locale === $localeCode ? 'selected' : '' }}>
                                            {{ $locale['native'] }} ({{ $locale['name'] }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('profile.index') }}" class="btn btn-outline-secondary">
                                    {{ __('Cancel') }}
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Save Changes') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.getElementById('profile-form').addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;

                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ __("Updating...") }}';
                submitBtn.disabled = true;

                fetch('{{ route("profile.update") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            window.location.href = '{{ route("profile.index") }}';
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('{{ __("An error occurred. Please try again.") }}');
                    })
                    .finally(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    });
            });
        </script>
    @endpush
@endsection