@extends('layouts.omd.omd')

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

@section('content')

        <div class="row g-4 dash-head">
        <div class="col-lg-9">
            <div class="search-bar">
                <div class="input-group">
                    <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 or Name...">
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="serch-btn text-lg-end text-start">
                <a href="#"><button class="main-butn">Assign Team</button></a>
            </div>
        </div>
    </div>

        <div class="per-project g-4 row my-2 mx-2">

        {{-- LEFT: Stat Cards --}}
        <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">Monthly Sales Performance</h4>
                </div>
                <div class="staf-bars g-4 row">
                    <div class="col-lg-6">
                        <div class="card card-custom bg-white">
                            <div class="d-flex flex-wrap gap-3">
                                <div class="icon-circle" style="background-color:#D34DFFB2;">
                                    <i class="bi bi-file-earmark-text-fill"></i>
                                </div>
                                <div>
                                    <h6>Active Jobs</h6>
                                    <h4>{{ $activeJobs }}</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>
                    </div>
                    <div class="col-lg-6">
                        <div class="card card-custom bg-white">
                            <div class="d-flex flex-wrap gap-3">
                                <div class="icon-circle" style="background-color:#E4D910;">
                                    <i class="bi bi-vector-pen"></i>
                                </div>
                                <div>
                                    <h6>Active Vendor Orders</h6>
                                    <h4>{{ $activeVendorOrders }}</h4>
                                </div>
                            </div>
                            <div class="d-flex align-items-start gap-3 mt-3">
                                <div><img src="{{ asset('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>
                    <div class="col-lg-6">
                        <div class="card card-custom bg-white">
                            <div class="d-flex flex-wrap gap-3">
                                <div class="icon-circle" style="background-color:#0099FFB2;">
                                    <i class="bi bi-clock-fill"></i>
                                </div>
                                <div>
                                    <h6>Awaiting Client Approval</h6>
                                    <h4>0</h4>
                                </div>
                            </div>
                            <div class="d-flex align-items-start gap-3 mt-3">
                                <div><img src="{{ asset('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>
                    <div class="col-lg-6">
                        <div class="card card-custom bg-white">
                            <div class="d-flex flex-wrap gap-3">
                                <div class="icon-circle" style="background-color:#22c55e;">
                                    <i class="bi bi-arrows-angle-contract"></i>
                                </div>
                                <div>
                                    <h6>Closed Deals This Month</h6>
                                    <h4>34</h4>
                                </div>
                            </div>
                            <div class="d-flex align-items-start gap-3 mt-3">
                                <div><img src="{{ asset('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>
                </div>
            </div>
        </div>

        {{-- RIGHT: Live Charts --}}
        <div class="col-lg-6">
            <div class="rate bg-white h-100">

                {{-- Chart Tabs --}}
                <ul class="nav nav-pills mb-3" id="chartTabs">
                    <li class="nav-item">
                        <button class="nav-link active" onclick="showChart('orders')">Monthly Orders</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" onclick="showChart('payments')">Payments</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" onclick="showChart('postatus')">PO Status</button>
                    </li>
                </ul>

                {{-- Orders Bar Chart --}}
                <div id="chartOrders">
                    <div style="position:relative; width:100%; height:260px;">
                        <canvas id="ordersChart"></canvas>
                    </div>
                </div>

                {{-- Payments Line Chart --}}
                <div id="chartPayments" style="display:none;">
                    <div style="position:relative; width:100%; height:260px;">
                        <canvas id="paymentsChart"></canvas>
                    </div>
                </div>

                {{-- PO Status Donut --}}
                <div id="chartPostatus" style="display:none;">
                    <div style="position:relative; width:100%; height:260px;">
                        <canvas id="poStatusChart"></canvas>
                    </div>
                </div>

            </div>
        </div>

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



        {{-- Chart.js --}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
        <script>

            // ── Data from Laravel ──────────────────────────────────────────
            const monthlyOrders = @json($monthlyOrders);
            const monthlyPaid = @json($monthlyPaid);
            const poStatus = @json($poStatus);

            const orderLabels = Object.keys(monthlyOrders);
            const orderValues = Object.values(monthlyOrders);
            const paymentLabels = Object.keys(monthlyPaid);
            const paymentValues = Object.values(monthlyPaid).map(v => parseFloat(v) / 100000); // convert to Lakhs

            const poLabels = Object.keys(poStatus);
            const poValues = Object.values(poStatus);
            const poColors = ['#378ADD', '#1D9E75', '#EF9F27', '#E24B4A', '#7F77DD'];

            // ── Orders Bar Chart ───────────────────────────────────────────
            new Chart(document.getElementById('ordersChart'), {
                type: 'bar',
                data: {
                    labels: orderLabels,
                    datasets: [{
                        label: 'Orders',
                        data: orderValues,
                        backgroundColor: '#378ADD33',
                        borderColor: '#378ADD',
                        borderWidth: 1.5,
                        borderRadius: 4,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                        y: { grid: { color: '#88888818' }, ticks: { font: { size: 11 }, stepSize: 1 } }
                    }
                }
            });

            // ── Payments Line Chart ────────────────────────────────────────
            new Chart(document.getElementById('paymentsChart'), {
                type: 'line',
                data: {
                    labels: paymentLabels,
                    datasets: [{
                        label: 'Paid (₹L)',
                        data: paymentValues,
                        borderColor: '#1D9E75',
                        backgroundColor: '#1D9E7522',
                        borderWidth: 2,
                        pointBackgroundColor: '#1D9E75',
                        pointRadius: 4,
                        tension: 0.4,
                        fill: true,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false }, ticks: { font: { size: 11 } } },
                        y: {
                            grid: { color: '#88888818' },
                            ticks: { font: { size: 11 }, callback: v => '₹' + v.toFixed(1) + 'L' }
                        }
                    }
                }
            });

            // ── PO Status Donut ────────────────────────────────────────────
            new Chart(document.getElementById('poStatusChart'), {
                type: 'doughnut',
                data: {
                    labels: poLabels,
                    datasets: [{
                        data: poValues,
                        backgroundColor: poColors.slice(0, poLabels.length),
                        borderWidth: 0,
                        hoverOffset: 6,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: { font: { size: 11 }, padding: 12, boxWidth: 10 }
                        }
                    }
                }
            });

            // ── Tab Switcher ───────────────────────────────────────────────
            function showChart(name) {
                ['orders', 'payments', 'postatus'].forEach(id => {
                    document.getElementById('chart' + id.charAt(0).toUpperCase() + id.slice(1))
                        .style.display = (id === name) ? 'block' : 'none';
                });
                document.querySelectorAll('#chartTabs .nav-link').forEach((btn, i) => {
                    btn.classList.toggle('active', ['orders', 'payments', 'postatus'][i] === name);
                });
            }

        </script>

@endsection