@extends('layouts.home')
<style>
    :root {
        --harvest-green: #16a34a;
        --harvest-green-light: #22c55e;
        --harvest-green-dark: #16a34a;
        --success-light: #F0F8F0;
    }

    .btn-success {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: var(--harvest-green-dark);
        border-color: var(--harvest-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
    }

    .btn-outline-success {
        color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-outline-success:hover {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        color: white;
    }

    .text-success {
        color: var(--harvest-green) !important;
    }

    .bg-success-subtle {
        background-color: var(--success-light) !important;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--harvest-green);
        transition: all 0.3s ease;
    }

    .profile-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(107, 142, 35, 0.3);
    }

    .avatar-upload-wrapper {
        position: relative;
        display: inline-block;
    }

    .avatar-upload-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: var(--harvest-green);
        border: 3px solid white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .avatar-upload-overlay:hover {
        background-color: var(--harvest-green-dark);
        transform: scale(1.1);
    }

    .form-control:focus {
        border-color: var(--harvest-green);
        box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
    }

    .profile-section {
        transition: all 0.3s ease;
    }

    .profile-section:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05) !important;
    }

    .rounded-3 {
        border-radius: 0.75rem !important;
    }

    .profile-info-item {
        padding: 1rem;
        border-radius: 0.5rem;
        background-color: #f8f9fa;
        margin-bottom: 0.5rem;
        transition: all 0.3s ease;
    }

    .profile-info-item:hover {
        background-color: var(--success-light);
    }

    .edit-mode .form-control {
        background-color: white;
    }

    .badge-success {
        background-color: var(--harvest-green) !important;
    }

    .col-sm-12 {
        width: 50% !important;
    }

    @media (max-width: 768px) {
        .container {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
        }

        .avatar-upload-overlay {
            width: 35px;
            height: 35px;
        }

        .col-sm-12 {
            width: 100% !important;
        }
    }

    /* Loading states */
    .saving {
        opacity: 0.6;
        pointer-events: none;
    }

    .form-save-success {
        border: 2px solid var(--harvest-green);
        animation: successPulse 2s ease-in-out;
    }

    @keyframes successPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
        }

        70% {
            box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
        }
    }
</style>

