@extends('layouts.app')
@section('style-sheets')

    <link href="{{ asset('css/bootstrap.css?v=') . config('constants.VERSION') }}" rel="stylesheet">
    <link href="{{ asset('css/accountStyle.css?v=') . config('constants.VERSION') }}" rel="stylesheet">

@endsection
@section('page-title', 'My Account')
@section('body-content')

    <section id="accountDashboard">
        <div class="global-loader-wrapper" style="display: none">
            <div class="loader"></div>
        </div>
        <div class="accountDashboard_wrapper g_in_spacing_inline g_in_spacing_block">
            <div class="container">
                <div class="row">
                    <!-- Sidebar -->
                    <div class="col-md-3">
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="v-pills-profile-tab" data-bs-toggle="pill"
                                href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                                aria-selected="true"><i class="fa fa-cog" aria-hidden="true"></i>Profile Settings</a>
                            <a class="nav-link" id="v-pills-orders-tab" data-bs-toggle="pill" href="#v-pills-orders"
                                role="tab" aria-controls="v-pills-orders" aria-selected="false"><i
                                    class="fa fa-tags"></i>Order List</a>
                            <a class="nav-link" href="#" id="logout-button" onclick="confirmLogout()"><i
                                    class="fa fa-power-off"></i>
                                Logout</a>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="col-md-9">
                        <div class="tab-content" id="v-pills-tabContent">

                            <!-- Profile Tab -->
                            @include('customer.partials.profile')

                            <!-- Order List Tab -->
                            @include('customer.partials.orders')

                        </div>
                    </div>
                </div>
            </div>

            <!-- Logout Confirmation Popup -->
            <div class="popup-overlay" id="logout-popup">
                <div class="popup-content">
                    <h4>Logout Confirmation</h4>
                    <p>Are you sure you want to logout?</p>
                    <a class="logoutBtn confirmLogout" href="{{ route('logout') }}" title="Log Out">Logout</a>
                    <button class="logoutBtn canceLogout" onclick="cancelLogout()">Cancel</button>
                </div>
            </div>

            <!-- Popup -->
            @include('customer.partials.order_detail')

        </div>


    </section>


@endsection

@section('end-scripts')
<script>
    $(document).ready(function() {
        loadStatesByCountry("{{ $user_detail['country'] }}", "{{ $user_detail['state'] }}")
    });

    function loadStatesByCountry(country_code, state_code = '') {
            $.ajax({
                url: '/get-states?country_code=' + country_code,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#state').empty();
                    $('#state').append('<option value="">Select State</option>');
                    $.each(data, function(key, value) {
                        $('#state').append('<option value="' + value.code + '">' + value.name +
                            '</option>');
                    });
                    if (state_code != '') {
                        $('#state').val(state_code);
                    }
                }
            });
        }

    $('#country').on('change', function() {
            var country_code = $(this).val();
            if (country_code) {
                loadStatesByCountry(country_code);
            } else {
                $('#state').empty();
                $('#state').append('<option value="">Select State</option>');
            }
        });
</script>
@endsection

@section('scripts')

    <script src="{{ asset('js/jquery.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/jquery.mCustomScrollbar.concat.min.js') }}"></script>
    <script src="{{ asset('js/header.js?v=') . config('constants.VERSION') }}"></script>
    <script src="{{ asset('js/owl.js') }}"></script>
    <script src="{{ asset('js/nav-tool.js') }}"></script>
    <script src="{{ asset('js/jquery-ui.js') }}"></script>
    <script src="{{ asset('js/account.js?v=') . config('constants.VERSION') }}"></script>

@endsection




@section('scripts-only')
@endsection