@extends("back.layouts.pages-layout")
@section("pageTitle", isset($pageTitle) ? $pageTitle : "Forgot Password")
@section("pageHeader", isset($pageHeader) ? $pageHeader : "Home")
@section("content")

<div class="col-12">
    <div class="card card-md">
        <div class="card-stamp card-stamp-lg">
            <div class="card-stamp-icon bg-info">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-balloon">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M14 8a2 2 0 0 0 -2 -2" />
                    <path d="M6 8a6 6 0 1 1 12 0c0 4.97 -2.686 9 -6 9s-6 -4.03 -6 -9" />
                    <path d="M12 17v1a2 2 0 0 1 -2 2h-3a2 2 0 0 0 -2 2" />
                </svg>
            </div>
        </div>
        <div class="card-body">
            <h1 class="text-center">Welcome, <a href="{{ route("auth.profile") }}" class="text-azure">{{ $user->name }}</a></h1>
        </div>
    </div>

    <div id="supplier-dashboard" hidden>
        <div class="mt-6 mb-2 text-center">
            <small class="text-secondary strong">Data as of 2025-05-06 04:44:25 AM</small>
        </div>
    
        <div class="row row-cards">
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="card-title text-center">Top 10 Branches</h3>
                        <div class="table-responsive">
                            <table id="top-10-branches-table" class="table table-sm table-borderless table-vcenter card-table">
                                <thead>
                                    <tr>
                                        <th>Branch Location</th>
                                        <th class="text-end">Quantity Sold</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Placeholder row while loading -->
                                    <div class="page page-center" id="loading-placeholder-1">
                                        <div class="container container-slim py-3">
                                            <div class="text-center">
                                                <div class="text-secondary mb-3">Loading...</div>
                                                <div class="progress progress-sm">
                                                    <div class="progress-bar progress-bar-indeterminate"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card h-100">
                    <div class="card-body">
                        <h3 class="card-title text-center">Quantity Sold Per Item This Month</h3>
                        <div class="table-responsive">
                            <table id="item-sold-this-month-table" class="table table-sm table-borderless table-vcenter card-table" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>Item Name</th>
                                        <th class="text-end">Quantity Sold</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Placeholder row while loading -->
                                    <div class="page page-center" id="loading-placeholder-2">
                                        <div class="container container-slim py-3">
                                            <div class="text-center">
                                                <div class="text-secondary mb-3">Loading...</div>
                                                <div class="progress progress-sm">
                                                    <div class="progress-bar progress-bar-indeterminate"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push("scripts")

<script>
    let supplier = "{{ $user->company_name }}";
    
    $(document).ready(function() {
        if ("{{ $user->type_id }}" == 2) {
            $("#supplier-dashboard").removeAttr("hidden");

            get_top_10_branches();
            get_quantity_sold_per_item_this_month();
        } else {
            $("#supplier-dashboard").css("display", "none");
        }
    });

    function get_top_10_branches() {
        $.ajax({
            url: "https://api.r2groupcfs.ph/supplier-api/supplier/get_top_10_branches?api-key=WDQOWgM2hgUjQpFngkyr",
            type: "GET",
            data: {"supplier": supplier},
            dataType: "JSON",
            success: function (response) {
                let data = response.data;
                let top_quantity_sold = data[0].quantity_sold;
                let td = "";

                if (data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        td += generate_top_10_branches_td(data[i], top_quantity_sold);
                    }
    
                    $("#top-10-branches-table tbody").html(td);
                } else {
                    $("#top-10-branches-table").html(no_data_available());
                }
            },
            error: function () {
                $("#top-10-branches-table").html(failed_loading_data());
            },
            complete: function() {
                $("#loading-placeholder-1").hide();
            }
        });
    }

    function generate_top_10_branches_td(data, top_quantity_sold) {
        let branch_name = data.branch_name;
        let quantity_sold = data.quantity_sold;
        let quantity_sold_percentage = (data.quantity_sold / top_quantity_sold) * 100;

        return `
        <tr>
            <td>
                <div class="progressbg">
                    <div class="progress progressbg-progress">
                        <div class="progress-bar bg-primary-lt" style="width: ${quantity_sold_percentage}%" role="progressbar" aria-valuenow="${quantity_sold_percentage}" aria-valuemin="0" aria-valuemax="100" aria-label="${quantity_sold_percentage}% Complete">
                            <span class="visually-hidden">${quantity_sold_percentage}% Complete</span>
                        </div>
                    </div>
                    <div class="progressbg-text" style="white-space: normal !important;">${branch_name}</div>
                </div>
            </td>
            <td class="w-1 fw-bold text-end">${quantity_sold}</td>
        </tr>`;
    }

    function get_quantity_sold_per_item_this_month() {
        $.ajax({
            url: "https://api.r2groupcfs.ph/supplier-api/supplier/get_quantity_sold_per_item_this_month?api-key=WDQOWgM2hgUjQpFngkyr",
            type: "GET",
            data: {"supplier": supplier},
            dataType: "JSON",
            success: function (response) {
                let data = response.data;
                let top_quantity_sold = data[0].quantity_sold;
                let td = "";
                
                if (data.length > 0 ) {
                    for (let i = 0; i < data.length; i++) {
                        td += generate_item_sold_this_month_td(data[i], top_quantity_sold);
                    }
    
                    $("#item-sold-this-month-table tbody").html(td);
                } else {
                    $("#item-sold-this-month-table").html(no_data_available());
                }
            },
            error: function () {
                $("#item-sold-this-month-table").html(failed_loading_data());
            },
            complete: function() {
                $("#loading-placeholder-2").hide();
            }
        });
    }

    function generate_item_sold_this_month_td(data, top_quantity_sold) {
        let item_name = data.item_name;
        let quantity_sold = data.quantity_sold;
        let quantity_sold_percentage = (data.quantity_sold / top_quantity_sold) * 100;

        return `
        <tr>
            <td>
                <div class="progressbg">
                    <div class="progress progressbg-progress">
                        <div class="progress-bar bg-primary-lt" style="width: ${quantity_sold_percentage}%" role="progressbar" aria-valuenow="${quantity_sold_percentage}" aria-valuemin="0" aria-valuemax="100" aria-label="${quantity_sold_percentage}% Complete">
                            <span class="visually-hidden">${quantity_sold_percentage}% Complete</span>
                        </div>
                    </div>
                    <div class="progressbg-text" style="white-space: normal !important;">${item_name}</div>
                </div>
            </td>
            <td class="w-1 fw-bold text-end">${quantity_sold}</td>
        </tr>`;
    }

    function failed_loading_data() {
        return `
        <div class="page page-center">
            <div class="container container-slim py-8">
                <div class="text-center">
                    <div class="text-danger mb-3">Failed to load data.</div>
                </div>
            </div>
        </div>`;
    }

    function no_data_available() {
        return `
        <div class="page page-center">
            <div class="container container-slim py-8">
                <div class="text-center">
                    <div class="mb-3">No data available.</div>
                </div>
            </div>
        </div>`;
    }

</script>

@endpush