@extends('out.auth_master')

@section('styles')
<style>
    /* Account Settings Layout */
    .account-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 30px;
        align-items: start;
        margin-bottom: 40px;
    }

    /* Sidebar Styling */
    .account-sidebar {
        background: #fff;
        border-radius: 10px;
        padding: 24px 20px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
    }

    .sidebar-profile {
        display: flex;
        gap: 14px;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 2px solid #f5f5f5;
    }

    .sidebar-profile img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f58025;
        box-shadow: 0 3px 10px rgba(245, 128, 37, 0.2);
    }

    .sidebar-profile div {
        flex: 1;
        min-width: 0;
    }

    .sidebar-profile div>div:first-child {
        font-weight: 700;
        font-size: 15px;
        color: #333;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-profile .text-muted {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Navigation Links */
    .account-nav a {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: #666;
        text-decoration: none;
        border-radius: 8px;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .account-nav a:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(180deg, #f58025, #d86b1b);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }

    .account-nav a.active:before,
    .account-nav a:hover:before {
        transform: scaleY(1);
    }

    .account-nav a.active,
    .account-nav a:hover {
        background: linear-gradient(90deg, rgba(245, 128, 37, 0.1), rgba(232, 110, 31, 0.05));
        color: #f58025;
        padding-left: 20px;
    }

    .account-nav a i {
        margin-right: 10px;
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

    /* Content Area */
    .account-content {
        background: #fff;
        border-radius: 10px;
        padding: 32px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
        min-height: 500px;
    }

    .account-content h3 {
        font-size: 24px;
        font-weight: 700;
        color: #333;
        margin-bottom: 8px;
        padding-bottom: 16px;
        border-bottom: 3px solid #f58025;
        display: inline-block;
    }

    .account-section {
        display: none;
        animation: fadeIn 0.4s ease-in;
    }

    .account-section.active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Form Styling */
    .account-content .form-group {
        margin-bottom: 24px;
    }

    .account-content .form-group label {
        display: block;
        font-weight: 600;
        font-size: 13px;
        color: #444;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .account-content .form-control {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e8e8e8;
        border-radius: 8px;
        font-size: 14px;
        color: #333;
        background: #fafafa;
        transition: all 0.3s ease;
        font-family: inherit;
    }

    .account-content .form-control:focus {
        outline: none;
        border-color: #f58025;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(245, 128, 37, 0.1);
    }

    .account-content .form-control[readonly] {
        background: #f5f5f5;
        color: #999;
        cursor: not-allowed;
    }

    .account-content input[type="file"] {
        padding: 10px;
        border: 2px dashed #e8e8e8;
        background: #fafafa;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
    }

    .account-content input[type="file"]:hover {
        border-color: #f58025;
        background: #fff;
    }

    /* Buttons */
    .account-content .btn {
        padding: 12px 32px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .account-content .btn-primary {
        background: linear-gradient(135deg, #f58025, #d86b1b);
        color: #fff;
        box-shadow: 0 4px 12px rgba(245, 128, 37, 0.3);
    }

    .account-content .btn-primary:hover {
        background: linear-gradient(135deg, #d86b1b, #c25e17);
        box-shadow: 0 6px 16px rgba(245, 128, 37, 0.4);
        transform: translateY(-2px);
    }

    .account-content .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(245, 128, 37, 0.3);
    }

    .account-content .btn-outline-primary {
        background: transparent;
        color: #f58025;
        border: 2px solid #f58025;
    }

    .account-content .btn-outline-primary:hover {
        background: #f58025;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 128, 37, 0.3);
    }

    /* Status badges */
    .text-success {
        color: #28a745;
        font-weight: 600;
    }

    .text-warning {
        color: #ffc107;
        font-weight: 600;
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        .account-layout {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .account-sidebar {
            order: 2;
        }

        .account-content {
            padding: 24px;
        }
    }

    @media (max-width: 575px) {
        .account-content {
            padding: 20px;
        }

        .account-content h3 {
            font-size: 20px;
        }

        .sidebar-profile {
            flex-direction: column;
            text-align: center;
        }

        .account-nav a {
            padding: 10px 14px;
            font-size: 13px;
        }

        .account-content .btn {
            width: 100%;
        }
    }

    /* Page Header */
    .page-header {
        background: linear-gradient(135deg, #f58025, #d86b1b);
        padding: 24px 0;
        margin-bottom: 0;
    }

    .page-header .page-title {
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        margin: 0;
    }

    .breadcrumb-nav {
        background: #f8f9fa;
        padding: 12px 0;
        margin-bottom: 30px;
    }

    .breadcrumb {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 13px;
    }

    .breadcrumb li {
        display: flex;
        align-items: center;
    }

    .breadcrumb li+li:before {
        content: '/';
        margin: 0 10px;
        color: #999;
    }

    .breadcrumb a {
        color: #666;
        text-decoration: none;
        transition: color 0.3s;
    }

    .breadcrumb a:hover {
        color: #f58025;
    }
</style>
@endsection

@section('content')
<main class="main">
    <div class="page-header">
        <div class="container">
            <h1 class="page-title mb-0">Account Settings</h1>
        </div>
    </div>

    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb account-breadcrumb">
                <li><a href="/admin/dashboard">Home</a></li>
                <li>Account Settings</li>
            </ul>
        </div>
    </nav>

    <div class="container pt-3">
        <div class="account-layout">
            <aside class="account-sidebar">
                <div class="sidebar-profile">
                    <img src="{{ Auth::guard('admin')->user()->avatar ? asset(Auth::guard('admin')->user()->avatar) : asset('images/default-avatar.png') }}" alt="avatar" />
                    <div>
                        <div style="font-weight:700">{{ Auth::guard('admin')->user()->first_name }} {{ Auth::guard('admin')->user()->last_name }}</div>
                        <div class="text-muted">{{ Auth::guard('admin')->user()->email }}</div>
                    </div>
                </div>

                @php
                $userType = Auth::guard('admin')->user()->type ?? '';
                $limitedTypes = ['admin', 'marketer', 'submarketer', 'subadmin', 'affiliate'];
                $showExtended = !in_array($userType, $limitedTypes);
                @endphp

                <nav class="account-nav">
                    <a href="#profile" class="nav-link active" data-target="profile">
                        <i class="w-icon-user"></i> Profile
                    </a>
                    <a href="#password" class="nav-link" data-target="password">
                        <i class="fas fa-lock"></i> Password
                    </a>

                    @if($showExtended)
                    <a href="#verification" class="nav-link" data-target="verification">
                        <i class="fas fa-shield-alt"></i> Verification
                    </a>
                    <a href="#payment" class="nav-link" data-target="payment">
                        <i class="w-icon-wallet"></i> Payment
                    </a>
                    @endif
                </nav>
            </aside>

            <section class="account-content">
                {{-- Profile Section (uses existing endpoint for update-vendor-details/personal) --}}
                <div id="profile" class="account-section active">
                    <h3>Profile</h3>
                    @include('alert')
                    <form id="profileForm" action="{{ url('admin/update-vendor-details/personal') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" value="{{ Auth::guard('admin')->user()->email }}" readonly />
                        </div>
                        <div class="form-group">
                            <label>Account Type</label>
                            <input type="text" class="form-control" value="{{ ucfirst(Auth::guard('admin')->user()->type ?? 'N/A') }}" readonly />
                        </div>
                        <div class="form-group">
                            <label>First name</label>
                            <input type="text" name="first_name" class="form-control profile-input" value="{{ Auth::guard('admin')->user()->first_name }}" required data-original="{{ Auth::guard('admin')->user()->first_name }}" />
                        </div>
                        <div class="form-group">
                            <label>Last name</label>
                            <input type="text" name="last_name" class="form-control profile-input" value="{{ Auth::guard('admin')->user()->last_name }}" required data-original="{{ Auth::guard('admin')->user()->last_name }}" />
                        </div>
                        <div class="form-group">
                            <label>Mobile</label>
                            <input type="text" name="mobile" class="form-control phone profile-input" value="{{ Auth::guard('admin')->user()->mobile }}" required data-original="{{ Auth::guard('admin')->user()->mobile }}" />
                        </div>
                        <div class="form-group">
                            <label>Avatar</label>
                            <input type="file" name="avatar" id="avatarInput" accept="image/*" class="profile-input" />
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit" id="profileSubmitBtn" disabled style="opacity: 0.5; cursor: not-allowed;">Save profile</button>
                        </div>
                    </form>
                </div>

                {{-- Password Section --}}
                <div id="password" class="account-section">
                    <h3>Change Password</h3>
                    @include('alert')
                    <form action="{{ url('admin/update-admin-password') }}" method="post">
                        @csrf
                        <div class="form-group">
                            <label>Current password</label>
                            <input type="password" name="current_password" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>New password</label>
                            <input type="password" name="new_password" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>Confirm password</label>
                            <input type="password" name="confirm_password" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Update password</button>
                        </div>
                    </form>
                </div>

                {{-- Verification Section --}}
                <div id="verification" class="account-section">
                    <h3>Account verification</h3>
                    <p>Document status: @php $documentStatus = Auth::guard('admin')->user()->documentUpload ? Auth::guard('admin')->user()->documentUpload->status : 0; @endphp
                        @if($documentStatus == 1)
                        <span class="text-success">Verified</span>
                        @else
                        <span class="text-warning">Not verified</span>
                        @endif
                    </p>
                    <a href="{{ route('vendor-document') }}" class="btn btn-outline-primary">Manage verification documents</a>
                </div>

                {{-- Payment Section (link to existing page) --}}
                <div id="payment" class="account-section">
                    <h3>Payment details</h3>
                    <p>Manage your payout/payment details.</p>
                    <a href="{{ url('admin/update-payment-details') }}" class="btn btn-outline-primary">Manage payment details</a>
                </div>
            </section>
        </div>
    </div>
</main>

@endsection

@section('scripts')
<script>
    // Sidebar nav tab switching
    function activateAccountTab(tab) {
        document.querySelectorAll('.account-nav .nav-link').forEach(n => n.classList.remove('active'));
        document.querySelectorAll('.account-section').forEach(s => s.classList.remove('active'));
        var nav = document.querySelector('.account-nav .nav-link[data-target="' + tab + '"]');
        var section = document.getElementById(tab);
        if (nav) nav.classList.add('active');
        if (section) section.classList.add('active');
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }

    document.querySelectorAll('.account-nav .nav-link').forEach(function(el) {
        el.addEventListener('click', function(e) {
            e.preventDefault();
            const target = el.getAttribute('data-target');
            activateAccountTab(target);
        });
    });

    // On page load, activate tab if hash present
    if (window.location.hash) {
        var tab = window.location.hash.replace('#', '');
        if (tab) activateAccountTab(tab);
    }

    // Listen for hashchange (for dropdown links from other pages)
    window.addEventListener('hashchange', function() {
        var tab = window.location.hash.replace('#', '');
        if (tab) activateAccountTab(tab);
    });

    // Profile form change detection
    var profileForm = document.getElementById('profileForm');
    var profileSubmitBtn = document.getElementById('profileSubmitBtn');
    var profileInputs = document.querySelectorAll('.profile-input');
    var avatarInput = document.getElementById('avatarInput');

    function checkProfileChanges() {
        var hasChanges = false;

        // Check text inputs
        profileInputs.forEach(function(input) {
            if (input.type !== 'file') {
                var original = input.getAttribute('data-original') || '';
                if (input.value !== original) {
                    hasChanges = true;
                }
            }
        });

        // Check if avatar file is selected
        if (avatarInput && avatarInput.files && avatarInput.files.length > 0) {
            hasChanges = true;
        }

        // Enable/disable button
        if (hasChanges) {
            profileSubmitBtn.disabled = false;
            profileSubmitBtn.style.opacity = '1';
            profileSubmitBtn.style.cursor = 'pointer';
        } else {
            profileSubmitBtn.disabled = true;
            profileSubmitBtn.style.opacity = '0.5';
            profileSubmitBtn.style.cursor = 'not-allowed';
        }
    }

    // Listen for changes on all profile inputs
    profileInputs.forEach(function(input) {
        input.addEventListener('input', checkProfileChanges);
        input.addEventListener('change', checkProfileChanges);
    });

    // Check on page load
    checkProfileChanges();
</script>
@endsection