@extends('layouts.vendor')

@section('page-title', 'Dashboard')

@section('vendor-content')
<div class="container">
    <h2 class="mb-4">Profile</h2>

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs" id="vendorTabs">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#profile">View Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#kyb">KYB</a>
        </li>
    </ul>

    <div class="tab-content mt-4">
        <!-- Profile Tab -->
        <div id="profile" class="tab-pane fade show active">
            <form method="POST" action="{{ route('vendor.updateProfile') }}">
                @csrf
                <div class="card p-4">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Business Name</label>
                            <input type="text" class="form-control" name="business_name" value="{{ $user->business_name }}" required>
                        </div>
                        <div class="col-md-6">
                            <label>Admin Name</label>
                            <input type="text" class="form-control" name="admin_name" value="{{ $user->admin_name }}" required>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>Phone Number</label>
                            <input type="text" class="form-control" name="phone" value="{{ $user->phone }}" required>
                        </div>
                        <div class="col-md-6">
                            <label>Email</label>
                            <input type="email" class="form-control" name="email" value="{{ $user->email }}" required>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>Nationality</label>
                            <input type="text" class="form-control" name="nationality" value="{{ $user->nationality }}">
                        </div>
                        <div class="col-md-6">
                            <label>State</label>
                            <input type="text" class="form-control" name="state" value="{{ $user->state }}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>Sector</label>
                            <select class="form-control" name="sector">
                                <option selected>Pick an Option</option>
                                <option value="Finance">Finance</option>
                                <option value="Education">Education</option>
                                <option value="Healthcare">Healthcare</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Address</label>
                            <input type="text" class="form-control" name="address" value="{{ $user->address }}" required>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-3">Update</button>
                </div>
            </form>

            <hr>

            <!-- Password Update -->
            <h4 class="mt-4">Password</h4>
            <form method="POST" action="{{ route('vendor.updatePassword') }}">
                @csrf
                <div class="card p-4">
                    <div class="row">
                        <div class="col-md-4">
                            <label>Current Password</label>
                            <input type="password" class="form-control" name="current_password" required>
                        </div>
                        <div class="col-md-4">
                            <label>New Password</label>
                            <input type="password" class="form-control" name="new_password" required>
                        </div>
                        <div class="col-md-4">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control" name="confirm_password" required>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-3">Change Password</button>
                </div>
            </form>
        </div>

        <!-- KYB Tab -->
        <div id="kyb" class="tab-pane fade">
            <form method="POST" action="{{ route('vendor.updateKYB') }}" enctype="multipart/form-data">
                @csrf
                <div class="card p-4">
                    <h4>Business Information</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Business Registration Number</label>
                            <input type="text" class="form-control" name="registration_number" value="{{ $kyb->registration_number ?? '' }}" required>
                        </div>
                        <div class="col-md-6">
                            <label>Business Registration Date</label>
                            <input type="date" class="form-control" name="registration_date" value="{{ $kyb->registration_date ?? '' }}" required>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>Tax Number</label>
                            <input type="text" class="form-control" name="tax_number" value="{{ $kyb->tax_number ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label>Business MD Name</label>
                            <input type="text" class="form-control" name="md_name" value="{{ $kyb->md_name ?? '' }}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label>MD’s Contact</label>
                            <input type="text" class="form-control" name="md_contact" value="{{ $kyb->md_contact ?? '' }}" required>
                        </div>
                        <div class="col-md-6">
                            <label>Country</label>
                            <input type="text" class="form-control" name="country" value="{{ $kyb->country ?? '' }}" required>
                        </div>
                    </div>

                    <h4 class="mt-4">Bank Information</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Bank Name</label>
                            <input type="text" class="form-control" name="bank_name" value="{{ $kyb->bank_name ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label>Bank Account Number</label>
                            <input type="text" class="form-control" name="bank_account" value="{{ $kyb->bank_account ?? '' }}">
                        </div>
                    </div>

                    <h4 class="mt-4">Signatory Information</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Signatory Name</label>
                            <input type="text" class="form-control" name="signatory_name" value="{{ $kyb->signatory_name ?? '' }}">
                        </div>
                        <div class="col-md-6">
                            <label>Signatory Surname</label>
                            <input type="text" class="form-control" name="signatory_surname" value="{{ $kyb->signatory_surname ?? '' }}">
                        </div>
                    </div>

                    <h4 class="mt-4">Required Documents</h4>
                    <ul>
                        <li>Registration Certificate</li>
                        <li>CAC Incorporate Letter</li>
                        <li>CAC Form 07</li>
                        <li>CAC Form 2A</li>
                        <li>CAC MEMART</li>
                    </ul>

                    <label>Upload Documents</label>
                    <input type="file" class="form-control" name="documents[]" multiple accept=".jpg, .png, .jpeg">

                    <button type="submit" class="btn btn-primary mt-3">Update KYB</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Initially show the Profile tab
    showTab('profile');
});

function showTab(tab) {
    // Hide all sections
    const sections = document.querySelectorAll('.tab-section');
    sections.forEach(section => {
        section.classList.add('d-none');
    });

    // Remove 'active' class from all tab buttons
    const tabButtons = document.querySelectorAll('.tab-button');
    tabButtons.forEach(btn => {
        btn.classList.remove('active');
    });

    // Show the selected tab section and mark its button active
    document.getElementById(tab + '-section').classList.remove('d-none');
    document.getElementById(tab + '-tab').classList.add('active');
}
</script>
@endsection