@extends('adminlte::page')

@section('title', 'IPRS | Dashboard')

@section('content_header')

@stop

@section('content')
    <main class="pt-3 mx-2 mx-lg-5">
        <div class="row">
            <div class="col d-flex flex-column flex-sm-row align-items-center justify-content-sm-between">
                <div class="d-flex flex-row align-items-center mb-3 mb-sm-0">
                    <div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 44px; height: 44px; background-color: #F94A7A;">
                        <span class="text-white"><b>A</b></span>
                    </div>
                    <div class="d-flex flex-column ml-3">
                        <p class="text-secondary mb-0">Welcome back!</p>
                        <h5>Alex Kamau</h5>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <div class="d-flex flex-column">
                        <span class="text-secondary mb-0">Search Token Balance</span>
                        <h5 class="text-left">123,942</h5>
                    </div>
                    <div class="mx-3 border-right border-secondary"></div>
                    <div class="d-flex flex-column">
                        <span class="text-secondary mb-0">Total Searches</span>
                        <h5 class="text-left">23,942</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col d-flex flex-wrap justify-content-md-between p-5 bg-white rounded">
                <div class="d-flex">
                    <div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 64px; height: 64px; background-color: #E7FFF2;">
                        <i class="far fa-lg fa-folder-open text-success"></i>
                    </div>
                    <div class="d-flex flex-column ml-3">
                        <span class="text-secondary mb-0">Contracts</span>
                        <span class="text-left mb-0 fs-6" style="font-size: 2rem;"><b>2</b></span>

                        <div class="d-flex align-items-center">
                            <i class="fas fa-arrow-up text-success"></i>
                            <span class="mb-0 ml-2 text-nowrap">Since 2012</span>
                        </div>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 64px; height: 64px; background-color: #E7FFF2;">
                        <i class="fas fa-lg fa-user-check text-success"></i>
                    </div>
                    <div class="d-flex flex-column ml-3">
                        <span class="text-secondary mb-0">Account Users</span>
                        <span class="text-left mb-0" style="font-size: 2rem;"><b>5</b></span>
                    </div>
                </div>
                <div class="d-flex mt-2 mt-md-0">
                    <div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 64px; height: 64px; background-color: #E7FFF2;">
                        <i class="fas fa-lg fa-desktop text-success"></i>
                    </div>
                    <div class="d-flex flex-column ml-3">
                        <span class="text-secondary mb-0">Active Now</span>
                        <span class="text-left mb-0" style="font-size: 2rem;"><b>12</b></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col d-flex flex-md-row flex-column text-center">
                <div class="col col-md-3 d-flex flex-column mb-4 mb-md-0 p-3 bg-white rounded">
                    <span>Contracts</span>
                    <div class="my-2 border-bottom" style="border-color: gray;"></div>
                    <div class="d-flex flex-column">
                        <div class="d-flex flex-column mb-2">
                            <span class="m-0 text-secondary">2020 to 2024</span>
                            <span class="m-0">#2324v5454</span>
                        </div>
                        <div class="d-flex flex-column">
                            <span class="m-0 text-secondary">2020 to 2024</span>
                            <span class="m-0">#2324v5454</span>
                        </div>
                    </div>
                </div>
                <div class="col d-flex flex-column p-3 bg-white rounded mt-4 mt-md-0 ml-md-4">
                    <span>Billing History</span>
                    <div class="my-2 border-bottom" style="border-color: gray;"></div>
                    <div class="d-flex flex-column">
                        @php
                        $heads = [
                            'ID',
                            'Billing Period',
                            'Status',
                            ['label' => 'Actions', 'no-export' => true, 'width' => 5, 'sort' => false],
                        ];

                        $config = [
                            'data' => [],
                            'order' => [[1, 'asc']],
                            'columns' => [null, null, null, ['orderable' => false]],
                        ];
                        @endphp

                        @section('plugins.Datatables', true)
                        @section('plugins.DatatablesPlugin', true)

                        <x-adminlte-datatable id="bills" bordered :heads="$heads" hoverable striped>
                            @foreach($config['data'] as $row)
                                <tr>
                                    @foreach($row as $cell)
                                        <td>{!! $cell !!}</td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </x-adminlte-datatable>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col d-flex">
                <div class="container-fluid d-flex flex-column p-3 bg-white rounded">
                    <div class="">
                        <span class="h4 mb-0">Account Users</span>
                        <span class="d-block text-success mb-3">Contract #2333442</span>
                    </div>
                    <div class="">
                        @php
                        function status(int $i) {
                            return '<div class="rounded text-center border border-secondary '.($i == 1 ? "bg-success" : "bg-danger").'" style="width: 64px;">'.
                                    ($i == 1 ? "Active" : "Inactive").
                                '</div>';
                        }

                        $heads = [
                            'Account Name',
                            'Branch',
                            'Phone Number',
                            'Email',
                            'Country',
                            'Status',
                        ];

                        $config = [
                            'data' => [
                                ["Jane Cooper", "Nairobi", "(225) 555-0118", "jane@microsoft.com", "United States", status(1)],
                                ["Floyd Miles", "Nairobi", "(225) 555-0100", "floyd@yahoo.com", "Kiribati", status(0)],
                                ["Ronald Richards", "Thika", "(302) 555-0107", "ronald@adobe.com", "Israel", status(0)],
                                ["Marvin McKinney", "Eldoret", "(225) 325-5413", "marvin@hotmail.com", "Iran", status(1)],
                                ["Jerome Bell", "Nairobi", "(452) 785-8765", "jerome@google.com", "Reunion", status(1)],
                                ["Kathryn Murphy", "Kisumu", "(638) 542-2151", "kathryn@microsoft.com", "Curacao", status(1)],
                                ["Catherine Vandyne", "Nairobi", "(777) 516-1305", "jane@microsoft.com", "Brazil", status(1)],
                                ["Jacob Jones", "Mombasa", "(123) 745-5522", "jacob@yahoo.com", "Aland Islands", status(0)],
                                ["Kristin Watson", "Nairobi", "(225) 197-6515", "kristin@facebook.com", "French Polynesia", status(1)],
                                ["D. B. Cooper", "Nakuru", "(254) 325-5463", "jane@microsoft.com", "Kenya", status(0)],
                            ],
                            'order' => [[1, 'asc']],
                            'columns' => [null, null, null, null, null, ['orderable' => false]],
                        ];
                        @endphp

                        @section('plugins.Datatables', true)
                        @section('plugins.DatatablesPlugin', true)

                        <x-adminlte-datatable id="users" bordered :heads="$heads" hoverable striped>
                            @foreach($config['data'] as $row)
                                <tr>
                                    @foreach($row as $cell)
                                        <td>{!! $cell !!}</td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </x-adminlte-datatable>
                    </div>
                </div>
            </div>
        </div>
    </main>
@stop

@section('css')

@stop

@section('js')

@stop
