@extends('layouts.main')

@section('title', 'Broadcast')
@section('header', 'Broadcast')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Broadcast</li>
@endsection

@section('content')

<style>
    .preview img {
        width: 80px;
        height: auto;
    }
</style>
@if($read)

@include('layouts.index.filters', ['date_range' => 0, 'filter' => 0, 'filter_default' => 'All', 'exports' => 0, 'create' => $create])

<div class="card">
    <div class="card-body text-center">
        <div class="dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>
@endif

@if($update)
<div class="modal fade p-0" id="mdlSendBroadcast" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-xl modal-dialog-centered w-100 h-100" style="max-width: none;margin: 0;">
        <div class="modal-content h-100">
            <div class="modal-header">
                <h5 class="modal-title">Broadcast</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="h4">Message</label>
                            <div class="card card-primary card-outline">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label class="form-control-label">Title</label>
                                        <input type="text" name="title" class="form-control form-control-sm" readonly placeholder="Title" title="Title">
                                        <input name="id" hidden>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">Message</label>
                                        <textarea name="message" class="form-control form-control-sm" title="Message" placeholder="Message" readonly rows="9"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <label class="h4">Broadcast To</label>
                            <div class="card card-primary card-outline">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h3 class="card-title">Queue</h3>
                                                    <div class="card-tools">
                                                        <a href="#" class="btn btn-success btn-sm btn-queue-send" data-type="failed">Send</a>
                                                        <a href="#" class="btn btn-info btn-sm btn-queue-sending d-none">Sending...</a>
                                                    </div>
                                                </div>
                                                <div class="card-body queue-list">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8" id="bradcast-send-wrapper">
                                            <div class="card card-success card-outline">
                                                <a class="d-block w-100" data-toggle="collapse" href="#broadcast-sended" aria-expanded="true">
                                                    <div class="card-header">
                                                        <h3 class="card-title w-50">Sended</h3>
                                                    </div>
                                                </a>
                                                <div id="broadcast-sended" class="collapse show" data-parent="#bradcast-send-wrapper">
                                                    <div class="card-body">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>Full Name</th>
                                                                    <th>Phone</th>
                                                                    <th>Status</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="tbody-sended">
                                                                
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card card-warning card-outline">
                                                <a class="d-block w-100 collapsed" data-toggle="collapse" href="#broadcast-failed" aria-expanded="false">
                                                    <div class="card-header">
                                                        <h3 class="card-title w-50">Failed</h3>
                                                        <div class="card-tools">
                                                            <a href="#" class="btn btn-success btn-sm btn-queue-all" data-type="failed">Queue All</a>
                                                        </div>
                                                    </div>
                                                </a>
                                                <div id="broadcast-failed" class="collapse" data-parent="#bradcast-send-wrapper">
                                                    <div class="card-body">
                                                        <table class="table table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th>Full Name</th>
                                                                    <th>Phone</th>
                                                                    <th>Status</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="tbody-failed">
                                                                
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white" style="position: absolute;width: 100%;bottom: 0;">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>
@endif

