@push('scripts')
    <script></script>
@endpush

@push('styles')
    <style>
        .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-12">
        <div class="card">
            <div class="header">
                <a href="{{ route('pesan_custom.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">

                <div class="row clearfix">
                    <div class="col-md-3">
                        <b>Nama Pesan</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <input type="text" class="form-control" name="nama_pesan"
                                    value="@if (isset($data)) {{ $data->nama_pesan }} @endif" required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-3">
                        <b>Icon Pesan</b>
                        <div class="demo-radio-button">
                            <input type="radio" id="radio_1" name="icon_pesan"
                                value="pan_tool"@if (isset($data)) @if ($data->icon_pesan == 'pan_tool') checked @endif
                                @endif />
                            <label for="radio_1"class=""><i class="material-icons">pan_tool</i></label>

                            <input type="radio" id="radio_2" name="icon_pesan"
                                value="chat"@if (isset($data)) @if ($data->icon_pesan == 'chat') checked @endif
                                @endif />
                            <label for="radio_2"class=""><i class="material-icons">chat</i></label>

                            <input type="radio" id="radio_3" name="icon_pesan" value="announcement"
                                @if (isset($data)) @if ($data->icon_pesan == 'announcement') checked @endif
                                @endif />
                            <label for="radio_3"class=""><i class="material-icons">announcement</i></label>

                            <input type="radio" id="radio_4" name="icon_pesan" value="textsms"
                                @if (isset($data)) @if ($data->icon_pesan == 'textsms') checked @endif
                                @endif/>
                            <label for="radio_4"class=""><i class="material-icons">textsms</i></label>

                            <input type="radio" id="radio_5" name="icon_pesan" value="notifications"
                                @if (isset($data)) @if ($data->icon_pesan == 'notifications') checked @endif
                                @endif />
                            <label for="radio_5"class=""><i class="material-icons">notifications</i></label>

                            <input type="radio" id="radio_6" name="icon_pesan" value="forum"
                                @if (isset($data)) @if ($data->icon_pesan == 'forum') checked @endif
                                @endif />
                            <label for="radio_6"class=""><i class="material-icons">forum</i></label>

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

                <div class="row clearfix">
                    <div class="col-md-3">
                        <b>Isi Pesan</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line ">
                                <textarea style="height: 300px;" class="form-control" name="isi_pesan" id="isi_pesan" required>
