@extends('Layout.mainlayout')

@section('content')
<div class="job-statistics-container">
    <!-- Header -->
    <div class="job-header">
        <div class="job-title">
            <span class="job-title-main">Custmers</span>
            <span class="job-title-sub">Management</span>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="job-stats-grid">
        <div class="job-stat-card">
            <div class="job-stat-label"> Total Direct Custmers</div>
            <div class="job-stat-value">973</div>
            <div class="job-stat-change">
                <span>↑</span>
                <span>2%</span>
            </div>
        </div>
        <div class="job-stat-card">
            <div class="job-stat-label">Total Referred Customers</div>
            <div class="job-stat-value">97</div>
            <div class="job-stat-change">
                <span>↑</span>
                <span>2%</span>
            </div>
        </div>
        <div class="job-stat-card">
            <div class="job-stat-label">OverAll Customers</div>
            <div class="job-stat-value">4973</div>
            <div class="job-stat-change">
                <span>↑</span>
                <span>2%</span>
            </div>
        </div>
    </div>


    <!-- Search Bar -->
    <div class="job-search-container">
        <div class="job-search-wrapper">
            <span class="job-search-icon">🔍</span>
            <input type="text" class="job-search-input" placeholder="Search Users, schedules...">
        </div>
    </div>

    <!-- Schedule Management -->
    <div class="job-schedule-container">
        <h2 class="job-schedule-title">Customer History </h2>
        <div style="overflow-x: auto;">
            <table class="job-schedule-table">
                <thead>
                    <tr>
                        <th>SI No.</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone No</th>
                        <th>Type</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>
                            <div class="job-employee-cell">
                                <img src="https://i.pravatar.cc/150?img=1" alt="Bessie Cooper" class="job-employee-avatar">
                                <span class="job-employee-name">Bessie Cooper</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">Morning Shift</td>
                        <td class="job-schedule-period">079868539</td>
                        <td>
                            <span class="job-status-badge active">Guest</span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <button class="job-view-btn">👁</button>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>
                            <div class="job-employee-cell">
                                <img src="https://i.pravatar.cc/150?img=2" alt="Cameron Williamson" class="job-employee-avatar">
                                <span class="job-employee-name">Cameron Williamson</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">Morning Shift</td>
                        <td class="job-schedule-period">05674859687</td>
                        <td>
                            <span class="job-status-badge inactive">Referred</span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <button class="job-view-btn">👁</button>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>
                            <div class="job-employee-cell">
                                <img src="https://i.pravatar.cc/150?img=3" alt="Jerome Bell" class="job-employee-avatar">
                                <span class="job-employee-name">Jerome Bell</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">Morning Shift</td>
                        <td class="job-schedule-period">Nov-25-nov-29</td>
                        <td>
                            <span class="job-status-badge active">Active</span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <button class="job-view-btn">👁</button>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>
                            <div class="job-employee-cell">
                                <img src="https://i.pravatar.cc/150?img=4" alt="Robert Fox" class="job-employee-avatar">
                                <span class="job-employee-name">Robert Fox</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">Morning Shift</td>
                        <td class="job-schedule-period">Nov-27-nov-29</td>
                        <td>
                            <span class="job-status-badge active">Active</span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <button class="job-view-btn">👁</button>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>
                            <div class="job-employee-cell">
                                <img src="https://i.pravatar.cc/150?img=5" alt="Albert Flores" class="job-employee-avatar">
                                <span class="job-employee-name">Albert Flores</span>
                            </div>
                        </td>
                        <td class="job-schedule-shift">Morning Shift</td>
                        <td class="job-schedule-period">Nov-9-nov-29</td>
                        <td>
                            <span class="job-status-badge inactive">Inactive</span>
                        </td>
                        <td>
                            <div class="job-action-cell">
                                <button class="job-view-btn">👁</button>
                                <button class="job-menu-btn">⋮</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

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