@section('content')
    <main class="min-vh-100 bg-light">
        <!-- Header Section -->
        <div class="bg-white shadow-sm border-bottom">
            <div class="container py-4">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h1 class="h3 mb-1 text-dark fw-bold">My Profile</h1>
                        <p class="text-muted mb-0">Manage your account information and preferences</p>
                    </div>
                    <a href="/" class="btn btn-outline-success d-none d-md-flex align-items-center gap-2">
                        <i class="fas fa-home"></i>
                        Back to Home
                    </a>
                </div>
            </div>
        </div>

        <div class="container py-5" id="profileContainer">
            <div class="row g-4">
                <!-- Profile Overview Section -->
                <div class="col-lg-4">
                    <div class="position-sticky" style="top: 12rem;">
                        <div class="bg-white rounded-3 shadow-sm overflow-hidden profile-section">
                            <div class="p-4 border-bottom bg-light">
                                <h5 class="mb-0 fw-semibold text-dark">Profile Overview</h5>
                            </div>

                            <div class="p-4 text-center">
                                <!-- Profile Picture -->
                                <form method="post" id="avatarForm" action="{{ route('my.profile.avatar') }}"
                                    class="mt-6 space-y-6" enctype="multipart/form-data">
                                    @csrf
                                    <div class="avatar-upload-wrapper mb-4">
                                        @if ($user->profile_picture)
                                            <img src="{{ asset('assets/img/avatars/' . $user->profile_picture) }}"
                                                class="profile-avatar" alt="Profile Picture" id="profileImage">
                                        @else
                                            <img src="{{ asset('assets/img/avatars/avt2.png') }}" class="profile-avatar"
                                                id="profileImage" alt="Profile Picture">
                                        @endif

                                        <div class="avatar-upload-overlay"
                                            onclick="document.getElementById('profile_picture').click()">
                                            <i class="fas fa-camera text-white"></i>
                                        </div>
                                        <input type="file" id="profile_picture" name="profile_picture" class="d-none"
                                            accept="image/*">
                                    </div>
                                </form>

                                <!-- User Info -->
                                <h4 class="mb-2 text-dark fw-bold">{{ Auth::user()->name }}</h4>
                                <p class="text-muted ">{{ Auth::user()->email }}</p>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-danger btn-sm ">
                                        <i class="fas fa-sign-out-alt me-1"></i> Logout
                                    </button>
                                </form>
                                <div class="d-flex justify-content-center gap-2 mb-4">
                                    @if (Auth::user()->customerInfo)
                                        <span class="badge bg-success-subtle text-success">
                                            <i class="fas fa-user-check me-1"></i>
                                            Complete Profile
                                        </span>
                                    @endif
                                </div>

                                <!-- Quick Stats -->
                                <div class="row text-center">
                                    <div class="col-6 col-sm-12">
                                        <div class="profile-info-item">
                                            <div class="h5 mb-1 text-success fw-bold">
                                                {{ Auth::user()->customerInfo ? Auth::user()->customerInfo->orders->count() : 0 }}
                                            </div>
                                            <small class="text-muted">Orders</small>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-12">
                                        <div class="profile-info-item">
                                            <div class="h5 mb-1 text-success fw-bold">
                                                {{ Auth::user()->created_at->format('M Y') }}</div>
                                            <small class="text-muted">Member Since</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Profile Details Section -->
                <div class="col-lg-8">
                    <div class="bg-white rounded-3 shadow-sm overflow-hidden profile-section">
                        <div class="p-4 border-bottom bg-light d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 fw-semibold text-dark">Personal Information</h5>
                            <button type="button" class="btn btn-outline-success btn-sm" id="editToggleBtn"
                                onclick="toggleEditMode()">
                                <i class="fas fa-edit me-1"></i>
                                <span id="editBtnText">Edit Profile</span>
                            </button>
                        </div>

                        <div class="p-4">
                            <form id="profileForm" method="POST" action="{{ route('my.profile.update') }}">
                                @csrf

                                <div class="mb-5">
                                    <h6 class="text-success fw-semibold mb-3">
                                        <i class="fas fa-user me-2"></i>
                                        Account Information
                                    </h6>

                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">Full Name <span
                                                    class="red_star">*</span></label>
                                            <input type="text" class="form-control" name="name"
                                                value="{{ Auth::user()->name }}" readonly id="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">Email Address <span
                                                    class="red_star">*</span></label>
                                            <input type="email" class="form-control" name="email"
                                                value="{{ Auth::user()->email }}" readonly id="email">
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <h6 class="text-success fw-semibold mb-3">
                                        <i class="fas fa-id-card me-2"></i>
                                        Personal Details
                                    </h6>

                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">First Name <span
                                                    class="red_star">*</span></label>
                                            <input type="text" class="form-control" name="first_name"
                                                value="{{ Auth::user()->customerInfo->first_name ?? '' }}" readonly
                                                id="first_name">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">Last Name <span
                                                    class="red_star">*</span></label>
                                            <input type="text" class="form-control" name="last_name"
                                                value="{{ Auth::user()->customerInfo->last_name ?? '' }}" readonly
                                                id="last_name">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">Phone Number <span
                                                    class="red_star">*</span></label>
                                            <input type="tel" class="form-control" name="phone"
                                                value="{{ Auth::user()->customerInfo->phone ?? '' }}" readonly
                                                id="phone">
                                        </div>
                                    </div>
                                </div>

                                <!-- Address Information -->
                                <div class="mb-4">
                                    <h6 class="text-success fw-semibold mb-3">
                                        <i class="fas fa-map-marker-alt me-2"></i>
                                        Address Information
                                    </h6>

                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label text-muted">Street Address <span
                                                    class="red_star">*</span></label>
                                            <textarea class="form-control" name="address" rows="2" readonly id="address">{{ Auth::user()->customerInfo->address ?? '' }}</textarea>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">City <span
                                                    class="red_star">*</span></label>
                                            <input type="text" class="form-control" name="city"
                                                value="{{ Auth::user()->customerInfo->city ?? '' }}" readonly
                                                id="city">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">State/Province <span
                                                    class="red_star">*</span></label>
                                            {{-- <input type="text" class="form-control" name="state"
                                                value="{{ Auth::user()->customerInfo->state ?? '' }}" readonly
                                                id="state"> --}}
                                            <select class="form-control" id="state" name="state" readonly>
                                                <option value="">Select State/Province</option>
                                                @php
                                                    $states = [
                                                        'Abu Dhabi',
                                                        'Dubai',
                                                        'Sharjah',
                                                        'Ajman',
                                                        'Umm Al Quwain',
                                                        'Ras Al Khaimah',
                                                        'Fujairah',
                                                    ];
                                                    $selectedState = old(
                                                        'state',
                                                        auth()->user()->customerInfo->state ?? '',
                                                    );
                                                @endphp
                                                @foreach ($states as $state)
                                                    <option value="{{ $state }}"
                                                        {{ $selectedState == $state ? 'selected' : '' }}>
                                                        {{ $state }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        {{-- <div class="col-md-6">
                                            <label class="form-label text-muted">ZIP/Postal Code <span class="red_star">*</span></label>
                                            <input type="text" class="form-control" name="zip"
                                                value="{{ Auth::user()->customerInfo->zip ?? '' }}" readonly
                                                id="zip">
                                        </div> --}}
                                        <div class="col-md-6">
                                            <label class="form-label text-muted">Country <span
                                                    class="red_star">*</span></label>
                                            <select class="form-select" id="country" name="country" readonly>
                                                <option value="UAE" selected>
                                                    United Arab Emirates</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons (Hidden by default) -->
                                <div class="d-none" id="formActions">
                                    <div class="d-flex gap-3 justify-content-end">
                                        <button type="button" class="btn btn-outline-secondary" onclick="cancelEdit()">
                                            <i class="fas fa-times me-1"></i>
                                            Cancel
                                        </button>
                                        <button type="submit" class="btn btn-success" id="saveBtn">
                                            <i class="fas fa-save me-1"></i>
                                            <span id="saveBtnText">Save Changes</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Password Change Section -->
                    <div class="bg-white rounded-3 shadow-sm overflow-hidden profile-section mt-4">
                        <div class="p-4 border-bottom bg-light">
                            <h5 class="mb-0 fw-semibold text-dark">Security Settings</h5>
                        </div>

                        <div class="p-4">
                            <form method="POST" action="{{ route('my.profile.password.update') }}">
                                @csrf
                                <h6 class="text-success fw-semibold mb-3">
                                    <i class="fas fa-lock me-2"></i>
                                    Change Password
                                </h6>

                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label text-muted">Current Password</label>
                                        <input type="password" class="form-control" name="current_password" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted">New Password</label>
                                        <input type="password" class="form-control" name="password" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted">Confirm New Password</label>
                                        <input type="password" class="form-control" name="password_confirmation"
                                            required>
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-shield-alt me-1"></i>
                                        Update Password
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        document.getElementById('profile_picture').addEventListener('change', function() {
            if (this.files.length > 0) {
                document.getElementById('avatarForm').submit();
            }
        });
    </script>
    <script>
        let editMode = false;

        function toggleEditMode() {
            editMode = !editMode;
            const form = document.getElementById('profileForm');
            const editBtn = document.getElementById('editToggleBtn');
            const editBtnText = document.getElementById('editBtnText');
            const formActions = document.getElementById('formActions');

            const fields = ['name', 'email', 'first_name', 'last_name', 'phone', 'address', 'city', 'state', 'zip',
                'country'
            ];

            if (editMode) {
                // Enable edit mode
                fields.forEach(field => {
                    const input = document.getElementById(field);
                    if (input) {
                        input.removeAttribute('readonly');
                        if (field === 'email') {
                            input.setAttribute('readonly', true); // Keep email readonly for security
                        }
                    }
                });

                form.classList.add('edit-mode');
                editBtn.innerHTML = '<i class="fas fa-times me-1"></i><span>Cancel</span>';
                editBtn.classList.remove('btn-outline-success');
                editBtn.classList.add('btn-outline-secondary');
                formActions.classList.remove('d-none');

            } else {
                // Disable edit mode
                cancelEdit();
            }
        }

        function cancelEdit() {
            editMode = false;
            const form = document.getElementById('profileForm');
            const editBtn = document.getElementById('editToggleBtn');
            const formActions = document.getElementById('formActions');

            const fields = ['name', 'first_name', 'last_name', 'phone', 'address', 'city', 'state', 'zip', 'country'];

            fields.forEach(field => {
                const input = document.getElementById(field);
                if (input) {
                    input.setAttribute('readonly', true);
                }
            });

            form.classList.remove('edit-mode');
            editBtn.innerHTML = '<i class="fas fa-edit me-1"></i><span>Edit Profile</span>';
            editBtn.classList.remove('btn-outline-secondary');
            editBtn.classList.add('btn-outline-success');
            formActions.classList.add('d-none');

            // Reset form to original values
            form.reset();
            location.reload(); // Simple way to reset values
        }

        // Handle profile form submission




        // Handle password form submission
        document.getElementById('passwordForm').addEventListener('submit', function(e) {
            e.preventDefault();

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

            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Updating...';

            fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('Password updated successfully!');
                        form.reset();
                    } else {
                        alert('Error: ' + (data.message || 'Password update failed'));
                    }
                })
                .catch(error => {
                    alert('Error updating password: ' + error.message);
                })
                .finally(() => {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                });
        });
    </script>
@endsection