@extends('layouts.app')

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

@section('message-momo')
active
@endsection

@section('section.header')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>
                    {{ __('Message Momo') }}
                </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>{{ __('Message Momo') }}</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-momo">
                @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 tạo') }}</span>
                                </div>
                                <input type="date" class="form-control" name="from_create_date" id="from_create_date" value="{{now()->format('Y-m-d')}}">
                                <input type="date" class="form-control" name="to_create_date"
                                    id="to_create_date" value="{{now()->format('Y-m-d')}}">
                            </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">{{'Lô'}}</span>
                            </div>
                            <input type="text" class="form-control" name="batch_name" placeholder="Nhập tên lô" id="batch_name">
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="input-group mb-3">
                            <span class="input-group-text">Loại</span>
                            <select name="type" class="form-control" id="type">
                                <option value="">--Chọn--</option>
                                <option value="Text">Text</option>
                                <option value="Url">Url</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="input-group mb-3">
                            <span class="input-group-text">Kết quả</span>
                            <select name="result" class="form-control" id="result">
                                <option value="">--Chọn--</option>
                                <option value="0">Thất bại</option>
                                <option value="1">Thành công</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="input-group mb-3">
                            <span class="input-group-text">Trạng thái</span>
                            <select name="status" class="form-control" id="status">
                                <option value="">--Chọn--</option>
                                <option value="0">Hủy</option>
                                <option value="4">Đã xử lý</option>
                                <option value="3">Chờ xử lý</option>
                                <option value="5">Đang xử lý</option>
                                <option value="6">Bắt đầu xử lý</option>
                            </select>
                        </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>
            @role('admin')
            <div class="card-tools">
                <button class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#viewImageModal">
                    <i class="fas fa-eye"></i> {{ __('Xem Ảnh') }}
                </button>
                <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#uploadImageModal">
                    <i class="fas fa-image"></i> {{ __('Upload ảnh gửi tin') }}
                </button>
                <button class="btn btn-sm btn-danger d-none" id="cancelSendMessage">
                    {{ __('Hủy tin')}}
                </button>
                <a class="btn btn-sm btn-success" href="{{ route('app.momo-messages.create') }}"><i class="fas fa-add"></i>
                    {{ __('Thêm Message') }}</a>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#importModal">
                    <i class="fas fa-file-import"></i> {{ __('Upload File') }}
                </button>
                <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#canneclSendMessageBatch">
                    <i class="fa-solid fa-comment-slash"></i> {{ __('Hủy theo lô') }}
                </button>

                <a class="btn btn-sm btn-warning" href="{{ route('app.momo-messages.template') }}">
                    <i class="fas fa-download"></i> Tải File Mẫu
                </a>
                <a class="btn btn-sm btn-secondary" id="export-momo-messages" href="javascript:void(0)"><i
                        class="fa-solid fa-file-excel"></i>{{ __('Xuất file') }}</a>
            </div>
            @endrole
        </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><input type="checkbox" name="main_checkbox" class="wide-checkbox"><label></label></th>
                            <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">{{ __('Url') }}</th>
                            <th class="text-start">{{ __('Lô') }}</th>
                            <th class="text-center">{{ __('Kết quả') }}</th>
                            <th class="text-center">{{ __('Trạng thái') }}</th>
                            <th class="text-center">{{ __('Phản hồi') }}</th>
                            <th class="text-center">{{ __('Số lần chạy lại') }}</th>
                            <th class="text-center">{{ __('Thời gian tạo') }}</th>
                            <th class="text-center">{{ __('Thời gian gửi') }}</th>
                            <th class="text-center">{{ __('Thao tác') }}</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">{{ __('Import Data') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('app.momo-messages.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="file" class="form-label">{{ __('Chọn file') }}</label>
                            <input type="file" class="form-control" id="file" name="file" required>
                        </div>
                        <div class="mb-3">
                            <label for="batch_name" class="form-label">{{ __('Lô') }}</label>
                            <input type="input" class="form-control" id="batch-name" name="batch_name" placeholder="Vui lòng nhập tên lô. VD: Lo23122024" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Đóng') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Import') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="canneclSendMessageBatch" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">{{ __('Hủy tin theo lô') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('app.momo-messages.canneclSendMessageBatch') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="batch_name" class="form-label">{{ __('Lô') }}</label>
                            <input type="input" class="form-control" id="batch-name" name="batch_name" placeholder="Vui lòng nhập tên lô" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Đóng') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Hủy') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="uploadImageModal" tabindex="-1" aria-labelledby="uploadImageModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadImageModalLabel">Upload Ảnh</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="uploadImageForm" action="{{ route('app.momo-messages.uploadImage') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="imageFile" class="form-label">Chọn ảnh</label>
                            <input class="form-control" type="file" id="imageFile" name="uploadImage">
                        </div>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="viewImageModal" tabindex="-1" aria-labelledby="viewImageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewImageModalLabel">Ảnh Hiện Tại</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ asset('spam/spam_mm.jpg') }}?v={{ time() }}"
                    id="modalImage" class="img-fluid rounded shadow" alt="Ảnh">
                </div>
            </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 userRole = "{{ checkRoleUser() }}";
    var dataTable = $('#listMomoMessages').DataTable({
        'pagingType': 'input',
        dom: 'lifrtp',
        processing: true,
        serverSide: true,
        responsive: true,
        info: true,
        ajax: {
            url: "{{ route('app.momo-messages.index') }}",
            type: 'GET',
            data: function(d) {
                d.from_create_date = $('#search-message-momo [name="from_create_date"]').val();
                d.to_create_date = $('#search-message-momo [name="to_create_date"]').val();
                d.sender_number = $('#search-message-momo [name="sender_number"]').val();
                d.receiver_number = $('#search-message-momo [name="receiver_number"]').val();
                d.message_content = $('#search-message-momo [name="message_content"]').val();
                d.type = $('#search-message-momo [name="type"]').val();
                d.result = $('#search-message-momo [name="result"]').val();
                d.status = $('#search-message-momo [name="status"]').val();
                d.batch_name = $('#search-message-momo [name="batch_name"]').val();
            }
        },
        'pageLength': 50,
        'aLengthMenu': [
            [50, 100, 200, -1],
            [50, 100, 200, 'All']
        ],
        order: [
            [11, "desc"]
        ],
        columnDefs: [{
            targets: 0,
            width: '70px',
            createdCell: function(td, cellData, rowData, row, col) {
                $(td).css('min-width', '70px');
            }
        }],
        columns: [{
                data: 'checkbox',
                name: 'checkbox',
                orderable: false,
                className: 'text-center wide-checkbox',
                searchable: false,
                defaultContent: ''
            },
            {
                data: 'id',
                name: 'id'
            },
            {
                data: 'sender_number',
                name: 'sender_number',
            },
            {
                data: 'receiver_number',
                name: 'receiver_number',
            },
            {
                data: 'message_content',
                name: 'message_content',
            },
            {
                data: 'url',
                name: 'url',
                visible: false
            },
            {
                data: 'batch_name',
                name: 'batch_name',
            },
            {
                data: 'result',
                name: 'result',
            },
            {
                data: 'status',
                name: 'status',
                className: 'text-center'
            },
            {
                data: 'response',
                name: 'response',
                className: 'text-center'
            },
            {
                data: 'retry_number',
                name: 'retry_number',
                className: 'text-center'
            },
            {
                data: 'created_at',
                render: function(data, type, row) {
                    return formatTime(data);
                },
                className: 'text-center',
            },
            {
                data: 'completed_at',
                render: function(data, type, row) {
                    return formatTime(data);
                },
                className: 'text-center',
            },
            {
                data: 'actions',
                name: 'actions',
                className: 'text-center',
                visible: userRole
            }
        ]
    }).on('draw', function() {
        $('input[name="bankAccountCheckbox"]').each(function() {
            this.checked = false;
        });
        $('input[name="main_checkbox"]').prop('checked', false);
        $('button#cancelSendMessage').addClass('d-none');
    });
    $(document).on('click', 'input[name="main_checkbox"]', function() {
        if (this.checked) {
            $('input[name="momoMessageCheckbox"]').each(function() {
                this.checked = true;
            });
        } else {
            $('input[name="momoMessageCheckbox"]').each(function() {
                this.checked = false;
            });
        }
        toggleturnCancelSendMessage();
    });

    $(document).on('change', 'input[name="momoMessageCheckbox"]', function() {
        if ($('input[name="momoMessageCheckbox"]').length == $(
                'input[name="momoMessageCheckbox"]:checked').length) {
            $('input[name="main_checkbox"]').prop('checked', true);
        } else {
            $('input[name="main_checkbox"]').prop('checked', false);
        }

        toggleturnCancelSendMessage();
    });


    $(document).on('click', '.rehandle-momo-message', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');

        var csrfToken = '{{ csrf_token() }}';
        swal.fire({
            title: 'Xác nhận xử lý lại gửi message momo?',
            html: 'Bạn có chắc muốn xử lý lại gửi message momo này không?',
            showCancelButton: true,
            icon: "question",
            showCloseButton: true,
            confirmButtonText: 'Đồng ý, Bật',
            cancelButtonText: 'Huỷ',
            confirmButtonColor: '#556ee6',
            cancelButtonColor: '#d33',
            allowOutsideClick: false,
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: csrfToken
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data.code == 1) {
                            $('#listMomoMessages').DataTable().ajax.reload(null,
                                true);
                            toastr.success(data.msg);
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                    }
                });
            }
        })
    });

    $(document).on('click', 'button#cancelSendMessage', function() {
        var checkedMomoMessages = [];
        $('input[name="momoMessageCheckbox"]:checked').each(function() {
            checkedMomoMessages.push($(this).data('id'));
        });

        if (checkedMomoMessages.length > 0) {
            var csrfToken = '{{ csrf_token() }}';
            swal.fire({
                title: 'Xác nhận hủy gửi message momo?',
                html: 'Bạn có chắc muốn hủy gửi tin <b>(' + checkedMomoMessages
                    .length +
                    ')</b> message momo này không?',
                showCancelButton: true,
                icon: "question",
                showCloseButton: true,
                confirmButtonText: 'Đồng ý, Bật',
                cancelButtonText: 'Huỷ',
                confirmButtonColor: '#556ee6',
                cancelButtonColor: '#d33',
                allowOutsideClick: false,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "{{ route('app.momo-messages.cancelSendMessage') }}",
                        type: 'PUT',
                        data: {
                            ids: checkedMomoMessages,
                            _token: csrfToken
                        },
                        dataType: 'json',
                        success: function(data) {
                            if (data.code == 1) {
                                $('#listMomoMessages').DataTable().ajax.reload(null,
                                    true);
                                toastr.success(data.msg);
                            } else {
                                toastr.error(data.msg);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                            toastr.error('Có lỗi xảy ra, vui lòng thử lại');
                        }
                    });
                }
            })
        }
    });

    function toggleturnCancelSendMessage() {
        if ($('input[name="momoMessageCheckbox"]:checked').length > 0) {
            $('button#cancelSendMessage').html('<i class="fa-solid fa-xmark me-1"></i>' + 'Hủy gửi (' + $(
                'input[name="momoMessageCheckbox"]:checked').length + ')').removeClass('d-none');
        } else {
            $('button#cancelSendMessage').addClass('d-none');
        }
    }





    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();
    });
    $('#export-momo-messages').click(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: "{{ route('app.exportMomoMessage') }}",
            data: $('#search-message-momo').serialize(),
            dataType: 'JSON',
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        window.open('/file-managers', '_blank');
                    }, 3000);
                }
            },
            error: function(error) {
                toastr.error(error);
            },
        });
    });
</script>
@endsection
@section('styles')
<link rel="preload" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.0/dist/sweetalert2.min.css" as="style"
    onload="this.rel='stylesheet'">
<style>
    td:not(:last-child) {
        word-wrap: break-word;
        overflow: hidden;
        white-space: nowrap;
    }
</style>
@endsection