@section('title', $title)
<x-app-layout>
    <x-slot name="header_link">
        <a href="/dashboard">Dashboard</a>
    </x-slot>

    <x-slot name="header_parent">
        @yield('title')
    </x-slot>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5>
                        <i class="ti ti-send"></i> Form Kirim Pesan
                    </h5>
                </div>
                <div class="card-body table-responsive">

                    <div class="alert alert-info" role="alert">
                        <h4 class="alert-heading">Kirim Pesan!</h4>
                        <p>Silahkan isi form di bawah ini untuk mengirim pesan kepada pasien yang terdaftar. Pesan akan
                            dikirim melalui notifikasi aplikasi <strong>SENSITIF</strong> jika aplikasi ini terinstall
                            di Handphone masing-masing pasien yang terdaftar.</p>
                    </div>

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <h4 class="alert-heading">Terjadi Kesalahan!</h4>
                            <p>Silahkan perbaiki kesalahan berikut:</p>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>

                    @endif

                    <form action="{{ route('notifikasi-user.create') }}" method="post" class="formSubmit">
                        @csrf
                        <div class="mb-3 row">
                            <div class="col-md-12">
                                <div class="mb-2 form-group">
                                    <x-input-label value="Judul Pesan" required="true" />
                                    <x-text-input name="title" required="true" :value="old('title') ?? 'Pengingat Periksa Hipertensi'" />
                                    <x-input-error :messages="$errors->get('title')" />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="mb-2 form-group">
                                    <x-input-label value="Isi Pesan" required="true" />
                                    <textarea name="message" id="message" class="form-control" cols="30" rows="10" required>{!! old('message') ?? 'Halo [nama_pasien], jangan lupa periksa kesehatan Anda bulan ini.' !!}</textarea>
                                    <x-input-error :messages="$errors->get('message')" />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <x-input-label value="Pilih Pasien" required="" for="user" />
                                    <select class="form-select" data-trigger name="user_id[]" multiple id="user">
                                    </select>
                                    <x-input-error :messages="$errors->get('user_id')" />
                                </div>
                            </div>
                        </div>
                        <div class="btn-group">
                            <button type="submit" class="btn btn-success" id="btnSimpan">
                                <span class="spinner-border spinner-border-sm loading-simpan" style="display: none"
                                    role="status" aria-hidden="true"></span>
                                Kirim
                            </button>
                            <button type="reset" class="btn btn-danger" id="btnReset">
                                Reset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5>Riwayat Notifikasi Pasien</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table display table-striped table-hover nowrap" id="table-main">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Judul</th>
                                    <th>Isi Pesan</th>
                                    <th>Status</th>
                                    <th>Error</th>
                                    <th>Tanggal</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('admin.apps.notification-user.includes.index_js')
    @include('admin.apps.notification.includes.index_js')
</x-app-layout>