@push('styles')
    <link href="{{ url('material') }}/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet" />
    <link rel="stylesheet"
        href="{{ url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css') }}">
    <style>
        .rounded {
            border-radius: 10px;
        }
    </style>
@endpush


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

            <div class="card">
                <div class="body ">
                    <div class="">

                        <h3>Pengaturan Warna</h3>
                        <b>Warna Primer</b>
                        <div style="z-index: 1" class="input-group colorpicker">
                            <span class="input-group-addon">
                                <i class="rounded" style="width: 100px; height:40px"></i>
                            </span>
                            <div style="width: 100px" class="form-line">
                                <input type="text" name="primary_color" id="primary_color_input" class="form-control"
                                    @if (isset($data)) value="{{ $data->primary_color }}" @endif>
                            </div>
                        </div>
                        <b>Warna Sekunder</b>
                        <div style="z-index: 1" class="input-group colorpicker">
                            <span class="input-group-addon">
                                <i class="rounded" style="width: 100px; height:40px"></i>
                            </span>
                            <div style="width: 100px" class="form-line">
                                <input type="text" class="form-control" name="secondary_color"
                                    id="secondary_color_input"
                                    @if (isset($data)) value="{{ $data->secondary_color }}" @endif>
                            </div>
                        </div>
                        <b>Warna Text</b>
                        <div style="z-index: 1" class="input-group colorpicker">
                            <span class="input-group-addon">
                                <i class="rounded" style="width: 100px; height:40px"></i>
                            </span>
                            <div style="width: 100px" class="form-line">
                                <input type="text" class="form-control" name="text_color" id="text_color_input"
                                    @if (isset($data)) value="{{ $data->text_color }}" @endif>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success">Simpan</button>
                    </div>

                </div>
            </div>






        </div>
        <div class="">

            <div class="card">
                <div class="body">
                    <div class="">

                        <h3>Section 1</h3>
                        <b>Teks Tagline</b>
                        <div class="input-group">
                            <div class="form-line">
                                <input type="text" class="form-control" name="tagline"
                                    @if (isset($data)) value="{{ $data->tagline }}" @endif>
                            </div>
                        </div>
                        <b>Teks Pesan Promosi</b>
                        <div class="input-group">
                            <div class="form-line">
                                <input type="text" class="form-control" name="promotion_text"
                                    @if (isset($data)) value="{{ $data->promotion_text }}" @endif>
                            </div>
                        </div>
                        <b>Teks Tombol</b>
                        <div class="input-group">
                            <div class="form-line">
                                <input type="text" class="form-control" name="button_text"
                                    @if (isset($data)) value="{{ $data->button_text }}" @endif>
                            </div>
                        </div>
                        <b>Url Tombol</b>
                        <div class="input-group">
                            <div class="form-line">
                                <input type="text" class="form-control" name="button_link"
                                    @if (isset($data)) value="{{ $data->button_link }}" @endif>
                            </div>
                            <i>*URL dapat diisi dengan tag #section-(nomor), misalnya #section-4 untuk langsung menuju
                                bagian tertentu, seperti form.</i>
                        </div>

                        <b>Icon Tombol</b>
                        <div class="input-group">
                            <input class="m-r-20" name="button_icon" type="radio" id="icon_1"
                                value="headset"@if (isset($data)) @if ($data->button_icon == 'headset')checked @endif
                                @endif />
                            <label for="icon_1" style="font-size:25px;"><i class="bi bi-headset"></i></label>

                            <input class="m-r-20" name="button_icon" type="radio" id="icon_2" value="cart2"
                                @if (isset($data)) @if ($data->button_icon == 'cart2')checked @endif
                                @endif/>
                            <label for="icon_2" style="font-size:25px;"><i class="bi bi-cart2"></i></label>

                            <input class="m-r-20" name="button_icon" type="radio" id="icon_3"
                                value="whatsapp"@if (isset($data)) @if ($data->button_icon == 'whatsapp')checked @endif
                                @endif />
                            <label for="icon_3" style="font-size:25px;"><i class="bi bi-whatsapp"></i></label>

                            <input class="m-r-20" name="button_icon" type="radio" id="icon_4"
                                value="telephone"@if (isset($data)) @if ($data->button_icon == 'telephone')checked @endif
                                @endif />
                            <label for="icon_4" style="font-size:25px;"><i class="bi bi-telephone"></i></label>



                            <div class="input-group">
                                <b>Gambar</b>
                                <div class="form-line">
                                    <input type="file" accept="image/*,application/pdf" class="form-control" name="photo">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-success">Simpan</button>
                        </div>


                    </div>
                </div>


            </div>

        </div>
        <div class="">

            <div class="card">
                <div class="body ">
                    <div class="">

                        <h3>Section 2</h3>
                        <b>Deskripsi Tim</b>
                        <div class="input-group">
                            <div class="form-line">
                                <textarea class="form_control" name="team_description" style="width: 100%" rows="10">
