@extends('users.layouts.index')

@section('content')
    <div class="grid grid-cols-1 gap-6 w-1/2 mx-auto">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-xl font-semibold mb-4 text-center">Profile</h2>
            <form id="profileForm" action="/user/profileUpdate" method="POST">
                @csrf
                @method('POST')

                @php
                    $fields = [
                        ['label' => 'Name', 'id' => 'name', 'placeholder' => 'Pure Wellness'],
                        ['label' => 'Email', 'id' => 'email', 'placeholder' => 'example@mail.com'],
                        ['label' => 'Phone Number', 'id' => 'phone_number', 'placeholder' => '07XXXXXXXX'],
                        ['label' => 'Location', 'id' => 'location', 'placeholder' => 'Alternative number'],
                        ['label' => 'Building', 'id' => 'building', 'placeholder' => 'Nairobi'],
                    ];
                @endphp

                @foreach ($fields as $field)
                    <div class="mb-4">
                        <label for="{{ $field['id'] }}" class="block text-gray-700 font-semibold mb-2">
                            {{ $field['label'] }}
                        </label>
                        <input type="text" id="{{ $field['id'] }}" name="{{ $field['id'] }}"
                            value="{{ old($field['id'], $user[$field['id']] ?? '') }}"
                            placeholder="{{ $field['placeholder'] }}"
                            class="w-full border rounded-lg bg-gray-50 p-2 focus:outline-none" disabled />
                    </div>
                @endforeach

                <div class="flex justify-between mt-6">
                    <button id="editProfileBtn" type="button"
                        class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg w-full mr-2">Edit</button>
                    <button id="saveProfileBtn" type="submit"
                        class="bg-green-500 text-white font-semibold py-2 px-4 rounded-lg w-full hidden">Save</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Add debugging markers -->
    <div id="debug-area" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; display: none;">
        <h3>Debug Info:</h3>
        <div id="debug-messages"></div>
    </div>

    <script>
        // Define loader functions
        function showLoader() {
            try {
                document.querySelector('.loader').style.display = 'block';
                document.querySelector('.loader-backdrop').style.display = 'block';
            } catch (e) {
                console.error('Error showing loader:', e);
            }
        }

        function hideLoader() {
            try {
                document.querySelector('.loader').style.display = 'none';
                document.querySelector('.loader-backdrop').style.display = 'none';
            } catch (e) {
                console.error('Error hiding loader:', e);
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            if (typeof jQuery === 'undefined') {
                toastr.error(response.message || 'jQuery is not loaded. Please make sure jQuery is included before this script.');
                return;
            }

            const profileFields = ['name', 'email', 'phone_number', 'location', 'building'];
            const editBtn = document.getElementById('editProfileBtn');
            const saveBtn = document.getElementById('saveProfileBtn');

            if (!editBtn || !saveBtn) {
                return;
            }

            editBtn.addEventListener('click', function() {
                profileFields.forEach(id => {
                    const field = document.getElementById(id);
                    if (field) field.disabled = false;
                });

                editBtn.classList.add('hidden');
                saveBtn.classList.remove('hidden');
            });

            document.getElementById('profileForm').addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = {
                    name: document.getElementById('name').value.trim(),
                    email: document.getElementById('email').value.trim(),
                    phone_number: document.getElementById('phone_number').value.trim(),
                    location: document.getElementById('location').value.trim(),
                    building: document.getElementById('building').value.trim(),
                    _token: '{{ csrf_token() }}',
                    _method: 'POST'
                };

                const emptyFields = Object.entries(formData).filter(([key, value]) => {
                    return ['name', 'email'].includes(key) && !value;
                });

                if (emptyFields.length > 0) {
                    toastr.error(response.message || 'Name and Email are required.');
                    return;
                }

                fetch('/user/profileUpdate', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify(formData)
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(err => {
                                throw err;
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        toastr.success(response.message ||  'Profile updated successfully!');

                        profileFields.forEach(id => {
                            document.getElementById(id).disabled = true;
                        });

                        saveBtn.classList.add('hidden');
                        editBtn.classList.remove('hidden');
                    })
                    .catch(error => {
                        toastr.error(response.message || 'An error occurred. Please try again later.');
                    });
            });
        });
    </script>
@endsection