@extends('admin.layouts.master')

@section('title')
    الصفحه الرئسيه
@endsection

@section('css')


@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">عضو مشترك</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard v1</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">

            <!-- ./col -->
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>عدد القنوات</h3>

                        <p>{{getInformationData('channel')->count()}}</p>
                    </div>

                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>عدد الموظفين</h3>

                        <p>{{getInformationData('employee')->count()}}</p>
                    </div>

                </div>
            </div>

        </div>
        <!-- /.row -->
        <!-- Main row -->
        <br>

        <div class="row">
            <!-- Left col -->
            <section class="col-lg-6 connectedSortable">
                <div class="card direct-chat direct-chat-primary">
                    <div style="width:95%;">
                        {!! $chartjs->render() !!}
                    </div>
                </div>

                <div class="card direct-chat direct-chat-primary">
                    <table id="example" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>اسم القناه</th>
                            <th>عدد جميع الرسائل</th>
                            <th>عدد الرسائل الغير موقوره</th>


                        </tr>
                        </thead>
                        <tbody>
                        @foreach (getInformationData('channel') as $channel)
                            <tr>
                                <td>{{ $loop->index+1 }}</td>
                                <td>{{$channel->name}}</td>
                                <td>
                                    {{ getInformationDataQquery('SingleMessages')->whereNotNull('channel_id')->where('channel_id', $channel->id)->count() }}
                                </td>
                                <td>
                                    {{getInformationDataQquery('SingleMessages')->whereNotNull('channel_id')->where('channel_id',$channel->id)->where('status', 'noRead')->count()}}
                                </td>

                            </tr>
                        @endforeach


                        </tbody>

                    </table>

                </div>


                <!-- /.card -->
            </section>
            <!-- /.Left col -->

            <!-- Left col -->
            <section class="col-lg-6 connectedSortable">
                <div style="width:95%;">
                    {!! $chartjs2->render() !!}
                </div>
                <!-- /.card -->
            </section>
            <!-- /.Left col -->

        </div>
        <!-- /.row (main row) -->
    </div>
@endsection


@section('js')
    <script>
        var data = @json($data);
        Swal.fire(data).then((result) => {
            console.log('إشعار Swal تم إغلاقه');
        });
    </script>

@endsection