@extends('layouts.admin.base')

@section('top-script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@1/dist/tinymce-jquery.min.js"></script>
@endsection

@section('page-title')
    Notifications
@endsection

@section('content')

<div class="modal fade" role="dialog" tabindex="-1" id="delete">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirm</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Do you want to proceed?</p>
            </div>
            <div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button><a class="text-decoration-none alt-btn-3" href="#" data-bs-target="#calculator" data-bs-toggle="modal">Delete</a></div>
        </div>
    </div>
</div>
<div class="modal fade" role="dialog" tabindex="-1" id="send-message">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title">Send <span x-text="messageType == 'Email' ? 'Email' : 'Notification'"></span></h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="sendmessageform" method="POST" action="{{ route('admin_send_notifications') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="users">Users</label>
                                <select name="users[]" id="users" multiple required>
                                    <option value="">- Select -</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="subject">Subject</label>
                                <input name="subject" class="form-control" type="text" id="subject" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="message">Message</label>
                                <textarea id="_message" name="message" class="form-control" rows="3" placeholder="Enter a message you would like to send" required></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="form-label" for="date">Date</label>
                                <input name="date" class="form-control" id="date" type="date">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <button class="btn btn-primary" type="submit">Send</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="mb-3"><a class="text-decoration-none alt-btn" href="#" data-bs-target="#send-message" data-bs-toggle="modal">Send Message<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                </svg></a></div>
        <div class="card card-bg border-0">
            <div class="card-body">
                <div class="table-responsive text-nowrap mt-4">
                    <table class="table table-borderless table-bordered display responsive table-spacing2" id="table1" style="width: 100%;">
                        <thead class="table-header">
                            <tr class="table-h">
                                <th>Subject</th>
                                <th>Reciever</th>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($notifications as $n)
                                <tr class="table-row">
                                    <td><a href="{{ route('admin_show_notification', $n->id) }}">{{ $n->subject }}</a></td>
                                    <td>
                                        <p class="text-nowrap table-p">{{ $n->user->name }}</p>
                                    </td>
                                    <td>
                                        <p class="text-nowrap table-p">{{ formatDatetime($n->created_at) }}</p>
                                    </td>
                                    <td><span class="{{ $n->status()->color }}">{{ $n->status()->message }}</span></td>
                                    <td></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <div>
                        Showing {{ $notifications->count() }} of {{ $notifications->total() }} notifications
                    </div>
                    {{ $notifications->links() }}
                </div>
                
            </div>
        </div>
    </div>
</div>


@endsection

@section('scripts')
<script>

    $(document).ready(function() {
        $('#users').selectize();
        $('#_message').summernote();
    });
</script>
@endsection