@extends('site.layout.layout')

@section('title',__('My Account'))

@section('content')
    <main class="orders_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Profile') }}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4 mb-5">
            <div class="col-sm-4 col-md-3 mb-3">
                <nav class="setting_nav d-flex d-sm-block">
                    <a href="{{ route('Site.MyOrders') }}">
                        <img src="{{ asset('site/img/light/3d-cube-scan.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/3d-cube-scan.png') }}" data-dark="{{ asset('site/img/dark/3d-cube-scan.png') }}" alt=""> {{ __('My Orders') }}
                    </a>
                    <a href="{{ route('Site.SellMyProducts') }}">
                        <img src="{{ asset('site/img/light/buy-crypto.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-crypto.png') }}" data-dark="{{ asset('site/img/dark/buy-crypto.png') }}" alt=""> {{ __('Sell My Products')}}
                    </a>
                    <a href="{{ route('Site.Profile') }}" class="active">
                        <img src="{{ asset('site/img/profile-circle.png') }}" alt=""> {{ __('Profile') }}
                    </a>
                    <a href="{{ route('Site.favorites.index') }}">
                        <img src="{{ asset('site/img/light/heart.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/heart.png') }}" data-dark="{{ asset('site/img/dark/heart.png') }}" alt=""> {{ __('Favorites') }}
                    </a>
                    <a href="{{ route('Site.addresses.index') }}">
                        <img src="{{ asset('site/img/light/location.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/location.png') }}" data-dark="{{ asset('site/img/dark/location.png') }}" alt=""> {{ __('Addresses') }}
                    </a>
                </nav>
            </div>
            <div class="col-sm-8 col-md-9">
                <section class="title_sec mb-3">
                    <h3 class="section_title mb-2"> {{ __('Profile') }}</h3>
                    <p> {{ __('View and edit account details') }}</p>
                </section>
                <section class="edit_sec">
                    <figure class="info_card d-flex justify-content-between align-items-center mb-3">
                        <figcaption class="w-100">
                            <p>{{ __('Name') }}</p>
                            <h6 class="mt-1">{{ auth()->user()->name }}</h6>
                            <form class="general_form w-100" method="post" action="{{ route('Site.ProfileAction') }}">
                                @csrf
                                @method('PUT') 
                                <div class="form-group d-flex mt-1">
                                    <input type="text" name="name" class="form-control" id="name_input" placeholder="{{ __('Name') }}" value="{{ auth()->user()->name }}">
                                    <button type="submit" class="primaryBgBtn">{{ __('Save') }}</button>
                                </div>
                            </form>
                        </figcaption>
                        <div class="buttons justify-content-end">
                            <button type="button"><i class="fas fa-pen-to-square"></i></button>
                        </div>
                    </figure>
                    <figure class="info_card d-flex justify-content-between align-items-center mb-3">
                        <figcaption class="w-100">
                            <p>{{ __('Mobile') }}</p>
                            <h6 class="mt-1">{{ auth()->user()->country_code }} {{ auth()->user()->mobile }}</h6>
                            <form class="general_form w-100" method="post" action="{{ route('Site.ProfileAction') }}">
                                @csrf
                                @method('PUT') 
                                <div class="form-group d-flex mt-1">
                                    <input type="tel" name="mobile" class="form-control" id="tel_input" placeholder="{{ __('Mobile') }}" value="{{ auth()->user()->mobile }}">
                                    <button type="submit" class="primaryBgBtn">{{ __('Save') }}</button>
                                </div>
                            </form>
                        </figcaption>
                        <div class="buttons justify-content-end">
                            <button type="button"><i class="fas fa-pen-to-square"></i></button>
                        </div>
                    </figure>
                    <figure class="info_card d-flex justify-content-between align-items-center mb-3">
                        <figcaption class="w-100">
                            <p>{{ __('E-mail') }}</p>
                            <h6 class="mt-1">{{ auth()->user()->email }}</h6>
                            <form class="general_form w-100" method="post" action="{{ route('Site.ProfileAction') }}">
                                @csrf
                                @method('PUT')
                                <div class="form-group d-flex mt-1">
                                    <input type="email" name="email" class="form-control" id="email_input"
                                        placeholder="{{ __('E-mail') }}" value="{{ auth()->user()->email }}">
                                    <button type="submit" class="primaryBgBtn">{{ __('Save') }}</button>
                                </div>
                            </form>
                        </figcaption>
                        <div class="buttons justify-content-end">
                            <button type="button"><i class="fas fa-pen-to-square"></i></button>
                        </div>
                    </figure>
                </section>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script>
        $('#orderSlct').select2({
            // placeholder: "ترتيب حسب :",
            allowClear: false,
            minimumResultsForSearch: Infinity
        });
    </script>
    <script>
        document.querySelectorAll('.info_card').forEach(card => {
            const editBtn = card.querySelector('.buttons button'); 
            const form = card.querySelector('form');
            const saveBtn = form.querySelector('button'); 
            const displayText = card.querySelector('h6');
            const input = form.querySelector('input');

            form.style.display = 'none';

            editBtn.addEventListener('click', () => {
                //input.value = displayText.textContent.trim(); 
                form.style.display = 'block'; 
                editBtn.style.display = 'none'; 
                displayText.style.display = 'none';
                card.classList.add('bg-transparent'); 
            });

            saveBtn.addEventListener('click', () => {
                //displayText.textContent = input.value; 
                form.style.display = 'none'; 
                editBtn.style.display = 'inline-block'; 
                displayText.style.display = 'block'; 
                card.classList.remove('bg-transparent'); 
            });
        });
    </script>
@endpush