@push('styles')
    <link rel="stylesheet" href="{{ asset('material/plugins/pattern-lock/dist/patternlock.min.css') }}">
    <style>
        .dropdown-menu {
            padding-left: 20px !important;
        }

        .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')
    @include('service.script');
    <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>



    <!-- Input Mask Plugin Js -->
    <script src="https://unpkg.com/autonumeric"></script>
    <script>
        new AutoNumeric('#biaya', {
            currencySymbol: 'Rp ',
            decimalPlaces: 0,
            digitGroupSeparator: '.',
            decimalCharacter: ','
        });
        new AutoNumeric('#uang_bayar', {
            currencySymbol: 'Rp ',
            decimalPlaces: 0,
            digitGroupSeparator: '.',
            decimalCharacter: ','
        });
    </script>

    <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

@push('styles')
    <style>
        .dropdown-menu {
            padding-left: 20px !important;
        }

        .image-upload {
            width: 200px;
            height: 200px;
            background-color: gainsboro;
            display: block;
            margin: auto;
            background-size: contain;
        }

        .image-upload>input {
            display: none;
        }

        .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%;
        }

        #alert {
            display: none;
        }
    </style>
@endpush

{{-- svg pattern lock --}}

{{-- svg pattern lock --}}

<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('service.index') }}" class="btn btn-warning">Kembali</a>
            </div>
            <div class="body">

                <div class="row">
                    <div class="col-md-2">
                        <b>Invoice</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <input type="text" class="form-control" name="no_service"
                                    @if (isset($datas)) value="{{ $datas->no_service }}" @else value="{{ 'S-' . date('his') }}" @endif
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <b>Tanggal</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <input type="date" class="form-control"
                                    name="tanggal"@if (\Helper::hakAkses('service', 'edit_tanggal') == false) readonly @endif
                                    @if (isset($datas)) value="{{ $datas->tanggal }}"@else value="{{ date('Y-m-d') }}" @endif
                                    required>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <b>Teknisi</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <select name="teknisi_id" class="form-control">
                                    @foreach ($pengguna as $t)
                                        <option value="{{ $t->id }}" @if ($t->id == old('teknisi_id',@$datas->teknisi_id)) selected @endif
                                            > {{ $t->nama_pengguna }} </option>
                                    @endforeach
                                </select>
                                <!--                                 <input type="text" class="form-control" value="Teknisi 1"> -->
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Sales</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <select name="sale_id" class="form-control">

                                    @foreach ($pengguna as $p)
                                        <option value="{{ $p->id }}"
                                            @if (isset($datas)) @if ($datas->sale_id == $p->id) selected @endif
                                            @endif> {{ $p->nama_pengguna }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <b>Kasir</b>
                        <div class="input-group colorpicker colorpicker-element">
                            <div class="form-line focused">
                                <select name="pengguna_id" class="form-control">

                                    @foreach ($pengguna as $p)
                                        <option value="{{ $p->id }}"
                                            @if (isset($datas)) @if ($datas->pengguna_id == $p->id) selected @endif
                                            @endif> {{ $p->nama_pengguna }} </option>
                                    @endforeach
                                </select>
                            </div>
                            <span class="input-group-addon">
                                <i style="background-color: rgb(0, 170, 187);"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <b>Toko</b>
                        <div class="form-group">
                            <div class="form-line">
                                <select class="form-control"
                                    name="toko_id" required id="toko_id">
                                    @foreach ($tokos as $toko)
                                        <option value="{{ $toko->id }}"
                                            @if (isset($datas)) @if ($toko->id == @$datas->tokos->first()->id ?? 0) selected @endif
                                            @endif>{{ $toko->nama_toko }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- #END# Task Info -->
</div>

<div class="row">

    <div class="col-md-12">

        <div class="row clearfix">
            <div class="col-md-12">
                <div class="card">
                    <div class="header">
                        <h2>
                            Pelanggan
                        </h2>
                        <ul class="header-dropdown m-r--5">
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                    aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">add</i>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    <li><a href="javascript:void(0);" class=" waves-effect waves-block">Tambah Pelanggan</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="body">
                        <h2 class="card-inside-title">Pelanggan</h2>
                        <div class="row clearfix">
                            <div class="col-sm-12 col-md-12">

                                <div id="form_pelanggan">
                                    <div class="form-group">
                                        <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) }}">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <div class="form-line">
                                            <label for="kecamatan_pelanggan">Kecamatan Pelanggan</label>
                                            <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
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="alamat_pelanggan">Alamat Pelanggan</label>
                                            <input type="text" name="alamat" id="alamat_pelanggan" class="form-control"
                                                placeholder="Alamat" required value="{{ old('alamat',@$datas->pelanggan->alamat_pelanggan) }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="kontak">Kontak Pelanggan</label>
                                            <input type="text" name="kontak" id="kontak" class="form-control"
                                                placeholder="Kontak" required value="{{ old('kontak',@$datas->pelanggan->telp_pelanggan) }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


   
    </div>
    

