<?php
/**
 * My Account page
 *
 * Template aligned with WooCommerce 3.5.0
 * @see https://woocommerce.com/document/template-structure/
 * @package Pawfect
 * @version 10.9.1
 */

defined( 'ABSPATH' ) || exit;
?>

<div class="pawfect-my-account-wrapper">
    <!-- 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">
                <div class="pawfect-p-6">
                    <?php
                    /**
                     * My Account navigation.
                     */
                    do_action( 'woocommerce_account_navigation' );
                    ?>
                </div>
            </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>

<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>