@if($create)
<div class="modal fade" id="createData" role="dialog" aria-labelledby="info">
    <div class="modal-dialog modal-xl modal-dialog-centered w-100 h-100" style="max-width: none;margin: 0;">
        <div class="modal-content h-100">
            <form action="#" class="form-broadcast" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Broadcast</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="h4">Message</label>
                            <div class="card card-primary card-outline">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label class="form-control-label">Title</label>
                                        <input type="text" name="title" class="form-control form-control-sm" required autofocus placeholder="Title" title="Title">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">Message</label>
                                        <textarea name="message" class="form-control form-control-sm" title="Message" placeholder="Message" required autofocus rows="9"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <label class="h4">Broadcast To</label>
                            <div class="card card-primary card-outline">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="member-filter-wrapper">
                                                        <div class="form-group">
                                                            <label class="form-control-label">Jenis Pendaftaran</label>
                                                            <select class="form-control form-control-sm" name="sel_id_jenis_pendaftaran">
                                                                <option value="">All</option>
                                                                @foreach($jenis_pendaftaran as $jpend)
                                                                <option value="{{$jpend->id}}">{{$jpend->jenis_pendaftaran}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        
                                                        <div class="form-group">
                                                            <label class="form-control-label">Pendaftaran</label>
                                                        @if($user->level_user == 1)
                                                            <select class="form-control form-control-sm" name="sel_id_pendaftaran">
                                                                <option value="">All</option>
                                                                @foreach($pendaftaran as $pend)
                                                                <option value="{{$pend->id}}">({{$pend->status_pendaftaran}}) {{$pend->jenis_sekolah->jenis_sekolah}} - Tahun Ajaran {{$pend->tahun_ajaran->tahun_ajaran}}</option>
                                                                @endforeach
                                                            </select>
                                                        @else
                                                            @if($user->jenis_sekolah)
                                                            <input class="form-control form-control-sm" readonly value="{{$user->jenis_sekolah->jenis_sekolah}}">
                                                            @endif
                                                        @endif
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="form-control-label">Status Active</label>
                                                        <select class="form-control form-control-sm" name="sel_status_aktif">
                                                            <option value="">All</option>
                                                            <option value="AKTIF">Active</option>
                                                            <option value="NONAKTIF">Non Active</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="card-footer">
                                                    <a href="#" class="btn btn-sm btn-success btn-filter-member pull-right">Filter</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="card">
                                                <div class="card-header">
                                                    <div class="row">
                                                        <div class="col-md-5">
                                                            <input class="form-control form-control-sm inp-search-cb-member" placeholder="Search first/last name">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-control form-control-sm border-0">Selected: <span class="cb-member-selected-count">0</span></label>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="btn-group pull-right">
                                                                <a href="#" class="btn btn-sm btn-success btn-select-all">Select All</a>
                                                                <a href="#" class="btn btn-sm btn-danger btn-clear-all">Clear All</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body" style="height: 370px;overflow: auto;">
                                                    <div class="cb-member-wrapper"></div>
                                                    <p class="alert alert-warning member-search-not-found d-none">NOT FOUND</p>
                                                    <p class="alert alert-info member-search-filter-first d-none">FILTER FIRST</p>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white" style="position: absolute;width: 100%;bottom: 0;" id="mdlBroadcast_footer">
                <a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-success btn-sm">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection
@push('custom-scripts')
@if($read)
<script>
    var param = {
        filter: "",
        status_aktif: "ALL"
    }
    $(document).ready(function(e){
        loadThis(param)
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
            status_aktif: "ALL"
        };
        $('select[name=filter]').val('');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'input[name=date_to]', function(e){
        e.preventDefault();
        param.date_to = $(this).val();
        if(param.date_from) loadThis(param);
    });
    $(document).on('change', 'input[name=date_from]', function(e){
        e.preventDefault();
        param.date_from = $(this).val();
        if(param.date_to) loadThis(param);
    });
    
    function loadThis(params){
        url = "/web_api/broadcast/getData";
        th = '<th width="5%">Title</th>' +
             '<th width="5%">Created By</th>' +
             '<th width="5%">Created At</th>' +
             '<th width="5%"> </th>';
        columns = [
                    { "data": "title", "className":"top-center"},
                    { "data": "created_by", "className":"top-center"},
                    { "data": "created_at", "className":"top-left"},
                    { "data": "id", "className":"top-center"},
                  ];
    
        col_def = [
                {
                    "targets" : 1,
                    "data": "created_by",
                    "render" : function (data, type, row) {
                        if(!row.created_by_user) return '';
                        return row.created_by_user.nama_lengkap;
                    }
                },
                {
                    "targets" : 2,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        return row.created_date;
                    }
                },
                {
                    "targets" : 3,
                    "data": "id",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        var btn = '';
                        var btn_broadcast = '';
                        if({{$update}}){
                            btn = '<div class="btn-group">' +
                                        '<button type="button" class="btn btn-sm" data-toggle="dropdown" aria-expanded="false">' +
                                            '<i class="nav-icon fa fa-ellipsis-v"></i>' +
                                        '</button>' +
                                        '<div class="dropdown-menu" role="menu" style="">' +
                                            '<a href="#" class="dropdown-item btn-detail" data-id="'+row.id+'"><i class="fa fa-info text-info mr-2"></i>Detail</a>' +
                                            '<a href="#" class="dropdown-item btn-re-broadcast" data-id="'+row.id+'"><i class="fa fa-bullhorn text-info mr-2"></i>Broadcast</a>' +
                                        '</div>' +
                                       '</div>';
                        }
                        return btn;
                    }
                },
            ];   
        
        order = [];
        sDom = '<"row view-filter"<"col-sm-12 row mb-4"<"col-sm-6 pull-left text-left"l><"col-sm-6 pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"pull-left"i><"pull-right"p>>>';
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons);
    }
