@extends('layouts.master')

@section('title', 'Default Dashboard')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/date-range-picker/flatpickr.min.css') }}">
@endsection

@section('breadcrumb')
    <div class="header-logo-wrapper col-auto">
        <div class="logo-wrapper"><a href="{{ route('admin.dashboard') }}"><img class="img-fluid for-light"
                    src="{{ asset('assets/images/logo/logo.png') }}" alt="" /><img class="img-fluid for-dark"
                    src="{{ asset('assets/images/logo/logo_light.png') }}" alt="" /></a></div>
    </div>
    <div class="col-4 col-xl-4 page-title">
        <h4 class="f-w-700">Default Dashboard</h4>
        <nav>
            <ol class="breadcrumb justify-content-sm-start align-items-center mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <i data-feather="home"> </i></a></li>
                <li class="breadcrumb-item f-w-400">Dashboard</li>
                <li class="breadcrumb-item f-w-400 active">Default</li>
            </ol>
        </nav>
    </div>
@endsection

@section('main_content')
    @use('App\Helpers\Helpers')
    @php
        $settings = Helpers::getSettingPageContent();
    @endphp
    <!-- Container-fluid starts-->
    <div class="container-fluid default-dashboard">
        <div class="row widget-grid">
            <div class="col-xl-5 col-md-6 proorder-xl-1 proorder-md-1">
                <div class="card profile-greeting p-0">
                    <div class="card-body">
                        <div class="img-overlay">
                            <h1>Good day, {{ ucfirst(Auth::user()->first_name) .' '. ucfirst(Auth::user()->last_name) }}</h1>
                            <p>Welcome to the {{ $settings['general']['site_name'] }} family! We are delighted that you have visited our dashboard.</p><a
                                class="btn" href="{{ route('admin.chat_private') }}">Send New SMS</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-7 proorder-xl-2 box-col-7 proorder-md-2">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card widget-1">
                            <div class="card-body"> 
                                <div class="widget-content">
                                    <div class="widget-round secondary">
                                        <div class="bg-round">
                                            <i data-feather="send"></i>
                                        </div>
                                    </div>
                                    <div> 
                                        <h4>{{ $stats['sent'] ?? 0 }}</h4><span class="f-light">SMS Sent</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card widget-1">
                            <div class="card-body"> 
                                <div class="widget-content">
                                    <div class="widget-round danger">
                                        <div class="bg-round">
                                            <i data-feather="alert-circle"></i>
                                        </div>
                                    </div>
                                    <div> 
                                        <h4>{{ $stats['failed'] ?? 0 }}</h4><span class="f-light">SMS Failed</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card widget-1">
                            <div class="card-body"> 
                                <div class="widget-content">
                                    <div class="widget-round success">
                                        <div class="bg-round">
                                            <i data-feather="users"></i>
                                        </div>
                                    </div>
                                    <div> 
                                        <h4>{{ $stats['contacts'] ?? 0 }}</h4><span class="f-light">Total Contacts</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="card widget-1">
                            <div class="card-body"> 
                                <div class="widget-content">
                                    <div class="widget-round primary">
                                        <div class="bg-round">
                                            <i data-feather="message-square"></i>
                                        </div>
                                    </div>
                                    <div> 
                                        <h4>{{ $stats['total'] ?? 0 }}</h4><span class="f-light">Total Messages</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-8 proorder-xl-5 box-col-8 proorder-md-5">
                <div class="card">
                    <div class="card-header card-no-border pb-0">
                        <div class="header-top">
                            <h4>Recent SMS Delivery Log</h4>
                            <a href="{{ route('admin.chat_private') }}" class="btn btn-primary btn-sm">View All Logs</a>
                        </div>
                    </div>
                    <div class="card-body pt-0 px-0">
                        <div class="table-responsive theme-scrollbar">
                            <table class="table display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Time</th>
                                        <th>Recipient</th>
                                        <th>Message</th>
                                        <th>Gateway</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @isset($recentMessages)
                                        @forelse($recentMessages as $msg)
                                            <tr>
                                                <td>{{ $msg->id }}</td>
                                                <td>{{ $msg->sent_at ? $msg->sent_at->format('Y-m-d H:i') : $msg->created_at->format('Y-m-d H:i') }}</td>
                                                <td>{{ $msg->recipient }}</td>
                                                <td>{{ \Illuminate\Support\Str::limit($msg->message, 50) }}</td>
                                                <td>{{ ucfirst($msg->gateway) }}</td>
                                                <td>
                                                    <span class="badge badge-{{ $msg->status === 'sent' ? 'success' : 'danger' }}">
                                                        {{ ucfirst($msg->status) }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center">No SMS records found.</td>
                                            </tr>
                                        @endforelse
                                    @endisset
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xxl-4 col-xl-12 box-col-12 proorder-xl-10 proorder-md-4">
                <div class="card">
                    <div class="card-header card-no-border pb-0">
                        <div class="header-top">
                            <h4>Recent Contacts</h4>
                            <a href="{{ route('admin.chat_private') }}" class="btn btn-outline-primary btn-sm">Manage Contacts</a>
                        </div>
                    </div>
                    <div class="card-body px-0 pb-0">
                        <div class="table-responsive theme-scrollbar">
                            <table class="table display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Phone / ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @isset($recentContacts)
                                        @forelse($recentContacts as $contact)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-grow-1">
                                                            <a href="{{ route('admin.chat_private', ['recipient' => $contact->recipient]) }}">
                                                                <h5>{{ $contact->name }}</h5>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>{{ $contact->recipient }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2" class="text-center">No contacts found.</td>
                                            </tr>
                                        @endforelse
                                    @endisset
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/chart/apex-chart/apex-chart.js') }}"></script>
    <script src="{{ asset('assets/js/chart/apex-chart/stock-prices.js') }}"></script>
    <script src="{{ asset('assets/js/chart/apex-chart/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
    <!-- calendar js-->
    <script src="{{ asset('assets/js/dashboard/default.js') }}"></script>
    <script src="{{ asset('assets/js/notify/index.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables/datatable.custom1.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-range-picker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-range-picker/datepicker-range-custom.js') }}"></script>
    <script src="{{ asset('assets/js/typeahead/handlebars.js') }}"></script>
    <script src="{{ asset('assets/js/typeahead/typeahead.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/typeahead/typeahead.custom.js') }}"></script>
    <script src="{{ asset('assets/js/typeahead-search/handlebars.js') }}"></script>
    <script src="{{ asset('assets/js/typeahead-search/typeahead-custom.js') }}"></script>
    <script src="{{ asset('assets/js/height-equal.js') }}"></script>
    <script src="{{ asset('assets/js/animation/wow/wow.min.js') }}"></script>

    <!-- Plugin used-->
    <script>
        new WOW().init();
    </script>
@endsection