@php
    $configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Home')

@section('content')

@section('title', 'Logistics Dashboard - Apps')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss', 'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss'])
@endsection

@section('page-style')
    @vite('resources/assets/vendor/scss/pages/app-logistics-dashboard.scss')
@endsection

@section('vendor-script')
    @vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js', 'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'])
@endsection

@section('page-script')
    @vite('resources/assets/js/app-logistics-dashboard.js')
@endsection

@section('content')
    <div class="row g-6">
        <h1>Welcome Administrator!

            {{-- @if (session()->has('api_token'))
                <p>Your API Token: {{ session('api_token') }}</p>
            @endif --}}
            <!-- Update Button -->
            <a href="{{ route('dashboard_json') }}" id="updateButton"
                class="btn btn-primary rounded-pill d-flex align-items-center float-end mt-5 me-5">
                <i class="fas fa-refresh me-2" id="spinIcon"></i> Update
            </a>
        </h1>
        {{-- script for button --}}
        <script>
            document.getElementById('updateButton').addEventListener('click', function(event) {
                event.preventDefault(); // Prevents default behavior (page reload)

                // Start the spinner
                var spinIcon = document.getElementById('spinIcon');
                spinIcon.classList.add('fa-spin');

                // Perform the AJAX requestF

                fetch("{{ route('dashboard_json') }}")
                    .then(response => response.json())
                    .then(data => {
                        spinIcon.classList.remove('fa-spin'); // Stop the spinner

                        if (data.success) {
                            // console.log("Session Success Message:", data.success);
                            window.location.href = "{{ route('dashboard') }}";
                        } else {
                            console.log("Error:", data.error);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        spinIcon.classList.remove('fa-spin'); // Stop the spinner
                        // document.getElementById('errorMessage').textContent =
                        // 'An error occurred while fetching the data.';
                    });
            });
        </script>

        <div class="row g-4">
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card h-100 mb-4">
                    <div class="card-header">
                        <h4 class="card-title">Publications/Patent/Faculty</h4>
                    </div>
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td><i class="fa fa-users text-center"
                                                style="color:#646c9a; font-size: 25px; margin-right:5px; vertical-align: middle;"></i><a
                                                href="{{ route('personslist.index') }}">Faculty
                                                / Scientist</a></td>
                                        <td id="total_f">{{ $data['totalPerson'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-file text-center"
                                                style="color:#2D9BD6; font-size: 31px; margin-right:5px; vertical-align: middle;">
                                            </i><a href="{{ route('publicationlist.index') }}">
                                                Publications</a></td>
                                        <td id="total_p">{{ $data['totalPublication'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-file-contract text-center"
                                                style="color:#646c9a; font-size: 25px; margin-right:5px; vertical-align: middle;">
                                            </i>
                                            Patent
                                        </td>
                                        <td id="total_f">{{ $data['totalPatent'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card h-100 mb-4">
                    <div class="card-header">
                        <h4 class="card-title">Citation &amp; Metrics</h4>
                    </div>
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td><img src="{{ asset('assets/img/logo/crossref.png') }}" alt="Crossref"
                                                height="40"> Crossref</td>
                                        <td>{{ $data['totalcrossRef'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><img src="{{ asset('assets/img/logo/scopus.png') }}" alt="Scopus"
                                                height="40"> Scopus</td>
                                        <td>{{ $data['totalScopus'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card h-100 mb-4">
                    <div class="card-header">
                        <h4 class="card-title">Communities/Collections</h4>
                    </div>
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td><i class="fa fa-users text-center"
                                                style="color:#6A1B9A; font-size: 31px; vertical-align: middle;"></i>
                                            Communities</td>
                                        <td>{{ $data['totalCommunities'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-folder-open text-center"
                                                style="color:#2E86C1;  font-size: 31px; vertical-align: middle;"></i>
                                            Collections</td>
                                        <td>{{ $data['totalCollections'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card h-100 mb-4">
                    <div class="card-header">
                        <h4 class="card-title">Publication Venue</h4>
                    </div>
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td><i class="fa fa-unlock-alt text-center"
                                                style="color:#808080; font-size: 20px;"></i> Closed Access</td>
                                        <td>{{ $data['close'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-unlock-alt text-center"
                                                style="color:#FFD700; font-size: 20px;"></i> Gold OA</td>
                                        <td>{{ $data['gold'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-unlock-alt text-center"
                                                style="color:#228B22; font-size: 20px;"></i> Green OA</td>
                                        <td>{{ $data['open'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-unlock-alt text-center"
                                                style="color:#CD7F32; font-size: 20px;"></i> Bronze OA</td>
                                        <td>{{ $data['bronze'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card h-100 mb-4">
                    <div class="card-header">
                        <h4 class="card-title">Admin/Process</h4>
                    </div>
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td><i class="fa fa-user-shield text-center"
                                                style="color:#4B49AC; font-size: 20px;"></i> Admin</td>
                                        <td>{{ $data['totalEPerson'] }}</td>
                                    </tr>
                                    <tr>
                                        <td><i class="fa fa-cogs text-center" style="color:#F39C12; font-size: 20px;"></i>
                                            Process</td>
                                        <td>{{ $data['totalProcess'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- <div class="col-xl-4">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-7">
                        <div class="card-body text-nowrap d-flex flex-column align-items-start">
                            <!-- File Icon with Space -->
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-file fa-2x text-primary me-3"></i>
                                <!-- Number Text -->
                                <h5 class="card-title mb-0">{{ $data['totalPublication'] }}</h5>
                            </div>
                            <!-- Total Publication Text Below Icon -->
                            <p class="mb-2">Publication</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <div class="col-xl-4">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-7">
                        <div class="card-body text-nowrap d-flex flex-column align-items-start">
                            <!-- File Icon with Space -->
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-users fa-2x me-3" style="color: rgb(76, 76, 209);"></i>
                                <!-- Number Text -->
                                <h5 class="card-title mb-0">{{ $data['totalPerson'] }}</h5>
                            </div>
                            <!-- Total Faculty Text Below Icon -->
                            <p class="mb-2">Faculty</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-xl-4">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-7">
                        <div class="card-body text-nowrap d-flex flex-column align-items-start">
                            <!-- Community List Icon with Space -->
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-list fa-2x text-primary me-3"></i>
                                <!-- Number Text -->
                                <h5 class="card-title mb-0">{{ $data['totalCommunities'] }}</h5>
                            </div>
                            <!-- Total Communities Text Below Icon -->
                            <p class="mb-2">Communities</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-xl-4">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-7">
                        <div class="card-body text-nowrap d-flex flex-column align-items-start">
                            <!-- File Icon with Space -->
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-bars fa-2x me-3" style="color: rgb(96, 96, 207);"></i>
                                <!-- Number Text -->
                                <h5 class="card-title mb-0">{{ $data['totalCollections'] }}</h5>
                            </div>
                            <!-- Total Collection Text Below Icon -->
                            <p class="mb-2">Collections</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-xl-4">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-7">
                        <div class="card-body text-nowrap d-flex flex-column align-items-start">
                            <!-- File Icon with Space -->
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-user-friends fa-2x me-3" style="color: rgb(76, 76, 209);"></i>
                                <!-- Number Text -->
                                <h5 class="card-title mb-0">{{ $data['totalEPerson'] }}</h5>
                            </div>
                            <!-- Total Admin Text Below Icon -->
                            <p class="mb-2">Admin</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="col-xl-4">
            <div class="card">
                <div class="d-flex align-items-end row">
                    <div class="col-7">
                        <div class="card-body text-nowrap d-flex flex-column align-items-start">
                            <!-- File Icon with Space -->
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-arrow-right fa-2x me-3" style="color: rgb(76, 76, 209);"></i>
                                <!-- Number Text -->
                                <h5 class="card-title mb-0">{{ $data['totalProcess'] }}</h5>
                            </div>
                            <!-- Total Process Text Below Icon -->
                            <p class="mb-2">Process</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div> --}}
@endsection

@endsection