@extends('layouts.admin')

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

@section('content')
<div class="row staf-bars my-4 g-4 mx-2">


    <!--Active Quotes -->
    <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>Active Quotes</h6>
                        <h4 id="leadCount">{{ $todayLeadsCount }}</h4>
                    </div>
                </div>

                <div class="d-flex align-items-start gap-3 mt-3">
                    <div><img src="{{ asset('assets/img/pink-dash.png') }}" alt="chart" ></div>
                        <div style="color:#D34DFFB2;" class="trend">12% <i class="bi bi-arrow-up-right"></i></div>
                    </div>
                </div>
            </a>
        </div>

        <!-- Active Jobs -->
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="{{ route('active.jobs') }}">
                <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 Jobs</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>
            </a>
        </div>

        <!-- Workforce -->
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a href="{{ route('staff.index') }}">
                <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>Workforce</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>
            </a>
        </div>

        <!-- Payments -->
        <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>Payments</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>

        <!-- Completed Jobs -->
        <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>Completed Jobs</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>

        <!-- Vendor Payments -->
        <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>Vendor Payments</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>

        <!-- Factory Projects -->
        <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>Factory Projects</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>

        <!-- Construction -->
        <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>Construction</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>

    {{-- ========== CHARTS SECTION ========== --}}
    <div class="row g-4 my-2 mx-2">

        {{-- Bar Chart: Dashboard Overview from $dashboardData counts --}}
        <div class="col-lg-6">
            <div class="bg-white p-3" style="border-radius:12px; border:1px solid #f0f0f0;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0">Dashboard Overview</h6>
                    <small class="text-muted">Today's counts</small>
                </div>
                <div style="position:relative; height:260px;">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </div>

        {{-- Line Chart: Weekly activity --}}
        <div class="col-lg-6">
            <div class="bg-white p-3" style="border-radius:12px; border:1px solid #f0f0f0;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0">Weekly Activity</h6>
                    <div class="d-flex gap-3" style="font-size:12px; color:#888;">
                        <span>
                            <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#D34DFFB2;margin-right:4px;"></span>
                            New Quotes
                        </span>
                        <span>
                            <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#22c55e;margin-right:4px;"></span>
                            Completed Jobs
                        </span>
                    </div>
                </div>
                <div style="position:relative; height:260px;">
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
        </div>

    </div>
    {{-- ========== END CHARTS ========== --}}

    {{-- Recent Project Updates Table --}}
    <div class="updates mx-4 p-3 mt-3">
        <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>

        <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>

        <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>

    {{-- Chart.js --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // ── Bar Chart: reads directly from $dashboardData ──
        new Chart(document.getElementById('barChart'), {
            type: 'bar',
            data: {
                labels: {!! json_encode(array_keys($dashboardData)) !!},
                datasets: [{
                    data: {!! json_encode(array_values($dashboardData)) !!},
                    backgroundColor: ['#D34DFFB2','#22c55e','#0099FFB2','#E4D910','#8280FF'],
                    borderRadius: 6,
                    borderSkipped: false,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(0,0,0,0.05)' },
                        ticks: { maxTicksLimit: 5, precision: 0 }
                    }
                }
            }
        });

        // ── Line Chart: weekly quotes vs completed from DB ──
        const weekDays = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
        new Chart(document.getElementById('lineChart'), {
            type: 'line',
            data: {
                labels: weekDays,
                datasets: [
                    {
                        label: 'New Quotes',
                        data: {!! json_encode($weeklyQuotes) !!},
                        borderColor: '#D34DFFB2',
                        backgroundColor: 'rgba(211,77,255,0.08)',
                        tension: 0.4,
                        fill: true,
                        pointRadius: 4,
                        pointBackgroundColor: '#D34DFFB2',
                        borderWidth: 2
                    },
                    {
                        label: 'Completed Jobs',
                        data: {!! json_encode($weeklyCompleted) !!},
                        borderColor: '#22c55e',
                        backgroundColor: 'rgba(34,197,94,0.07)',
                        tension: 0.4,
                        fill: true,
                        pointRadius: 4,
                        pointBackgroundColor: '#22c55e',
                        borderWidth: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(0,0,0,0.05)' },
                        ticks: { maxTicksLimit: 5, precision: 0 }
                    }
                }
            }
        });

        // ── Live poll: refresh Active Quotes count every 5s ──
        function fetchLeadCount() {
            fetch("{{ route('generate.leads') }}", {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(r => r.json())
            .then(data => {
                document.getElementById('leadCount').textContent = data.todayLeadsCount;
            })
            .catch(err => console.error('Error fetching leads:', err));
        }
        setInterval(fetchLeadCount, 5000);
    </script>

@endsection