@extends('Layout.mainlayout')

@section('content')

<div class="employee-profile-container">
        <!-- Employee Header -->
        <div class="employee-header-section">
            <div class="employee-header-top">
                <div>
                    <div class="employee-name-section">
                        <h1 class="employee-name">Cameron Willson</h1>
                    </div>
                    <p class="employee-subtitle">Marketing Specialist</p>
                    <p class="employee-office">Riyadh, Branch Office</p>
                </div>
            </div>

            <div class="employee-info-grid">
                <div class="employee-photo-section">
                    <img src="https://i.pravatar.cc/150?img=8" alt="Cameron Willson" class="employee-photo">
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Full Name</span>
                    <span class="employee-info-value">Cameron Willson</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Joining Date</span>
                    <span class="employee-info-value">November 21, 2022</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Referral Code</span>
                    <span class="employee-info-value">KSA_IF</span>
                    <button class="employee-actions-menu">⋮</button>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Email</span>
                    <span class="employee-info-value">Cameron24x@Gmail.com</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Occupation</span>
                    <span class="employee-info-value">Marketing specialist</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Address</span>
                    <span class="employee-info-value">4517 W. Munch 39495</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Phone Number</span>
                    <span class="employee-info-value">+966283908621</span>
                </div>
                <div class="employee-info-item">
                    <span class="employee-info-label">Identification N0</span>
                    <span class="employee-info-value">456093256</span>
                </div>
            </div>
        </div>


        <!-- Content Grid -->
        <div class="employee-content-grid">
            <!-- Left Column -->
            <div>


                <!-- Payment Section -->
                <div class="employee-payment-section">
                    <div class="employee-payment-card">
                        <div class="employee-payment-header">
                            <span class="employee-payment-title">Past Payment Settled</span>
                            {{-- <span class="employee-payment-date">29th August, 2019</span> --}}
                        </div>
                        <div class="employee-payment-grid">
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦35,000.61</span>
                                <span class="employee-payment-label">Policies Sales</span>
                            </div>

                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">7,052.00</span>
                                <span class="employee-payment-label">Total Refers</span>
                            </div>
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦42,052.61</span>
                                <span class="employee-payment-label">Total Amount Paid</span>
                            </div>
                        </div>
                    </div>

                    <div class="employee-payment-card next">
                        <div class="employee-payment-header">
                            <span class="employee-payment-title">Next Payment</span>
                            {{-- <span class="employee-payment-date">16th September, 2019</span> --}}
                        </div>
                        <div class="employee-payment-grid">
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦47,000.23</span>
                                <span class="employee-payment-label">Policies Sales</span>
                            </div>

                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">9,031.00</span>
                                <span class="employee-payment-label">Total Refers</span>
                            </div>
                            <div class="employee-payment-item">
                                <span class="employee-payment-amount">₦58,032.21</span>
                                <span class="employee-payment-label">Total Amount to be Paid</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Search Bar -->
                <div class="employee-search-container">
                    <div class="employee-search-wrapper">
                        <span class="employee-search-icon">🔍</span>
                        <input type="text" class="employee-search-input" placeholder="Search documents, activities...">
                    </div>
                </div>

                <div class="activity-section">
                    <h2 class="section-title">Transaction History</h2>

                    <div class="activity-group">
                        <div class="activity-date">For John Smith</div>

                        <div class="activity-item">
                            <div class="activity-icon received">✕</div>
                            <div class="activity-amount">
                                ₦7,000.00 NGN
                                <div class="activity-amount-sub">Policy No: 34589u56</div>
                            </div>
                            <div class="activity-status">
                                <span class="status-badge status-received">Received</span>
                            </div>
                            <div class="activity-details">
                                <div class="activity-school">Blessing James</div>
                                <div class="activity-description">Motor Third Party</div>
                            </div>
                            <div class="activity-link">
                                <a href="#">View transaction</a>
                                <div class="activity-link-date">Date: 8/25/16</div>
                            </div>
                        </div>

                        <div class="activity-item">
                            <div class="activity-icon returned">✕</div>
                            <div class="activity-amount">
                                ₦10,000.00 NGN
                                <div class="activity-amount-sub">Policy No: 45hu7392</div>
                            </div>
                            <div class="activity-status">
                                <span class="status-badge status-returned">Failed</span>
                            </div>
                            <div class="activity-details">
                                <div class="activity-school">John Ubong</div>
                                <div class="activity-description">Comprehensive</div>
                            </div>
                            <div class="activity-link">
                                <a href="#">View transaction</a>
                                <div class="activity-link-date">Date: 8/25/16</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pagination -->
                <div class="employee-pagination">
                    <button class="employee-pagination-btn" disabled>‹ Previous</button>
                    <button class="employee-pagination-btn active">1</button>
                    <button class="employee-pagination-btn">2</button>
                    <button class="employee-pagination-btn">3</button>
                    <button class="employee-pagination-btn">4</button>
                    <button class="employee-pagination-btn">Next ›</button>
                </div>
            </div>

            <!-- Right Column -->
            <div>
                <!-- File Documents Section -->
                <div class="employee-files-section">
                    <div class="employee-files-header">
                        <h3 class="employee-files-title">File Documents</h3>
                    </div>
                    <div class="employee-file-item">
                        <div class="employee-file-left">
                            <div class="employee-file-icon">📄</div>
                            <div>
                                <div class="employee-file-name">Agent Licence</div>
                                <div class="employee-file-size">144kb</div>
                            </div>
                        </div>
                    </div>
                    <div class="employee-file-item">
                        <div class="employee-file-left">
                            <div class="employee-file-icon">📄</div>
                            <div>
                                <div class="employee-file-name">Identification ID</div>
                                <div class="employee-file-size">680kb</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection