@push('scripts')
    <script>
        function insertAutoText() {
            var textarea = document.getElementById('isi');
            var autotext = document.getElementById('autotext').value;

            if (autotext === "Auto Text") {
                return; // Do nothing if the default option is selected
            }

            var startPos = textarea.selectionStart;
            var endPos = textarea.selectionEnd;
            var text = textarea.value;

            var before = text.substring(0, startPos);
            var after = text.substring(endPos, text.length);

            textarea.value = before + autotext + after;

            // Place cursor after inserted text
            var cursorPosition = startPos + autotext.length;
            textarea.selectionStart = cursorPosition;
            textarea.selectionEnd = cursorPosition;

            // Focus the textarea
            textarea.focus();
        }
    </script>
@endpush

@push('styles')
    <style>
        .image-upload {
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            display: block;
            margin: auto;
            background-size: contain;
        }

        .image-upload>input {
            display: none;
        }

        .pilih-bentuk svg {
            width: 100px;
            height: 100px;
            display: block;
            margin: auto;
        }

        .pilih-bentuk i {
            font-size: 100px;
            color: grey;
            position: absolute;
            left: 0%;
            top: 0%;
            right: 0%;
            bottom: 0%;
        }
    </style>
@endpush

<div class="row clearfix">
    <!-- Task Info -->
    <div class="col-xs-12 col-sm-12 col-md-6">
        <div class="card">
            <div class="header">
                <div style="display: flex; justify-content: space-between;gap:6px;">
                    <a href="{{ route('konsultasi.pesan-default-schedule.index') }}" class="btn btn-warning">Kembali</a>

                </div>
            </div>
            <div class="body">

                <div class="row">
                    <div class="col-md-12">

                        <div class="input-group colorpicker colorpicker-element">
                            <label for="judul">Judul</label>
                            <div class="form-line ">
                                <input type="text" id="judul" name="judul" class="form-control"
                                    value="{{ old('judul', @$data->judul) }}">
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>

                        <div class="input-group">
                            <label for="isi">Isi</label>
                            <div class="form-line ">
                                <textarea type="text" id="isi" name="isi"
                                    class="form-control">{{ old('isi', @$data->isi) }}</textarea>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                        <div class="form-group">
                            <select name="autotext" id="autotext">
                                <option selected> Auto Text</option>
                                <option value="{ nama_pelanggan }">Nama Pelanggan</option>
                                <option value="{ no_konsultasi }">No Konsultasi</option>
                                <option value="{ merek_hp }">Merek HP</option>
                                <option value="{ tipe_hp }">Tipe HP</option>
                                <option value="{ keluhan }">Keluhan</option>
                                <option value="{ tanggal_booking }">Tanggal Booking</option>
                                <option value="{ jam_booking }">Jam Booking</option>
                                <option value="{ nama_toko }">Nama Toko</option>
                            </select>
                            <button class="btn btn-warning " type="button" onclick="insertAutoText()">
                                masukan
                            </button>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="schedule_time">Waktu</label>
                            <div class="form-line">
                                <input type="number" id="schedule_time" name="schedule_time" class="form-control"
                                    value="{{ old('schedule_time', @$data->schedule_time) }}">

                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="schedule_in">Satuan Waktu</label>
                            <div class="form-line">
                                <select class="form-control" name="schedule_in" id="schedule_in">
                                    <option value=""> -pilih satuan waktu-</option>
                                    <option value="hari" @if (old('schedule_in', @$data->schedule_in) == 'hari') selected
                                    @endif>hari</option>
                                    <option value="minggu" @if (old('schedule_in', @$data->schedule_in) == 'minggu')
                                    selected @endif>minggu</option>
                                    <option value="bulan" @if (old('schedule_in', @$data->schedule_in) == 'bulan')
                                    selected @endif>bulan</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="jam">Jam</label>
                            <div class="form-line">
                                <input type="time" id="jam" name="jam" class="form-control"
                                    value="{{ old('jam', @$data->jam) }}">

                            </div>
                        </div>
                    </div>
                </div>

                {{-- <div class="row">
                    <div class="col-md-12">
                        <div class="input-group">
                            <label for="status_batal">Batalkan Pesan Pada Status </label>
                            <div class="form-line">


                                <select name="status_batal" id="status_batal">
                                    <option value="jangan_batalkan" @selected(old('status_batal', @$data->status_batal)
                                        == 'jangan_batalkan')>
                                        Jangan Batalkan</option>
                                    <option value="tidak_respon_lagi" @selected(old('status_batal', @$data->
                                        status_batal) == 'tidak_respon_lagi')>
                                        Tidak Respon Lagi</option>
                                    <option value="tidak_deal" @selected(old('status_batal', @$data->status_batal) ==
                                        'tidak_deal')>
                                        Tidak Deal</option>
                                    <option value="service_masuk" @selected(old('status_batal', @$data->status_batal) ==
                                        'service_masuk')>
                                        Servis Masuk</option>
                                    <option value="batal" @selected(old('status_batal', @$data->status_batal) ==
                                        'batal')>
                                        Batal</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div> --}}

                <div class="row clearfix">
                    <div class="col-md-6">
                        <b>Batalkan Pesan Pada Status </b>
                        <div class="form-line">
                            <select name="status_batal[]" id="status_batal" multiple class="form-control">
                                @php
                                    $selectedStatuses = old('status_batal', isset($data) ? $data->cancelStatuses->pluck('id')->toArray() : []);
                                @endphp
                                @foreach($statuses as $status)
                                    <option value="{{ $status->id }}" @if(in_array($status->id, $selectedStatuses)) selected
                                    @endif>
                                        {{ $status->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <small class="text-muted">* Tahan CTRL/Command untuk memilih lebih dari satu. Biarkan kosong
                            jika tidak ingin dibatalkan.</small>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-12">
                        <div class="form-line">
                            <button type="submit" class="btn btn-success">Simpan</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>




<div class="row">
    <div class="col-md-12">
        <hr>
    </div>
</div>
<div class="row" style="margin-bottom: 50px;">
    <div class="col-md-12" style="text-align: right;">
    </div>
</div>