@extends('app.layout')

@section('sub_content')
    <div class="page-header">
        <div class="page-title">
            <h4>{{__('Dashboard')}}</h4>
        </div>

        <div class="breadcrumb-line">
            <div class="d-flex">
                <div class="breadcrumb">
                    <a href="{{route('home')}}" class="breadcrumb-item"><i class="material-icons mr-2">home</i> {{__('Home')}}</a>
                    <span class="breadcrumb-item active">{{__('Dashboard')}}</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="content">
        <div class="card">
            <div class="card-body">
                <form action="{{route('users.index')}}" class="w-100">
                    <div class="input-group bg-light">
                        <input type="text" name="s" class="form-control searchInput" placeholder="{{__('Search for users')}}" @if(!empty($term)) value="{{$term}}" @endif>
                        <div class="input-group-append">
                            <button class="btn btn-primary">
                                <i class="material-icons md-18">search</i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="text-center">
                            <svg class="float-right text-info" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
                                <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
                                <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                                <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                            </svg>
                            <h6><strong>{{ __('Nbr. Résérvation(s)') }}</strong></h6>
                            <h1>{{ $users['nbr_reservations'] }}</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="text-center">
                            <i class="fas fa-dog float-right text-info" xmlns="http://www.w3.org/2000/svg" style="font-size: 69px"></i>
                            <h6><strong>{{ __('Nbr. Boxs Chien(s)') }}</strong></h6>
                            <h1>{{ $users['nbr_chiens'] }}</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="text-center">
                            <i class="fas fa-cat float-right text-info" xmlns="http://www.w3.org/2000/svg" style="font-size: 69px"></i>
                            <h6><strong>{{ __('Nbr. Boxs Chat(s)') }}</strong></h6>
                            <h1>{{ $users['nbr_chats'] }}</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="float-left">
                            <h6><a href="{{route('users.index')}}">{{__('Total Users')}}</a></h6>
                            <h1>{{$users['total_users']}}</h1>
                        </div>
                        <i class="material-icons float-right text-primary md-5em">people_outline</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        @livewire('dashboard-component')
                    </div>
                </div>
            </div>
        {{-- <div class="row mt-3">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <canvas id="myChart" width="400" height="194"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">{{__('New Users')}}</div>
                    <div class="card-body">
                       <table class="table table-striped">
                           <tbody>
                                @foreach($users['new_users'] as $user)
                                    <tr>
                                        <td><a href="{{ route('users.show', $user->id) }}">{{$user->name}}</a></td>
                                        <td width="1" class="nowrap">{{$user->created_at}}</td>
                                    </tr>
                                @endforeach
                           </tbody>
                       </table>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>
    {{-- <script>
        var ctx = document.getElementById('myChart');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [@foreach($data as $d)"{{$d['month']}}",@endforeach],
                datasets: [{
                    label: "{{__('New Users')}}",
                    data: [@foreach($data as $d)"{{$d['users']}}",@endforeach],
                    backgroundColor: 'rgba(12, 174, 255, 0.3)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script> --}}
@endsection