<div>
    @section('title')
    Send Alert
    @endsection

    @section('extra-script')
    <script src="{{asset("public/theme/html/demo1/dist/assets/js/pages/crud/forms/editors/quill1894.js?v=7.1.9")}}"></script>
    @endsection
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">

                <!--end::Notice-->
                <div class="row">
                    <div class="col-lg-12">
                        <!--begin::Card-->
                        <form wire:submit.prevent="send">
                            <div class="card card-custom example example-compact">
                                <div class="card-header">
                                    <h3 class="card-title">Send Alert</h3>
                                    <div class="card-toolbar">
                                        <div class="example-tools justify-content-center">
                                            <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <label>Type in your message </label>
                                    <textarea style="height: 325px; width:100%" wire:model="message"></textarea>
                                    <!--begin: Code-->

                                    <div class="pb-lg-0 pb-5">
                                        <div x-data="{ shown: false, timeout: null }" x-init="@this.on('sent', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })" x-show.transition.opacity.out.duration.1500ms="shown" style="display: none;" class='text-sm text-gray-600'>
                                            {{ 'Sent.' }}
                                        </div>
                                        <button type="submit" id="kt_login_singin_form_submit_button" class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-3" class="btn font-weight-bolder text-uppercase font-size-sm btn-primary py-3 px-6">Send</button>

                                    </div>
                                </div>
                                <!--end::Card-->
                                <!--begin::Action-->

                                <!--end::Action-->
                            </div>
                        </form>

                        <div class="list list-hover">
                            @foreach ($alerts as $alert)
                            
                            <div class="d-flex flex-column list-item card-spacer-x py-2 px-5" >

                                <div class="d-flex flex-column">
                                    <span class="font-weight-bold ">Posted On : {{$alert->created_at}}</span>
                                    <span>{{$alert->message}}</span>
                                </div>
                                <span class="text-danger" wire:click="delete({{$alert->id}})">Delete?</span>
                            </div>
                            
                            
                            
                            @endforeach

                        </div>

                    </div>
                </div>
                <!--end::Container-->
            </div>
            <!--end::Entry-->
        </div>
    </div>
