@extends('layouts.sa.main')

@section('sms', 'active')

@section('main-content')
    <style>
        /* Responsive Button Container */
        @media (max-width: 576px) {
            .btn-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn-container button {
                width: 100%;
                margin-bottom: 5px;
                margin-top: 10px;
            }
        }

        /* Table Styling */
        #datatable {
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        #datatable.dataTable tbody tr {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .dataTables_wrapper .dataTables_paginate {
            float: left;
            text-align: left;
            margin-top: 15px !important;
        }

        /* Search Input Styling */
        #searchRecord {
            border-radius: 20px;
            background: #f1f3f5;
            padding: 20px;
            border: 1px solid #ced4da;
        }

        /* Button Styling */
        #handleSyncData {
            padding: .5rem 1.5rem .5rem 1.5rem;
            display: flex;
            align-items: center;
            /* border-radius: 30px; */
        }

        #handleSyncData ion-icon {
            margin-right: 8px;
        }

        /* Header Styling */
        .content-header h1 {
            font-size: 2rem;
            font-weight: 600;
            color: #333;
        }
    </style>

    <div class="content-wrapper mb-3">
        <div class="content-header p-3">
            <div class="container-fluid mt-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 mt-2">SMS</h1>
                    </div>
                    <div class="col-sm-6 d-flex justify-content-end align-items-center btn-container">

                    </div>
                </div>

                <input type="text" class="form-control w-100 mt-4 p-4" id="searchRecord"
                    placeholder="Search Filter, ex. Name, Email, Status, id, Role">

                <div class="mt-3">
                    <table class="table text-nowrap table-borderless" id="datatable" style="width: 100%">
                        <thead class="text-sm text-muted">
                            <tr>
                                <th scope="col">
                                    <ion-icon name="key-outline"></ion-icon> id
                                </th>
                                <th scope="col">Payload</th>
                                <th scope="col">Timestamp</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        let tableView;
        let isFormPrepared = 0;

        const maintenance = {
            init: function() {
                maintenance.getData();
                maintenance.events();
            },
            events: function() {
                $('#searchRecord').on('change keyup', function() {
                    let searchValue = $('#searchRecord').val();
                    console.log(searchValue);
                    tableView.search(searchValue).draw();
                });
            },
            getData: function(filter = "") {
                if (tableView) {
                    tableView.destroy();
                }

                tableView = $('#datatable').DataTable({
                    ajax: `/sa/data/sms`,
                    order: [
                        [0, 'desc']
                    ],
                    dom: 'tp',
                    serverSide: true,
                    columns: [{
                            data: 'id',
                            name: 'id',
                        },
                        {
                            data: 'payload',
                            name: 'payload',
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                        },
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                    rowCallback: function(row, data, index) {
                        // Add styling to each row
                        $(row).css({
                            'background-color': '#FFFFFF', // Example color
                            'padding': '20px', // Example padding
                            'border-radius': '10px',
                            'box-shadow': '0 1px 4px rgba(0, 0, 0, 0.1)'
                        });
                    },
                    drawCallback: function(settings) {
                        // $('#datatable tbody tr').not(':last').css('margin-bottom', '10px');
                    }
                });
            },
        }

        maintenance.init();
    </script>
@endsection