@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')

<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" >
                <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="Ada" @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 my-5">
                <button type="submit" class="btn btn-success"
                    style="width:100%;background:#9e35af;border:none;">Lanjutkan</button>
            </div>
        </div>
    </div>
  

</form>



        
@endsection