@extends('web.layouts.app')

@section('content')
    <!-- Start::page-header -->
    <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
        <div>
            <h2 class="main-content-title fs-24 mb-1">Welcome To Mora Whats Dashboard</h2>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Mora Whats</a></li>
                <li class="breadcrumb-item active" aria-current="page">@lang('user.dashboard')</li>
            </ol>
        </div>
        <div class="d-flex">
            <div class="justify-content-center">
                <a href="{{ route('web.conversations') }}" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center">
                    <i class="mdi mdi-wechat   icon-size float-start text-primary me-2"></i> @lang('user.chat')</a>
                <a href="{{ route('web.analytics.messages') }}" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center">
                    <i class="mdi mdi-google-analytics icon-size float-start text-primary me-2"></i>@lang('user.analytics')</a>
                <a href="{{ route('web.agents.index') }}" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center">
                    <i class="mdi mdi-auto-fix  icon-size float-start text-primary me-2"></i>@lang('user.agents')</a>
                <a href="{{ route('web.contacts.index') }}" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center">
                    <i class="mdi mdi-account-multiple icon-size float-start text-primary me-2"></i>
                    @lang('user.contacts')</a>

            </div>
        </div>
    </div>
    <!-- End::page-header -->
    @if(now()->gte($notifyDate))
        <div class="alert alert-warning alert-dismissible fade show" style="width: 100%;" role="alert">
            @lang('user.expiration_note') <a href="#"> get verified to activate full-account</a>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <div class="row row-sm">
        @if (isset($business->credit) && $business->credit !== null)
            <div class="col-md-3 col-sm-6 ">
                <!--begin::Stats Widget 29-->
                <div class="card custom-card bg-warning card-stretch gutter-b"
                    style="background-position: right top; background-size: 30% auto; background-image: url(assets/media/svg/shapes/abstract-1.svg)">
                    <!--begin::Body-->
                    <div class="card-body">
                        <span class="svg-icon svg-icon-2x svg-icon-info">
                            <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Mail-opened.svg-->
                            <svg width="28px" height="28px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 71.26"><defs><style>.cls-1{fill:#427d2a;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#87cc71;}.cls-3{fill:#fff;}</style></defs><title>cash</title><path class="cls-1" d="M13.37,0H122.88V60.77l-7.74,0,.54-44.59,0-.53a7.14,7.14,0,0,0-7.13-7.14l-95.2,0V0ZM0,14.42H109.51V71.26H0V14.42Z"/><path class="cls-2" d="M91.72,23.25a8.28,8.28,0,0,0,8,8.11V53.85a8.51,8.51,0,0,0-8.5,8.71H18.42a8.38,8.38,0,0,0-8.06-8.5V31.57a8.43,8.43,0,0,0,8.52-8.32Z"/><path class="cls-1" d="M40.28,35.18a16.76,16.76,0,1,1,6.91,22.67,16.75,16.75,0,0,1-6.91-22.67Z"/><path class="cls-3" d="M55.22,55.38a1.54,1.54,0,0,1-1.56-1.56V52.3A11.09,11.09,0,0,1,51,51.82,13.32,13.32,0,0,1,49.06,51a1.61,1.61,0,0,1-.9-1,2,2,0,0,1,.06-1.27,1.66,1.66,0,0,1,.83-.88,1.57,1.57,0,0,1,1.38.12,10.45,10.45,0,0,0,1.73.69,9.31,9.31,0,0,0,2.72.35,4.27,4.27,0,0,0,2.53-.57A1.73,1.73,0,0,0,58.16,47a1.49,1.49,0,0,0-.52-1.16,4.11,4.11,0,0,0-1.86-.75l-2.84-.62q-4.71-1-4.71-5a5.07,5.07,0,0,1,1.48-3.68,6.84,6.84,0,0,1,3.95-1.88V32.29a1.53,1.53,0,0,1,.44-1.1,1.52,1.52,0,0,1,1.12-.45,1.44,1.44,0,0,1,1.08.45,1.53,1.53,0,0,1,.44,1.1v1.55a10.83,10.83,0,0,1,2,.46,7.18,7.18,0,0,1,1.8.88,1.62,1.62,0,0,1,.76,1,1.75,1.75,0,0,1-.12,1.15,1.43,1.43,0,0,1-.84.76,1.76,1.76,0,0,1-1.41-.19,8.26,8.26,0,0,0-1.52-.57,7.57,7.57,0,0,0-2-.23,3.88,3.88,0,0,0-2.35.62,1.89,1.89,0,0,0-.85,1.6,1.48,1.48,0,0,0,.5,1.15,4.11,4.11,0,0,0,1.77.74l2.87.62a7,7,0,0,1,3.64,1.77,4.36,4.36,0,0,1,1.17,3.14,4.79,4.79,0,0,1-1.48,3.62,7.28,7.28,0,0,1-3.87,1.84v1.62a1.52,1.52,0,0,1-.44,1.1,1.45,1.45,0,0,1-1.08.46Z"/></svg>
                            <!--end::Svg Icon-->
                        </span>
                        <span
                            class="card-title font-weight-bolder text-dark-75 font-size-h2 mb-0 mt-6 d-block">{{$business->credit}}</span>
                        <span class="font-weight-bold text-muted font-size-h6 ">@lang('user.credit')</span>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Stats Widget 29-->
            </div>
        @else
            <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3">
                <div class="card custom-card statisticsHome-1">
                    <div class="card-body ">
                        <div class="card-order ">
                            <label class="main-content-label mb-3 pt-1">@lang('user.teams_number')</label>
                            <h2 class="text-end card-item-icon card-icon">
                                <i class="mdi mdi-account-star float-start text-primary"></i>
                                <span class="fw-bold">{{$teams_number}}</span>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3">
            <div class="card custom-card statisticsHome-2">
                <div class="card-body ">
                    <div class="card-order ">
                        <label class="main-content-label mb-3 pt-1">@lang('user.contacts_number')</label>
                        <h2 class="text-end card-item-icon card-icon">
                            <i class="mdi mdi-contacts icon-size float-start text-primary"></i>
                            <span class="fw-bold">{{$contacts_number}}</span>
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3">
            <div class="card custom-card statisticsHome-3">
                <div class="card-body pb-0">
                    <div class="card-order ">
                        <label class="main-content-label mb-3 pt-1">@lang('user.broadcasts_number')</label>
                        <h2 class="text-end card-item-icon card-icon">
                            <i class="mdi mdi-apple-keyboard-command icon-size float-start text-primary"></i>
                            <span class="fw-bold">{{$broadcasts_number}}</span>
                        </h2>
                        @if(!empty($remainingMonthlyLimit))
                            <h5>@lang('user.remaining_monthly_limit'): {{ $remainingMonthlyLimit }}</h5>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3 col-xl-3">
            <div class="card custom-card statisticsHome-4">
                <div class="card-body  ">
                    <div class="card-order ">
                        <label class="main-content-label mb-3 pt-1">@lang('user.conversations_number')</label>
                        <h2 class="text-end card-item-icon card-icon">
                            <i class="mdi mdi-wechat icon-size float-start text-primary"></i>
                            <span class="fw-bold">{{$conversations_number}}</span>
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="card custom-card">
                <div class="card-header">
                    <h4 class="card-title">@lang('user.messages')</h4>
                </div>
                <div class="card-body">
                    <canvas id="myDonutChart" class="chartjs-chart"></canvas>
                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const ctxDonut = document.getElementById('myDonutChart');
                            $.ajax({
                                url: "{{route('web.messagesChartData')}}", // Assuming you have a route pointing to the Laravel function
                                method: 'GET',
                                success: function (response) {
                                    const data = {
                                        labels: ["{{__('user.received')}}", "{{__('user.sent')}}"],
                                        datasets: [{
                                            label: 'Messages',
                                            data: [response.received, response.sent],
                                            backgroundColor: [
                                                'rgb(98, 89, 202)',
                                                'rgb(241, 56, 139)',
                                                'rgb(0, 204, 204)'
                                            ],
                                            hoverOffset: 4
                                        }]
                                    };
            
                                    new Chart(ctxDonut, {
                                        type: 'doughnut',
                                        data: data
                                    });
                                },
                                error: function (xhr, status, error) {
                                    console.error('Error fetching messages data:', error);
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card custom-card">
                <div class="card-header">
                    <h4 class="card-title">@lang('user.hourly_messages')</h4>
                </div>
                <div class="card-body">
                    <canvas id="myChart2" class="chartjs-chart" style="width:100%;max-width:800px"></canvas>
                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const ctx = document.getElementById('myChart2');
                            $.ajax({
                                url: "{{route('web.hourlyMessagesChartData')}}", // Assuming you have a route pointing to the Laravel function
                                method: 'GET',
                                success: function (response) {
                                    new Chart(ctx, {
                                        type: 'bar',
                                        data: {
                                            labels: Array.from({ length: 24 }, (_, i) => i), // Hours of the day
                                            datasets: [{
                                                label: "{{__('user.hourly_messages')}}",
                                                data: response,
                                                backgroundColor: [
                                                    'rgba(98, 89, 202, 0.2)',
                                                    'rgba(1, 184, 255, 0.2)',
                                                    'rgba(255, 155, 33, 0.2)',
                                                    'rgba(0, 204, 204, 0.2)',
                                                    'rgba(253, 96, 116, 0.2)',
                                                    'rgba(25, 177, 89, 0.2)',
                                                    'rgba(35, 35, 35, 0.2)'
                                                ],
                                                borderColor: [
                                                    'rgb(98, 89, 202)',
                                                    'rgb(1, 184, 255)',
                                                    'rgb(255, 155, 33)',
                                                    'rgb(0, 204, 204)',
                                                    'rgb(253, 96, 116)',
                                                    'rgb(25, 177, 89)',
                                                    'rgb(35, 35, 35)'
                                                ],
                                                borderWidth: 1
                                            }]
                                        },
                                        options: {
                                            scales: {
                                                y: {
                                                    beginAtZero: true
                                                }
                                            }
                                        }
                                    });
                                },
                                error: function (xhr, status, error) {
                                    console.error('Error fetching hourly messages data:', error);
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">@lang('user.last_contacts')</div>
                </div>
                <div class="card-body px-2">
                    <div class="table-responsive" style="height: 400px;">
                        <table id="contacts-table" class="table table-scroll text-nowrap">
                            <thead class="table-primary">
                                <tr>
                                    <th>@lang('user.name')</th>
                                    <th>@lang('user.mobile')</th>
                                    <th>@lang('user.actions')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($contacts->where('status',1) as $contact)
                                    <tr>
                                        <td>{{ $contact->name }}</td>
                                        <td>{{ $contact->mobile }}</td>
                                        <td>
                                            <div class="hstack gap-2 fs-15">
                                                <a href="{{ route('web.conversations.new', $contact->id) }}" target="_blank"
                                                    class="btn btn-icon btn-sm btn-success-transparent rounded-pill"
                                                    title="Send WhatsApp"><i class="ri-whatsapp-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="card custom-card">
                <div class="card-header border-bottom-0">
                    <div>
                        <label class="main-content-label mb-2">@lang('user.last_conversations')</label>
                        <span class="d-block fs-12 mb-2 text-muted">@lang('user.last_conversations_subtitle')</span>
                    </div>
                </div>
                <div class="card-body pt-2 mt-0">
                    <div class="list-group border projects-list" style="height: 386px; overflow: auto">
                        @foreach ($conversations as $conversation)
                            <a href="javascript:void(0);"
                                class="list-group-item list-group-item-action flex-column border-end-0 border-start-0 align-items-start border-top-0">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1 fw-medium">{{ $conversation->contact->name }}</h6>
                                    <small class="text-danger"><i class="fa fa-caret-down me-1"></i>{{ $conversation->last_message_datetime->diffForHumans() }}</small>
                                </div>
                                <p class="mb-0 text-muted fs-12">{{ Illuminate\Support\Str::limit($conversation->lastMessage->message ?? '', 150, '...') }}</p>
                                <small class="text-muted">@lang('user.started'): {{ $conversation->created_at->format('d-m-Y H:i A') }}</small>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- Chartjs Chart JS -->
    <script src="{{ asset('web/assets-mora/libs/chart.js/chart.min.js') }}"></script>
@endsection