</script>
@endif

@if($create)
<script>
    $(document).ready(function(e){
        
    });
</script>
@endif

@if($update)
<script>
    $(document).ready(function(e){
        $(document).on('click', '.btn-re-broadcast', function(e){
            e.preventDefault();
            
            var ini = $(this), id = ini.data('id');
            sendBroadcast(id);
        });
        $(document).on('click', '.btn-detail', function(e){
            e.preventDefault();
            
            var ini = $(this), id = ini.data('id');
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/informasi/getData',
                type: "get",
                data: {
                    status_aktif: "ALL",
                    id: id,
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if (result.data[0]) {
                    data = result.data[0];
                    var form = $('.form-update-data');
                    form.find('input[name=id]').val(data.id);
                    form.find("input[name=judul]").val(data.judul);
                    form.find("textarea[name=informasi]").val(data.informasi);
                    
                    var img = form.find('#informasi_gambar_detail_view');
                    img.attr('src', '/assets/informasi/images/'+data.gambar);
                    
                    var footer = '<a href="#" class="btn btn-transparent btn-sm text-dark" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>' +
                                 '<button type="submit" class="btn btn-warning btn-sm">Update</button>';
                    $('#detailFooter').html(footer)
                    $('#detailData').modal('show');
                } else {
                    failedAlert('Not Found');
                }
            })
            .fail(ajax_fail);
        });
        
        $(document).on('click', '.btn-filter-member', function(e){
            e.preventDefault();
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this), form = $('.form-broadcast');
            $.ajax({
                url: '/web_api/broadcast/getSiswa',
                type: "get",
                data: {
                    id_jenis_pendaftaran: form.find('select[name=sel_id_jenis_pendaftaran]').val(),
                    id_pendaftaran: form.find('select[name=sel_id_pendaftaran]').val(),
                    status_aktif: form.find('select[name=sel_status_aktif]').val(),
                }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                $('.member-search-filter-first').addClass('d-none');
                if (result.data[0]) {
                    data = result.data;
                    var ht = '';
                    $.each(data, function(i, v){
                        cb_id = 'cb-'+i+'-'+textToUrl(v.nama_lengkap);
                        no_hp = v.no_whatsapp_aktif_orang_tua;
                        disabled = '';
                        bg = '';
                        if(!no_hp){
                            no_hp = '-';
                            disabled = 'disabled';
                            bg = 'bg-gray-light';
                        }
                        
                        ht += '<div class="custom-control custom-checkbox" style="z-index: auto;">' +
                                '<input class="custom-control-input cb-member" type="checkbox" id="'+cb_id+'" data-id="'+v.id_user+'" memberName="'+v.nama_lengkap+'" memberEmail="'+v.email+'" memberPhone="'+v.no_whatsapp_aktif_orang_tua+'" '+disabled+'>' +
                                '<label for="'+cb_id+'" class="custom-control-label card">' +
                                    '<div class="card-body p-2 '+bg+'">' +
                                        '<p>' +
                                            '<label class="h6 text-dark cb-member-name">'+v.nama_lengkap+'</label>' +
                                            '<br>' +
                                            '<span class="h7 text-dark cb-member-email">'+v.email+'</span>' +
                                            '<br>' +
                                            '<span class="h7 text-dark cb-member-phone">'+no_hp+'</span>' +
                                        '</p>' +
                                    '</div>' +
                                '</label>' +
                            '</div>';
                    });
                    $('.cb-member-wrapper').html(ht);
                    $('.member-search-not-found').addClass('d-none');
                } else {
                    $('.cb-member-wrapper').html('');
                    $('.member-search-not-found').removeClass('d-none');
                }
                updateSelectedCount()
            })
            .fail(ajax_fail);
        });
        $(document).on('click', '.btn-select-all', function(e){
            e.preventDefault();
            $.each($('.cb-member'), function(i, v){
                if($(v).attr('memberphone') && $(v).attr('memberphone') != 'null') $(v).prop('checked', true).trigger('change');
            });
        });
        $(document).on('click', '.btn-clear-all', function(e){
            e.preventDefault();
            $.each($('.cb-member'), function(i, v){
                $(v).prop('checked', false).trigger('change');
            });
        });
        $(document).on('change', '.cb-member', function(){
            var ini = $(this), parent = ini.parents('.cb-member-wrapper');
            updateSelectedCount();
        });
        $(document).on('change input', '.inp-search-cb-member', function(){
            var ini = $(this), val = ini.val();
            if(val){
                $.each($('.cb-member'), function(i, v){
                    $(v).parents('.custom-control').addClass('d-none');
                });
                var filtered = $("[membername*='"+val+"']");
                if(filtered.length){
                    $.each(filtered, function(i, v){
                        $(v).parents('.custom-control').removeClass('d-none');
                    });
                    $('.member-search-not-found').addClass('d-none');
                }else{
                    $('.member-search-not-found').removeClass('d-none');
                }
            }else{
                $.each($('.cb-member'), function(i, v){
                    $(v).parents('.custom-control').removeClass('d-none');
                });
                $('.member-search-not-found').addClass('d-none');
            }
        });
        function updateSelectedCount(){
            $('.cb-member-selected-count').html($('.cb-member:checked').length);
        }
        $(document).on('submit', '.form-broadcast', function(e){
            e.preventDefault();
            var ini = $(this),  input_token = $('input[name=_token]'),
                url = '/web_api/broadcast/create';
            
            id_users = [];
            $.each($('.cb-member:checked'), function(i, v){
                id_users.push($(v).data('id'))
            });
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: url,
                type: "post",
                data: {
                    is_ajax: true,
                    _token: input_token.val(),
                    type: 'BROADCAST',
                    // img: $('#informasi_gambar_broadcast').attr('src'),
                    title: ini.find("input[name=title]").val(),
                    message: ini.find("textarea[name=message]").val(),
                    id_users: id_users
                }
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    toast('bg-success', 'Success', 'Queued', 'Broadcast message queued!');
                    $('#createData').modal('hide');
                    sendBroadcast(result.data.id)
                    loadThis(params)
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        });
        
        $(document).on('click', '.btn-queue-me', function(e){
            e.preventDefault();
            
            var ini = $(this), 
                id_broadcast = $('#mdlSendBroadcast').find('input[name=id]').val(),
                id_broadcast_user = ini.data('id');
            move_to_queue(id_broadcast, id_broadcast_user)
        })
        $(document).on('click', '.btn-queue-all', function(e){
            e.preventDefault();
            var ini = $(this), id_broadcast = $('#mdlSendBroadcast').find('input[name=id]').val(), id_broadcast_user = '';
            move_to_queue(id_broadcast, id_broadcast_user)
        })
        $(document).on('click', '.btn-queue-send', function(e){
            e.preventDefault();
            var ini = $(this), id_broadcast = $('#mdlSendBroadcast').find('input[name=id]').val(), id_broadcast_user = '';
            send_next_queue(id_broadcast, id_broadcast_user)
        })
        function move_to_queue(id_broadcast, id_broadcast_user){
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/broadcast/move_to_queue/'+id_broadcast,
                type: "get",
                data: {
                    id_broadcast_user: id_broadcast_user
                }
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    toast('bg-success', 'Success', 'Queued', 'Broadcast message queued!');
                    sendBroadcast(result.data.id)
                } else {
                    failedAlert(message);
                }
            }).fail(ajax_fail);
        }
    });
    function sendBroadcast(id){
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: '/web_api/broadcast/getData',
            type: "get",
            data: {
                id: id,
            }
        })
        .done(function (result) {
            hideLoading(e_modal_wait);
            if (result.data[0]) {
                data = result.data[0];
                var mdl = $('#mdlSendBroadcast');
                mdl.find('input[name=id]').val(data.id);
                mdl.find("input[name=title]").val(data.title);
                mdl.find("textarea[name=message]").val(data.message);
                // mdl.find('#gambar_broadcast').attr('src', data.img);
                
                var sended = '';
                var failed = '';
                var queue = '';
                $.each(data.users, function(i, v){
                    var btn_q = '';
                    if(v.send_status != 'sended' && v.send_status != 'queue') btn_q = '<a href="#" class="btn btn-sm btn-success btn-queue-me" data-id="'+v.id+'">Queue</a>';
                    var tr = '<tr>' +
                                '<td>'+v.user.nama_lengkap+'</td>' +
                                '<td>'+v.no_hp+'</td>' +
                                '<td>'+v.send_status+'</td>' +
                                '<td>'+btn_q+'</td>' +
                              '</tr>';
                    
                    if(v.send_status === 'sended'){
                        sended += tr;
                    }else if(v.send_status === 'queue'){
                        queue += '<div class="card">' +
                                    '<div class="card-body p-2">' +
                                        '<p>' +
                                            '<label class="h6 text-dark cb-member-name">'+v.user.nama_lengkap+'</label>' +
                                            '<br>' +
                                            '<span class="h7 text-dark cb-member-email">'+v.user.email+'</span>' +
                                            '<br>' +
                                            '<span class="h7 text-dark cb-member-phone">'+v.no_hp+'</span>' +
                                        '</p>' +
                                    '</div>' +
                                 '</div>';
                    }else{
                        failed += tr;
                    }
                });
                var no_data = '<tr><td colspan="4" class="text-center">No Data</td></tr>';
                if(!sended) sended = no_data;
                if(!failed) failed = no_data;
                if(!queue) queue = '<p class="alert alert-info">No Data</p>';
                $('.tbody-sended').html(sended)
                $('.tbody-failed').html(failed)
                $('.queue-list').html(queue)
                mdl.modal('show');
            } else {
                failedAlert('Not Found');
            }
        }).fail(ajax_fail);
    }
    
    function send_next_queue(id_broadcast, id_broadcast_user){
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        setTimeout(function() {
            $.ajax({
                url: '/web_api/broadcast/send_next_queue/'+id_broadcast,
                type: "get",
                data: {
                    id_broadcast_user:id_broadcast_user
                }
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                sendBroadcast(result.data.id)
                
                $('.btn-queue-send').addClass('d-none');
                $('.btn-queue-sending').removeClass('d-none');
                if (result.send_status === 'sended') {
                    toast('bg-success', 'Success', 'Sended', result.message);
                } else {
                    toast('bg-danger', 'Failed', result.send_status, result.message);
                }
                if(result.next_queue){
                    send_next_queue(result.next_queue.id_broadcast);
                }else{
                    $('.btn-queue-send').removeClass('d-none');
                    $('.btn-queue-sending').addClass('d-none');
                }
            }).fail(ajax_fail);
        }, 1000);
    }
    function textToUrl(text){
        if(!text) return '-';
        return text.replace('#', '').replace(/\s+/g, '-').toLowerCase();
    }
</script>
@endif

@endpush