@extends('dashboard.layouts.master')
@section('title','SMS History')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('materio/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">

@endsection

@section('main-content')
    <h4 class="mb-4">SMS History</h4>
<div class="row">
        <div class="col-md-12 mb-1">
            <div class="card mb-2 ">
                <div class="card-body">
                    <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" 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" 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" 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>
                        <div class="row">
                            <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">
                            <a class="btn btn-secondary me-2" href="{{route('sms-history')}}">Reset</a>
                            <button class="btn btn-primary" type="submit">Search</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card" style="overflow:visible">
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="display table table-bordered" id="deafult_ordering_table" style="width:100%">
                            <thead>
                            <tr class="text-uppercase">
                                <th>Status</th>
                                <th>Company</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->user->fname ?? ''}}</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>
    <!-- Modal -->
    <div class="modal " id="show_message">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold" id="show_message">Message</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="p-3" id="message_details"></p>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-js')
    <script src="{{ asset('materio/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#sms-history").addClass('active')
        });
        $(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.user.fname ?? ''}</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