@extends('layouts.app', ['title' => 'Form Service'])
@push('styles')
    <link rel="stylesheet" href="{{ asset('material/plugins/pattern-lock/dist/patternlock.min.css') }}">

    <style>
        .custom-radio-checkbox {
            display: block;
            position: relative;
            padding-left: 26px;
            /* Ruang untuk checkbox kustom */
            margin-bottom: 1rem;
            cursor: pointer;
            font-size: 13px;
            font-weight: normal;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Sembunyikan radio button asli dari browser */
        .custom-radio-checkbox input[type="radio"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Kotak checkbox palsu (lebih sederhana) */
        .checkmark {
            position: absolute;
            top: 1px;
            /* Penyesuaian posisi vertikal */
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #fff;
            border: 2px solid #6c757d;
            /* Border abu-abu gelap */
            border-radius: 3px;
            /* Sedikit melengkung agar tidak terlalu kaku */
            transition: all 0.2s ease;
        }

        .custom-radio-checkbox:hover .checkmark {
            border-color: #000;
            /* Border menjadi hitam saat hover */
        }

        /* Saat radio button dicentang, ubah background menjadi hitam */
        .custom-radio-checkbox input[type="radio"]:checked~.checkmark {
            background-color: #000000;
            /* Warna hitam saat aktif */
            border-color: #000000;
        }

        /* Buat tanda centang (tersembunyi secara default) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Tampilkan tanda centang saat radio button dicentang */
        .custom-radio-checkbox input[type="radio"]:checked~.checkmark:after {
            display: block;
        }

        /* Atur gaya tanda centang menjadi putih */
        .custom-radio-checkbox .checkmark:after {
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        /* --- STYLING UNTUK LAYOUT INLINE --- */
        .radio-group-inline {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            /* Jarak antar item */
            justify-content: flex-start;
        }

        .radio-group-inline .custom-radio-checkbox {
            margin-bottom: 0;
        }
    </style>
@endpush
@push('scripts')
    <script>
        function validateForm() {
            var checkbox = document.getElementById("setuju");

            if (!checkbox.checked) {
                alert("Harap setujui syarat dan ketentuan.");
                return false; // Prevent form submission
            }

            // Proceed with form submission if the checkbox is checked
            return true;
        }
    </script>
    <!-- pattern-lock Js -->
    <script src="{{ asset('material/plugins/pattern-lock/dist/patternlock.js') }}" charset="utf-8"></script>
    <script>
        var lock = new PatternLock("#lock", {
            onPattern: function(pattern) {

                var svg = document.querySelector("#lock ");
                if (svg) {
                    var svgString = new XMLSerializer().serializeToString(svg);
                    $('#pola').val(svgString);
                }
            }
        });
    </script>
    <!-- pattern-lock Js -->

    <script>
        $(document).ready(function() {
            $(document).on('keyup', '.bs-searchbox input', function(e) {
                var searchData = e.target.value;


                $.ajax({
                    type: 'GET',
                    url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
                    success: function(data) {
                        // $('.kecamatan-wrapper select #kecamatan_pelanggan').empty();
                        var uniqueKecamatan = [];
                        var uniqueKabkota = [];
                        var uniqueProvinsi = [];

                        for (var i = 0; i < data.result.length; i++) {
                            var kecamatan = data.result[i].kecamatan;
                            var kabkota = data.result[i].kabkota;
                            var provinsi = data.result[i].provinsi;


                            if (uniqueKecamatan.indexOf(kecamatan) === -1) {
                                uniqueKecamatan.push(kecamatan);
                                uniqueProvinsi.push(provinsi);
                                uniqueKabkota.push(kabkota);

                            }
                        }

                        $('#kecamatan_pelanggan').empty();
                        for (var j = 0; j < uniqueKecamatan.length; j++) {
                            $('#kecamatan_pelanggan').append('<option value="' +
                                uniqueKecamatan[
                                    j] + '">' + uniqueProvinsi[j] + ' , ' + uniqueKabkota[
                                    j] + ' , ' + uniqueKecamatan[j] + '</option>');
                        }

                        $('#kecamatan_pelanggan').selectpicker('refresh');


                    },
                    error: function(error) {

                        console.log(error);
                    }
                });
            });

        });
    </script>
@endpush
@section('content')
    <div class="container-fluid">
        <form action="{{ route('service.guest.store') }}" method="POST">
            @csrf
            <div class="card">
                <div class="header">
                    <h1 class="h3 mb-3 font-weight-normal"style="color:#9e35af;font-weight:bolder;font-size:3.5em">
                        Service Pelanggan</h1>
                    <a href="/" class="btn btn-warning">Kembali</a>
                </div>
                <div class="body">
                    <div class="form-group" style="display:none;">
                        <div class="form-line">
                            <label for="toko_id">Toko</label>
                            <select class="form-control" name="toko_id" required id="toko_id">
                                @foreach ($tokos as $toko)
                                    <option value="{{ $toko->id }}" @if (isset($datas) && $toko->id == @$datas->tokos->first()->id ?? 0) selected @endif>
                                        {{ $toko->nama_toko }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="header">
                    <h2 class="card-inside-title">Detail Pelanggan</h2>
                </div>

                <div class="body">

                    <div class="form-group">
                        <label for="nama_pelanggan">Nama Pelanggan</label>
                        <div class="form-line">

                            <input type="text" name="nama" id="nama_pelanggan" class="form-control" placeholder="Nama"
                                required
                                value="{{ old('nama', @$datas->pelanggan->nama_pelanggan ?? @$data_konsultasi->nama_pelanggan) }}">

                        </div>
                        @error('nama')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="kontak">Kontak Pelanggan</label>
                        <div class="form-line">

                            <input type="text" name="kontak" id="kontak" class="form-control" placeholder="Kontak"
                                required
                                value="{{ old('kontak', @$datas->pelanggan->telp_pelanggan ?? @$data_konsultasi->telp_pelanggan) }}">
                        </div>
                        @error('kontak')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group ">
                        <label for="kecamatan_pelanggan">Kecamatan Pelanggan</label>
                        <div class="form-line">

                            <select class="form-control" id="kecamatan_pelanggan" name="kecamatan_pelanggan"
                                class="selectpicker" data-live-search="true" required>
                                <option value="">Masukan Kecamatan</option>
                                @if (isset($datas))
                                    <option value="{{ $datas->pelanggan->kecamatan_pelanggan }}"selected>
                                        {{ $datas->pelanggan->kecamatan_pelanggan }}</option>
                                @endif
                                @if (isset($data_konsultasi))
                                    @php
                                        $parts = explode('/', $data_konsultasi->kota_kecamatan_pelanggan);
                                        $kecamatan = isset($parts[1]) ? trim($parts[1]) : null;
                                    @endphp
                                    <option value="{{ $kecamatan }}"selected>
                                        {{ $kecamatan }}</option>
                                @endif

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

                    <div class="form-group">
                        <label for="alamat_pelanggan">Alamat Pelanggan</label>
                        <div class="form-line">

                            <input type="text" name="alamat" id="alamat_pelanggan" class="form-control"
                                placeholder="Alamat" required
                                value="{{ old('alamat', @$datas->pelanggan->alamat_pelanggan ?? @$data_konsultasi->alamat_pelanggan) }}">
                        </div>
                        @error('alamat')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                </div>
            </div>
            <div class="card">
                <div class="header">
                    <h2 class="card-inside-title">Detail Gadget</h2>
                </div>

                <div class="body">

                    <div class="form-group ">
                        <label for="merk">Merk Handphone</label>
                        <div class="form-line">

                            <select class="form-control" name="merk" id="merk">
                                @foreach ($merk as $data)
                                    <option value="{{ $data->nama_merk }}"
                                        @if ($data->nama_merk === old('alamat', @$data_konsultasi['merk'])) selected @endif>
                                        {{ $data->nama_merk }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @error('merk')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group ">
                        <label for="tipe">TIPE</label>
                        <div class="form-line">

                            <input type="text" id="tipe" name="tipe" class="form-control" placeholder="Tipe"
                                required value="{{ old('tipe', @$data_konsultasi->tipe_hp) }}">
                        </div>
                        @error('tipe')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group ">
                        <label for="imei1">IMEI 1</label>
                        <div class="form-line">

                            <input type="text" id="imei1" name="imei1" class="form-control" placeholder="IMEI 1"
                                value="{{ old('imei1', @$data_konsultasi->imei1) }}"
                                onKeyPress="if(this.value.length==15) return false;">
                        </div>
                        @error('imei1')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group ">
                        <div class="form-line">
                            <label for="imei2">IMEI 2</label>
                            <input type="text" id="imei2" name="imei2" class="form-control"
                                placeholder="IMEI 2" value="{{ old('imei2', @$data_konsultasi->imei2) }}"
                                onKeyPress="if(this.value.length==15) return false;">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="color">Warna HandPhone</label>
                        <div class="form-line">

                            <input type="text" name="color" id="color" class="form-control" autocomplete="off"
                                required value="{{ old('color', @$data_konsultasi->color) }}"
                                placeholder="Warna HandPhone">
                        </div>
                        @error('color')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group ">
                        <label for="lama_pemakaian">Lama Pemakaian Handphone</label>
                        <div class="form-line">

                            <input type="text" name="lama_pemakaian" id="lama_pemakaian"
                                value="{{ old('lama_pemakaian', @$data_konsultasi->lama_pemakaian) }}"
                                class="form-control" placeholder="  Lama Pemakaian">
                        </div>
                        @error('lama_pemakaian')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group ">
                        <label>Apakah Handphone Pernah diservis
                            sebelumnya?</label>

                        <div class="radio-group-inline">
                            <label class="custom-radio-checkbox">
                                Pernah
                                <input type="radio" required name="riwayat_servis" value="Pernah"
                                    @if (old('riwayat_servis', @$datas->riwayat_servis) == 'Pernah') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="custom-radio-checkbox">
                                Tidak Pernah
                                <input type="radio" required name="riwayat_servis" value="Tidak Pernah"
                                    @if (old('riwayat_servis', @$datas->riwayat_servis) == 'Tidak Pernah') checked @endif>
                                <span class="checkmark"></span>
                            </label>

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

                    </div>

                </div>
            </div>

            <div class="card">
                <div class="header">
                    <h2 class="card-inside-title">Kondisi fisik Gadget</h2>
                </div>

                <div class="body">
                    <div class="form-group">
                        <label>Kelengkapan Unit</label>

                        <div class="radio-group-inline">
                            <label class="custom-radio-checkbox">
                                Lengkap
                                <input type="radio" required name="kelengkapan_unit" value="Lengkap"
                                    @if (old('kelengkapan_unit', @$datas->kelengkapan_unit) == 'Lengkap') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="custom-radio-checkbox">
                                Tidak
                                <input type="radio" required name="kelengkapan_unit" value="Tidak"
                                    @if (old('kelengkapan_unit', @$datas->kelengkapan_unit) == 'Tidak') checked @endif>
                                <span class="checkmark"></span>
                            </label>

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

                    </div>
                    <div class="form-group">
                        <label>Kelengkapan Tambahan</label>

                        <div class="form-line">

                            @foreach ($list_kelengkapan as $key => $list)
                                <input type="checkbox" id="md_checkbox_kelengkapan_{{ $key }}"
                                    class="filled-in" name="kelengkapan[]" value="{{ $list[0] }}"
                                    @if (isset($datas) && in_array($list[0], $kelengkapan)) checked @endif />
                                <label for="md_checkbox_kelengkapan_{{ $key }}"
                                    style="margin-right:10px;">{{ $list[1] }}</label>
                            @endforeach

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

                    <div class="form-group">
                        <label>Fungsi Tombol</label>

                        <div class="radio-group-inline">
                            <label class="custom-radio-checkbox">
                                Baik
                                <input type="radio" required name="fungsi_tombol" value="Baik"
                                    @if (old('fungsi_tombol', @$datas->fungsi_tombol) == 'Baik') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="custom-radio-checkbox">
                                Rusak
                                <input type="radio" required name="fungsi_tombol" value="Rusak"
                                    @if (old('fungsi_tombol', @$datas->fungsi_tombol) == 'Rusak') checked @endif>
                                <span class="checkmark"></span>
                            </label>

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

                    </div>

                    <div class="form-group">
                        <label>Arus Charger</label>

                        <div class="radio-group-inline">
                            <label class="custom-radio-checkbox">
                                Ada
                                <input type="radio" required name="arus_charger" value="Ada"
                                    @if (old('arus_charger', @$datas->arus_charger) == 'Ada') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="custom-radio-checkbox">
                                Tidak Ada
                                <input type="radio" required name="arus_charger" value="Tidak Ada"
                                    @if (old('arus_charger', @$datas->arus_charger) == 'Tidak Ada') checked @endif>
                                <span class="checkmark"></span>
                            </label>

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

                    </div>

                    <div class="form-group">
                        <label>Kondisi Layar</label>

                        <div class="radio-group-inline">
                            <label class="custom-radio-checkbox">
                                Tampil
                                <input type="radio" required name="kondisi_layar" value="Tampil"
                                    @if (old('kondisi_layar', @$datas->kondisi_layar) == 'Tampil') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="custom-radio-checkbox">
                                Tidak Tampil
                                <input type="radio" required name="kondisi_layar" value="Tidak Tampil"
                                    @if (old('kondisi_layar', @$datas->kondisi_layar) == 'Tidak Tampil') checked @endif>
                                <span class="checkmark"></span>
                            </label>

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

                    </div>

                </div>
            </div>

            <div class="card">
                <div class="header">
                    <h2 class="card-inside-title">Detail Service</h2>
                </div>

                <div class="body">

                    <div class="form-group">
                        <label>Untuk Klaim Garansi</label>

                        <div class="radio-group-inline">
                            <label class="custom-radio-checkbox">
                                Ya
                                <input type="radio" required name="garansi" value="1"
                                    @if (old('garansi', @$datas->garansi) == '1') checked @endif>
                                <span class="checkmark"></span>
                            </label>
                            <label class="custom-radio-checkbox">
                                Tidak
                                <input type="radio" required name="garansi" value="0"
                                    @if (old('garansi', @$datas->garansi) == '0' && old('garansi', @$datas->garansi) != '') checked @endif>
                                <span class="checkmark"></span>
                            </label>

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

                    </div>

                    <div class="form-group">
                        <label>Kerusakan</label>
                        <div class="form-line">

                            @foreach ($list_kerusakan as $key => $list)
                                <input type="checkbox" id="md_checkbox_{{ $key }}"
                                    class="filled-in chk-col-red" name="kerusakan[]" value="{{ $list[0] }}"
                                    @if (isset($datas)) @if (in_array($list[0], $kerusakan)) checked @endif
                                    @endif />
                                <label for="md_checkbox_{{ $key }}"
                                    style="margin-right:10px;">{{ $list[1] }}</label>
                            @endforeach

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

                    <div class="form-group">
                        <label for="deskripsi">Deskripsi Kerusakan</label>
                        <div class="form-line">

                            <input type="text" name="deskripsi" class="form-control" class="form-control"
                                placeholder="Deskripsi" value="{{ old('deskripsi', @$data_konsultasi->keluhan) }}"
                                required />
                        </div>
                        @error('deskripsi')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="lock">Pola </label>
                        <div class="form-line" style="width: 300px">

                            @if (old('pola') != '')
                                {!! old('pola') !!}
                            @else
                                <svg class="patternlock" id="lock" viewBox="0 0 100 100"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g class="lock-actives"></g>
                                    <g class="lock-lines"></g>
                                    <g class="lock-dots">
                                        <circle cx="20" cy="20" r="2" />
                                        <circle cx="50" cy="20" r="2" />
                                        <circle cx="80" cy="20" r="2" />

                                        <circle cx="20" cy="50" r="2" />
                                        <circle cx="50" cy="50" r="2" />
                                        <circle cx="80" cy="50" r="2" />

                                        <circle cx="20" cy="80" r="2" />
                                        <circle cx="50" cy="80" r="2" />
                                        <circle cx="80" cy="80" r="2" />
                                    </g>
                                </svg>
                            @endif
                            <input type="hidden" name="pola" id="pola">
                        </div>
                        @error('pola')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                    </div>
                    <div class="form-group">
                        <label for="lama_pemakaian">Pin Handpone</label>
                        <div class="form-line">

                            <input type="text" name="pin" id="pin" class="form-control"
                                value="{{ old('pin', @$datas->pin) }}" placeholder=" Masukan pin">
                        </div>
                    </div>
                    @error('pin')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                    <div class="form-group">
                        <label for="biaya">Biaya Service</label>
                        <div class="form-line">

                            <input type="text" id="biaya" name="biaya" class="form-control money-rupiah"
                                id="biaya" class="form-control" value="{{ old('biaya', @$datas->biaya) }}"
                                placeholder="Biaya Service" required>
                        </div>
                        @error('biaya')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <div class="form-line">
                            <label for="referral_code">Kode Ajak Teman </label>
                            <input type="text" id="referral_code" name="referral_code" class="form-control"
                                placeholder="Kode Ajak Teman...">
                        </div>
                    </div>
                    <div class="form-group my-5">
                        <button type="submit" class="btn btn-success"
                            style="width:100%;background:#9e35af;border:none;">Lanjutkan</button>
                    </div>
                </div>
            </div>


        </form>
    </div>
@endsection