@extends('frontend.main_master')
@section('body-class', 'panel-page panel-scrollable')
@section('title', t('profile') . ' - ' . t('site-title'))
@section('content')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('frontend/css/profile.css') }}">
    <link rel="stylesheet" href="{{ asset('frontend/css/profile-page.css') }}">

    <div class="container py-5">
        <div class="profile-container">
            <!-- Profile Header -->
            <div class="profile-header">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <div class="profile-avatar-wrapper">
                            @if ($user->avatar_url)
                                <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="profile-avatar"
                                    id="profileAvatar">
                            @else
                                <div class="profile-avatar-fallback" id="profileAvatar">
                                    {{ $user->initial }}
                                </div>
                            @endif

                            <button type="button" class="avatar-upload-btn" title="Avatar Değiştir" id="avatarUploadBtn"
                                data-bs-toggle="modal" data-bs-target="#avatarModal">
                                <i class="fas fa-camera text-white"></i>
                            </button>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <h2 class="mb-2">{{ $user->name }} {{ $user->last_name }}</h2>
                        <p class="mb-1 opacity-75">{{ $user->email }}</p>
                        @if ($user->provider)
                            <span class="info-badge">
                                <i class="fab fa-{{ $user->provider === 'google' ? 'google' : 'facebook' }}"></i>
                                {{ ucfirst($user->provider) }}
                            </span>
                        @endif
                    </div>

                    <div class="col">
                        {{-- ✅ Mini Astro Özet --}}
                        @if (!empty($mini))
                            <div class="astro-mini mt-3">
                                @foreach ($mini as $it)
                                    <div class="astro-mini__item">
                                        <div class="astro-mini__icon {{ $it['key'] }}">
                                            @if ($it['key'] === 'asc')
                                                <span class="astro-mini__asc">ASC</span>
                                            @else
                                                <span class="astro-glyph">{{ $it['planet_sym'] }}</span>
                                            @endif
                                        </div>

                                        <div class="astro-mini__meta">
                                            <div class="astro-mini__deg">{{ $it['deg'] }}</div>
                                            <div class="astro-mini__sign">
                                                <span
                                                    class="astro-glyph astro-glyph--zodiac">{{ $it['zodiac_sym'] }}</span>
                                                <span class="astro-mini__sign-name">{{ $it['sign'] }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Success/Error Messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Tabs Navigation -->
            <div class="tabs-wrapper mb-4">
                <ul class="nav nav-tabs" id="profileTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button
                            class="nav-link {{ !in_array(request('tab'), ['security', 'billing', 'invoices', 'settings']) ? 'active' : '' }}"
                            id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab"
                            aria-controls="general"
                            aria-selected="{{ !in_array(request('tab'), ['security', 'billing', 'invoices', 'settings']) ? 'true' : 'false' }}">
                            <i class="fas fa-user me-2 d-none d-md-inline"></i><span
                                class="tab-text">{{ t('general') }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ request('tab') === 'security' ? 'active' : '' }}" id="security-tab"
                            data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab"
                            aria-controls="security"
                            aria-selected="{{ request('tab') === 'security' ? 'true' : 'false' }}">
                            <i class="fas fa-lock me-2 d-none d-md-inline"></i><span
                                class="tab-text">{{ t('security') }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ request('tab') === 'billing' ? 'active' : '' }}" id="billing-tab"
                            data-bs-toggle="tab" data-bs-target="#billing" type="button" role="tab"
                            aria-controls="billing" aria-selected="{{ request('tab') === 'billing' ? 'true' : 'false' }}">
                            <i class="fas fa-file-invoice me-2 d-none d-md-inline"></i><span
                                class="tab-text">{{ t('invoice') }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ request('tab') === 'invoices' ? 'active' : '' }}" id="invoices-tab"
                            data-bs-toggle="tab" data-bs-target="#invoices" type="button" role="tab"
                            aria-controls="invoices"
                            aria-selected="{{ request('tab') === 'invoices' ? 'true' : 'false' }}">
                            <i class="fas fa-file-invoice-dollar me-2 d-none d-md-inline"></i><span
                                class="tab-text">{{ t('invoices') }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="{{ route('mycharts.index') }}" class="nav-link" role="tab">
                            <i class="fa-solid fa-earth-europe me-2 d-none d-md-inline"></i><span
                                class="tab-text">{{ t('maps') }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ request('tab') === 'settings' ? 'active' : '' }}" id="settings-tab"
                            data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab"
                            aria-controls="settings"
                            aria-selected="{{ request('tab') === 'settings' ? 'true' : 'false' }}">
                            <i class="fas fa-cog me-2 d-none d-md-inline"></i><span
                                class="tab-text">{{ t('settings') }}</span>
                        </button>
                    </li>
                    <li class="nav-item ms-auto" role="presentation">
                        <form action="{{ route('logout') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="nav-link text-danger" role="tab">
                                <i class="bi bi-box-arrow-right me-2 d-none d-md-inline"></i><span
                                    class="tab-text">{{ t('log-out') }}</span>
                            </button>
                        </form>
                    </li>
                </ul>
            </div>

            <!-- Tab Content -->
            <div class="tab-content" id="profileTabsContent">
                <div class="tab-pane fade {{ !in_array(request('tab'), ['security', 'billing', 'invoices']) ? 'show active' : '' }}"
                    id="general" role="tabpanel">
                    @include('frontend.profile.partials.general')
                </div>

                <div class="tab-pane fade {{ request('tab') === 'settings' ? 'show active' : '' }}" id="settings"
                    role="tabpanel">
                    @include('frontend.profile.partials.settings')
                </div>

                <div class="tab-pane fade {{ request('tab') === 'security' ? 'show active' : '' }}" id="security"
                    role="tabpanel">
                    @include('frontend.profile.partials.security')
                </div>
                <div class="tab-pane fade {{ request('tab') === 'billing' ? 'show active' : '' }}" id="billing"
                    role="tabpanel">
                    @include('frontend.profile.partials.billing-info')
                </div>
                <div class="tab-pane fade {{ request('tab') === 'invoices' ? 'show active' : '' }}" id="invoices"
                    role="tabpanel">
                    @include('frontend.profile.partials.invoices', ['orders' => $orders])
                </div>
            </div>
        </div>
    </div>

    <!-- Avatar Yükleme Modal -->
    <div class="modal fade" id="avatarModal" tabindex="-1" aria-labelledby="avatarModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="avatarModalLabel">
                        <i class="fas fa-camera me-2"></i>{{ t('update-avatar') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <div id="avatarPreviewContainer" style="margin-bottom: 20px;">
                        <div id="avatarPreviewPlaceholder"
                            style="width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--astro-deep-teal); display: flex; align-items: center; justify-content: center; background: var(--astro-soft-beige);">
                            <i class="fas fa-image" style="font-size: 4rem; color: var(--astro-light-wood);"></i>
                        </div>
                        <img id="avatarPreview" src="" alt="Önizleme"
                            style="display: none; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; object-fit: cover; border: 4px solid var(--astro-deep-teal);">
                    </div>

                    <div class="mb-3">
                        <label for="avatarInputModal" class="btn btn-primary">
                            <i class="fas fa-folder-open me-2"></i>{{ t('choose-picture') }}
                        </label>
                        <input type="file" id="avatarInputModal" name="avatar"
                            accept="image/jpeg,image/jpg,image/png,image/webp" style="display: none;">
                    </div>

                    <div class="mb-3">
                        <div class="d-flex align-items-center">
                            <hr class="flex-grow-1">
                            <span class="mx-3 text-muted small">{{ t('or') }}</span>
                            <hr class="flex-grow-1">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="avatarUrlInput" class="form-label text-start w-100">
                            <i class="fas fa-link me-2"></i>{{ t('image-url') }}
                        </label>
                        <input type="url" class="form-control" id="avatarUrlInput" name="avatar_url"
                            placeholder="https://example.com/image.jpg" autocomplete="off">
                    </div>

                    <p class="text-muted small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        {{ t('avatar-update-info') }}
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>{{ t('cancel') }}
                    </button>
                    <button type="button" id="saveAvatarBtn" class="btn btn-success" disabled>
                        <i class="fas fa-check me-2"></i>{{ t('update') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const avatarInputModal = document.getElementById('avatarInputModal');
            const avatarUrlInput = document.getElementById('avatarUrlInput');
            const avatarPreview = document.getElementById('avatarPreview');
            const avatarPreviewPlaceholder = document.getElementById('avatarPreviewPlaceholder');
            const saveAvatarBtn = document.getElementById('saveAvatarBtn');
            const profileAvatar = document.getElementById('profileAvatar');

            let selectedFile = null;
            let selectedUrl = null;

            function setPreview(src) {
                if (avatarPreviewPlaceholder) avatarPreviewPlaceholder.style.display = 'none';
                if (avatarPreview) {
                    avatarPreview.src = src;
                    avatarPreview.style.display = 'block';
                }
            }

            function clearPreview() {
                if (avatarPreview) {
                    avatarPreview.src = '';
                    avatarPreview.style.display = 'none';
                }
                if (avatarPreviewPlaceholder) avatarPreviewPlaceholder.style.display = 'flex';
            }

            function setSaveEnabled(enabled) {
                if (saveAvatarBtn) saveAvatarBtn.disabled = !enabled;
            }

            if (avatarInputModal) {
                avatarInputModal.addEventListener('change', function(e) {
                    const file = e.target.files && e.target.files[0] ? e.target.files[0] : null;
                    selectedFile = file;
                    selectedUrl = null;
                    if (avatarUrlInput) avatarUrlInput.value = '';

                    if (!file) {
                        clearPreview();
                        setSaveEnabled(false);
                        return;
                    }

                    const objectUrl = URL.createObjectURL(file);
                    setPreview(objectUrl);
                    setSaveEnabled(true);
                });
            }

            if (avatarUrlInput) {
                avatarUrlInput.addEventListener('input', function(e) {
                    const url = (e.target.value || '').trim();
                    selectedUrl = url || null;
                    selectedFile = null;
                    if (avatarInputModal) avatarInputModal.value = '';

                    if (!selectedUrl) {
                        clearPreview();
                        setSaveEnabled(false);
                        return;
                    }

                    setPreview(selectedUrl);
                    setSaveEnabled(true);
                });
            }

            if (saveAvatarBtn) {
                saveAvatarBtn.addEventListener('click', async function() {
                    try {
                        setSaveEnabled(false);
                        saveAvatarBtn.innerHTML =
                            '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>' +
                            "{{ addslashes(t('updating')) }}";

                        const formData = new FormData();
                        if (selectedFile) formData.append('avatar', selectedFile);
                        if (selectedUrl) formData.append('avatar_url', selectedUrl);

                        const response = await fetch("{{ route('profile.avatar.update') }}", {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                                'Accept': 'application/json'
                            },
                            body: formData
                        });

                        const data = await response.json().catch(() => null);
                        if (!response.ok || !data || !data.success) {
                            const msg = (data && data.message) ? data.message :
                                'Avatar güncellenemedi.';
                            throw new Error(msg);
                        }

                        // Profil görselini güncelle
                        if (profileAvatar && profileAvatar.tagName === 'IMG') {
                            profileAvatar.src = data.avatar_url;
                        } else {
                            // Fallback div varsa sayfayı yenilemek en temiz yol
                            window.location.reload();
                            return;
                        }

                        // Modal kapat
                        if (window.bootstrap) {
                            const modalEl = document.getElementById('avatarModal');
                            if (modalEl) {
                                const modal = window.bootstrap.Modal.getInstance(modalEl) || new window
                                    .bootstrap.Modal(modalEl);
                                modal.hide();
                            }
                        }
                    } catch (err) {
                        alert(err && err.message ? err.message :
                            "{{ addslashes(t('avatar-update-error')) }}");
                    } finally {
                        saveAvatarBtn.innerHTML = '<i class="fas fa-check me-2"></i>' +
                            "{{ addslashes(t('update')) }}";
                        setSaveEnabled(!!(selectedFile || selectedUrl));
                    }
                });
            }
        });
    </script>

@endsection