@extends('wallet.layouts.master')
@section('title','SMS History')
@section('page-css')
    <style>
        .dt-row .col-sm-12 {
            overflow: auto;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('dashboard_d/assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('content')
    <div class="heading d-flex justify-content-between align-items-center gap-3 mt-5 px-1">
            <h2 class='fw-bold fs-2'>SMS History</h2>
        </div>
        <div class="mt-32">
            <div class="row mt-3">
                <div class="col-md-12 mb-4">
                    <div class="bg-line-dark shadow p-3 rounded-4 mb-2 ">
                        <div class="">
                            <form id="" action="{{route('sms-history')}}">
                                <div class="row">
{{--                                    <div class="form-group col-md-3">--}}
{{--                                        <label for="user_id">Companies</label>--}}
{{--                                        <select class="form-select bg-dark py-2 text-light bdr-opcty rounded-3" id="user_id" name="user_id">--}}
{{--                                            <option value="">Select company</option>--}}
{{--                                            @foreach($users as $user)--}}
{{--                                                <option--}}
{{--                                                    {{$user_id == $user->id ? 'selected' : ''}} value="{{$user->id}}">{{$user->fname}}</option>--}}
{{--                                            @endforeach--}}

{{--                                        </select>--}}
{{--                                    </div>--}}
                                    <div class="form-group col-md-3">
                                        <label for="status">Status</label>
                                        <select class="form-select bg-dark py-2 text-light bdr-opcty rounded-3" id="status" name="status">
                                            <option value="">Select status</option>

                                            <option {{$status == 'SEND' ? 'selected' : ''}} value="SEND">SEND</option>
                                            <option {{$status == 'TRANSMITTED' ? 'selected' : ''}} value="TRANSMITTED">
                                                TRANSMITTED
                                            </option>
                                            <option {{$status == 'DELIVERED' ? 'selected' : ''}} value="DELIVERED">DELIVERED
                                            </option>
                                            <option {{$status == 'NOTDELIVERED' ? 'selected' : ''}} value="NOTDELIVERED">
                                                NOTDELIVERED
                                            </option>

                                        </select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="time_period">Time period</label>
                                        <select class="form-select bg-dark py-2 text-light bdr-opcty rounded-3" id="time_period" name="time_period">
                                            <option  value="">Select period</option>
                                            <option {{$time_period == 'today' ? 'selected' : ''}} value="today">Today
                                            </option>
                                            <option {{$time_period == 'yesterday' ? 'selected' : ''}} value="yesterday">
                                                Yesterday
                                            </option>
                                            <option {{$time_period == 'last_week' ? 'selected' : ''}} value="last_week">
                                                Last week
                                            </option>
                                            <option
                                                {{$time_period == 'this_month' ? 'selected' : ''}} value="this_month">
                                                This month
                                            </option>
                                            <option
                                                {{$time_period == 'last_month' ? 'selected' : ''}} value="last_month">
                                                Last month
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label for="start_date">Start data</label>
                                        <input type="date" id="start_date" class="form-control"
                                               value="{{$start_date ?? ''}}" name="start_date">
                                    </div>

                                    <div class="form-group col-md-3">
                                        <label for="end_date">End data</label>
                                        <input type="date" id="end_date" class="form-control"
                                               value="{{$end_date ?? ''}}" name="end_date">
                                    </div>
                                </div>

                                <div class="text-end mt-3">
                                    <a class="btn btn-secondary me-2 rounded-5 px-3" href="{{route('sms-history')}}">Reset</a>
                                    <button class="btn btn-primary rounded-5 px-3" type="submit">Search</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="text-left mt-3">
                        <div class="bg-line-dark p-3 rounded-4 shadow">
                            <div class="table-responsive">
                                <table class="display table table-bordered" id="deafult_ordering_table"
                                       style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>Status</th>
                                        <th>From</th>
                                        <th>To</th>
                                        <th>Flash</th>
                                        <th>Message</th>
                                        <th>Data</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($sms as $sm)
                                        <tr data-message-id="{{$sm->sms_id ?? ''}}">
                                            <td>{{$sm->status ?? ''}}</td>
                                            <td>{{$sm->from ?? ''}}</td>
                                            <td>{{$sm->to ?? ''}}</td>
                                            <td>{{$sm->flash ?? ''}}</td>
                                            <td onclick="showMessage(`{{$sm->message ?? ''}}`)">
                                                {{ isset($sm->message) && strlen($sm->message) > 50 ? substr($sm->message, 0, 50) . '...' : $sm->message }}
                                            </td>
                                            <td>{{$sm->create_date ?? ''}}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- Modal -->
    <div class="modal fade" id="show_message" tabindex="-1" aria-labelledby="show_message" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-2">
                    <h6 class="modal-title fw-bold" id="show_message">Message</h6>
                    <button type="button" class="btn-close invert" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="p-3" id="message_details"></p>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>

    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        $(document).ready(function () {
            // Initialize DataTable with PDF export button
            $('#deafult_ordering_table').DataTable({

                // "order": [
                //     [0, "asc"]
                // ]

            });
        });
    </script>
    <script>
        // Enable pusher logging - don't include this in production
        // Pusher.logToConsole = true;

        var pusher = new Pusher("{{env('PUSHER_APP_KEY')}}", {
            cluster: "{{env('PUSHER_APP_CLUSTER')}}"
        });

        var submit_SMS_channel = pusher.subscribe('submit_SMS_channel');
        var send_SMS_channel = pusher.subscribe('send_SMS_channel');
        var transmitted_SMS_channel = pusher.subscribe('transmitted_SMS_channel');
        var failed_to_deliver_SMS_channel = pusher.subscribe('failed_to_deliver_SMS_channel');
        var delivered_SMS_channel = pusher.subscribe('delivered_SMS_channel');

        send_SMS_channel.bind('App\\Events\\SendSMSEvent', function (data) {
            var message = data.event;

            if (message) {
                // Create a new row with truncated message if it exceeds 50 characters
                var newRow = `
                <tr data-message-id="${message.sms_id ?? ''}">

                    <td>${message.status ?? ''}</td>
                    <td>${message.from ?? ''}</td>
                    <td>${message.to ?? ''}</td>
                    <td>${message.flash ?? ''}</td>
                    <td>${message.message && message.message.length > 50 ? message.message.substring(0, 50) + '...' : message.message ?? ''}</td>
                    <td>${message.create_date ?? ''}</td>
                </tr>
                `;

                // Prepend the new row to the table body
                document.querySelector('#deafult_ordering_table tbody').insertAdjacentHTML('afterbegin', newRow);
            }


        });
        transmitted_SMS_channel.bind('App\\Events\\TransmittedSMSEvent', function (data) {
            var message = data.event;

            var row = document.querySelector(`tr[data-message-id="${message.sms_id}"]`);
            if (row) {
                $('.table>:not(caption)>*>*').css('background', 'transparent');
                row.style.backgroundColor = '#bce8bf';
                row.cells[1].innerText = message.status ?? '';
            }
        });
        failed_to_deliver_SMS_channel.bind('App\\Events\\FailedToDeliverSMSEvent', function (data) {
            var message = data.event;

            var row = document.querySelector(`tr[data-message-id="${message.sms_id}"]`);
            if (row) {
                $('.table>:not(caption)>*>*').css('background', 'transparent');
                row.style.backgroundColor = '#e1d37d';
                row.cells[1].innerText = message.status ?? '';
            }
        });
        delivered_SMS_channel.bind('App\\Events\\DeliveredSMSEvent', function (data) {
            var message = data.event;

            var row = document.querySelector(`tr[data-message-id="${message.sms_id}"]`);
            if (row) {
                $('.table>:not(caption)>*>*').css('background', 'transparent');
                row.style.backgroundColor = '#5da170';
                row.cells[1].innerText = message.status ?? '';
            }
        });

        function showMessage(message){

            $("#message_details").text(message);
            $("#show_message").modal('show')

        }
    </script>

@endsection