</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                <h2>
                    Detail Gadget
                </h2>
            </div>
            <div class="body">
                <div class="row clearfix">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <div class="form-line">
                                <label for="Merk">Merk Handphone</label>
                                <select class="form-control" name="merk" id="merk">
                                    @foreach ($merk as $data)
                                        <option value="{{ $data->nama_merk }}"
                                            @if (isset($datas)) @if ($data->nama_merk == $datas->merk) selected @endif
                                            @endif>{{ $data->nama_merk }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">

                                <label for="imei1">Tipe</label>
                                <input type="text" name="tipe" class="form-control" value="{{ old('tipe',@$datas->tipe) }}"
                                    placeholder="Tipe" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">

                                <label for="imei1">IMEI 1</label>
                                <input type="text" id="imei1" name="imei1" class="form-control" value="{{ old('imei1',@$datas->imei1) }}"
                                    placeholder="IMEI 1">

                            </div>
                        </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" value="{{ old('imei2',@$datas->imei2) }}"
                                    placeholder="IMEI 2">

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

                                <label for="color">Warna Handphone</label>
                                <input type="text" name="color" id="color" class="form-control" value="{{ old('color',@$datas->color) }}"
                                    placeholder=" Masukan Warna Handphone"required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">
                                <label for="lama_pemakaian">Lama Pemakaian Handphone</label>
                                <input type="text" name="lama_pemakaian" id="lama_pemakaian"
                                    class="form-control" value="{{ old('lama_pemakaian',@$datas->lama_pemakaian) }}"
                                    placeholder=" Masukan Lama Pemakaian Handphone"required>
                            </div>
                        </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>

        </div>
    </div>
    <div class="col-md-12">
        <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>
</div>

<div class="row clearfix">
    <div class="col-md-12">
            <div class="card">
                <div class="header">
                    <h2>
                        Detail Service
                    </h2>
                </div>
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-sm-12 col-md-12">

                            <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">
                            <div class="form-line">
                                <h2 class="card-inside-title">Kerusakan</h2>
                                <!--                                     <input type="text" name="kerusakan" class="form-control" class="form-control" @if (isset($datas)) value="{{ $datas->kerusakan }}" @endif placeholder="Kerusakan" required> -->
                                @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 }}">{{ $list[1] }}</label>
                                @endforeach
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="form-line">
                                <label for="deskripsi">Deskripsi Kerusakan</label>
                                <input type="text" id="deskripsi" name="deskripsi" class="form-control"
                                    class="form-control" value="{{ old('deskripsi',@$datas->deskripsi) }}"
                                    placeholder="Kerusakan" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">
                                <label for="catatan_teknisi">Catatan Teknisi</label>
                                <input type="text" id="catatan_teknisi" name="catatan_teknisi" class="form-control"
                                    class="form-control" value="{{ old('catatan_teknisi',@$datas->catatan_teknisi) }}"
                                    placeholder="Catatan Teknisi (kosongkan jika tidak perlu)">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line" style="width: 250px">
                                <label for="lock">Pola </label>
                                <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>
                                <input type="hidden" name="pola" id="pola">
                            </div>


                        </div>
                        <div class="form-group">
                            <div class="form-line" style="width: 300px">
                                @if (isset($datas->pola))
                                    <label for="lama_pemakaian">Pola Pelanggan</label>
                                    {!! $datas->pola !!}
                                @endif
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">
                                <label for="lama_pemakaian">Pin Handpone</label>
                                <input type="text" name="pin" id="pin" class="form-control" value="{{ old('pin',@$datas->pin) }}"
                                    placeholder=" Masukan pin">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-line">
                                <label for="uang_bayar">DP(Uang Muka)</label>
                                @php
                                    if (isset($datas) && !isset($garansi)) {
                                        $uang_bayar = $datas->uang_bayar;
                                    } elseif (isset($garansi)) {
                                        $uang_bayar = 0;
                                    } else {
                                        $uang_bayar = 0;
                                    }
                                @endphp

                                <input type="text" id="uang_bayar" name="uang_bayar"
                                    class="form-control money-rupiah" id="uang_bayar" class="form-control" value="{{ old('uang_bayar',@$datas->uang_bayar) }}"
                                    placeholder="Uang Muka (DP)" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="form-line">
                                <label for="biaya">Biaya Service</label>
                                <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>
                        </div>
                        <h2 class="card-inside-title">Metode Pembayaran Dp</h2>
                        <div class="form-group">
                            <div class="form-line">
                                <select class="form-control" id="metode_bayar" name="metode_bayar"required>
                                    <option value="" selected disabled hidden>-pilih metode pembayaran-
                                    </option>
                                    <option
                                        @if (isset($datas)) @if ($datas->metode_bayar == 'cash') selected @endif
                                        @endif value="cash">Cash</option>
                                    <option
                                        @if (isset($datas)) @if ($datas->metode_bayar == 'transfer') selected @endif
                                        @endif value="transfer">Transfer</option>

                                </select>
                            </div>
                        </div>
                        <div class="row clearfix hide" id="bukti_transfer_row">
                            <div class="col-md-6">
                                <b>Bukti Transfer DP</b>
                                <div class="input-group">
                                    <div class="form-line">
                                        <input type="file" accept="image/*,application/pdf" id="bukti_transfer_dp" name="bukti_transfer_dp">
                                    </div>
                                    @if (isset($datas->bukti_transfer_dp))
                                        <a href="{{ asset('images/Bukti_transfer/' . $datas->bukti_transfer_dp) }}"
                                            target="_blank" class="btn btn-warning" style="margin-top:10px; ">
                                            Lihat Bukti Transfer</a>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-line">
                                <label for="grandTotal">Grand Total</label>
                                <p style="font-weight:bold;" id="grandTotal">0</p>
                                <input type="hidden" name="grand_total" id="input_grandTotal">

                                </select>
                            </div>
                        </div>


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

                        </div>
                    </div>



                </div>

            </div>
        </div>
    </div>
