@extends('layouts.app')

@section('title')
{{ __('Message History') }}
@endsection

@section('histories.message')
active
@endsection

@section('section.header')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>
                    {{ __('Lịch sử gửi tin nhắn') }}
                </h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">{{ __('Trang chủ') }}</a></li>
                    <li class="breadcrumb-item active"><a href="#"></a>{{ __('Lịch sử gửi tin nhắn') }}</li>
                </ol>
            </div>

        </div>

    </div>
</section>
@endsection
@section('section.content')
<section class="content">
    <div class="card">
        <div class="card-body">
        <form class="row" id="search-message-history">
        @csrf
            <div class="row">
                <div class="col-sm-4 mb-3">
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">{{ __('Thời gian') }}</span>
                            </div>
                            <input type="datetime-local" class="form-control" name="from_time" id="from_time" value="{{now()->format('Y-m-d') . 'T00:00'}}">
                            <input type="datetime-local" class="form-control" name="to_time"
                            id="to_time" value="{{now()->format('Y-m-d', strtotime('+1 day')) . 'T23:59:59'}}">
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{'Đầu số gửi'}}</span>
                        </div>
                        <input type="text" class="form-control" name="sender_number" placeholder="Nhập đầu số gửi" id="sender_number">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{'Đầu số nhận'}}</span>
                        </div>
                        <input type="text" class="form-control" name="receiver_number" placeholder="Nhập đầu số nhận" id="receiver_number">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{'Nội dung'}}</span>
                        </div>
                        <input type="text" class="form-control" name="content" placeholder="Nhập nội dung" id="content">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{'Mã phòng'}}</span>
                        </div>
                        <input type="text" class="form-control" name="roomId" placeholder="Nhập mã phòng" id="roomId">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{'Mã tin nhắn'}}</span>
                        </div>
                        <input type="text" class="form-control" name="requestId" placeholder="Nhập mã tin nhắn" id="requestId">
                    </div>
                </div>
                <div class="col-lg-2">
                        <button type="submit" class="btn btn-primary" id="btn-search"><i
                                class="fa fa-search"></i>{{ __('Tìm kiếm') }}</button>
                </div>
            </div>
        </form>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Message Momo</h3>
            <div class="card-tools">
                
            </div>
        </div>
        @if (Session::has('success'))
        <div id="message-alert" class="alert alert-success">
            {{ Session::get('success') }}
        </div>
        @endif
        @if (Session::has('error'))
        <div id="message-alert" class="alert alert-danger">
            {{ Session::get('error') }}
        </div>
        @endif
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" style="width:100%" id="listMomoMessages">
                    <thead>
                        <tr>
                            <th class="text-start">#</th>
                            <th class="text-start">{{ __('Đầu số gửi') }}</th>
                            <th class="text-start">{{ __('Đầu số nhận') }}</th>
                            <th class="text-start">{{ __('Nội dung') }}</th>
                            <th class="text-start">{{ __('Mã Phòng') }}</th>
                            <th class="text-center">{{ __('Request Id') }}</th>
                            <th class="text-center">{{ __('Type') }}</th>
                            <th class="text-center">{{ __('Thời gian') }}</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<style>
    table.dataTable thead .sorting {
        background-image: none;
    }
    table.dataTable thead .sorting_desc {
        background-image: none;
    }
    .dataTables_wrapper .dataTables_processing {
            height: unset;
            font-size: unset;
        }
</style>
@endsection

@section('scripts')
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.4" async></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    var dataTable = $('#listMomoMessages').DataTable({
          'pagingType': 'input',
            dom: 'lifrtp',
            processing: true,
            serverSide: true,
            responsive: true,
            info: true,
            ajax: {
                url: "{{ route('app.messages-history.index') }}",
                type: 'GET',
                data:function (d) {
                d.from_time =  $('#search-message-history [name="from_time"]').val();
                d.to_time =  $('#search-message-history [name="to_time"]').val();
                d.sender_number =  $('#search-message-history [name="sender_number"]').val();
                d.receiver_number =  $('#search-message-history [name="receiver_number"]').val();
                d.content =  $('#search-message-history [name="content"]').val();
                d.requestId =  $('#search-message-history [name="requestId"]').val();
                d.roomId =  $('#search-message-history [name="roomId"]').val();
                }
            },
            'pageLength': 50,
            'aLengthMenu': [
                    [50, 100, 200, -1],
                    [50, 100, 200, 'All']
                ],
            order: [
                [7, "desc"]
            ],
            columns: [
                {
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'sender_number',
                    name: 'sender_number',
                },
                {
                    data: 'receiver_number',
                    name: 'receiver_number',
                },
                {
                    data: 'content',
                    name: 'content',
                },
                {
                    data: 'roomId',
                    name: 'roomId',
                },
                {
                    data: 'requestId',
                    name: 'requestId',
                },
                {
                    data: 'type',
                    name: 'type',
                },
                {
                    data: 'time',
                    name: 'time'
                }
            ]
            
        });
        function formatTime(isoTime) {
            try {
                const date = new Date(isoTime);
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const year = date.getFullYear();

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (e) {}
            return null;
        }

        $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();
                dataTable.ajax.reload();
            });
</script>
@endsection