@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('reward-promo.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">
                <div class="form-group ">
                    <label class="form-label">Kategori Pelanggan</label>
                    <div class="form-line ">
                        <select name="status_pelanggan" id="status_pelanggan">
                            <option value="">Pilih Kategori</option>
                            <option value="Super Loyal" @selected(old('status_pelanggan', @$data->status_pelanggan) == "Super Loyal")>Super Loyal
                            </option>
                            <option value="Loyal Aktif" @selected(old('status_pelanggan', @$data->status_pelanggan) == "Loyal Aktif")>Loyal Aktif
                            </option>
                            <option value="Potensi Loyal" @selected(old('status_pelanggan', @$data->status_pelanggan) == "Potensi Loyal")>Potensi
                                Loyal</option>
                            <option value="Pasif" @selected(old('status_pelanggan', @$data->status_pelanggan) == "Pasif")>
                                Pasif</option>
                            <option value="Baru" @selected(old('status_pelanggan', @$data->status_pelanggan) == "Baru")>
                                Baru</option>
                        </select>
                    </div>
                    @error('status_pelanggan')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>


                <div class="form-group ">
                    <label class="form-label">Judul</label>
                    <div class="form-line ">
                        <input type="text" class="form-control" name="judul" value="{{ old('judul', @$data->judul) }}"
                            required>

                    </div>
                    @error('code')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="input-group">
                    <label for="isi">Isi Pesan</label>
                    <div class="form-line ">
                        <textarea style="height: 300px;" class="form-control" name="isi" id="isi"
                            required>{{old('isi', @$data->isi) }}</textarea>
                    </div>
                    @error('isi')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </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>
                          
                        </select>
                        <button class="btn btn-warning " type="button" onclick="insertAutoText()">
                            masukan
                        </button>
                    </div>
                </div>


                {{-- <div class="input-group">
                    <label for="otomatis">Otomatis/Manual Terkirim</label>
                    <div class="form-line ">
                        <div class="switch">
                            <label>Manual<input type="checkbox" id="otomatis" name="otomatis" value="1" @checked(old('otomatis',@$data->otomatis) == 1)><span class="lever"></span>Otomatis</label>
                        </div>
                    </div>
                    @error('otomatis')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </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>

                <div class="input-group">
                    <label for="berulang">Sekali/Berulang</label>
                    <div class="form-line ">
                        <div class="switch">
                            <label>Sekali<input type="checkbox" id="berulang" name="berulang" value="1" @checked(old('berulang',@$data->berulang) == 1)><span class="lever"></span>Berulang</label>
                        </div>
                    </div>
                    @error('berulang')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="input-group">
                    <label for="aktif">Tidak Aktif/Aktif</label>
                    <div class="form-line ">
                        <div class="switch">
                            <label>Tidak Aktif<input type="checkbox" id="aktif" name="aktif" value="1" @checked(old('aktif',@$data->aktif) == 1)><span class="lever"></span>Aktif</label>
                        </div>
                    </div>
                    @error('aktif')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </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');
        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>