</div>



<div class="row clearfix">
<!-- Task Info -->
    {{-- table detail 1 --}}
    <div class="col-xs-12 col-sm-12 col-md-12">
    <div class="card">
        <div class="header">
            <h2>Data Sparepart</h2>
            <button type="button" id="table-sparepart-list" class="btn btn-primary" data-toggle="modal"
                data-target="#list-sparepart">Pilih Sparepart</button>
        </div>
        <div class="body">
            <div class="table-responsive">
                <table id="table-detail-sparepart" class="table table-hover ">
                    <thead>
                        <tr>
                            <th>Nama Sparepart</th>
                            <th>diskon</th>
                            <th>Jumlah</th>
                            <th>Harga Jual</th>
                            <th>Subtotal</th>
                            <th>Tools</th>
                        </tr>
                    </thead>

                    <tbody>

                        @if (isset($datas->detail))
                            @foreach ($datas->detail as $d)
                                <tr>
                                    <td>{{ $d->nama_item }}</td>
                                    <td>
                                        <input class="item-diskon" name="diskon_item[]"
                                            value="{{ $d->diskon }}" step="500" min="0"
                                            type="number">
                                    </td>
                                    <td>
                                        <input class="qty" name="jumlah[]" value="{{ $d->jumlah }}"
                                            min="0" max="{{ $d->stok + $d->jumlah }}" type="number">
                                        <input class="item_id" name="id[]" value="{{ $d->item_id }}"
                                            hidden>
                                        <input class="harga" name="harga[]" value="{{ $d->harga_item }}"
                                            hidden>
                                        <input class="biaya" name="biaya_item[]" value="{{ $d->biaya_item }}"
                                            hidden>
                                        <input name="nama_item[]" value="{{ $d->nama_item }}" hidden>
                                    </td>
                                    <td>{{ number_format($d->harga_item) }}</td>
                                    <td class="subTotal">
                                        {{ number_format($d->jumlah * ($d->harga_item - $d->diskon)) }}
                                    </td>
                                    <td><button class="btn btn-danger item-delete" type="button">X</button></td>
                                </tr>
                            @endforeach
                        @endif
                    </tbody>
                    <tfoot>
                        {{-- <tr>
                            <td colspan="3">
                                <div class="text-center">
                                </div>
                            </td>
                            <td>
                                <div class="text-right">
                                    <p style="font-weight:bold;">Grand Total : </p>
                                </div>
                            </td>
                            <td>
                                <div class="text-left">
                                    <p style="font-weight:bold;" id="grandTotal">0</p>
                                    <input type="hidden" name="grand_total" id="input_grandTotal">
                                </div>
                            </td>
                        </tr> --}}
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    {{-- table detail 1 --}}

    {{-- table detail 2 --}}
    <div class="card">
        <div class="header">
            <h2>Data Sparepart Luar</h2>
            <button type="button" id="table-sparepart-luar-list" class="btn btn-warning" data-toggle="modal"
                data-target="#list-sparepart-luar">Masukan Sparepart Luar</button>
        </div>
        <div class="body">
            <div class="table-responsive">
                <table id="table-detail-sparepart-luar" class="table table-hover ">
                    <thead>
                        <tr>
                            <th>Nama Sparepart</th>
                            <th>diskon</th>
                            <th>Jumlah</th>
                            <th>Harga Modal</th>
                            <th>Harga Jual</th>
                            <th>Subtotal</th>
                            <th>Tools</th>
                        </tr>
                    </thead>

                    <tbody>
                        @if (isset($sparepart_luar))
                            @foreach ($sparepart_luar as $sl)
                                <tr>
                                    <td><input type="text" id="nama_SL" name="nama_SL[] "
                                            value="{{ $sl->nama_SL }}" required>
                                    </td>
                                    <td><input type="number" id="diskon_SL" name="diskon_SL[]"
                                            value="{{ $sl->diskon_SL }}" required>
                                    </td>
                                    <td><input type="number" id="jumlah_SL" name="jumlah_SL[]"
                                            value="{{ $sl->jumlah_SL }}" required>
                                    </td>
                                    <td><input type="number" id="harga_modal_SL" name="harga_modal_SL[]"
                                            value="{{ $sl->harga_modal_SL }}" required>
                                    </td>
                                    <td><input type="number" id="harga_jual_SL" name="harga_jual_SL[]"
                                            value="{{ $sl->harga_jual_SL }}" required>
                                    </td>
                                    <td class="subTotal">
                                        {{ number_format($sl->jumlah_SL * ($sl->harga_jual_SL - $sl->diskon_SL)) }}
                                    </td>
                                    <td><button class="btn btn-danger item-delete" type="button">X</button></td>

                                </tr>
                            @endforeach
                        @endif


                    </tbody>
                    <tfoot>
                        {{-- <tr>
                            <td colspan="3">
                                <div class="text-center">
                                </div>
                            </td>
                            <td>
                                <div class="text-right">
                                    <p style="font-weight:bold;">Grand Total : </p>
                                </div>
                            </td>
                            <td>
                                <div class="text-left">
                                    <p style="font-weight:bold;" id="grandTotal">0</p>
                                    <input type="hidden" name="grand_total" id="input_grandTotal">
                                </div>
                            </td>
                        </tr> --}}
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    </div>
    {{-- table detail 2 --}}
