@extends('layouts.master')

@section('mainContent')
    <div class="page-wrapper">
        <div class="page-header-link">
            <a href="javascript:;" class="show-menuheader">
                Vendor Menus
                <i class="fas fa-align-left ms-auto"></i>
            </a>
        </div>
        <div class="page-menu">
            <div class="page-menu-header">
                <h2>Vendor Menu</h2>
                <a href="javascript:;" class="close-header-menu"> <i class="fas fa-close"></i></a>
            </div>
            @include('layouts.tenants.vendor-contract-menu')
        </div>
        <div class="content">
            <div class="row">
                <div class="col-12">
                    <div class="page-header">
                        <h3>Dashboard</h3>
                        <ul>
                            <li class="text-primary">Vendor Management</li>
                            <li><a href="javascript:;">Dashboard</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            {{--
            <div class="row">
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Vendor Insights</h3>
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray">
                                        <h5 class="counter">{{ $totalVendorCount }}</h5>
                                        <h6>Total Vendors</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chart-vendor"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Vendor Performance Level</h3>
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray">
                                        <h5 class="counter">{{ $totalVendorCount }}</h5>
                                        <h6>Total Vendors</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chart-vendor-performance"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Vendor Performance Summary</h3>
                            <div class="row">
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chartperformance"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Vendor Evaluation</h3>
                            <div class="row">
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chartevaluation"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Contract Insights</h3>
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray">
                                        <h5 class="counter">{{ $totalContractCount }}</h5>
                                        <h6>Total Contracts</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chart-contract"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-body pb-0">
                            <h3 class="head-client">Contract Type Insights</h3>
                            <div class="row">
                                <div class="col-12">
                                    <div class="dash-card dash-gray">
                                        <h5 class="counter">{{ $totalContractCount }}</h5>
                                        <h6>Total Contracts</h6>
                                        <div class="dash-img">
                                            <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div id="chart-contracttype"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            --}}
            <div class="row">
                <!-- <div class="col-lg-6 col-12">
                        <div class="card">
                            <div class="card-body pb-0">
                                <h3 class="head-client">Project Insights</h3>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="dash-card dash-gray">
                                            <h5 class="counter">{{-- {{ $totalProjectCount }} --}}</h5>
                                            <h6>No. Of Projects</h6>
                                            <div class="dash-img">
                                                <img src="{{ url('assets/img/icons/chart.svg') }}" alt="img">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div id="chart-project"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->

                <!-- -->

                <div class="row">
                    <div class="col-lg-6 col-12" >

                        <div class="card">
                            <div class="card-body pb-0">
                                <div class="head-client">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3>Top 4 Vendor Performance</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <b>
                                            <div id="vendor_name1"></div>
                                        </b>
                                        <div id="vendor-performance-1"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <b>
                                            <div id="vendor_name2"></div>
                                        </b>
                                        <div id="vendor-performance-2"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <b>
                                            <div id="vendor_name3"></div>
                                        </b>
                                        <div id="vendor-performance-3"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <b>
                                            <div id="vendor_name4"></div>
                                        </b>
                                        <div id="vendor-performance-4"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body pb-0">

                                <div class="head-client">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h3>Contract Status</h3>
                                        </div>
                                    </div>
                                </div>
                                <div class="dash-card">
                                    <div class="flex-count-blk d-flex align-items-end">
                                        <div class="count-start flex-fill">
                                            <h6>Contract</h6>
                                            <h5>{{ $totalContractCount }}</h5>
                                        </div>
                                        <ul class="insight-list flex-fill d-flex gap-2">
                                            <li>
                                                <i class="fa fa-circle draft-status me-1"></i> Active
                                                <span
                                                    class="ms-2 weight-bold">{{ isset($contractStatusCounts['active']) ? $contractStatusCounts['active'] : 0 }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle retired-status me-1"></i> In Active
                                                <span
                                                    class="ms-2 weight-bold">{{ isset($contractStatusCounts['inactive']) ? $contractStatusCounts['inactive'] : 0 }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle danger-status me-1"></i> Others
                                                <span
                                                    class="ms-2 weight-bold">{{ isset($contractStatusCounts['others']) ? $contractStatusCounts['others'] : 0 }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="dash-img">
                                        <i class="fe fe-bar-chart-2"></i>
                                    </div>
                                </div>

                                <div class="card mb-0">
                                    <div class="card-body pb-0">
                                        <div class="head-client">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3>Contract Type & Status Insights</h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="contract-status"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12" >

                        <div class="card">
                            <div class="card-body pb-0">
                                <div class="head-client">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3>Vendor Insights</h3>
                                        </div>
                                    </div>
                                </div>

                                <div class="dash-card">
                                    <div class="flex-count-blk d-flex align-items-end">
                                        <div class="count-start flex-fill">
                                            <h6>Vendors</h6>
                                            <h5>{{ $totalVendorCount }}</h5>
                                        </div>
                                        <ul class="insight-list flex-fill d-flex gap-2">
                                            <li>
                                                <i class="fa fa-circle draft-status me-1"></i> Active
                                                <span
                                                    class="ms-2 weight-bold">{{ isset($vendorStatusCounts['active']) ? $vendorStatusCounts['active'] : 0 }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle retired-status me-1"></i> In Active
                                                <span
                                                    class="ms-2 weight-bold">{{ isset($vendorStatusCounts['inactive']) ? $vendorStatusCounts['inactive'] : 0 }}</span>
                                            </li>
                                            <li>
                                                <i class="fa fa-circle danger-status me-1"></i> Blacklisted
                                                <span
                                                    class="ms-2 weight-bold">{{ isset($vendorStatusCounts['blacklisted']) ? $vendorStatusCounts['blacklisted'] : 0 }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="dash-img">
                                        <i class="fe fe-bar-chart-2"></i>
                                    </div>
                                </div>
                                <div class="card mb-0">
                                    <div class="card-body pb-0">
                                        <div class="head-client">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <h3>Vendor Type & Status Insights</h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="vendor-status"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body pb-0">

                                <div class="card">
                                    <div class="card-body pb-0">
                                        <div class="head-client">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <h3>Contract Expiry</h3>
                                                </div>
                                                <div class="col-md-6">
                                                    <select id="contract_days" class="form-select">
                                                        <option value="30">30 Days</option>
                                                        <option value="60">60 Days</option>
                                                        <option value="90">90 Days</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="table-responsive">
                                                    <table class="table" id="contract_table">
                                                        <thead>
                                                            <tr>
                                                                <th>Vendor Name</th>
                                                                <th>Contract Type</th>
                                                                <th>Expiry date</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div class="row align-items-center">
                                                    <div class="col-md-12">
                                                        <div class="datatable-paginate"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-6 col-12">
                    </div>
                    <div class="col-lg-6 col-12">
                    </div>

                </div>
            </div>
            <!--- -->

        </div>
    </div>
@endsection

@section('customScript')
    <script>
        var vendorsCount = @json($vendorStatusCounts);
        var vendorPerformance = @json($vendorPerformanceCounts);
        var contractsCount = @json($contractStatusCounts);
        var performanceCount = @json($performanceCount);
        var stageCounts = @json($contractStageCounts);
        var evaluationCount = @json($vendorEvaluationCounts);
    </script>
@endsection