<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * The template for displaying the My Account page
 *
 * @package Pawfect
 */

get_header(); ?>

<main id="primary-content" class="pawfect-main-content pawfect-bg-pawfect-background pawfect-min-h-screen" tabindex="-1">
    
    <!-- Page Header -->
    <div class="pawfect-bg-white pawfect-border-b pawfect-border-gray-200">
        <div class="pawfect-container pawfect-mx-auto pawfect-px-6 pawfect-py-8">
            <div class="pawfect-text-center">
                <h1 class="pawfect-text-3xl pawfect-font-bold pawfect-text-gray-900 pawfect-mb-2">
                    <?php esc_html_e('My Account', 'pawfect'); ?>
                </h1>
                <p class="pawfect-text-gray-600">
                    <?php esc_html_e('Manage your account settings and view your order history', 'pawfect'); ?>
                </p>
            </div>
        </div>
    </div>

    <div class="pawfect-container pawfect-mx-auto pawfect-px-6 pawfect-py-12">
        
        <?php while (have_posts()): ?>
            <?php the_post(); ?>

            <div class="woocommerce pawfect-my-account-page">
                
                <!-- Account Content Wrapper -->
                <div class="pawfect-bg-white pawfect-rounded-lg pawfect-shadow-sm pawfect-overflow-hidden">
                    
                    <!-- Mobile Navigation Toggle -->
                    <div class="pawfect-block md:pawfect-hidden pawfect-p-4 pawfect-border-b pawfect-border-gray-200">
                        <button id="pawfect-account-nav-toggle" class="pawfect-w-full pawfect-flex pawfect-items-center pawfect-justify-between pawfect-text-left pawfect-font-medium pawfect-text-gray-900">
                            <span><?php esc_html_e('Account Menu', 'pawfect'); ?></span>
                            <svg class="pawfect-w-5 pawfect-h-5 pawfect-transform pawfect-transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>

                    <div class="pawfect-flex pawfect-flex-col md:pawfect-flex-row">
                        
                        <!-- Account Navigation Sidebar -->
                        <div id="pawfect-account-nav" class="pawfect-w-full md:pawfect-w-1/4 pawfect-bg-gray-50 pawfect-border-r pawfect-border-gray-200 pawfect-hidden md:pawfect-block">
                            
                                <?php
    /**
     * My Account navigation.
     */
    do_action('woocommerce_account_navigation');
?>
                            
                        </div>

                        <!-- Account Content Area -->
                        <div class="pawfect-flex-1 pawfect-p-6 md:pawfect-p-8">
                            <div class="woocommerce-MyAccount-content">
                                <?php
    /**
     * My Account content.
     */
    do_action('woocommerce_account_content');
?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        <?php
endwhile; ?>

    </div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('pawfect-account-nav-toggle');
    const nav = document.getElementById('pawfect-account-nav');
    
    if (toggle && nav) {
        toggle.addEventListener('click', function() {
            nav.classList.toggle('pawfect-hidden');
            const icon = toggle.querySelector('svg');
            icon.classList.toggle('pawfect-rotate-180');
        });
    }
});
</script>

<?php get_footer(); ?>
