@extends('admin.layout.master')
@section('title', 'Notification')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

@section('content')
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <div class="row">
        <div class="col-lg-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Notification</h4>
                    <br>
                    {{-- <p class="text-muted mb-3">Read the <a href="https://jqueryvalidation.org/" target="_blank"> Official jQuery Validation Documentation </a>for a full list of instructions and other options.</p> --}}
                    <form id="signupForm" action="{{ route('admin.notification.process') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="ageSelect" class="form-label">User</label>
                            <select class="form-select" name="reciever_id" id="ageSelect" multiple>
                                <option selected disabled>Select your User</option>
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @endforeach
                            </select>
                            <span class="text-danger">{{ $errors->first('reciever_id') }}</span>
                        </div>
                        <div class="mb-3">
                            <label for="ageSelect" class="form-label">Composition</label>
                            <select class="form-select" name="composition" id="ageSelect">
                                <option selected disabled>Select your Composition</option>
                                <option value="Regular">Regular</option>
                                <option value="Composition">Composition</option>

                            </select>
                            <span class="text-danger">{{ $errors->first('composition') }}</span>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Title</label>
                            <input id="name" class="form-control" name="title" type="text">
                            <span class="text-danger">{{ $errors->first('title') }}</span>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">Description</label>
                            <textarea id="description" class="form-control" name="description" type="text" rows="5" cols="5">
                            </textarea>
                            <span class="text-danger">{{ $errors->first('description') }}</span>
                        </div>


                        <input class="btn btn-primary" type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets/js/data-table.js') }}"></script>
    <script>
        document.getElementById('description').addEventListener('mousedown', function(event) {
            // Prevent the default action of placing the cursor where the mouse is clicked
            event.preventDefault();
            // Set the cursor position to the start (position 0)
            this.setSelectionRange(0, 0);
            // Focus the textarea
            this.focus();
        });
    </script>
@endpush