@if (isset($data))
{{ $data->isi_pesan }}
@endif
</textarea>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>


                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-3">
                        <select name="autotext" id="autotext">
                            <option selected> Auto Text</option>
                            <option value="{ service_id }">Service ID</option>
                            <option value="{ nama_pelanggan }">Nama Pelanggan</option>
                            <option value="{ status }">Status Service</option>
                            <option value="{ biaya }">Biaya</option>
                            <option value="{ uang_muka }">Uang Muka</option>
                            <option value="{ grand_total }">Grand Total</option>
                            <option value="{ tipe_hp }">Tipe HP</option>
                            <option value="{ kerusakan }">Kerusakan</option>
                            <option value="{ kasir }">Kasir Yang Bertugas</option>
                            <option value="{ link_review }">Link Review</option>
                        </select>
                        <button class="btn btn-warning " type="button" onclick="insertAutoText()">
                            masukan
                        </button>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="col-md-3">
                        <b>Sertakan Nota</b>
                        <div class="demo-radio-button">
                            <input type="radio" id="radio1" name="nota" value="1"
                                @if (isset($data)) @if ($data->nota == '1') checked @endif
                                @endif/>
                            <label for="radio1"class="">Ya</label>

                            <input type="radio" id="radio2" name="nota"
                                value="0"@if (isset($data)) @if ($data->nota == '0') checked @endif
                                @endif />
                            <label for="radio2"class="">Tidak</label>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <h4>Jadwakan Pesan</h4>
                <i>*pesan akan dijadwalkan setelah status service diganti. kosongkan jika tidak perlu!</i>
                <br>
                <br>
                <div class="row clearfix">
                    <div class="col-md-3">
                        <b>Pilih Status </b>
                        <div class="form-line">


                            <select name="status" id="status">
                                <option value="">Pilih Status</option>
                                <option value="success"
                                    @if (isset($data)) @if ($data->status == 'success') selected @endif
                                    @endif>
                                    Success</option>
                                <option value="selesai"
                                    @if (isset($data)) @if ($data->status == 'selesai') selected @endif
                                    @endif>
                                    Selesai Perbaikan</option>

                                <option value="hp_normal"
                                    @if (isset($data)) @if ($data->status == 'hp_normal') selected @endif
                                    @endif>
                                    HP Normal</option>

                                <option value="batal"
                                    @if (isset($data)) @if ($data->status == 'batal') selected @endif
                                    @endif>
                                    Batal</option>

                                <option value="tidak_deal"
                                    @if (isset($data)) @if ($data->status == 'tidak_deal') selected @endif
                                    @endif>
                                    Tidak Deal</option>
                                <option value="tidak_bisa_diperbaiki"
                                    @if (isset($data)) @if ($data->status == 'tidak_bisa_diperbaiki') selected @endif
                                    @endif>
                                    Tidak Bisa Diperbaiki</option>
                                <option value="gagal_perbaikan"
                                    @if (isset($data)) @if ($data->status == 'gagal_perbaikan') selected @endif
                                    @endif>
                                    Gagal Perbaikan</option>





                            </select>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-3">
                        <b>Batalkan Pesan Pada Status </b>
                        <div class="form-line">


                            <select name="status_batal" id="status_batal">
                                <option value="jangan_batalkan"
                                    @if (isset($data)) @if ($data->status_batal == 'jangan_batalkan') selected @endif
                                    @endif>
                                    Jangan Batalkan</option>
                                <option value="success"
                                    @if (isset($data)) @if ($data->status_batal == 'success') selected @endif
                                    @endif>
                                    Success</option>
                                <option value="cancel"
                                    @if (isset($data)) @if ($data->status_batal == 'cancel') selected @endif
                                    @endif>
                                    Cancel</option>
                            </select>
                        </div>
                    </div>
                </div>
                <b>Waktu</b>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group form-float">
                            <div class="form-line">
                                <input type="number" name="jumlah_waktu" class="form-control"
                                    value="{{ old('jumlah_waktu', @$data->jumlah_waktu) }}">
                                <label class="form-label"></label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <div class="">
                                <select name="satuan_waktu" id="satuan_waktu">
                                    <option value=""> -pilih satuan waktu-</option>

                                    <option
                                        value="hari"@if (isset($data->satuan_waktu)) @if ($data->satuan_waktu == 'hari')selected @endif
                                        @endif>hari</option>
                                    <option
                                        value="minggu"@if (isset($data->satuan_waktu)) @if ($data->satuan_waktu == 'minggu')selected @endif
                                        @endif>minggu</option>
                                    <option
                                        value="bulan"@if (isset($data->satuan_waktu)) @if ($data->satuan_waktu == 'bulan')selected @endif
                                        @endif>bulan</option>
                                    <option
                                        value="tahun"@if (isset($data->satuan_waktu)) @if ($data->satuan_waktu == 'tahun')selected @endif
                                        @endif>tahun</option>

                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <b>Pukul</b>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <div class="form-line">
                                <input type="time" name="jam" class="form-control"
                                    value="{{ old('jam', @$data->jam) }}">
                                <label class="form-label"></label>
                            </div>
                        </div>
                    </div>
                </div>
                <b>Tampilkan Pesan?</b>
                <div class="row">
                    <div class="col-md-2">
                        <div class="demo-radio-button">
                            <input type="radio" id="radio3" name="tampilkan" value="1"
                                @if (isset($data)) @if ($data->tampilkan == '1') checked @endif
                                @endif/>
                            <label for="radio3"class="">Ya</label>

                            <input type="radio" id="radio4" name="tampilkan"
                                value="0"@if (isset($data)) @if ($data->tampilkan == '0') checked @endif
                                @endif />
                            <label for="radio4"class="">Tidak</label>
                        </div>
                    </div>
                </div>




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

            </div>
        </div>
    </div>
    <!-- #END# Task Info -->
</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>


{{-- script tambahan --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const statusElement = document.getElementById('status');
        const jumlahWaktuElement = document.querySelector('input[name="jumlah_waktu"]');
        const satuanWaktuElement = document.getElementById('satuan_waktu');
        const jamElement = document.querySelector('input[name="jam"]');

        function toggleRequiredFields() {
            const isStatusSelected = statusElement.value !== '';

            jumlahWaktuElement.required = isStatusSelected;
            satuanWaktuElement.required = isStatusSelected;
            jamElement.required = isStatusSelected;

            jumlahWaktuElement.disabled = !isStatusSelected;
            // satuanWaktuElement.disabled = !isStatusSelected;
            jamElement.disabled = !isStatusSelected;

            if (!isStatusSelected) {
                reset();
            }
        }

        function reset() {
            jumlahWaktuElement.value = '';
            satuanWaktuElement.value = ''; // Set the value to an empty string to reset the select
            jamElement.value = '';
        }

        statusElement.addEventListener('change', toggleRequiredFields);

        // Run once to set the initial state
        toggleRequiredFields();
    });
</script>
<script>
    function insertAutoText() {
        var textarea = document.getElementById('isi_pesan');
        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>