@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

<input name="model_name" value="{{ request()->model_name }}" type="hidden" />

<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_action_global.index') }}?model_name={{ request()->model_name }}&model_id={{ request()->model_id }}"
                    class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">
                <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="Process" @selected(old('status',@$data->status) == 'Process')> Belum Direspon </option>
                                <option value="Sudah Direspon" @selected(old('status',@$data->status) == 'Sudah Direspon')> Sudah direspon </option>
                                <option value="Booking Service" @selected(old('status',@$data->status) == 'Booking Service')> Booking Service </option>
                                <option value="Tidak Respon Lagi" @selected(old('status',@$data->status) == 'Tidak Respon Lagi')> Tidak Respon Lagi
                                </option>
                                <option value="Service Masuk" @selected(old('status',@$data->status) == 'Service Masuk')> Service Masuk </option>


                            </select>
                        </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>{{ old('isi_pesan',@$data->isi_pesan) }}</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-6">
                        <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 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" required
                                @if (isset($data)) @if ($data->nota == '1') checked @endif
                                @endif/>
                            <label for="radio1"class="">Ya</label>

                            <input type="radio" id="radio2" name="nota" required
                                value="0"@if (isset($data)) @if ($data->nota == '0') checked @endif
                                @endif />
                            <label for="radio2"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>