@if (isset($data)) {{ $data->team_description }} @endif
</textarea>
                            </div>
                            <div>

                                <i>*text Deskripsi tentang tim yang membangun kepercayaan konsumen </i>
                            </div>
                            <a class="btn btn-info m-t-20" href="{{ route('galeri.index') }}">Atur Galeri</a>
                            <div>

                                <i>*atur galeri dengan kategori tim untuk dapat tampil di section team</i>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success">Simpan</button>
                    </div>


                </div>
            </div>





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

                        <h3>Pesan Umpan Balik</h3>
                        <b>Pesan Saat Mengisi form Konsultasi</b>
                        <div class="input-group">
                            <div class="form-line">
                                <textarea id="isi_pesan" style="width: 100%" class="form_control" name="message" cols="100" rows="10">
@if (isset($data)) {{ $data->message }} @endif
</textarea>
                            </div>
                            <i>*anda dapat memasukan text automatis agar pesan lebih dinamis</i>
                            <div class="row m-t-20">
                                <div class="col-md-3">
                                    <select name="autotext" id="autotext">
                                        <option selected> Auto Text</option>
                                        <option value="{ nama_pelanggan }">Nama Pelanggan</option>
                                        <option value="{ masalah }">Masalah Yang Dihadapi</option>
                                        <option value="{ no_wa }">Nomor WA</option>
                                        <option value="{ kota/kecamatan }">Kota / Kecamatan</option>
                                        <option value="{ merk }">Merk Hp</option>
                                        <option value="{ tipeHp }">tipe Hp</option>
                                        <option value="{ no_konsultasi }">No Konsultasi</option>
                                    </select>
                                    <button class="btn m-t-10 btn-warning " type="button"
                                        onclick="insertAutoText()">
                                        masukan
                                    </button>
                                </div>
                            </div>



                            <button type="submit" class="btn btn-success">Simpan</button>
                        </div>


                    </div>

                </div>
            </div>

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

                        <h3>Pengaturan Embed G-Map</h3>
                        <b>Masukan Koordinat</b>
                        <div class="input-group">
                            <div class="form-line">
                                <input type="text" class="form-control" name="maps"
                                    @if (isset($data)) value="{{ $data->maps }}" @endif>
                            </div>
                            <i>*Koordinat Google Maps dapat diperoleh dengan klik kanan pada lokasi yang ingin
                                ditandai
                                pada website google maps.</i>
                        </div>

                        <button type="submit" class="btn btn-success">Simpan</button>
                    </div>


                </div>

            </div>

        </div>
    </div>
    <div class="col-md-7 col-sm-12">
        <div class="">

            <div class="card" style="height: 100%;">
                <div class="header">
                    <h3>Preview</h3>
                </div>
                <div class="body" style="height: 100%;">
                    <iframe id="preview" src="{{ route('home') }}"
                        style="border: none; width: 100%; height: 100vh;"></iframe>
                </div>
            </div>
        </div>
    </div>


</div>
<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>


@push('scripts')
    <!-- Bootstrap Colorpicker Js -->
    <script src="{{ url('material') }}/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
    <script src="{{ url('material') }}/js/pages/forms/advanced-form-elements.js"></script>
@endpush