@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_action.index') }}" 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="success"
                                    @if (isset($data)) @if ($data->status == 'success') selected @endif
                                    @endif>
                                    Success</option>
                                <option value="cancel"
                                    @if (isset($data)) @if ($data->status == 'cancel') selected @endif
                                    @endif>
                                    Cancel</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>
                                <option value="pending"
                                    @if (isset($data)) @if ($data->status == 'pending') selected @endif
                                    @endif>
                                    Pending</option>
                                <option value="indent"
                                    @if (isset($data)) @if ($data->status == 'indent') selected @endif
                                    @endif>
                                    Indent</option>
                                <option value="gagal_indent"
                                    @if (isset($data)) @if ($data->status == 'gagal_indent') selected @endif
                                    @endif>
                                    Gagal Indent</option>
                                <option value="pengecekan"
                                    @if (isset($data)) @if ($data->status == 'pengecekan') selected @endif
                                    @endif>
                                    Pengecekan</option>

                                <option value="pending_perbaikan"
                                    @if (isset($data)) @if ($data->status == 'pending_perbaikan') selected @endif
                                    @endif>
                                    Pending Perbaikan</option>
                                <option value="proses_perbaikan"
                                    @if (isset($data)) @if ($data->status == 'proses_perbaikan') selected @endif
                                    @endif>
                                    Proses Perbaikan</option>

                                <option value="deal"
                                    @if (isset($data)) @if ($data->status == 'deal') selected @endif
                                    @endif>
                                    Deal</option>
                                <option value="refund"
                                    @if (isset($data)) @if ($data->status == 'refund') selected @endif
                                    @endif>
                                    Refund</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>
@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-6">
                        <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" 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>