<!-- #END# Task Info -->
</div>

<!-- Modal 1 -->
<div class="modal fade" id="list-sparepart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Pilih Sparepart</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">

        <div class="row flex-column-reverse">
            <div class="col-md-6"></div>
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <i class="material-icons">search</i>
                    </span>
                    <div class="form-line">
                        <input type="text" class="form-control " id="cari" name="cari"
                            placeholder="Search">
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <div id="alert" class="alert bg-green">
                <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
                Item Ditambahkan!
            </div>


            <table id="table-sparepart" class="table table-hover ">
                <thead>
                    <tr>
                        <th style="max-width: 100px!important;">Nama Sparepart</th>
                        <th>Harga Beli</th>
                        <th>Harga Jual</th>
                        <th>Stok</th>
                        <th>Jumlah</th>
                        <th>Tools</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                            <div class="text-center">
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
</div>
</div>
</div>
{{-- modal 1 --}}

<script></script>


<!-- Modal 2 -->
<div class="modal fade" id="list-sparepart-luar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Tambahkan Sparepart Luar</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="row clearfix">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="form-line">
                        <label for="nama_sl">Nama Sparepart</label>
                        <input type="text" id="nama_sl" name="nama_sl" class="form-control"
                            placeholder="masukan nama sparepart" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label for="diskon">Diskon</label>
                        <input type="number" id="diskon_sl" name="diskon" class="form-control"
                            placeholder="masukan diskon dengan rupiah" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label for="jumlah_sl">Jumlah</label>
                        <input type="number" id="jumlah_sl" name="jumlah_sl" class="form-control"
                            placeholder="masukan jumlah" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label for="harga_modal_sl">Harga Modal </label>
                        <input type="number" id="harga_modal_sl" name="harga_modal_sl" class="form-control"
                            placeholder="masukan harga persatuan" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-line">
                        <label for="harga_jual_sl">Harga Jual </label>
                        <input type="number" id="harga_jual_sl" name="harga_jual_sl" class="form-control"
                            placeholder="masukan harga persatuan" />
                    </div>
                </div>
                <button type="button" id="simpan_sl" onclick="return kirim()"
                    class="btn btn-primary">Simpan</button>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
</div>
</div>
</div>
{{-- modal 2 --}}



@push('scripts')
<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>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var metode_bayar = document.getElementById('metode_bayar');
        var buktiTransferRow = document.getElementById('bukti_transfer_row');
        if (metode_bayar.value === 'transfer') {
            buktiTransferRow.classList.add('show');
            buktiTransferRow.classList.remove('hide');
        };

    });
    document.getElementById('metode_bayar').addEventListener('change', function() {
        var buktiTransferRow = document.getElementById('bukti_transfer_row');
        if (this.value === 'transfer') {
            buktiTransferRow.classList.add('show');
            buktiTransferRow.classList.remove('hide');
        } else {
            buktiTransferRow.classList.add('hide');
            buktiTransferRow.classList.remove('show');
        }
    });
</script>
@endpush