@extends('layouts.app')

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

@section('content')
<div class="row staf-bars my-4 g-4 mx-2">
            <!-- Total Clients -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#8280FF;">
                            <i class="bi bi-people-fill"></i>
                        </div>
                        <div class="total-user">
                            <h6>Total Clients</h6>
                            <h4>{{$totalCounts}}</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/purple-dash.png" alt="chart"></div>
                        <div style="color:#8280FF;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- Active Orders -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#22c55e;">
                            <i class="bi bi-bag-fill"></i>
                        </div>
                        <div>
                            <h6>Active Orders</h6>
                            <h4>{{$activeOrdersCount}}</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/green-dash.png" alt="chart"></div>
                        <div style="color:#16BB47;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- Total Staff -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#0099FFB2;">
                            <i class="bi bi-person-fill"></i>
                        </div>
                        <div>
                            <h6>Total Staff</h6>
                            <h4>{{$totalStaff}}</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/blue-dash.png" alt="chart"></div>
                        <div style="color:#0099FFB2;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- Lead Received Today -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <a href="{{ route('generate.leads') }}">
                    <div class="card card-custom bg-white">
                        <div class="d-flex gap-3">
                            <div class="icon-circle" style="background-color:#D34DFFB2;">
                                <i class="bi bi-graph-up"></i>
                            </div>
                            <div>
                                <h6>Lead Received Today</h6>
                                <h4 id="leadCount">{{ $todayLeadsCount }}</h4>
                            </div>
                        </div>

                        <div class="d-flex align-items-start gap-3 mt-3">
                            <!-- 🔹 Wrapped image inside anchor tag -->
                        
                                <img src="{{ asset('assets/img/pink-dash.png') }}" alt="chart" style="cursor: pointer;">
                        

                            <div style="color:#D34DFFB2;" class="trend">
                                12% <i class="bi bi-arrow-up-right"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>


            <!-- Quote Submitted -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#E4D910;">
                            <i class="bi bi-card-checklist"></i>
                        </div>
                        <div>
                            <h6>Quote Submitted</h6>
                            <h4>{{$quoteSubmitted}}</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/yellow-dash.png" alt="chart"></div>
                        <div style="color:#E4D910;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- Invoice Generated -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#3173EC;">
                            <i class="bi bi-file-earmark-text-fill"></i>
                        </div>
                        <div>
                            <h6>Invoice Generated</h6>
                            <h4>78</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/dark-blue-dash.png" alt="chart"></div>
                        <div style="color:#3173EC;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- Upcoming Invoices -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#FCB068;">
                            <i class="bi bi-phone-fill"></i>
                        </div>
                        <div>
                            <h6>Upcoming Invoices</h6>
                            <h4>784</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/orange-dash.png" alt="chart"></div>
                        <div style="color:#FCB068;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>

            <!-- Due Invoices -->
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card card-custom bg-white">
                    <div class="d-flex gap-3">
                        <div class="icon-circle" style="background-color:#FF6666;">
                            <i class="bi bi-clock-fill"></i>
                        </div>
                        <div>
                            <h6>Due Invoices</h6>
                            <h4>12</h4>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mt-3">
                        <div><img src="./assets/img/red-dash.png" alt="chart"></div>
                        <div style="color:#FF6666;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </div>


        </div>

        <div class="updates mx-4 p-3">
            <!-- Header -->
            <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-3">
                <h6 class="fw-bold mb-0">Recent Project Updates</h6>
                <div class="d-flex gap-2">
                    <div class="input-group search-bar">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control border-start-0" placeholder="Search by ID...">
                    </div>
                    <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-filter"></i> Date</button>
                </div>
            </div>

            <!-- Table -->
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Project ID</th>
                            <th>Project Name</th>
                            <th>Progress</th>
                            <th>Description</th>
                            <th>Updated By</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=1" class="avatar"> JSW Coal Shed</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Installed 80% of steel trusses</td>
                            <td>Amit Sharma</td>
                        </tr>

                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=2" class="avatar"> Dalmia Cement Dome</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Received 500 MT steel purlins</td>
                            <td>Procurement</td>
                        </tr>

                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=3" class="avatar"> Ambuja Shed</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Passed welding quality check</td>
                            <td>Rahul Yadav</td>
                        </tr>

                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=4" class="avatar"> NTPC Warehouse</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Crane breakdown, expected delay 3d</td>
                            <td>QA Team</td>
                        </tr>

                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=5" class="avatar"> Bmw Warehouse</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Installed 80% of steel trusses</td>
                            <td>QA Team</td>
                        </tr>

                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=6" class="avatar"> Dalmia Cement Dome</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Installed 80% of steel trusses</td>
                            <td>Sahil Kumar</td>
                        </tr>

                        <tr>
                            <td>02/10/2025</td>
                            <td>#677HY78</td>
                            <td><img src="https://i.pravatar.cc/28?img=7" class="avatar"> NTPC Warehouse</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="progress flex-grow-1">
                                        <div class="progress-bar bg-success" style="width: 84%;"></div>
                                    </div>
                                    <span>84%</span>
                                </div>
                            </td>
                            <td>Installed 80% of steel trusses</td>
                            <td>QA Team</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Footer -->
            <div class="d-flex justify-content-between align-items-center mt-3">
                <small>Rows per page: 10</small>
                <small>1–10 of 30</small>
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="per-project g-4 row my-2  mx-2">
            <div class="col-lg-6  ">
                <div class="rate bg-white">
                    <div class=" d-flex justify-content-between align-items-center mb-3">
                        <h4 class="mb-0">Completion Rate Per Project (%)</h4>
                        <select id="revenueYear" class="form-select form-select-sm w-auto">
                            <option value="2025" selected>2025</option>
                            <option value="2024">2024</option>
                            <option value="2023">2023</option>
                            <option value="2022">2022</option>
                        </select>
                    </div>
                    <div class="barline">
                        <img class="img-fluid w-100" src="./assets/img/barline.svg">
                    </div>
                </div>
            </div>
            <div class="col-lg-6  ">
                <div class="rate bg-white">
                    <div class=" d-flex justify-content-between align-items-center mb-3">
                        <h4 class="mb-0">Completion Rate Per Project (%)</h4>
                        <select id="revenueYear" class="form-select form-select-sm w-auto">
                            <option value="2025" selected>2025</option>
                            <option value="2024">2024</option>
                            <option value="2023">2023</option>
                            <option value="2022">2022</option>
                        </select>
                    </div>
                    <div class="barline">
                        <img class="img-fluid w-100" src="./assets/img/circle-bar.svg">
                    </div>
                </div>


            </div>
        </div>

    </div>


<script>
    // Function to fetch the latest lead count
    function fetchLeadCount() {
        fetch("{{ route('generate.leads') }}?ajax=1")
        .then(response => response.json())
        .then(data => {
        document.getElementById('leadCount').textContent = data.todayLeadsCount;
        })
        .catch(error => console.error('Error fetching leads:', error));
        }

    // Refresh every 5 seconds
    setInterval(fetchLeadCount, 5000);
</script>


@endsection